menuMDUIDocs
color_lens
mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Tableau

Utilisation

Le composant de sélection permet à l’utilisateur de choisir parmi plusieurs options.

Lecture associée

Utilisation via des classes CSS

Style

Utilisation via des attributs personnalisés (si le composant est généré dynamiquement, vous devez appeler <a href="/fr/docs/1/global#mutation"><code>mdui.mutation()</code></a> pour l’initialiser)

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>.

codeplay_arrow
Exemple
<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Spécifications Material Design : Composants - Bouton de sélection

Si le composant est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.

<div class="mdui-table-fluid">
  <table class="mdui-table">
    ...
  </table>
</div>

Sélecteur natif à choix unique

Instancier le composant :

codeplay_arrow
Exemple
<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-hoverable">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Sélecteur natif à choix multiple

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

codeplay_arrow
Exemple
<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th class="mdui-table-col-numeric">age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>18</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>21</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</div>

Ajoutez la classe <code>.mdui-select</code> à l’élément <code>&lt;select&gt;</code> pour lui donner un style amélioré, sans écrire de JavaScript.

Position du menu de sélection. Les valeurs possibles sont auto, top et bottom.

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.

Ouvrir le menu déroulant.

codeplay_arrow
Exemple
<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-selectable">
    <thead>
      <tr>
        <th>Dessert (100g serving)</th>
        <th
          class="mdui-table-col-numeric"
          mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}"
        >
          Calories
        </th>
        <th class="mdui-table-col-numeric">Fat (g)</th>
        <th class="mdui-table-col-numeric">Carbs (g)</th>
        <th class="mdui-table-col-numeric">Protein (g)</th>
        <th class="mdui-table-col-numeric">Sodium (mg)</th>
        <th
          class="mdui-table-col-numeric"
          mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}"
        >
          Calcium (%)
        </th>
        <th class="mdui-table-col-numeric">Iron (%)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="mdui-table-row-selected">
        <td>Frozen yogurt</td>
        <td>159</td>
        <td>6.0</td>
        <td>24</td>
        <td>4.0</td>
        <td>87</td>
        <td>14%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Ice cream sandwich</td>
        <td>237</td>
        <td>9.0</td>
        <td>37</td>
        <td>4.3</td>
        <td>129</td>
        <td>8%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Eclair</td>
        <td>262</td>
        <td>16.0</td>
        <td>24</td>
        <td>6.0</td>
        <td>337</td>
        <td>6%</td>
        <td>7%</td>
      </tr>
    </tbody>
  </table>
</div>

Vous pouvez également ajouter la classe <code>.mdui-select</code> à un élément <code>&lt;select multiple&gt;</code> pour rendre la sélection multiple. Cependant, tous les navigateurs ne rendent pas ce style correctement.

Fermer le menu déroulant.

Basculer l’état ouvert du menu déroulant.

Classes CSS

Nom de classeDescription
.mdui-tableLorsque vous modifiez dynamiquement le contenu de l’élément <code>&lt;select&gt;</code>, vous devez appeler cette méthode pour régénérer le menu déroulant.
.mdui-table-fluidRetourner l’état actuel du menu déroulant. Il existe quatre états possibles : <code>opening</code>, <code>opened</code>, <code>closing</code> et <code>closed</code>.
.mdui-table-hoverableL’événement est déclenché au début de l’animation d’ouverture du menu déroulant.
.mdui-table-col-numeric<code>event._detail.inst</code> : instance
.mdui-table-selectableL’événement est déclenché à la fin de l’animation d’ouverture du menu déroulant.
.mdui-table-row-selectedL’événement est déclenché au début de l’animation de fermeture du menu déroulant.
arrow_backPrevious
Snackbar
arrow_forwardNext
Boîte de dialogue