Statut
-
Component checklist
Usage
Il est recommandé d'utiliser le composant <dsa-footer-sitemap> au sein d'un pied de page. Veuillez vous référer à la documentation du pied de page ici. Ce composant est facultatif. Il a pour but d'enrichir le pied de page d'un contenu avec un visuel spécifique.
Exemple d'intégration du pied de page sur différents framework:
- app.component.html
<dsa-footer>
<dsa-footer-sitemap slot="footer-top" vertical>
<h3 slot="label">Catégorie</h3>
<dsa-footer-sitemap-item>
<a href="#">Lien</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a href="#">Lien</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a href="#">Lien</a>
</dsa-footer-sitemap-item>
</dsa-footer-sitemap>
</dsa-footer>
- app.component.ts
import { Component } from '@angular/core';
import {
DSAFooter,
DSAFooterSitemap,
DSAFooterSitemapItem
} from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/footer/footer.js';
import '@ds-autonomie/web-components/dist/components/footer-sitemap/footer-sitemap.js';
import '@ds-autonomie/web-components/dist/components/footer-sitemap-item/footer-sitemap-item.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
Structure
À la manière des éléments HTML <ul> et <li>.
Le composant <dsa-footer-sitemap> inclut un emplacement pour le titre ainsi que d'une liste <ul>, tandis que le composant <dsa-footer-sitemap-item> représente un élément de liste <li>.
Ces deux composants sont complémentaires et fonctionnent ensemble pour constituer la navigation du pied de page.
API
<dsa-footer-sitemap>
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
alignLinks align-links |
Permet de définir l'alignement des liens présentés |
'left' | 'center' | 'right' |
'left' |
|
vertical
|
Activez cette option pour mettre le composant en mode vertical. |
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 |
|---|---|
|
(défaut) |
Le contenu principal, généralement une liste de dsa-footer-sitemap-item |
|
label |
Le label de la liste de lien. Si le slot n'est pas utilisé, ajouter un aria-label au dsa-footer-sitemap |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
<dsa-footer-sitemap-item>
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
Ce composant n’a pas d’attribut
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 |
|---|---|
|
(défaut) |
Le contenu principal. Généralement un lien. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
Références
Voici la liste des références vers les composants liés du pied de page: