Flippable Card

ISLE komponents, kas ļauj atveidot divas divas puses.

Iespējas

• button | string: pogas etiķete. Default: none.
• draggable | boolean: kontrolē, vai karti var vilkt. Default: false.
• flipSpeedBackToFront | number: ātrums sekundēs, ar kādu karte no fona pāriet uz jauno fonu.. Default: 1.
• flipSpeedFrontToBack | number: ātrums sekundēs, ar kādu karte pāriet no priekšplāna uz fonu.. Default: 1.
• oneTime | boolean: norāda, vai apgriešanas procesu var izpildīt tikai vienu reizi.. Default: false.
• perspective | number: CSS īpašību vērtība, lai piešķirtu 3D pozicionētam elementam perspektīvu. Default: 1000.
• size | number: kartes izmērs (nosaka tās platumu un augstumu).. Default: 250.
• disabled | boolean: kontrolē, vai pārliekamā karte ir atspējota.. Default: false.
• value | boolean: kartes flip stāvoklis (kontrolējamam komponentam). Default: none.
• defaultValue | boolean: kartes sākotnējais apgriešanas stāvoklis. Default: false.
• containerStyle | object: konteinera CSS stils. Default: {}.
• frontStyle | object: Priekšējās kartes CSS stils. Default: {}.
• backStyle | object: CSS stils aizmugures kartē. Default: {}.
• onChange | function: atgriezeniskais zvans, kas tiek izsaukts, tiklīdz karte ir apgriezta; kā vienīgo argumentu saņem pašreizējo apgrieztās kartes statusu.. Default: onChange() {}.

Piemēri

• Minimal
• With CSS
• Slow Motion

Tiešraides redaktors

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

Rezultāts

ReferenceError: Provider is not defined