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

Expansion Panel

Verwendung

Aufruf über benutzerdefinierte Attribute (wenn die Komponente dynamisch generiert wird, muss mdui.mutation() zur Initialisierung aufgerufen werden)
Aufruf über JavaScript

Stil

Vollständige HTML-Struktur

Dieses Beispiel enthält alle HTML-Elemente, die enthalten sein können.

Beispiel

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

Minimale HTML-Struktur

Einige der Elemente im obigen Beispiel sind nicht erforderlich. Das folgende Beispiel enthält nur die erforderlichen HTML-Elemente.

Beispiel

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

Standardmäßig geöffnetes Panel-Element

Durch Hinzufügen der Klasse .mdui-panel-item-open zum Element <div class="mdui-panel-item"></div> wird dieses Panel-Element standardmäßig geöffnet.

Beispiel

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

Abstand zwischen Panels entfernen

Durch Hinzufügen der Klasse .mdui-panel-gapless zum Element <div class="mdui-panel"></div> wird der Abstand zwischen dem geöffneten Panel und anderen Panels entfernt.

Beispiel

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

Popout-Panel

Durch Hinzufügen der Klasse .mdui-panel-popout zum Element <div class="mdui-panel"></div> wird ein Popout-Effekt für das geöffnete Panel erzielt.

Beispiel

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

Panel-Verschachtelung

Expansionspanels können ineinander verschachtelt werden.

Beispiel

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

      <!-- Erstes verschachteltes Expansionspanel -->
      <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>

            <!-- Zweites verschachteltes Expansionspanel -->
            <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>

Verwendung

Aufruf über Attribute

Bei dieser Methode muss kein JavaScript-Code geschrieben werden. Fügen Sie einfach das Attribut mdui-panel="options" zum Element <div class="mdui-panel"></div> hinzu, um das Plugin zu aktivieren.

Wenn die Komponente dynamisch generiert wird, muss mdui.mutation() zur Initialisierung aufgerufen werden.

Beispiel

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

Einigen Elementen innerhalb des Expansionspanels können Attribute hinzugefügt werden, um Ereignisse zu binden. Diese Attribute können auch beim Aufruf über JavaScript verwendet werden.

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

Aufruf über JavaScript

Instanziierung der Komponente:

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

Ausführen

Parameter

Parametername	Typ	Standardwert	Beschreibung
`accordion`	`boolean`	`false`	Gibt an, ob der Akkordeon-Effekt aktiviert ist. Wenn `true`, kann höchstens ein Panel-Element gleichzeitig geöffnet sein. Das Öffnen eines Panel-Elements schließt andere Panel-Elemente. Wenn `false`, können mehrere Panel-Elemente gleichzeitig geöffnet sein.

Methode

Methodenname	Beschreibung
`open(item)`	Öffnet ein Panel-Element. `item`: Indexnummer, DOM-Element oder CSS-Selektor des Panel-Elements.
`close(item)`	Schließt ein Panel-Element. `item`: Indexnummer, DOM-Element oder CSS-Selektor des Panel-Elements.
`toggle(item)`	Schaltet den Zustand eines Panel-Elements um. `item`: Indexnummer, DOM-Element oder CSS-Selektor des Panel-Elements.
`openAll()`	Öffnet alle Panel-Elemente. Diese Methode ist nur wirksam, wenn `accordion` auf `false` gesetzt ist.
`closeAll()`	Schließt alle Panel-Elemente.

Ereignis

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

CSS-Klassenliste

Klassenname	Beschreibung
`.mdui-panel`	Definiert ein Expansionspanel.
`.mdui-panel-gapless`	Entfernt den Abstand zwischen dem geöffneten Panel und anderen Panels.
`.mdui-panel-popout`	Verleiht dem geöffneten Panel einen Popout-Effekt.
`.mdui-panel-item`	Definiert ein Panel-Element eines Expansionspanels.
`.mdui-panel-item-open`	Panel-Element standardmäßig öffnen.
`.mdui-panel-item-header`	Definiert den Header eines Panel-Elements.
`.mdui-panel-item-title`	Definiert den Titel im Header eines Panel-Elements.
`.mdui-panel-item-summary`	Definiert die Zusammenfassung im Header eines Panel-Elements.
`.mdui-panel-item-arrow`	Definiert das Icon zum Auf- und Zuklappen eines Panel-Elements.
`.mdui-panel-item-body`	Definiert den Inhalt eines Panel-Elements.
`.mdui-panel-item-actions`	Definiert die Aktionsleiste eines Panel-Elements.

Divider

Text Field

Expansion Panel

Verwendung

Verwandte Themen

Stil

Vollständige HTML-Struktur

Minimale HTML-Struktur

Standardmäßig geöffnetes Panel-Element

Abstand zwischen Panels entfernen

Popout-Panel

Panel-Verschachtelung

Verwendung

Aufruf über Attribute

Aufruf über JavaScript

Parameter

Methode

Ereignis

CSS-Klassenliste