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.
Sélecteur
Le composant de sélection permet à l’utilisateur de choisir parmi plusieurs options.
Utilisation
- Utilisation via des classes CSS
- Utilisation via des attributs personnalisés (si le composant est généré dynamiquement, vous devez appeler
mdui.mutation()pour l’initialiser) - Appel via JavaScript
Style
Sélecteur natif à choix unique
Ajoutez la classe .mdui-select à l’élément <select> pour lui donner un style amélioré, sans écrire de JavaScript.
Exemple
<select class="mdui-select">
<option value="1" selected>State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Sélecteur natif à choix multiple
Vous pouvez également ajouter la classe .mdui-select à un élément <select multiple> pour rendre la sélection multiple. Cependant, tous les navigateurs ne rendent pas ce style correctement.
Exemple
<select multiple size="8" class="mdui-select">
<optgroup label="Fonts">
<option>Roboto</option>
<option>Calibri</option>
<option>Courier New</option>
<option>Verdana</option>
</optgroup>
<optgroup label="Size">
<option>50%</option>
<option>75%</option>
<option>90%</option>
<option>100%</option>
</optgroup>
<optgroup label="header">
<option>h1</option>
<option>h2</option>
<option>h3</option>
<option>h4</option>
</optgroup>
</select>Utilisation
Appel via attributs
Cette approche ne nécessite pas d’écrire de JavaScript. Il suffit d’ajouter la classe .mdui-select et l’attribut mdui-select="options" à l’élément <select>.
Si le composant est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.
Exemple
<select class="mdui-select" mdui-select>
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Exemple
<select class="mdui-select" mdui-select="{position: 'top'}">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Exemple
<select class="mdui-select" mdui-select="{position: 'bottom'}">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>Appel via JavaScript
Instancier le composant :
// selector est un sélecteur CSS de l’élément <select>, un élément DOM ou une chaîne HTML
// options sont les paramètres de configuration, voir la liste des paramètres ci-dessous
var inst = new mdui.Select(selector, options);Exemple
<select class="mdui-select" id="demo-js">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3" disabled>State 3</option>
<option value="4">State 4</option>
<option value="5">State 5</option>
<option value="6">State 6</option>
</select>
<script>
var inst = new mdui.Select('#demo-js');
</script>Paramètre
| Nom | Type | Défaut | Description |
|---|---|---|---|
position | string | auto | Position du menu de sélection. Les valeurs possibles sont auto, top et bottom. |
gutter | int | 16 | Distance minimale entre le menu de sélection et les bordures supérieure et inférieure de la fenêtre, en px. Ce paramètre n’est valable que si position vaut auto. |
Méthode
| Nom de méthode | Description |
|---|---|
open() | Ouvrir le menu déroulant. |
close() | Fermer le menu déroulant. |
toggle() | Basculer l’état ouvert du menu déroulant. |
handleUpdate() | Lorsque vous modifiez dynamiquement le contenu de l’élément <select>, vous devez appeler cette méthode pour régénérer le menu déroulant. |
getState() | Retourner l’état actuel du menu déroulant. Il existe quatre états possibles : opening, opened, closing et closed. |
Événement
| Nom de l'événement | Description | Cible | Paramètres |
|---|---|---|---|
open.mdui.select | L’événement est déclenché au début de l’animation d’ouverture du menu déroulant. | <select class="mdui-select"></select> | event._detail.inst : instance |
opened.mdui.select | L’événement est déclenché à la fin de l’animation d’ouverture du menu déroulant. | ||
close.mdui.select | L’événement est déclenché au début de l’animation de fermeture du menu déroulant. | ||
closed.mdui.select | L’événement est déclenché à la fin de l’animation de fermeture du menu déroulant. |