Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Collapse

Das Collapse-Plugin wird zum Ein- oder Ausklappen von Inhaltsblöcken verwendet.

Das Plugin selbst wird ohne Styling ausgeliefert; Sie müssen Ihr eigenes Styling schreiben oder es mit anderen Komponenten kombinieren.

Verwendung

(Wenn die Komponente dynamisch generiert wird, müssen Sie mdui.mutation() aufrufen, um sie zu initialisieren.)
Aufruf über JavaScript

HTML-Struktur

Dies ist die einfachste HTML-Struktur:

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

Das Hinzufügen der Klasse .mdui-collapse-item-open bewirkt, dass der Inhaltsblock standardmäßig ausgeklappt ist:

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

Elemente, welche die Klasse .mdui-collapse-item-arrow enthalten, drehen sich um 180 Grad, wenn der Inhaltsblock ausgeklappt wird:

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

Verwendung

Aufruf über Attribute

Mit dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie einfach das Attribut mdui-collapse="options" zum Element <div class="mdui-collapse"></div> hinzu, um das Plugin zu aktivieren.

Wenn die Komponente dynamisch generiert wird, müssen Sie mdui.mutation() aufrufen, um sie zu initialisieren.

Beispiel

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

      <!-- Verschachtelte Elemente -->
      <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>

Sie können Elementen innerhalb von Collapse Attribute hinzufügen, um Ereignisse zu binden, die auch beim Aufruf mit JavaScript verwendet werden können.

Attribut	Beschreibung
`mdui-collapse-item-close`	Das Klicken auf dieses Element löst das Ereignis `close.mdui.collapse` aus und schließt das Panel, in dem sich das Element befindet.

Aufruf über JavaScript

Instanziieren Sie das Plugin:

// selector ist der CSS-Selektor des Elements oder ein DOM-Element.
// options ist der Parameter des Plugins, siehe die Parameterliste unten.
var inst = new mdui.Collapse(selector, options);

demo

Parameter

Parametername	Typ	Standardwert	Beschreibung
`accordion`	`boolean`	`false`	Aktivieren des Akkordeon-Effekts. Wenn `true`, kann höchstens ein Inhaltsblock geöffnet sein; das Öffnen eines Inhaltsblocks schließt andere Inhaltsblöcke. Wenn `false`, können mehrere Inhaltsblöcke gleichzeitig geöffnet sein.

Methode

Methodenname	Beschreibung
`open(item)`	Öffnen eines Inhaltsblocks. `item`: Indexnummer des Inhaltsblocks, DOM-Element oder CSS-Selektor.
`close(item)`	Schließen eines Inhaltsblocks. `item`: Indexnummer des Inhaltsblocks, DOM-Element oder CSS-Selektor.
`toggle(item)`	Wechseln des Inhaltsblock-Status. `item`: Indexnummer des Inhaltsblocks, DOM-Element oder CSS-Selektor.
`openAll()`	Öffnen aller Inhaltsblöcke. Diese Methode ist nur effektiv, wenn `accordion` gleich `false` ist.
`closeAll()`	Schließen aller Inhaltsblöcke.

Ereignis

Ereignisname	Beschreibung	Ziel	Parameter
`open.mdui.collapse`	Das Ereignis wird ausgelöst, wenn der Inhaltsblock mit seiner Öffnungsanimation beginnt.	`<div class="mdui-collapse-item"></div>`	`event._detail.inst`: Instanz
`opened.mdui.collapse`	Das Ereignis wird ausgelöst, wenn der Inhaltsblock seine Öffnungsanimation beendet hat.
`close.mdui.collapse`	Das Ereignis wird ausgelöst, wenn der Inhaltsblock mit seiner Schließanimation beginnt.
`closed.mdui.collapse`	Das Ereignis wird ausgelöst, wenn der Inhaltsblock seine Schließanimation beendet hat.

Weitere Beispiele

Unterliste

Beispiel

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

Fortschrittsbalken

Headroom