Statut
Component checklist
Usage
<dsa-tree>
<dsa-tree-item>
Profil
<dsa-tree-item>Photo</dsa-tree-item>
<dsa-tree-item>
Information
<dsa-tree-item>Pseudo</dsa-tree-item>
<dsa-tree-item>Adresse</dsa-tree-item>
</dsa-tree-item>
<dsa-tree-item>Contacts</dsa-tree-item>
</dsa-tree-item>
<dsa-tree-item>
Paramètres
<dsa-tree-item>Sécurité</dsa-tree-item>
<dsa-tree-item>Langue</dsa-tree-item>
</dsa-tree-item>
</dsa-tree>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/tree/tree.js';
import '@ds-autonomie/web-components/dist/components/tree-item/tree-item.js';
import type { DSATree, DSATreeItem } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour utiliser le composant d'arborescence
import { Component } from '@angular/core';
import type { DSATree, DSATreeItem } from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/tree/tree.js';
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>
<dsa-tree-item>
Profil
<dsa-tree-item>Photo</dsa-tree-item>
<dsa-tree-item>
Information
<dsa-tree-item>Pseudo</dsa-tree-item>
<dsa-tree-item>Adresse</dsa-tree-item>
</dsa-tree-item>
<dsa-tree-item>Contacts</dsa-tree-item>
</dsa-tree-item>
<dsa-tree-item>
Paramètres
<dsa-tree-item>Sécurité</dsa-tree-item>
<dsa-tree-item>Langue</dsa-tree-item>
</dsa-tree-item>
</dsa-tree>
app.component.html
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
disableCheckboxSync disable-checkbox-sync |
Désactive la synchronisation des cases à cocher entre les nœuds parents et leurs enfants lorsque selection="multiple". |
boolean |
false |
|
selection |
Le comportement de sélection de l'arbre. La sélection 'single' permet de sélectionner un seul nœud à la fois. 'multiple' affiche des cases à cocher et permet de sélectionner plusieurs nœuds.'leaf' permet de sélectionner uniquement les nœuds feuilles. 'parent' permet de sélectionner uniquement les nœuds parents (les noeuds "feuilles" restent atteignables au clavier) |
single multiple leaf parent |
single |