Collapse
Le composant Collapse permet de regrouper et de masquer des zones de contenu complexes afin de garder une interface claire.
Notez que le composant Collapse ne fournit aucun style par défaut ; vous devez ajouter vos propres styles ou l'utiliser avec d'autres composants.
Importez les composants :
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Importez les types TypeScript correspondants :
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Exemple d'utilisation :
premier contenu
second contenu
<mdui-collapse>
<mdui-collapse-item header="premier en-tête">premier contenu</mdui-collapse-item>
<mdui-collapse-item header="second en-tête">second contenu</mdui-collapse-item>
</mdui-collapse>
L'attribut header du composant <mdui-collapse-item> définit le texte de l'en-tête. Vous pouvez également utiliser le slot header pour personnaliser l'élément d'en-tête. Le slot par défaut est utilisé pour le contenu du panneau.
Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Élément 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 1 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Élément 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 2 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source
Ajoutez l'attribut accordion au composant <mdui-collapse> pour activer le mode accordéon, dans lequel un seul panneau peut être ouvert à la fois.
Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Élément 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 1 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Élément 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 2 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source
L'attribut value du composant <mdui-collapse> vous permet d'obtenir le panneau actuellement ouvert ou de définir celui(s) à ouvrir.
En mode accordéon, value est une chaîne de caractères. Vous pouvez la manipuler via les attributs HTML ou JavaScript. Hors mode accordéon, value est un tableau, manipulable uniquement via les propriétés JavaScript.
Mode accordéon
Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
Mode non-accordéon
Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
<mdui-list>
<mdui-list-subheader>Mode accordéon</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Élément 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 1 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Élément 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 2 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Mode non-accordéon</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Élément 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 1 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Élément 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 2 - sous-élément</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>
Source
Ajoutez l'attribut disabled au composant <mdui-collapse> pour désactiver tout le groupe. Ajoutez-le à un <mdui-collapse-item> pour désactiver un panneau spécifique.
Tout désactiver
Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
Désactiver le premier panneau
Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
<mdui-list>
<mdui-list-subheader>Tout désactiver</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Élément 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 1 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Élément 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 2 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Désactiver le premier panneau</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Élément 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 1 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Élément 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Élément 2 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source
Par défaut, cliquer sur toute la zone d'en-tête du panneau déclenche le pliage/dépliage. Utilisez l'attribut trigger du composant <mdui-collapse-item> pour spécifier un élément déclencheur (sélecteur CSS ou élément DOM).
Élément 1
Élément 1 - sous-élément
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Élément 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>Élément 1 - sous-élément</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Source| Attribut HTML | Propriété JavaScript | Reflect | Type | Défaut |
|---|
value | value | | string | - |
Valeur de ce Collapse Item
|
Texte de l'en-tête de ce Collapse Item
|
disabled | disabled | | boolean | false |
Si ce Collapse Item est désactivé
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Élément dont le clic déclenche le pliage. La valeur peut être un sélecteur CSS, un élément DOM ou un objet JQ. Par défaut, le clic sur toute la zone d'en-tête déclenche le pliage.
|
| Nom |
|---|
open |
Se déclenche lorsque l'ouverture commence
|
opened |
Se déclenche lorsque l'animation d'ouverture est terminée
|
close |
Se déclenche lorsque la fermeture commence
|
closed |
Se déclenche lorsque l'animation de fermeture est terminée
|
| Nom |
|---|
| Défaut |
Contenu principal du Collapse Item
|
Contenu de l'en-tête du Collapse Item
|
| Nom |
|---|
Contenu de l'en-tête du Collapse
|
body |
Contenu principal du Collapse
|
| Attribut HTML | Propriété JavaScript | Reflect | Type | Défaut |
|---|
accordion | accordion | | boolean | false |
Si le mode accordéon est activé
|
value | value | | string | string[] | - |
Valeur de l'élément <mdui-collapse-item> actuellement déplié.
Remarque : L'attribut HTML de cette propriété est toujours une chaîne de caractères, et ne peut être défini comme valeur initiale que lorsque accordion est true. La valeur de la propriété JavaScript est une chaîne lorsque accordion est true, et un tableau de chaînes lorsque accordion est false. Par conséquent, lorsque accordion est false, vous ne pouvez modifier cette valeur qu'en modifiant la valeur de la propriété JavaScript.
|
disabled | disabled | | boolean | false |
Si ce Collapse est désactivé
|
| Nom |
|---|
change |
Se déclenche lorsque le panneau actuellement ouvert change
|
| Nom |
|---|
| Défaut |
Composants <mdui-collapse-item>
|
Chapitre précédent
CircularProgress
