Flippable Card

Un componente de la ISLE que permite que dos rendericen dos caras.

Opciones

• button | string: etiqueta del botón. Default: none.
• draggable | boolean: controla si la tarjeta puede ser arrastrada. Default: false.
• flipSpeedBackToFront | number: la velocidad con la que la tarjeta pasa de fondo a primer plano, en segundos. Default: 1.
• flipSpeedFrontToBack | number: La velocidad con la que la tarjeta pasa del primer plano al fondo, en segundos. Default: 1.
• oneTime | boolean: indica si el proceso de volteo puede ser ejecutado sólo una vez. Default: false.
• perspective | number: Valor de la propiedad CSS para dar una perspectiva al elemento posicionado en 3D. Default: 1000.
• size | number: tamaño de la tarjeta (establece su "width" y "height"). Default: 250.
• disabled | boolean: Controla si la tarjeta desplegable está desactivada. Default: false.
• value | boolean: estado de giro de la tarjeta (para el componente controlado). Default: none.
• defaultValue | boolean: estado inicial de giro de la tarjeta. Default: false.
• containerStyle | object: Estilo CSS del contenedor. Default: {}.
• frontStyle | object: Estilo CSS de la tarjeta frontal. Default: {}.
• backStyle | object: Estilo CSS de la tarjeta trasera. Default: {}.
• onChange | function: llamada de retorno invocada una vez que la tarjeta es volteada; recibe el estado actual volteado como su único argumento. Default: onChange() {}.

Ejemplos

• Minimal
• With CSS
• Slow Motion

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