Drawer | Barista Design System

The Dynatrace 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-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 {}

<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.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DtDrawerModule } from '@dyntrace/angular-components';

@NgModule({
  imports: [BrowserAnimationsModule, DtDrawerModule],
})
class MyModule {}

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`

Examples

Over laying mode Drawer Example

Loading interactive demo...

<dt-drawer-container class="drawer"> <dt-drawer #drawer mode="over" position="start"> Drawer Content </dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="drawer.toggle()">toggle drawer</button>

export class DrawerOverExample {}

Dynamic Drawer Example

Loading interactive demo...

<dt-drawer-container class="drawer"> <dt-drawer *ngIf="drawerPresent" #drawer [mode]="mode" [position]="position" opened > Drawer Content </dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="addOrRemoveDrawer()">add / remove drawer</button> <button dt-button color="secondary" [disabled]="!drawerPresent" (click)="toggle()" > toggle drawer </button> <dt-form-field> <dt-label>Select drawer mode:</dt-label> <dt-select [(value)]="mode"> <dt-option value="side" default>Side Mode</dt-option> <dt-option value="over">Over mode</dt-option> </dt-select> </dt-form-field> <dt-form-field> <dt-label>Select drawer position:</dt-label> <dt-select [(value)]="position"> <dt-option value="start">Start</dt-option> <dt-option value="end">End</dt-option> </dt-select> </dt-form-field>

export class DrawerDynamicExample { drawerPresent = false; mode = 'side'; position = 'start'; @ViewChild('drawer', { static: true }) drawer: DtDrawer; addOrRemoveDrawer(): void { this.drawerPresent = !this.drawerPresent; } toggle(): void { this.drawer.toggle(); } }

Nested Drawer Example

Loading interactive demo...

<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 {}