1
0
mirror of https://github.com/bitwarden/browser synced 2026-01-27 14:53:44 +00:00
Files
browser/libs/components/src/breadcrumbs/breadcrumbs.component.html
Bryan Cunningham 1578886a5f [CL-984] link style updates (#18360)
* WIP

* add new link styles

* update link stories

* skip default screenshot as variations are covered in other stories

* updated docs and story background

* make default the default linkType value

* remove references to primary link type in CL

* use better bg colors in stories

* remove duplicate linkType

* update aria-disabled text to use new palette

* add back primary link type to story

* fix capitolization

* add backticks to variant names in docs

* remove important from link styles

* fix generic selector to find correct button

* fix capitolization

* mark variants as deprecated in docs

* fix link hover text colors
2026-01-21 10:45:49 -05:00

83 lines
2.4 KiB
HTML

@for (breadcrumb of beforeOverflow(); track breadcrumb; let last = $last) {
@if (breadcrumb.route(); as route) {
<a
bitLink
class="tw-my-2 tw-inline-block"
[routerLink]="route"
[queryParams]="breadcrumb.queryParams()"
[queryParamsHandling]="breadcrumb.queryParamsHandling()"
>
<ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
</a>
} @else {
<button
type="button"
bitLink
class="tw-my-2 tw-inline-block"
(click)="breadcrumb.onClick($event)"
>
<ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
</button>
}
@if (!last) {
<i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
}
}
@if (hasOverflow()) {
@if (beforeOverflow().length > 0) {
<i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
}
<button
type="button"
bitIconButton="bwi-ellipsis-h"
[bitMenuTriggerFor]="overflowMenu"
size="small"
[label]="'moreBreadcrumbs' | i18n"
></button>
<bit-menu #overflowMenu>
@for (breadcrumb of overflow(); track breadcrumb) {
@if (breadcrumb.route(); as route) {
<a
bitMenuItem
[routerLink]="route"
[queryParams]="breadcrumb.queryParams()"
[queryParamsHandling]="breadcrumb.queryParamsHandling()"
>
<ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
</a>
} @else {
<button type="button" bitMenuItem (click)="breadcrumb.onClick($event)">
<ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
</button>
}
}
</bit-menu>
<i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
@for (breadcrumb of afterOverflow(); track breadcrumb; let last = $last) {
@if (breadcrumb.route(); as route) {
<a
bitLink
class="tw-my-2 tw-inline-block"
[routerLink]="route"
[queryParams]="breadcrumb.queryParams()"
[queryParamsHandling]="breadcrumb.queryParamsHandling()"
>
<ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
</a>
} @else {
<button
type="button"
bitLink
class="tw-my-2 tw-inline-block"
(click)="breadcrumb.onClick($event)"
>
<ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
</button>
}
@if (!last) {
<i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
}
}
}