Flippable Card

Um componente ISLE que permite dois renderizados de dois lados.

Opções

• button | string: etiqueta do botão. Default: none.
• draggable | boolean: controla se o cartão pode ser arrastado. Default: false.
• flipSpeedBackToFront | number: a velocidade com que o cartão passa do fundo para o primeiro plano, em segundos. Default: 1.
• flipSpeedFrontToBack | number: {número} a velocidade com que o cartão passa do primeiro plano para o segundo plano, em segundos. Default: 1.
• oneTime | boolean: indica se o processo de inversão pode ser executado apenas uma vez. Default: false.
• perspective | number: Valor de propriedade do CSS para dar uma perspectiva ao elemento posicionado em 3d. Default: 1000.
• size | number: tamanho do cartão (define sua "width" e "height"). Default: 250.
• disabled | boolean: controla se o cartão virável está desativado. Default: false.
• value | boolean: estado de virada do cartão (para componente controlado). Default: none.
• defaultValue | boolean: estado inicial de viragem do cartão. Default: false.
• containerStyle | object: Estilo CSS do recipiente. Default: {}.
• frontStyle | object: Estilo CSS da placa frontal. Default: {}.
• backStyle | object: Estilo CSS do cartão traseiro. Default: {}.
• onChange | function: chamada de retorno invocada uma vez que o cartão é virado; recebe o status atual virado como seu único argumento. Default: onChange() {}.

Exemplos

• Minimal
• With CSS
• Slow Motion

Editor ao vivo

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

Resultado

ReferenceError: Provider is not defined