Name EN
Component checklist
Usage
<dsa-page-header>
<dsa-breadcrumb slot="breadcrumb">
<dsa-breadcrumb-item href="#">Page d'accueil</dsa-breadcrumb-item>
<dsa-breadcrumb-item href="#">Nos Services</dsa-breadcrumb-item>
<dsa-breadcrumb-item href="#">Page actuelle</dsa-breadcrumb-item>
</dsa-breadcrumb>
<a slot="backlink" class="dsa-link dsa-link--with-prefix" href="#">
<dsa-icon slot="prefix" name="arrow_back"></dsa-icon>
Retour
</a>
<dsa-icon slot="title-icon" name="insert_photo"></dsa-icon>
<h1 slot="title">Titre</h1>
<dsa-tag slot="tags" variant="blue-200" label="Tag"></dsa-tag>
<p slot="subtitle">Sous titre</p>
<p slot="secondary-text">Texte secondaire</p>
<dsa-button slot="actions" variant="secondary">Action</dsa-button>
<dsa-button slot="actions" variant="secondary">Action</dsa-button>
<div
style="display:flex; justify-content:center; align-items:center;padding:1.5rem;border: 2px dashed #540ABD;background: #F6F1FC;"
>
Votre contenu additionel
</div>
</dsa-page-header>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/page-header/page-header.js';
import type { DSAPageHeader } from '@ds-autonomie/web-components';
</script>
API
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
mobile |
Rend le composant en mode mobile (avec des styles différents) si défini à true |
boolean |
false |
|
reduced |
Rend le composant en mode réduit (affichage limité) si défini à true |
boolean |
false |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
breadcrumb |
Utilisé pour ajouter fil d'ariane dans la partie du haut avec des composants dsa-breadcrumb et dsa-breadcrumb-item |
|
backlink |
Utilisé pour ajouter un lien vers la page précédente |
|
title-icon |
Utilisé pour ajouter un icône à gauche du titre |
|
title |
Utilisé pour définir le titre de la page |
|
tags |
Utilisé pour ajouter des éléments dsa-tag à droite du titre |
|
subtitle |
Utilisé pour ajouter un sous-titre |
|
secondary-text |
Utilisé pour ajouter un texte additionnel |
|
actions |
Utilisé pour ajouter des actions dans la partie droite de l'en-tête |
|
(défaut) |
Utilisé pour ajouter du contenu additionnel en dessous du bloc de titre |
Ce composant ne contient pas de slot
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
Personnalisation
Vous pouvez modifier les variables css suivantes au niveau du dsa-page-header afin d'outrepasser les valeurs par défaut du DSA :
- --page-header-max-width
- --page-header-padding-inline
Si utilisés ensemble, aligner les contenus des dsa-header, dsa-page-header et dsa-tab-group.
Utilisation avec des onglets
Vous pouvez ajouter des onglets sous l’en-tête de page.
Pour cela, ajoutez des éléments dsa-tab-group, dsa-tab, dsa-tab-panel en dessous du dsa-page-header, et ajouter un attribut below-page-header au dsa-tab-group.
La documentation des onglets se trouve ici.