Ir al contenido principal

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

Editor en vivo
Resultado
ReferenceError: Provider is not defined