<vaadin-drawer-toggle>
The Drawer Toggle component controls the drawer in App Layout component.
- Category
- Overlays
- Built with
Lit- Library
Vaadin
- Author
Vaadin
- Package
-
@vaadin/app-layout - Component size
- 5.5 kB JS (minified + gzipped, JS includes dependencies beyond the library)
- Library size
- 19.9 kB JS (shared by every Vaadin component, loaded once per page)
- Popular
- 3 out of 5
- Downloads
- 59,776/week · jsDelivr 3,402 hits/month (whole @vaadin/app-layout package)
- Latest stable version
25.3.2- Last published
- Component last changed
- (in
25.3.0) - License
- Apache-2.0
The Drawer Toggle component controls the drawer in App Layout component.
<vaadin-app-layout>
<vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
</vaadin-app-layout>
Styling
The following shadow DOM parts are available for styling:
| Part name | Description |
|---|---|
icon |
The icon element |
The following state attributes are available for styling:
| Attribute | Description |
|---|---|
focus-ring |
Set when the element is focused using the keyboard |
focused |
Set when the element is focused |
The following custom CSS properties are available for styling:
| Custom CSS property |
|---|
--vaadin-button-background |
--vaadin-button-border-color |
--vaadin-button-border-radius |
--vaadin-button-border-width |
--vaadin-button-font-size |
--vaadin-button-line-height |
--vaadin-button-margin |
--vaadin-button-padding |
--vaadin-button-text-color |
--vaadin-icon-size |
See Styling Components documentation.
Attributes
aria-labeldisabledtheme