The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed.
Les panneaux d'extension dans leur forme la plus simple affichent une liste d'objets extensibles.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Le panneau d'extension et son contenu peuvent être désactivés en utilisant le prop désactivé.
readonly prop fait la même chose que désactivé, mais il ne touche pas les styles.
Le panneau d'extension a également un design popout avec lequel le panneau d'extension est agrandi lorsqu'il est activé.
inset le panneau d'extension devient plus petit lorsque activé.
accordéon le panneau d'extension n'a pas de marges autour du panneau actif.
Les en-têtes du panneau d'expansion peuvent être rendus concentrables avec la prop focusable.
Les panneaux d'extension peuvent être contrôlés à l'extérieur en modifiant le v-model. Sa valeur correspond à un index zéro du contenu du panneau d'extension actuellement ouvert. Si le prop multiple est utilisé alors il s'agit d'un tableau contenant les indices des éléments ouverts.
L'icône d'extension d'action peut être personnalisée avec la prop expand-icon ou l'emplacement actions.
Le volet du panneau d'extension fournit un espace de lecture riche pour construire des implémentations vraiment avancées. Ici nous profitons des créneaux dans le composant v-expansion-panel-header pour réagir à l'état d'ouverture ou de fermeture en décolorant le contenu entrant et sortant.
Prêt pour plus ? Continuez la lecture avec :