Navigation

Panel Tab Switcher

Une barre d'onglets arrondie où un indicateur d'arrière-plan s'adapte à la taille et à la position exactes de l'onglet actif, révélant un panneau de contenu distinct en dessous.

Sprint 14 overview

Velocity climbed to 38 points, up from 34 last cycle. Both blockers from the mid-sprint review are resolved.

Velocity38 pts

Utiliser Panel Tab Switcher

Une barre d'onglets arrondie où un indicateur d'arrière-plan s'adapte à la taille et à la position exactes de l'onglet actif, révélant un panneau de contenu distinct en dessous.

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: accentColor, variant, tabCount

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent

Composants proches

1537Pill tabsNavigationUne bande d'onglets où une seule pilule glisse et s'étire sur l'onglet sélectionné, avec une flèche, des touches de navigation Début et Fin et un panneau qui effectue un fondu enchaîné.

2235Sliding segment tabsNavigationUn contrôle segmenté en forme de pilule dont l'indicateur d'arrière-plan glisse sous l'étiquette active tandis que le panneau situé en dessous glisse dans le sens du déplacement.

2046Sliding Selection HighlightNavigationUne puce d'arrière-plan flottante partagée qui glisse d'un élément à un autre dans une rangée d'options, suivant l'élément survolé ou cliqué.

1914ARIA Tablist ResizeNavigationUne liste d'onglets itinérants entièrement accessible avec une surbrillance de pilule glissante, où le cadre du panneau se redimensionne en douceur selon le contenu de l'onglet affiché.

1916Auto height tabsNavigationUn groupe d'onglets dont le conteneur de contenu redimensionne progressivement sa hauteur pour s'adapter à chaque panneau lorsque vous changez d'onglet, au lieu de sauter ou de laisser un espace vide.

1920Bare Sliding Tab StripNavigationUne bande d'onglets unstyled-by-default dont les panneaux sont placés côte à côte sur une pellicule qui glisse latéralement sur l'interrupteur tandis que la hauteur du cadre s'adapte facilement.