The drawer is a component that adds collapsible side content to some primary content.
dev utility
The drawer is a component designed to add collapsible side content (often
navigation, though it can be any content) alongside some primary content.
Loading interactive demo...
<dt-drawer-containerclass="drawer"><dt-drawer #draweropened>Drawer Content</dt-drawer>
Main content
</dt-drawer-container><buttondt-button (click)="drawer.toggle()">toggle drawer</button>exportclass DrawerDefaultExample {}
<dt-drawer-container class="drawer">
<dt-drawer #drawer opened>Drawer Content</dt-drawer>
Main content
</dt-drawer-container>
<button dt-button (click)="drawer.toggle()">toggle drawer</button>
export class DrawerDefaultExample {}
Imports
You have to import the DtDrawerModule when you want to use the <dt-drawer>
and <dt-drawer-container>. Note that you need Angular's
BrowserAnimationsModule if you want to have animations or the
NoopAnimationsModule if you don't.
To use the drawer in your template there are two tags. First of all you need the
<dt-drawer-container> that wraps your drawer and the main content. Inside this
container you can put the <dt-drawer> tag. Inside the drawer tag you can put
the content that should be pushed to off-canvas.
Inputs
Name
Type
Default
Description
mode
'side' | 'over'
'side'
The behavior of the drawer, can overlay over or shrink the primary content.
position
'start' | 'end'
'start'
Defines if the drawer is on the left or right side in a container. (A drawer container can only have one drawer per position.)
opened
boolean
false
The actual open state of the drawer.
Outputs
Name
Type
Description
opened
Observable<void>
Event emitted when the drawer has been opened.
closed
Observable<void>
Event emitted when the drawer has been closed.
openChange
EventEmitter<boolean>
Emits when the drawer open state changes. Emits a boolean value for the open sate (true for open, false for close).
Methods
The following methods are on the DtDrawer class:
Name
Description
Return value
open
Opens the drawer
void
close
Closes the drawer
void
toggle
toggles the drawer
void
The container class DtDrawerContainer has follwing methods:
Name
Description
Return value
open
Opens all the drawers in the container
void
close
Closes all the drawers in the container
void
Sidenav
The sidenav components is designed to add side content to a fullscreen app. To
set up a sidenav we use two components: dt-sidenav-container which act as a
structural container for our content, sidenav and dt-sidenav which represents
the added side content. The component is always at the root of the page.
Basic example
<dt-sidenav-container><dt-sidenavmode="side"opened>
Sidenav content
</dt-sidenav>
Main content
</dt-sidenav-container>
Example with custom header
<dt-sidenav-container><dt-sidenavmode="side"opened]><dt-sidenav-header>
Title
</dt-sidenav-header>
Sidenav content
</dt-sidenav>
Main content
</dt-sidenav-container>
<dt-drawer-containerclass="drawer"><dt-drawer #outerDrawermode="side">
Outer drawer content
</dt-drawer><h2>Hosting units</h2><p>There can be some text before the second drawer will appear</p><dt-drawer-containerclass="inner-drawer"><dt-drawer #innerDrawermode="over"position="end">
Inner drawer content
</dt-drawer>
I'm the content of the
<b>inner</b>
drawer
<buttondt-button (click)="innerDrawer.toggle()">
Toggle inner drawer
</button></dt-drawer-container>
I'm the content of the
<b>outer</b>
drawer
</dt-drawer-container><buttondt-button (click)="outerDrawer.toggle()">
Toggle outer drawer
</button>exportclass DrawerNestedExample {}
<dt-drawer-container class="drawer">
<dt-drawer #outerDrawer mode="side">
Outer drawer content
</dt-drawer>
<h2>Hosting units</h2>
<p>There can be some text before the second drawer will appear</p>
<dt-drawer-container class="inner-drawer">
<dt-drawer #innerDrawer mode="over" position="end">
Inner drawer content
</dt-drawer>
I'm the content of the
<b>inner</b>
drawer
<button dt-button (click)="innerDrawer.toggle()">
Toggle inner drawer
</button>
</dt-drawer-container>
I'm the content of the
<b>outer</b>
drawer
</dt-drawer-container>
<button dt-button (click)="outerDrawer.toggle()">
Toggle outer drawer
</button>
export class DrawerNestedExample {}