near_me
Démarrage
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Composants
keyboard_arrow_downlocal_mall
Ressources
keyboard_arrow_downmdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.
Effet ripple
L’ajout d’un effet ripple fait apparaître une onde qui se propage vers l’extérieur lors d’un clic sur un élément.
Utilisation
Il suffit d’ajouter la classe .mdui-ripple pour l’activer.
Méthode d’utilisation
Ajouter un effet ripple
Il suffit d’ajouter la classe .mdui-ripple à un élément pour obtenir un effet ripple au clic.
Exemple
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Si vous souhaitez utiliser l’effet ripple sur des balises comme img, input, etc., qui ne peuvent pas contenir d’éléments enfants, ajoutez la classe .mdui-ripple à leur élément parent.
Exemple
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Spécifier la couleur de l’effet ripple
L’effet ripple par défaut est sombre. Lorsque vous spécifiez une couleur d’arrière-plan via .mdui-color-[color] ou que la page est en thème sombre, l’effet ripple devient blanc par défaut.
Vous pouvez spécifier la couleur de l’effet ripple en ajoutant la classe .mdui-ripple-[color].
Exemple
<button class="mdui-btn mdui-ripple mdui-ripple-black mdui-color-yellow">black</button>
<button class="mdui-btn mdui-ripple mdui-ripple-white mdui-color-blue">white</button>
<button class="mdui-btn mdui-ripple mdui-ripple-red">red</button>
<button class="mdui-btn mdui-ripple mdui-ripple-blue">blue</button>