Skip to main content

Flippable Card

An ISLE component that allows two render two-sides.

Options#

  • button | string: button label. Default: none.
  • draggable | boolean: controls whether the card may be dragged around. Default: false.
  • flipSpeedBackToFront | number: the speed by which the card turns from background to foreground, in seconds. Default: 1.
  • flipSpeedFrontToBack | number: the speed by which the card turns from foreground to background, in seconds. Default: 1.
  • oneTime | boolean: indicates whether the flip process may be executed just once. Default: false.
  • perspective | number: CSS property value to give 3d-positioned element a perspective. Default: 1000.
  • size | number: size of the card (sets its width and height). Default: 250.
  • disabled | boolean: controls whether the flippable card is disabled. Default: false.
  • value | boolean: flip state of the card (for controlled component). Default: none.
  • defaultValue | boolean: initial flip state of the card. Default: false.
  • containerStyle | object: CSS style of the container. Default: {}.
  • frontStyle | object: CSS style of the front card. Default: {}.
  • backStyle | object: CSS style of the back card. Default: {}.
  • onChange | function: callback invoked once the card is flipped; receives the current flipped status as its sole argument. Default: onChange() {}.

Examples#

Live Editor
Result
ReferenceError: Provider is not defined