CollapseÖsszecsukható panel
Az összecsukható panel komponens bonyolult tartalomterületek csoportosítására és elrejtésére szolgál az oldal rendezettségének megőrzése érdekében.
Vegye figyelembe, hogy az összecsukható panel komponens önmagában nem tartalmaz stílusokat, saját magának kell stílusokat hozzáadnia, vagy más komponensekkel együtt kell használnia.
A komponensek importálása:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
A komponensek TypeScript-típusainak importálása:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Példa:
első tartalom
második tartalom
<mdui-collapse>
<mdui-collapse-item header="első fejléc">első tartalom</mdui-collapse-item>
<mdui-collapse-item header="második fejléc">második tartalom</mdui-collapse-item>
</mdui-collapse>
A <mdui-collapse-item> komponens header attribútumával beállíthatja a panel fejlécének szövegét, vagy a header slotban adhatja meg a panel fejlécének elemét. A komponens alapértelmezett slotja a panel tartalmára szolgál.
1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">1. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>1. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">2. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>2. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Forrás
Az accordion attribútummal aktiválhatja a harmonika módot, így egyszerre csak egy panel maradhat nyitva.
1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">1. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>1. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">2. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>2. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Forrás
A <mdui-collapse> komponens value attribútumával lekérheti az aktuálisan nyitott paneleket, vagy beállíthatja a megnyitandó paneleket.
Harmonika módban a value attribútum értéke egy karakterlánc, amelyet HTML attribútumként vagy JavaScript tulajdonságként kezelhet; nem harmonika módban a value attribútum értéke egy tömb, amelyet csak JavaScript tulajdonságon keresztül lehet kezelni.
Harmonika mód
1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
Nem harmonika mód
1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
<mdui-list>
<mdui-list-subheader>Harmonika mód</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">1. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>1. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">2. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>2. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Nem harmonika mód</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">1. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>1. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">2. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>2. elem - al-elem</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>
Forrás
A disabled attribútummal a <mdui-collapse> komponenshez letilthatja az egész összecsukható panel csoportot. Hasonlóképpen, a disabled attribútum hozzáadásával a <mdui-collapse-item> komponenshez letilthat egy adott összecsukható panelt.
Összes letiltva
1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
Első panel letiltva
1. elem
1. elem - al-elem
2. elem
2. elem - al-elem
<mdui-list>
<mdui-list-subheader>Összes letiltva</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">1. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>1. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">2. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>2. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Első panel letiltva</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">1. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>1. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">2. elem</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>2. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Forrás
Alapértelmezés szerint a teljes panel fejlécére kattintva történik az összecsukás. A <mdui-collapse-item> komponens trigger attribútumával megadhatja az összecsukást kiváltó elemet. A trigger attribútum lehet CSS szelektor vagy DOM elem.
1. elem
1. elem - al-elem
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
1. elem
<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>1. elem - al-elem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Forrás| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
value | value | | string | - |
Az összecsukható panel elem értéke.
|
Az összecsukható panel elem fejléc szövege.
|
disabled | disabled | | boolean | false |
Az összecsukható panel elem letiltása.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Az az elem, amelyre kattintva az összecsukás aktiválódik. Az érték lehet CSS-szelektor, DOM-elem vagy JQ objektum. Alapértelmezés szerint a teljes fejléc területre kattintva aktiválódik.
|
| Név |
|---|
open |
A nyitás kezdetekor aktiválódik az esemény.
|
opened |
A nyitási animáció befejezésekor aktiválódik az esemény.
|
close |
A zárás kezdetekor aktiválódik az esemény.
|
closed |
A zárási animáció befejezésekor aktiválódik az esemény.
|
| Név |
|---|
| (alapértelmezett) |
Az összecsukható panel elem törzs tartalma.
|
Az összecsukható panel elem fejléc tartalma.
|
| Név |
|---|
Az összecsukható panel fejléc tartalma.
|
body |
Az összecsukható panel törzs tartalma.
|
| Attribútum | Tulajdonság | Reflect | Típus | Alapértelmezett |
|---|
accordion | accordion | | boolean | false |
Harmonika mód engedélyezése.
|
value | value | | string | string[] | - |
Az aktuálisan kinyitott <mdui-collapse-item> értéke.
Megjegyzés: Ennek a tulajdonságnak a HTML attribútuma mindig karakterlánc, és csak akkor állítható be kezdeti érték HTML attribútummal, ha az accordion true. Ennek a tulajdonságnak a JavaScript értéke karakterlánc, ha az accordion true, és karakterláncok tömbje, ha az accordion false. Ezért ha az accordion false, akkor ez az érték csak a JavaScript tulajdonság módosításával változtatható meg.
|
disabled | disabled | | boolean | false |
Az összecsukható panel letiltása.
|
| Név |
|---|
change |
Aktiválódik, amikor a kinyitott összecsukható panel elem megváltozik.
|
Előző fejezet
CircularProgress Kör alakú folyamatjelző
Következő fejezet
Dialog Párbeszédablak
