Framework7 - Tocca Ripple

Descrizione

Touch Ripple è un effetto supportato solo nel tema materiale di Framework7. Per impostazione predefinita, è abilitato nel tema del materiale ed è possibile disabilitarlo utilizzando il parametro materialRipple: false .

Elementi di ondulazione

Puoi abilitare gli elementi a catena in modo che corrispondano ad alcuni selettori CSS come:

  • ripple
  • a.link
  • a.item-link
  • .button
  • .tab-link
  • .label-radio
  • .label-checkbox ecc.

Questi sono specificati nel parametro materialRippleElements . È necessario abilitare il tocco ripple, aggiungere il selettore dell'elemento al parametro materialRippleElements per utilizzare l'effetto a catena, o semplicemente usare la classe ripple .

Ripple Wave Color

Il colore del ripple può essere modificato sull'elemento aggiungendo la classe ripple- [color] all'elemento.

Ad esempio:

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

oppure puoi definire il colore dell'onda di increspatura utilizzando il CSS come mostrato di seguito -

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

Disabilita gli elementi increspati

È possibile disabilitare l'ondulazione per alcuni elementi specificati aggiungendo la classe no-ripple a quegli elementi. Ad esempio:

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