Statut
Component checklist
Usage
<dsa-header-modern>
<a slot="site-name" href="/" aria-label="Nom du site, aller à la page d'accueil">Nom du site</a>
</dsa-header-modern>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/header-modern/header-modern.js';
import type { DSAHeaderModern } from '@ds-autonomie/web-components';
</script>
Exemple d'utilisation
Structure
Il se compose en trois sections accessibles à travers des slots:
- Les liens externes au dessus (slot="external-links") qui ne sont affichés que en mode “desktop”.
- La partie "marque", avec un logo public ou pro au choix, un deuxième logo (slot="second-logo"), le titre du site ou service (slot="site-name").
- Une partie contenant un champ de recherche (slot="search"), et différentes actions disponibles pour l'utilisateur (slot par défaut).
- Une barre de navigation (slot="navbar").
Le lien placé dans le slot="site-name" pour le titre crée une zone cliquable englobant toute la partie "marque".
Les autres sections sont facultatives.
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
firstLogo first-logo |
Choix du logo public ou pro |
public pro |
public
|
|
mobile |
Rend le composant en mode mobile (avec des styles différents) si défini à true |
boolean |
false |
|
searchExpanded search-expanded |
Affiche l'interface de recherche. Est mis à jour automatiquement lorsque dsa-header-search émet les évènements dsa-expand et dsa-collapse |
boolean
|
false |
Slots
|
Nom |
Description |
|---|---|
|
external-links |
Utilisé pour ajouter des liens externes dans la partie du haut avec des composants dsa-header-external-link |
|
second-logo |
Utilisé pour ajouter un deuxième logo |
|
site-name |
Utilisé pour définir le titre du site ou service. Ajoutez un lien vers votre page d'accueil. |
|
search |
Utilisé pour ajouter un champ de recherche avec un composant dsa-header-search |
|
(défaut) |
Utilisé pour ajouter des actions dans la partie droite de l'en-tête |
|
navbar |
Utilisé pour ajouter une barre de navigation en mode desktop |
Personnalisation
Vous pouvez modifier les variables css suivantes au niveau du dsa-header afin d'outrepasser les valeurs par défaut du DSA :
- --header-max-width
- --header-padding-inline
Contenu
La liste ci-dessous répertorie les composants associés à l’en-tête qui peuvent être utilisés pour afficher du contenu: