Collapse
Die Collapse-Komponente gruppiert komplexe Inhaltsbereiche und blendet sie bei Bedarf aus, damit die Seite übersichtlich bleibt.
Die Collapse-Komponente bringt selbst kein Styling mit. Ergänzen Sie die Stile bei Bedarf selbst oder verwenden Sie die Komponente zusammen mit anderen Komponenten.
Importieren Sie die Komponenten nach Bedarf:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Beispiel:
erster Inhalt
zweiter Inhalt
<mdui-collapse>
<mdui-collapse-item header="erste Überschrift">erster Inhalt</mdui-collapse-item>
<mdui-collapse-item header="zweite Überschrift">zweiter Inhalt</mdui-collapse-item>
</mdui-collapse>
Mit dem Attribut header der Komponente <mdui-collapse-item> können Sie den Text im Kopfbereich des Panels festlegen. Sie können den Kopfbereich auch im header Slot angeben. Der default Slot der Komponente ist für den Inhalt des Panels.
Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Quellcode
Fügen Sie das Attribut accordion zur Komponente <mdui-collapse> hinzu, um den Akkordeon-Modus zu aktivieren. In diesem Modus ist immer nur ein Panel geöffnet.
Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Quellcode
Über das Attribut value der Komponente <mdui-collapse> können Sie das aktuell geöffnete Panel abrufen oder das zu öffnende Panel festlegen.
Im Akkordeon-Modus ist der Wert des Attributs value ein String. Sie können dieses Attribut über ein HTML-Attribut oder eine JavaScript-Property manipulieren. Im Nicht-Akkordeon-Modus ist der Wert des Attributs value ein Array, das nur über eine JavaScript-Property manipuliert werden kann.
Akkordeon-Modus
Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
Nicht-Akkordeon-Modus
Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
<mdui-list>
<mdui-list-subheader>Akkordeon-Modus</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Nicht-Akkordeon-Modus</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
<script>
const collapse = document.querySelector(".example-value");
collapse.value = ["item-1", "item-2"];
</script>
Quellcode
Durch Hinzufügen des Attributs disabled zur Komponente <mdui-collapse> können Sie die gesamte Collapse-Gruppe deaktivieren. Ebenso können Sie ein bestimmtes Panel deaktivieren, indem Sie das Attribut disabled zur Komponente <mdui-collapse-item> hinzufügen.
Alle deaktivieren
Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
Erstes Panel deaktivieren
Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
<mdui-list>
<mdui-list-subheader>Alle deaktivieren</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Erstes Panel deaktivieren</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Quellcode
Standardmäßig löst ein Klick auf den gesamten Kopfbereich des Panels das Zusammenklappen aus. Sie können das Attribut trigger der Komponente <mdui-collapse-item> verwenden, um das Element anzugeben, das das Zusammenklappen auslöst. Der Wert des Attributs trigger kann ein CSS-Selektor oder ein DOM-Element sein.
Item 1
Item 1 - Unterpunkt
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Item 1
<mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - Unterpunkt</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Quellcode| Attribut | Property | Reflect | Typ | Standard |
|---|
value | value | | string | - |
Gibt den Wert des Collapse-Panel-Elements an.
|
Setzt den Header-Text für das Collapse-Panel-Element.
|
disabled | disabled | | boolean | false |
Deaktiviert das Collapse-Panel-Element.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Das Element, das das Auf- und Zuklappen bei Klick umschaltet. Dies kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein. Standardmäßig ist der gesamte Header-Bereich der Auslöser.
|
| Name |
|---|
open |
Wird ausgelöst, wenn das Collapse-Element beginnt, sich zu öffnen.
|
opened |
Wird ausgelöst, nachdem das Collapse-Element geöffnet wurde und die Animationen abgeschlossen sind.
|
close |
Wird ausgelöst, wenn das Collapse-Element beginnt, sich zu schließen.
|
closed |
Wird ausgelöst, nachdem das Collapse-Element geschlossen wurde und die Animationen abgeschlossen sind.
|
| Name |
|---|
| Standard |
Hauptinhalt des Collapse-Panel-Elements.
|
Inhalt des Headers des Collapse-Panel-Elements.
|
| Name |
|---|
Inhalt des Headers des Collapse-Panels.
|
body |
Inhalt des Hauptteils des Collapse-Panels.
|
| Attribut | Property | Reflect | Typ | Standard |
|---|
accordion | accordion | | boolean | false |
Aktiviert den Akkordeon-Modus.
|
value | value | | string | string[] | - |
Gibt den Wert des geöffneten <mdui-collapse-item> an.
Hinweis: Das HTML-Attribut ist immer eine Zeichenfolge und kann nur initial gesetzt werden, wenn accordion true ist. Die JavaScript-Eigenschaft ist eine Zeichenfolge, wenn accordion true ist, und ein Zeichenfolgen-Array, wenn accordion false ist. Um diesen Wert zu ändern, wenn accordion false ist, aktualisieren Sie die JavaScript-Eigenschaft.
|
disabled | disabled | | boolean | false |
Deaktiviert das Collapse-Panel.
|
| Name |
|---|
change |
Wird ausgelöst, wenn sich das aktuell geöffnete Collapse-Element ändert.
|
| Name |
|---|
| Standard |
Die <mdui-collapse-item>-Komponenten.
|
Vorherige Seite
CircularProgress
