Flippable Card

ISLE komponentas, leidžiantis atvaizduoti dvi puses.

Parinktys

• button | string: mygtuko etiketė. Default: none.
• draggable | boolean: kontroliuoja, ar kortelę galima vilkti.. Default: false.
• flipSpeedBackToFront | number: greitis, kuriuo kortelė iš fono pereina į pirmą planą, sekundėmis.. Default: 1.
• flipSpeedFrontToBack | number: greitis, per kurį kortelė iš pirmo plano pereina į foną, sekundėmis.. Default: 1.
• oneTime | boolean: nurodo, ar apvertimo procesas gali būti vykdomas tik vieną kartą.. Default: false.
• perspective | number: CSS savybės reikšmė, suteikianti 3D pozicionuojamam elementui perspektyvą. Default: 1000.
• size | number: kortelės dydis (nustato jos platumą ir aukštį).. Default: 250.
• disabled | boolean: kontroliuoja, ar atverčiama kortelė yra išjungta.. Default: false.
• value | boolean: kortelės apvertimo būsena (valdomam komponentui). Default: none.
• defaultValue | boolean: pradinė kortelės apvertimo būsena. Default: false.
• containerStyle | object: Konteinerio CSS stilius. Default: {}.
• frontStyle | object: Priekinės kortelės CSS stilius. Default: {}.
• backStyle | object: Galinės kortelės CSS stilius. Default: {}.
• onChange | function: atgalinis skambutis, inicijuojamas, kai kortelė apverčiama; vienintelis argumentas - dabartinė apverstos kortelės būsena.. Default: onChange() {}.

Pavyzdžiai

• Minimal
• With CSS
• Slow Motion

Tiesioginis redaktorius

<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>

Rezultatas

ReferenceError: Provider is not defined