mirror of
https://github.com/bitwarden/browser
synced 2025-12-21 02:33:46 +00:00
898d514d5b
Add new bit-header component to libs/components with: - Header component with left, center, and right content projection - Storybook stories for documentation - Export from component library index
36 lines
1.4 KiB
HTML
36 lines
1.4 KiB
HTML
<header
|
|
class="-tw-mt-6 -tw-mx-8 tw-mb-3 tw-flex tw-flex-col tw-py-6 tw-px-8 has-[[data-tabs]:not(:empty)]:tw-border-0 has-[[data-tabs]:not(:empty)]:tw-border-b has-[[data-tabs]:not(:empty)]:tw-border-solid has-[[data-tabs]:not(:empty)]:tw-border-secondary-100 has-[[data-tabs]:not(:empty)]:tw-bg-background-alt has-[[data-tabs]:not(:empty)]:tw-pb-0"
|
|
>
|
|
<div class="tw-flex">
|
|
<div class="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
|
|
<ng-content select="[slot=breadcrumbs]"></ng-content>
|
|
<h1
|
|
bitTypography="h1"
|
|
noMargin
|
|
class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
|
|
[title]="title()"
|
|
>
|
|
<div class="tw-truncate">
|
|
@if (icon()) {
|
|
<i class="bwi {{ icon() }}" aria-hidden="true"></i>
|
|
}
|
|
|
|
{{ title() }}
|
|
</div>
|
|
<div><ng-content select="[slot=title-suffix]"></ng-content></div>
|
|
</h1>
|
|
</div>
|
|
<div class="tw-ml-auto tw-flex tw-flex-col tw-gap-4">
|
|
<div class="tw-flex tw-min-w-max tw-items-center tw-justify-end tw-gap-2">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
<div class="tw-ml-auto empty:tw-hidden">
|
|
<ng-content select="[slot=secondary]"></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-tabs class="-tw-mx-4 -tw-mb-px empty:tw-hidden">
|
|
<ng-content select="[slot=tabs]"></ng-content>
|
|
</div>
|
|
</header>
|