Storybook
-
Theme
-
-
-
-
Light tone
-
-
-
-
-
Dark tone
-
-
-
-
-
-
Reset to default
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav
Drawer
Generates a drawer with configuration options for backdrop, position and behavior.
-
Documentation
- drawer
Basic
Content
Content
Content
Content
Content
Last
Content width
Content
Content
Content
Content
Content
Last
Open at far side
Content
Content
Content
Content
Content
Last
Backdrop
Content
Content
Content
Content
Content
Last
Light backdrop, fast
Content
Content
Content
Content
Content
Last
Transition duration
Content
Content
Content
Content
Content
Last
Modal drawer
Content
Content
Content
Content
Content
Last
Modal drawer, not escapable
Content
Content
Content
Content
Content
Last
Focus specific element after opening
Focus originating button after closing
Content
Content
Content
Content
Content
Last
Local drawer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis
qui facit eorum claritatem. Investigationes demonstraverunt lectores
legere me lius quod ii legunt saepius. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima
et quinta decima. Eodem modo typi, qui nunc nobis videntur parum
clari, fiant sollemnes in futurum.
Content
Content
Content
Content
Content
Last
Push drawer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis
qui facit eorum claritatem. Investigationes demonstraverunt lectores
legere me lius quod ii legunt saepius. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima
et quinta decima. Eodem modo typi, qui nunc nobis videntur parum
clari, fiant sollemnes in futurum.
Content
Content
Content
Content
Content
Last
Navigation drawer
This drawer is persisted across LiveViews, using the URL to keep store the drawer's
show_state
. The Drawer hook scrolls the anchored sections into view.
Open
-
Stories
- Basic
- Backdrop
- Keeping form state
Keeping form state
Selected: -
-
On this page
- Top of page
- Documentation
-
Stories
- Basic
- Content width
- Open at far side
- Backdrop
- Light backdrop, fast
- Transition duration
- Modal drawer
- Modal drawer, not escapable
- Focus specific element after opening
- Focus originating button after closing
- Local drawer
- Push drawer
- Navigation drawer
- Keeping form state
- Top of page
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
-
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav