Navigation

Auto height tabs

Un 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.

Checkout Service v4.2.0

Rolled out to every region with no failed health checks and no manual rollback.

Utiliser Auto height tabs

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, defaultTab, animationSpeed

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

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.

2233Sliding height tabsNavigationLes onglets encadrés dans une carte où les panneaux de commutation font glisser l'ensemble du contenu sur le côté comme une pellicule tandis que la hauteur de la carte s'adapte au nouveau panneau.

2072Two-Mode Resize TabsNavigationUne barre d'onglets avec une surbrillance de pilule de morphing dont le cadre de contenu peut soit s'agrandir pour s'adapter à la hauteur naturelle de chaque panneau, soit être redimensionné comme une boîte animée, choisie par un commutateur de mode.

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é.

1928Card blur tabsNavigationOnglets encadrés dans une carte bordée dont le contenu est brièvement flou et fondu lorsque vous changez de panneau, avec une pilule coulissante derrière l'étiquette de l'onglet actif.

1981Icon label tabsNavigationUne rangée de puces d'onglet icon-and-label avec une surbrillance coulissante, où le panneau situé en dessous glisse dans la direction de l'onglet choisi.