Breadcrumb - Fil d'Ariane

Navigation secondaire qui indique la position d'une page dans la hiérarchie du produit.

Component checklist

Statut

Fonctionnel

Code source

Storybook

Dernière version de modification

2.4.0

Disponible depuis la version

1.0.0

Usage


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-breadcrumb>
                                                                                                                                                          <dsa-breadcrumb-item href="/">Page d'accueil</dsa-breadcrumb-item>
                                                                                                                                                          <dsa-breadcrumb-item href="/services">Nos Services</dsa-breadcrumb-item>
                                                                                                                                                          <dsa-breadcrumb-item href="/services/domicile">Service à domicile</dsa-breadcrumb-item>
                                                                                                                                                        </dsa-breadcrumb>
                                                                                                                                                        
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/breadcrumb-item/breadcrumb-item.js'
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/breadcrumb/breadcrumb.js'
                                                                                                                                                          import type { DSABreadcrumb, DSABreadcrumbItem } from '@ds-autonomie/web-components'
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant fil d'Ariane


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import { Component } from '@angular/core';
                                                                                                                                                        import type { DSABreadcrumb, DSABreadcrumbItem } from '@ds-autonomie/web-components'
                                                                                                                                                        import '@ds-autonomie/web-components/dist/components/breadcrumb-item/breadcrumb-item.js'
                                                                                                                                                        import '@ds-autonomie/web-components/dist/components/breadcrumb/breadcrumb.js'
                                                                                                                                                        
                                                                                                                                                        @Component({
                                                                                                                                                          selector: 'app-root',
                                                                                                                                                          templateUrl: './app.component.html',
                                                                                                                                                          styleUrls: ['./app.component.css']
                                                                                                                                                        })
                                                                                                                                                        export class AppComponent {}
                                                                                                                                                        
                                                                                                                                                            

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-breadcrumb>
                                                                                                                                                          <dsa-breadcrumb-item href="/">Page d'accueil</dsa-breadcrumb-item>
                                                                                                                                                          <dsa-breadcrumb-item href="/services">Nos Services</dsa-breadcrumb-item>
                                                                                                                                                          <dsa-breadcrumb-item href="/services/domicile">Service à domicile</dsa-breadcrumb-item>
                                                                                                                                                        </dsa-breadcrumb>
                                                                                                                                                        
                                                                                                                                                            

app.component.html


API

Attributs et propriétés

Méthodes

Slots

Nom

Description

(défaut)

Un ou plusieurs dsa-breadcrumb-item à afficher

Événements