Framework7 - Berühren Sie Ripple

Beschreibung

Touch Ripple ist ein Effekt, der nur im Framework7-Materialthema unterstützt wird. Standardmäßig ist es im Materialthema aktiviert und Sie können es mithilfe des Parameters materialRipple: false deaktivieren .

Welligkeitselemente

Sie können die Ripple-Elemente so aktivieren, dass sie mit einigen CSS-Selektoren übereinstimmen, z.

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

Diese werden im Parameter materialRippleElements angegeben. Sie müssen die Berührungswelligkeit aktivieren , den Selektor des Elements zum Parameter materialRippleElements hinzufügen , um den Welligkeitseffekt zu nutzen, oder einfach die Welligkeitsklasse verwenden .

Welligkeitsfarbe

Die Farbe der Welligkeit kann am Element geändert werden, indem dem Element die Welligkeitsklasse [Farbe] hinzugefügt wird .

Zum Beispiel -

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

oder Sie können die Welligkeitswellenfarbe mithilfe des unten gezeigten CSS definieren -

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

Deaktivieren Sie die Welligkeitselemente

Sie können die Welligkeit für einige angegebene Elemente deaktivieren, indem Sie diesen Elementen die No-Ripple- Klasse hinzufügen . Zum Beispiel -

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