Statut
Component checklist
Usage
<dsa-footer>
<dsa-footer-sitemap slot="footer-top" vertical>
<h3 slot="label">Catégorie</h3>
<dsa-footer-sitemap-item>
<a href="#" class="dsa-link dsa-link--on-sitemap">Lien</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a href="#" class="dsa-link dsa-link--on-sitemap">Lien</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a href="#" class="dsa-link dsa-link--on-sitemap">Lien</a>
</dsa-footer-sitemap-item>
</dsa-footer-sitemap>
<section slot="footer-center">
<dsa-footer-content-block>
<h3 slot="title">About</h3>
<p slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
vulputate libero et velit interdum, ac aliquet odio mattis.
</p>
</dsa-footer-content-block>
<dsa-footer-sitemap>
<dsa-footer-sitemap-item>
<a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
</dsa-footer-sitemap>
</section>
<section slot="footer-bottom">
<dsa-footer-sitemap>
<dsa-footer-sitemap-item
><a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item
><a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item
><a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
</dsa-footer-sitemap>
<dsa-footer-mandatory-mentions>
<p slot="text-left">Copyright 2024, tous droits réservés</p>
<p slot="text-right">version 1.1.0, créée le 01/01/2024 à 12:00</p>
</dsa-footer-mandatory-mentions>
</section>
</dsa-footer>
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="#" class="dsa-link dsa-link--on-sitemap">Lien</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a href="#" class="dsa-link dsa-link--on-sitemap">Lien</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a href="#" class="dsa-link dsa-link--on-sitemap">Lien</a>
</dsa-footer-sitemap-item>
</dsa-footer-sitemap>
<section slot="footer-center">
<dsa-footer-content-block>
<h3 slot="title">About</h3>
<p slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
vulputate libero et velit interdum, ac aliquet odio mattis.
</p>
</dsa-footer-content-block>
<dsa-footer-sitemap>
<dsa-footer-sitemap-item>
<a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item>
<a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
</dsa-footer-sitemap>
</section>
<section slot="footer-bottom">
<dsa-footer-sitemap>
<dsa-footer-sitemap-item
><a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item
><a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
<dsa-footer-sitemap-item
><a
href="#"
class="dsa-link dsa-link--standalone dsa-link--with-prefix"
>
<dsa-icon name="open_in_new"></dsa-icon>
Lien
</a>
</dsa-footer-sitemap-item>
</dsa-footer-sitemap>
<dsa-footer-inline-divider>
<p slot="text-left">Copyright 2024, tous droits réservés</p>
<p slot="text-right">version 1.1.0, créée le 01/01/2024 à 12:00</p>
</dsa-footer-inline-divider>
</section>
</dsa-footer>
- app.component.ts
import { Component } from '@angular/core';
import {
DSAFooter,
DSAFooterContentBlock,
DSAFooterMandatoryMentions,
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';
import '@ds-autonomie/web-components/dist/components/footer-mandatory-mentions/footer-mandatory-mentions.js';
import '@ds-autonomie/web-components/dist/components/footer-content-block/footer-content-block.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
Nous avons développés des sous-composants pour le pied de page, vous permettant d'enrichir le contenu de celui-ci. Mais vous êtes libre d'utiliser vos propres composants.
Structure
Il se compose en trois sections accessibles à travers des slots:
- slot="footer-top" La section au-dessus, généralement utilisé pour la navigation sur le site
- slot="footer-center" La section du centre, que l'on peut utilisé pour ajouter du contenu informatif, des liens externes.
- slot="footer-bottom" La section du bas, qui peut servir à afficher les différents liens aux obligations légales, une mention de la licence.
- slot="second-logo" Deuxième logo optionnel, qui viendra se placer à droite du logo du Service public de l'autonomie.
Le logo du site est toujours présent par défaut. Les autres sections sont facultatives.
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
|
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 |
|---|---|
|
footer-bottom |
Utilisé pour définir des éléments dans la section du bas, à droite du logo |
|
footer-center |
Utilisé pour définir des éléments dans la section du milieu |
|
footer-top |
Utilisé pour définir des éléments dans la section du haut |
|
second-logo |
Deuxième logo optionnel |
É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-footer afin d'outrepasser les valeurs par défaut du DSA :
- --footer-max-width
- --footer-padding-inline
Références
Voici la liste des références vers les sous-composants du pied de page:
- <dsa-footer-sitemap>
- <dsa-footer-content-block>
- <dsa-footer-mandatory-mentions>