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

Collapse

Le plugin Collapse sert à plier ou à développer des blocs de contenu.

Le plugin ne possède aucun style par défaut ; vous devez écrire vous-même les styles, ou l’utiliser avec d’autres composants.

Utilisation

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

Structure HTML

Voici la structure HTML la plus basique :

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Ajoutez la classe .mdui-collapse-item-open pour que le bloc de contenu soit ouvert par défaut :

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Les éléments contenant la classe .mdui-collapse-item-arrow pivotent de 180 degrés lorsque le bloc de contenu est ouvert :

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Utilisation

Appel via attributs

Cette méthode ne nécessite pas d’écrire de JavaScript. Il suffit d’ajouter l’attribut mdui-collapse="options" à l’élément <div class="mdui-collapse"></div> pour activer le plugin.

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

codeplay_arrow
Exemple
<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- Éléments imbriqués -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

Dans les éléments à l’intérieur de Collapse, vous pouvez ajouter certains attributs pour lier des événements ; ces attributs peuvent également être utilisés lors de l’appel du plugin via JavaScript.

AttributDescription
mdui-collapse-item-closeCliquer sur cet élément déclenche l’événement close.mdui.collapse et ferme le panneau dans lequel il se trouve.

Appel via JavaScript

Instancier le plugin :

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

Paramètre

NomTypeDéfautDescription
accordionbooleanfalseActiver l’effet d’accordéon.
  • Lorsque la valeur est true, un seul bloc de contenu peut être ouvert au maximum ; l’ouverture d’un bloc en ferme automatiquement un autre.
  • Lorsque la valeur est false, plusieurs blocs de contenu peuvent être ouverts simultanément.

Méthode

Nom de méthodeDescription
open(item)Ouvrir un bloc de contenu.
  • item : l’index du bloc de contenu, l’élément DOM ou le sélecteur CSS.
close(item)Fermer un bloc de contenu.
  • item : l’index du bloc de contenu, l’élément DOM ou le sélecteur CSS.
toggle(item)Basculer l’état d’un bloc de contenu.
  • item : l’index du bloc de contenu, l’élément DOM ou le sélecteur CSS.
openAll()Ouvrir tous les blocs de contenu. Cette méthode n’est efficace que si accordion vaut false.
closeAll()Fermer tous les blocs de contenu.

Événement

Nom de l'événementDescriptionCibleParamètres
open.mdui.collapseL’événement est déclenché au début de l’animation d’ouverture d’un bloc de contenu.<div class="mdui-collapse-item"></div>event._detail.inst : l’instance
opened.mdui.collapseL’événement est déclenché à la fin de l’animation d’ouverture d’un bloc de contenu.
close.mdui.collapseL’événement est déclenché au début de l’animation de fermeture d’un bloc de contenu.
closed.mdui.collapseL’événement est déclenché à la fin de l’animation de fermeture d’un bloc de contenu.

Plus d’exemples

Sous-liste

code
Exemple
<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>
arrow_backPrevious
Progression
arrow_forwardNext
Headroom