Framework7 - Ondulation tactile

La description

Touch Ripple est un effet pris en charge uniquement dans le thème matériel Framework7. Par défaut, il est activé dans le thème des matériaux et vous pouvez le désactiver à l'aide du paramètre materialRipple: false .

Éléments d'ondulation

Vous pouvez activer les éléments d'ondulation pour qu'ils correspondent à certains sélecteurs CSS tels que -

  • ripple
  • a.link
  • a.item-link
  • .button
  • .tab-link
  • .label-radio
  • .label-case à cocher etc.

Ceux-ci sont spécifiés dans le paramètre materialRippleElements . Vous devez activer l' ondulation tactile , ajouter le sélecteur de l'élément au paramètre materialRippleElements pour utiliser l'effet d'entraînement, ou simplement utiliser la classe d' ondulation .

Couleur de l'onde ondulée

La couleur de l'ondulation peut être modifiée sur l'élément en ajoutant la classe ripple- [color] à l'élément.

Par exemple -

<a href = "#" class = "button ripple-orange">Ripple Button</a>

ou vous pouvez définir la couleur de l'onde d'ondulation en utilisant le CSS comme indiqué ci-dessous -

.button .ripple-wave {
   background-color: #FFFF00;
}

Désactiver les éléments d'ondulation

Vous pouvez désactiver l'ondulation pour certains éléments spécifiés en ajoutant la classe no-ripple à ces éléments. Par exemple -

<a href = "#" class = "button no-ripple">Ripple Button</a>