Sous-en-tête

Sous-en-tête dans Storybook

Note: Ce composant doit être utilisé uniquement dans le cadre des modèles UX d'en-tête et non dans des scénarios isolés ou personnalisés.

Le composant SubApplicationHeader crée un en-tête secondaire pour votre application.

Vous pouvez afficher des éléments à l'aide des propriétés suivantes :

• contextSwitcher : prend un objet avec un defaultLabel et une série de routes.
• navigationRoutes : prend une série de routes. Vous pouvez définir des routes imbriquées pour une navigation à plusieurs niveaux. S'il y a trop de routes à afficher, le composant affiche un menu « Plus ».

Composants personnalisés

Utilisez la propriété renderCustomComponent pour ajouter des composants personnalisés à votre sous-en-tête. renderCustomComponent peut intégrer votre composant personnalisé ou une fonction qui affiche votre composant.

Votre composant personnalisé sera placé après vos routes. S'il y a trop de routes et que le menu « Plus » s'affiche, le composant personnalisé reste à l'écran. Notez que vous devez fournir votre propre style pour ce composant.

Composants personnalisés sur mobile

Lorsque vous affichez votre sous-en-tête sur un téléphone portable ou une tablette, les composants personnalisés sont affichés dans le menu latéral. Cette fonctionnalité s'applique uniquement lorsque le sous-en-tête est utilisé dans le cadre d'un plan. Lorsque vous n'utilisez pas de plans, le composant personnalisé n'est pas affiché sur mobile.

Pour consulter des exemples, reportez-vous à Storybook.