Collapse
I pannelli a scomparsa vengono utilizzati per raggruppare e nascondere aree di contenuto complesse, migliorando l'organizzazione della pagina.
Il componente collapse non include stili predefiniti. Devi creare i tuoi stili o usarlo insieme ad altri componenti.
Importa i componenti:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Importa i tipi TypeScript:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Esempio:
primo contenuto
secondo contenuto
<mdui-collapse>
<mdui-collapse-item header="prima intestazione">primo contenuto</mdui-collapse-item>
<mdui-collapse-item header="seconda intestazione">secondo contenuto</mdui-collapse-item>
</mdui-collapse>
Puoi impostare il testo dell'intestazione del pannello usando l'attributo header del componente <mdui-collapse-item>. Oppure, usa lo slot header per specificare l'elemento dell'intestazione del pannello. Lo slot predefinito del componente è riservato al contenuto del pannello.
Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Sorgente
Per abilitare la modalità accordion, aggiungi l'attributo accordion al componente <mdui-collapse>. In questa modalità, è possibile aprire un solo pannello alla volta.
Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Sorgente
L'attributo value del componente <mdui-collapse> consente di leggere o impostare il pannello attualmente aperto.
In modalità accordion, value è una stringa e può essere manipolato utilizzando attributi o proprietà. In modalità non accordion, value è un array e può essere manipolato solo utilizzando la proprietà JavaScript.
Modalità Accordion
Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
Modalità non accordion
Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
<mdui-list>
<mdui-list-subheader>Modalità Accordion</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Modalità non accordion</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - sottoelemento</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>
Sorgente
Per disabilitare l'intero gruppo di pannelli a scomparsa, aggiungi l'attributo disabled al componente <mdui-collapse>. Per disabilitare un pannello a scomparsa specifico, aggiungi l'attributo disabled al <mdui-collapse-item>.
Tutti i pannelli disabilitati
Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
Disabilita il Primo Pannello
Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
<mdui-list>
<mdui-list-subheader>Tutti i pannelli disabilitati</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Disabilita il Primo Pannello</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Sorgente
Per impostazione predefinita, facendo clic sull'intera intestazione del pannello ne viene controllata l'apertura e la chiusura. Puoi specificare un elemento trigger diverso utilizzando l'attributo trigger del componente <mdui-collapse-item>. L'attributo trigger può essere un selettore CSS o un elemento DOM.
Elemento 1
Elemento 1 - sottoelemento
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Elemento 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>Elemento 1 - sottoelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Sorgente| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
value | value | | string | - |
Valore di questo elemento del pannello a scomparsa
|
Titolo di questo elemento del pannello a scomparsa
|
disabled | disabled | | boolean | false |
Se questo elemento del pannello a scomparsa deve essere disabilitato
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Attiva l'apertura/chiusura quando si fa clic su questo elemento. Il valore può essere un selettore CSS, un elemento DOM o un oggetto JQ. Per impostazione predefinita, l'apertura/chiusura si attiva facendo clic sull'intera intestazione.
|
| Nome |
|---|
open |
L'evento viene attivato all'inizio dell'apertura.
|
opened |
L'evento viene attivato al termine dell'animazione di apertura.
|
close |
L'evento viene attivato all'inizio della chiusura.
|
closed |
L'evento viene attivato al termine dell'animazione di chiusura.
|
| Nome |
|---|
| (predefinito) |
Contenuto del corpo dell'elemento del pannello a scomparsa
|
Contenuto dell'intestazione dell'elemento del pannello a scomparsa
|
| Nome |
|---|
Contenuto dell'intestazione del pannello a scomparsa
|
body |
Contenuto del corpo del pannello a scomparsa
|
| Attributo HTML | Proprietà JavaScript | Reflect | Tipo | Predefinito |
|---|
accordion | accordion | | boolean | false |
Se abilitare la modalità fisarmonica
|
value | value | | string | string[] | - |
Valore del <mdui-collapse-item> attualmente espanso.
Nota: l'attributo HTML di questa proprietà è sempre una stringa e può essere impostato come valore iniziale tramite l'attributo HTML solo quando accordion è true. Il valore della proprietà JavaScript è una stringa quando accordion è true e un array di stringhe quando accordion è false. Pertanto, quando accordion è false, questo valore può essere modificato solo tramite la proprietà JavaScript.
|
disabled | disabled | | boolean | false |
Se questo pannello a scomparsa deve essere disabilitato
|
| Nome |
|---|
change |
Attivato quando l'elemento del pannello a scomparsa attualmente espanso cambia
|
Capitolo precedente
CircularProgress
Capitolo successivo
Dialog
