mirror of
https://github.com/bitwarden/browser
synced 2026-02-25 17:13:24 +00:00
b8a1856fc6
* Revert "Revert "[CL-622][CL-562][CL-621][CL-632] various drawer improvements …"
This reverts commit 4b32d1f9dd.
* fix virtual scroll: add .cdk-virtual-scrollable to scroll viewport target
* remove references to main el
* use directives instead of querySelector (#14950)
* remove references to main el
* wip
* banish querySelector to the shadow realm
* revert apps/ files
* Add virtual scrolling docs
Co-authored-by: Vicki League <vleague@bitwarden.com>
* add jsdoc
* run eslint
* fix skip links bug
* Update libs/components/src/layout/layout.component.ts
Co-authored-by: Vicki League <vleague@bitwarden.com>
* update tab handler
* only run on tab
* fix lint
* fix virtual scroll issue due to Angular 19 upgrade (#15193)
thanks Vicki
---------
Co-authored-by: Vicki League <vleague@bitwarden.com>
123 lines
3.4 KiB
Plaintext
123 lines
3.4 KiB
Plaintext
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./drawer.stories";
|
|
|
|
import { DrawerOpen as KitchenSink } from "../stories/kitchen-sink/kitchen-sink.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { DrawerComponent } from "@bitwarden/components";
|
|
```
|
|
|
|
# Drawer
|
|
|
|
**Note: `bit-drawer` is deprecated. Use `bit-dialog` and `DialogService.openDrawer(...)` instead.**
|
|
|
|
A drawer is a panel of supplementary content that is adjacent to the page's main content.
|
|
|
|
<Primary />
|
|
|
|
<Controls />
|
|
|
|
## Usage
|
|
|
|
A `bit-drawer` in a template will not render inline, but rather will render adjacent to the main
|
|
page content.
|
|
|
|
```html
|
|
<bit-drawer [open]="true">
|
|
<bit-drawer-header title="Hello Bitwaaaaaaaaaaaaaaaaaaaaaaaaarden!"></bit-drawer-header>
|
|
<bit-drawer-body>
|
|
<p>Lorem ipsum dolor...</p>
|
|
</bit-drawer-body>
|
|
</bit-drawer>
|
|
```
|
|
|
|
`bit-drawer` must be a descendant of `bit-layout`, but it does not need to be a direct descendant.
|
|
|
|
## Header and body
|
|
|
|
Header and body content can be provided with the `bit-drawer-header` and `bit-drawer-body`
|
|
components, respectively.
|
|
|
|
A title can be passed to the header by input:
|
|
`<bit-drawer-header title="Foobar"></bit-drawer-header>`
|
|
|
|
Custom content can be rendered before the title with the header's `start` slot:
|
|
|
|
```html
|
|
<bit-drawer-header title="Foobar">
|
|
<i slot="start" class="bwi bwi-key" aria-hidden="true"></i>
|
|
</bit-drawer-header>
|
|
```
|
|
|
|
## Opening and closing
|
|
|
|
`bit-drawer` opens when its `open` input is `true`:
|
|
|
|
```html
|
|
<bit-drawer [open]="true">...</bit-drawer>
|
|
```
|
|
|
|
Note: Model inputs do not support implicit boolean transformation (see Angular reasoning
|
|
[here](https://github.com/angular/angular/issues/55166#issuecomment-2032150999)). `open` must be
|
|
bound explicitly `<bit-drawer [open]="true">` instead of just `<bit-drawer open>`.
|
|
|
|
Buttons can be made to open/toggle drawers by referencing a template variable, or by manipulating
|
|
state that is bound to `open`:
|
|
|
|
```html
|
|
<button (click)="myDrawer.toggle()"></button> <bit-drawer #myDrawer>...</bit-drawer>
|
|
```
|
|
|
|
For convenience, close buttons can be created _inside_ the drawer with the `bitDrawerClose`
|
|
directive:
|
|
|
|
```html
|
|
<bit-drawer>
|
|
<button type="button" bitDrawerClose>Close</button>
|
|
</bit-drawer>
|
|
```
|
|
|
|
## Multiple Drawers
|
|
|
|
Only one drawer can be open at a time, and they do not stack. If a drawer is already open, opening
|
|
another will close and replace the one already open.
|
|
|
|
<Canvas of={stories.MultipleDrawers} />
|
|
|
|
## Headless
|
|
|
|
Omitting `bit-drawer-header` and `bit-drawer-body` allows for fully customizable content.
|
|
|
|
<Canvas of={stories.Headless} />
|
|
|
|
## Accessibility
|
|
|
|
- The drawer should contain an h2 element. If you are using `bit-drawer-header`, this is created for
|
|
you via the `title` input:
|
|
|
|
```html
|
|
<bit-drawer>
|
|
<h2 bitTypography="h2">Hello world!</h2>
|
|
</bit-drawer>
|
|
|
|
<!-- or -->
|
|
|
|
<bit-drawer>
|
|
<bit-drawer-header title="Hello world!"></bit-drawer-header>
|
|
</bit-drawer>
|
|
```
|
|
|
|
- The ARIA role of the drawer can be set with the `role` attribute:
|
|
- [complementary](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role)
|
|
(default)
|
|
- For drawers that contain content that is complementary to the page's main content.
|
|
- [navigation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role)
|
|
- For drawers that primary contain links to other content.
|
|
|
|
## Kitchen Sink
|
|
|
|
<Canvas of={KitchenSink} autoplay />
|