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

Panneau pliable

Utilisation

En utilisant des attributs personnalisés (si le composant est généré dynamiquement, vous devez appeler mdui.mutation() pour l'initialiser)
Appel via JavaScript

Lecture associée

Spécifications Material Design : Composants - Expansion Panel

Style

Structure HTML complète

Cet exemple contient tous les éléments HTML pouvant être inclus.

Exemple

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

Structure HTML minimale

Certains éléments de l’exemple précédent ne sont pas obligatoires ; l’exemple ci-dessous ne contient que les éléments HTML nécessaires.

Exemple

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Élément de Expansion Panel ouvert par défaut

Ajoutez la classe .mdui-panel-item-open à l’élément <div class="mdui-panel-item"></div> pour le rendre ouvert par défaut.

Exemple

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Supprimer l’espace entre les Expansion Panels

Ajoutez la classe .mdui-panel-gapless à l’élément <div class="mdui-panel"></div> pour supprimer l’espace entre l’Expansion Panel ouvert et les autres Expansion Panels.

Exemple

<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Expansion Panel en mode pop-out

Ajoutez la classe .mdui-panel-popout à l’élément <div class="mdui-panel"></div> pour donner à l’Expansion Panel ouvert un effet de "pop-out".

Exemple

<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Expansion Panels imbriqués

Les Expansion Panels peuvent être imbriqués.

Exemple

<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- Premier Expansion Panel imbriqué -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- Deuxième Expansion Panel imbriqué -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Utilisation

Appel via attributs

Avec cette approche, il n’est pas nécessaire d’écrire de code JavaScript. Il suffit d’ajouter l’attribut mdui-panel="options" à l’élément <div class="mdui-panel"></div> pour activer le plugin.

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

Exemple

<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Vous pouvez ajouter certains attributs aux éléments contenus dans le Expansion Panel pour lier des événements. Ces attributs peuvent également être utilisés lorsque vous appelez le composant via JavaScript.

Attribut	Description
`mdui-panel-item-close`	Un clic sur cet élément déclenchera l’événement `close.mdui.panel` et fermera l’élément de Expansion Panel dans lequel il se trouve.

Appel via JavaScript

Instancier le composant :

// selector est un sélecteur CSS de l’élément .mdui-panel ou un élément DOM
// options sont les paramètres du plugin, voir la liste des paramètres ci-dessous
var inst = new mdui.Panel(selector, options);

Exécuter

Paramètre

Nom	Type	Défaut	Description
`accordion`	`boolean`	`false`	Activer ou non l’effet accordéon. Lorsque la valeur est `true`, un seul élément de Expansion Panel peut être ouvert à la fois ; lorsqu’un élément est ouvert, les autres sont fermés. Lorsque la valeur est `false`, plusieurs éléments de Expansion Panel peuvent être ouverts simultanément.

Méthode

Nom de méthode	Description
`open(item)`	Ouvrir un élément de Expansion Panel. `item` : l’index de l’élément de Expansion Panel, ou un élément DOM, ou un sélecteur CSS.
`close(item)`	Fermer un élément de Expansion Panel. `item` : l’index de l’élément de Expansion Panel, ou un élément DOM, ou un sélecteur CSS.
`toggle(item)`	Basculer l’état d’un élément de Expansion Panel. `item` : l’index de l’élément de Expansion Panel, ou un élément DOM, ou un sélecteur CSS.
`openAll()`	Ouvrir tous les éléments de Expansion Panel. Cette méthode n’est valide que si `accordion` vaut `false`.
`closeAll()`	Fermer tous les éléments de Expansion Panel.

Événement

Nom de l'événement	Description	Cible	Paramètres
`open.mdui.panel`	L’événement est déclenché au début de l’animation d’ouverture d’un élément de Expansion Panel.	`<div class="mdui-panel-item"></div>`	`event._detail.inst` : instance
`opened.mdui.panel`	L’événement est déclenché à la fin de l’animation d’ouverture d’un élément de Expansion Panel.
`close.mdui.panel`	L’événement est déclenché au début de l’animation de fermeture d’un élément de Expansion Panel.
`closed.mdui.panel`	L’événement est déclenché à la fin de l’animation de fermeture d’un élément de Expansion Panel.

Classes CSS

Nom de classe	Description
`.mdui-panel`	Définir un Expansion Panel.
`.mdui-panel-gapless`	Supprimer l’espace entre les Expansion Panels ouverts et les autres Expansion Panels.
`.mdui-panel-popout`	Faire apparaître le Expansion Panel ouvert avec un effet de surélévation.
`.mdui-panel-item`	Définir un élément de Expansion Panel dans un Expansion Panel.
`.mdui-panel-item-open`	Rendre l’élément de Expansion Panel ouvert par défaut.
`.mdui-panel-item-header`	Définir l’en-tête d’un élément de Expansion Panel.
`.mdui-panel-item-title`	Définir le titre de l’en-tête d’un élément de Expansion Panel.
`.mdui-panel-item-summary`	Définir le résumé de l’en-tête d’un élément de Expansion Panel.
`.mdui-panel-item-arrow`	Définir l’icône d’ouverture/fermeture de l’élément de Expansion Panel.
`.mdui-panel-item-body`	Définir le contenu de l’élément de Expansion Panel.
`.mdui-panel-item-actions`	Définir la barre d’actions de l’élément de Expansion Panel.

Séparateur

Champ de texte