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

• Minimal
• With CSS
• Slow Motion

Live Editor

<FlippableCard containerStyle={{ float: 'none' }} size={200}> <img src="https://bit.ly/2YU5EbU" /> <img src="https://bit.ly/3aGv9mp" /> </FlippableCard>

<FlippableCard containerStyle={{ float: 'none' }} size={200}>
  <img src="https://bit.ly/2YU5EbU" />
  <img src="https://bit.ly/3aGv9mp" />
</FlippableCard>

Result

ReferenceError: Provider is not defined