Tab - Onglet

Les onglets sont un ensemble de composants qui permettent de structurer du contenu dans un conteneur qui affiche une section à la fois.

Statut

Fonctionnel

Code source

Lien vers le repository (nous demander les droits)

Open link

Storybook

Dernière version publiée

Open link

Dernière version de modification

Package @ds-autonomie/web-components

2.22.1

Disponible depuis la version

Package @ds-autonomie/web-components

1.0.0

Usage


                                                        
                                                        
                                                            <dsa-tab>Étape 1</dsa-tab>
                                                        <script type="text/typescript">
                                                          import '@ds-autonomie/web-components/dist/components/tab/tab.js';
                                                          import type { DSATab } from '@ds-autonomie/web-components';
                                                        </script>

API

Attributs et propriétés Méthodes Slots Événements

Attributs et propriétés

Comment utiliser les attributs ? » Utilisation des webcomponents

Propriété attribut	Description	Type	Valeur par défaut
active	Dessine l'onglet dans un état actif	boolean	false
closable	Rend l'onglet fermable et affiche un bouton de fermeture	boolean	false
closeButtonLabel close-button-label	Modifie le label du bouton de fermeture	string	/
disabled	Désactive l'onglet et empêche la sélection	boolean	false
panel	Le nom du panneau de l'onglets auquel cet onglet est associé. Le panneau doit être situé dans le même groupe d'onglets	string	''

Méthodes

Comment utiliser les méthodes ? » Utilisation des webcomponents

Nom	Description	Type
blur()	Enlève le focus de l'onglet	() => void
focus()	Met le focus sur l'onglet	(options?: FocusOptions) => void FocusOptions

Slots

Comment utiliser les slots ? » Utilisation des webcomponents

Nom	Description
(défaut)	Le label de l'onglet

Événements

Comment utiliser les événements ? » Utilisation des webcomponents

Nom	Description
dsa-close	Émis lorsque l'onglet est fermable et que le bouton de fermeture est activé