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.
position: relative
and overflow-x: hidden
properties otherwise the drawer won't be able to work correctly.
Exported as: fuseDrawer
Here's the basic usage of the fuse-drawer
:
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. | - |
The FuseDrawerService
can be used to remotely accessing to drawers using their name properties to control them: