Drawer

fuse-drawer is a simple drawer component that can be programmed in various ways. The main difference between Angular Material's mat-drawer component is that the fuse-drawer can be placed anywhere on the DOM and it doesn't have to wrap the content like mat-drawer.

Since fuse-drawer works with absolute positioning by default, the parent of the drawer must have position: relative and overflow-x: hidden properties otherwise the drawer won't be able to work correctly.

Exported as: fuseDrawer

Module

Usage

Here's the basic usage of the fuse-drawer:

Properties

Name Description Default
@Input()
fixed: boolean
Whether the position of the drawer is fixed or absolute. false
@Input()
mode: FuseDrawerMode
over mode can be used to place the drawer on top of the content and side mode can be used to push the content and place the drawer next to it. side
REQUIRED
@Input()
name: string
Unique name of the drawer. Required for drawer to work correctly. -
@Input()
opened: boolean
Whether the drawer is opened. Only works with over mode. false
@Input()
position: FuseDrawerPosition
Position of the drawer. left
@Input()
transparentOverlay: boolean
Whether the overlay of the drawer is transparent. Only works with over mode. false
@Output()
modeChanged: FuseNavigationMode
An event emitted after the mode of the navigation changed. -
@Output()
openedChanged: boolean
An event emitted after the opened status of the drawer changed. -
@Output()
positionChanged: FuseNavigationPosition
An event emitted after the position of the drawer changed. -

Type aliases

Service

The FuseDrawerService can be used to remotely accessing to drawers using their name properties to control them:

Example
Left drawer
Current mode: {{drawerMode}}
Some content