Framework7 - Touch Ripple

Descrição

Touch Ripple é um efeito compatível apenas com o tema material Framework7. Por padrão, ele está habilitado no tema material e você pode desabilitá-lo usando o parâmetro materialRipple: false .

Elementos ondulantes

Você pode ativar os elementos de ondulação para corresponder a alguns seletores CSS, como -

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

Eles são especificados no parâmetro materialRippleElements . Você precisa habilitar a ondulação de toque , adicionar o seletor do elemento ao parâmetro materialRippleElements para usar o efeito de ondulação ou apenas usar a classe de ondulação .

Cor da onda ondulada

A cor do ripple pode ser alterada no elemento adicionando a classe ripple- [color] ao elemento.

Por exemplo -

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

ou você pode definir a cor da onda ondulada usando o CSS como mostrado abaixo -

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

Desativar elementos ondulação

Você pode desativar o ripple para alguns elementos especificados adicionando a classe no-ripple a esses elementos. Por exemplo -

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