Drawer
The drawer component is designed to add side content to a section of the DOM.
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-drawerCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
Define a container, a drawer, and the page content:
<ts-drawer-container>
<ts-drawer mode="push" posistion="start">
<div>Inside drawer</div>
</ts-drawer>
<ts-drawer-content>
<div>Main content</div>
</ts-drawer-content>
</ts-drawer-container>Backdrop
If hasBackdrop is set to true, users can close the drawer by clicking outside (default is false):
<ts-drawer-container hasBackdrop="true">
<ts-drawer>...</ts-drawer>
</ts-drawer-container>Mode
The mode defines how the page content reacts to the drawer. A drawer can open over the page content (overlay) or push
(push) the content to make room for the drawer (default is overlay):
<ts-drawer [mode]="push">...</ts-drawer>Position
Consumers can specify which side of the container the drawer opens from. The default is start which opens from the
left side of the page. If set to end, it would expand the drawer from right of the page.
<ts-drawer [position]="end">...</ts-drawer>NOTE: An error will be thrown if more than one drawer in a given container has the same position AND push mode set.
Collapsed and expanded sizes
The size of a drawer when it's collapsed and expanded can be customized:
<ts-drawer
[collapsedSize]="2rem"
[expandedSize]="12rem"
>...</ts-drawer>NOTE: collapsedSize defaults to 3.75rem and expandedSize to 12.5rem.
Expand on load
The drawer can be forced to expand on load:
<ts-drawer [isExpanded]="true">...</ts-drawer>Hide shadow when collapsed
When a drawer is expanded, there is box shadow around the drawer. When a drawer is collapsed, if input hideShadowWhenCollapsed set to false and collapseSize greater than 0, there is box shadow shown; otherwise, no box shadow.
<ts-drawer [hideShadowWhenCollapsed]="true">...</ts-drawer>Fixed header and footer
The drawer supports both a header and footer:
<ts-drawer-header>
My header content...
</ts-drawer-header><ts-drawer-footer>
My footer content...
</ts-drawer-footer>Events
Container events
| Event | Description | Payload |
|---|---|---|
backdropClick |
Fired when backdrop is clicked | void |
Drawer events
| Event | Description | Payload |
|---|---|---|
expandedStart |
Fired when the drawer expansion starts | void |
collapsedStart |
Fired when the drawer collapse starts | void |
expandedChange |
Fired when state change ends (animation ends) | boolean |