Flippable Card

Komponenta ISLE, která umožňuje vykreslit dvě strany.

Možnosti

• button | string: štítek tlačítka. Default: none.
• draggable | boolean: určuje, zda lze kartu přetáhnout.. Default: false.
• flipSpeedBackToFront | number: rychlost přechodu z pozadí do popředí v sekundách.. Default: 1.
• flipSpeedFrontToBack | number: rychlost přechodu z popředí na pozadí v sekundách.. Default: 1.
• oneTime | boolean: označuje, zda může být proces převrácení proveden pouze jednou.. Default: false.
• perspective | number: Hodnota vlastnosti CSS, která dává prvku umístěnému ve 3D perspektivu. Default: 1000.
• size | number: velikost karty (nastaví její šířku a výšku).. Default: 250.
• disabled | boolean: určuje, zda je karta s možností převrácení vypnutá.. Default: false.
• value | boolean: stav překlopení karty (pro řízenou komponentu). Default: none.
• defaultValue | boolean: počáteční stav překlopení karty. Default: false.
• containerStyle | object: CSS styl kontejneru. Default: {}.
• frontStyle | object: CSS styl přední karty. Default: {}.
• backStyle | object: CSS styl zadní karty. Default: {}.
• onChange | function: zpětné volání vyvolané po otočení karty; jako jediný argument obdrží aktuální stav otočení.. Default: onChange() {}.

Příklady

• Minimal
• With CSS
• Slow Motion

Živý 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>

Výsledek

ReferenceError: Provider is not defined