CollapsePanel zwijany
Komponent panelu zwijanego grupuje i ukrywa złożone obszary treści, aby zachować porządek na stronie.
Należy pamiętać, że sam komponent panelu zwijanego nie zawiera żadnych stylów; musisz samodzielnie dodać style lub użyć go razem z innymi komponentami.
Zaimportuj komponenty:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Zaimportuj typy TypeScript komponentów:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Przykład użycia:
pierwsza treść
druga treść
<mdui-collapse>
<mdui-collapse-item header="pierwszy nagłówek">pierwsza treść</mdui-collapse-item>
<mdui-collapse-item header="drugi nagłówek">druga treść</mdui-collapse-item>
</mdui-collapse>
Za pomocą atrybutu header komponentu <mdui-collapse-item> można ustawić tekst nagłówka panelu. Można również użyć slotu header do określenia elementu nagłówka panelu. Domyślny slot komponentu służy do treści panelu.
Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Pozycja 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 1 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Pozycja 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 2 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Źródło
Dodanie atrybutu accordion do komponentu <mdui-collapse> włącza tryb akordeonu, dzięki czemu tylko jeden panel może być otwarty jednocześnie.
Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Pozycja 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 1 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Pozycja 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 2 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Źródło
Za pomocą atrybutu value komponentu <mdui-collapse> możesz pobrać aktualnie otwarty panel lub ustawić panel, który ma być otwarty.
W trybie akordeonu wartością atrybutu value jest ciąg znaków. Możesz go obsługiwać za pomocą atrybutu HTML lub właściwości JavaScript. W trybie nieakordeonowym wartością atrybutu value jest tablica, którą można obsługiwać tylko za pomocą właściwości JavaScript.
Tryb akordeonu
Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
Tryb nieakordeonowy
Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
<mdui-list>
<mdui-list-subheader>Tryb akordeonu</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Pozycja 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 1 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Pozycja 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 2 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Tryb nieakordeonowy</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Pozycja 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 1 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Pozycja 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 2 - element podrzędny</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>
Źródło
Dodanie atrybutu disabled do komponentu <mdui-collapse> wyłącza całą grupę paneli zwijanych. Podobnie, dodanie atrybutu disabled do komponentu <mdui-collapse-item> wyłącza określony panel zwijany.
Wszystkie wyłączone
Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
Wyłączony pierwszy panel
Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
<mdui-list>
<mdui-list-subheader>Wszystkie wyłączone</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Pozycja 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 1 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Pozycja 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 2 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Wyłączony pierwszy panel</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Pozycja 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 1 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Pozycja 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Pozycja 2 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Źródło
Domyślnie kliknięcie w dowolny obszar nagłówka panelu powoduje zwinięcie/rozwiniecie. Możesz określić element wyzwalający zwijanie za pomocą atrybutu trigger komponentu <mdui-collapse-item>. Atrybut trigger może być selektorem CSS lub elementem DOM.
Pozycja 1
Pozycja 1 - element podrzędny
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Pozycja 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>Pozycja 1 - element podrzędny</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Źródło| Atrybut HTML | Właściwość JavaScript | Reflect | Typ | Domyślne |
|---|
value | value | | string | - |
Wartość tego elementu panelu zwijanego
|
Tekst nagłówka tego elementu panelu zwijanego
|
disabled | disabled | | boolean | false |
Określa, czy ten element panelu zwijanego jest wyłączony.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Kliknięcie tego elementu powoduje zwinięcie/rozwinięcie. Wartością może być selektor CSS, element DOM lub obiekt JQ. Domyślnie kliknięcie całego obszaru nagłówka powoduje zwinięcie/rozwinięcie
|
| Nazwa |
|---|
open |
Wywoływane przed otwarciem
|
opened |
Wywoływane po zakończeniu animacji otwierania
|
close |
Wywoływane przed zamknięciem
|
closed |
Wywoływane po zakończeniu animacji zamykania
|
| Nazwa |
|---|
| (domyślny) |
Treść główna elementu panelu zwijanego
|
Treść nagłówka elementu panelu zwijanego
|
| Nazwa |
|---|
Treść nagłówka panelu zwijanego
|
body |
Treść główna panelu zwijanego
|
| Atrybut HTML | Właściwość JavaScript | Reflect | Typ | Domyślne |
|---|
accordion | accordion | | boolean | false |
Określa, czy włączyć tryb akordeonu.
|
value | value | | string | string[] | - |
Wartość aktualnie rozwiniętego <mdui-collapse-item>
Uwaga: Atrybut HTML tej właściwości jest zawsze ciągiem znaków i można ustawić wartość początkową tylko wtedy, gdy accordion ma wartość true; wartość właściwości JavaScript jest ciągiem znaków, gdy accordion ma wartość true, a tablicą ciągów znaków, gdy accordion ma wartość false. Dlatego gdy accordion ma wartość false, tę wartość można zmienić tylko poprzez modyfikację wartości właściwości JavaScript.
|
disabled | disabled | | boolean | false |
Określa, czy panel zwijany jest wyłączony.
|
| Nazwa |
|---|
change |
Wywoływane, gdy zmienia się aktualnie rozwinięty element panelu zwijanego
|
Poprzedni rozdział
CircularProgress Okrągły wskaźnik postępu
Następny rozdział
Dialog Okno dialogowe
