front: composant <app-breadcrumb> mutualisé (dédup markup DSFR)
Extrait le fil d'Ariane DSFR dupliqué dans browse/api-detail/upload vers un composant présentationnel piloté par une liste d'items. Chaque page construit ses items (computed pour browse/api-detail, statique pour upload). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
/** Un maillon du fil d'Ariane. `link` absent => élément courant (aria-current). */
|
||||
export interface BreadcrumbItem {
|
||||
label: string;
|
||||
link?: string | unknown[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Fil d'Ariane DSFR générique (présentationnel). Chaque page construit sa liste
|
||||
* d'items et la passe ; le dernier item sans `link` est marqué comme courant.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-breadcrumb',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<nav class="fr-breadcrumb fr-mb-3w" aria-label="vous êtes ici">
|
||||
<ol class="fr-breadcrumb__list">
|
||||
@for (item of items(); track $index) {
|
||||
<li>
|
||||
@if (item.link) {
|
||||
<a class="fr-breadcrumb__link" [routerLink]="item.link">{{ item.label }}</a>
|
||||
} @else {
|
||||
<a class="fr-breadcrumb__link" aria-current="page">{{ item.label }}</a>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
</nav>
|
||||
`,
|
||||
})
|
||||
export class BreadcrumbComponent {
|
||||
items = input.required<BreadcrumbItem[]>();
|
||||
}
|
||||
Reference in New Issue
Block a user