Tree item - Elément d'arborescence

Un élément interactif de l'arborescence

Component checklist

Statut

Fonctionnel

Code source

Storybook

Dernière version de modification

2.19.0

Disponible depuis la version

1.0.0

Usage


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-tree-item>profil</dsa-tree-item>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/tree-item/tree-item.js';
                                                                                                                                                          import type { DSATreeItem } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant élément d'arborescence


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import { Component } from '@angular/core';
                                                                                                                                                        import type { DSATreeItem } from '@ds-autonomie/web-components';
                                                                                                                                                        import '@ds-autonomie/web-components/dist/components/tree-item/tree-item.js';
                                                                                                                                                        
                                                                                                                                                        @Component({
                                                                                                                                                          selector: 'app-root',
                                                                                                                                                          templateUrl: './app.component.html',
                                                                                                                                                          styleUrls: ['./app.component.css']
                                                                                                                                                        })
                                                                                                                                                        export class AppComponent {}
                                                                                                                                                        
                                                                                                                                                            

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-tree-item>profil</dsa-tree-item>
                                                                                                                                                        
                                                                                                                                                            

app.component.html


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

expanded

Développe l'élément de l'arborescence

boolean

false

disabled

Désactive l'élément de l'arborescence

boolean

false

lazy

Active le comportement de chargement paresseux

boolean

false

selected

Dessine l'élément de l'arborescence dans un état sélectionné

boolean

false

Méthodes

Nom

Description

Type

getChildrenItems()

Obtient tous les éléments d'arborescence imbriqués dans ce nœud

({ includeDisabled?: boolean }) => DSATreeItem[]

Slots

Nom

Description

(défaut)

Slot par défaut

Événements

Nom

Description

dsa-after-collapse

Émis après la fermeture de l'élément de l'arborescence et la fin de toutes les animations

dsa-after-expand

Émis après que l'élément de l'arborescence se développe et que toutes les animations soient terminées

dsa-collapse

Émis lorsque l'élément de l'arborescence se ferme

dsa-expand

Émis lorsque l'élément de l'arborescence se développe

dsa-lazy-change

Émis lorsque l'état lazy de l'élément d'arborescence change

dsa-lazy-load

Émis lorsqu'un élément lazy est sélectionné. Utilisez cet événement pour charger des données de manière asynchrone et ajouter des éléments à l'arborescence avant de la développer. Après avoir ajouté de nouveaux éléments, supprimez l'attribut lazy pour supprimer l'état de chargement et mettre à jour l'arborescence