CollapseSbalovací panel
Sbalovací panel se používá k seskupování a skrývání složitějšího obsahu, aby stránka zůstala přehledná.
Upozorňujeme, že komponenta sbalovacího panelu sama o sobě neobsahuje žádné styly. Je nutné přidat vlastní styly nebo je používat společně s jinými komponentami.
Importujte komponenty podle potřeby:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Importujte TypeScript typy komponent podle potřeby:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Příklad použití:
první obsah
druhý obsah
<mdui-collapse>
<mdui-collapse-item header="první záhlaví">první obsah</mdui-collapse-item>
<mdui-collapse-item header="druhé záhlaví">druhý obsah</mdui-collapse-item>
</mdui-collapse>
Atribut header komponenty <mdui-collapse-item> lze použít k nastavení textu záhlaví panelu, nebo můžete použít slot header k určení prvku záhlaví panelu. Výchozí slot komponenty je pro obsah panelu.
Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Položka 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 1 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Položka 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 2 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Zdrojový kód
Přidáním atributu accordion na komponentu <mdui-collapse> zapnete akordeonový režim, takže v jednom okamžiku bude otevřen pouze jeden panel.
Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Položka 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 1 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Položka 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 2 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Zdrojový kód
Pomocí atributu value komponenty <mdui-collapse> můžete získat aktuálně otevřený panel nebo nastavit panel, který chcete otevřít.
V akordeonovém režimu je hodnota atributu value řetězec. Tento atribut můžete ovládat pomocí HTML atributu nebo JavaScript vlastnosti. V neakordeonovém režimu je hodnota atributu value pole a lze s ní pracovat pouze pomocí JavaScript vlastnosti.
Akordeonový režim
Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
Neakordeonový režim
Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
<mdui-list>
<mdui-list-subheader>Akordeonový režim</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Položka 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 1 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Položka 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 2 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Neakordeonový režim</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Položka 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 1 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Položka 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 2 - dílčí položka</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>
Zdrojový kód
Přidáním atributu disabled na komponentu <mdui-collapse> můžete zakázat celou skupinu sbalovacích panelů. Podobně přidáním atributu disabled na komponentu <mdui-collapse-item> můžete zakázat konkrétní sbalovací panel.
Vše zakázáno
Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
Zakázat první panel
Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
<mdui-list>
<mdui-list-subheader>Vše zakázáno</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Položka 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 1 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Položka 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 2 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Zakázat první panel</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Položka 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 1 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Položka 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Položka 2 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Zdrojový kód
Ve výchozím nastavení kliknutí na celou oblast záhlaví panelu spustí sbalení. Atributem trigger komponenty <mdui-collapse-item> můžete určit prvek, který spouští sbalení. Atribut trigger může být CSS selektor nebo DOM prvek.
Položka 1
Položka 1 - dílčí položka
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Položka 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>Položka 1 - dílčí položka</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Zdrojový kód| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|
value | value | | string | - |
Hodnota této položky sbalovacího panelu.
|
Text záhlaví této položky sbalovacího panelu.
|
disabled | disabled | | boolean | false |
Určuje, zda je tato položka sbalovacího panelu zakázaná.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Kliknutím na tento prvek se spustí rozbalení/sbalení. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí je kliknutí na celou oblast záhlaví.
|
| Název |
|---|
open |
Spustí se na začátku rozbalování.
|
opened |
Spustí se po dokončení animace rozbalování.
|
close |
Spustí se na začátku sbalování.
|
closed |
Spustí se po dokončení animace sbalování.
|
| Název |
|---|
| (výchozí) |
Obsah těla položky sbalovacího panelu.
|
Obsah záhlaví položky sbalovacího panelu.
|
| Název |
|---|
Obsah záhlaví sbalovacího panelu.
|
body |
Obsah těla sbalovacího panelu.
|
| Atribut | Vlastnost | Reflect | Typ | Výchozí |
|---|
accordion | accordion | | boolean | false |
Určuje, zda je povolen režim akordeonu.
|
value | value | | string | string[] | - |
Hodnota aktuálně rozbaleného prvku <mdui-collapse-item>.
Poznámka: HTML atribut této vlastnosti je vždy řetězec a počáteční hodnotu lze nastavit pouze pokud je accordion true. Hodnota JavaScriptové vlastnosti je řetězec, pokud je accordion true, a pole řetězců, pokud je accordion false. Proto, když je accordion false, lze tuto hodnotu změnit pouze úpravou JavaScriptové vlastnosti.
|
disabled | disabled | | boolean | false |
Určuje, zda je tento sbalovací panel zakázán.
|
| Název |
|---|
change |
Spustí se, když se změní aktuálně rozbalená položka sbalovacího panelu.
|
| Název |
|---|
| (výchozí) |
Komponenty <mdui-collapse-item>.
|
Předchozí kapitola
CircularProgress Kruhový indikátor průběhu
Další kapitola
Dialog Dialog
