Documentation
Fuse Components
Components

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

import { FuseDrawerModule } from '@fuse/components/drawer';

## Usage

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

<fuse-drawer [fixed]="true" [mode]="isScreenSmall ? 'over' : 'side'" [name]="'rightDrawer'" [opened]="!isScreenSmall" [position]="'right'" [transparentOverlay]="false"> </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

export type FuseDrawerMode = | 'over' | 'side'; export type FuseDrawerPosition = | 'left' | 'right';

## 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
<button mat-flat-button [color]="'primary'" (click)="toggleDrawerMode();"> Toggle drawer mode </button> <button class="ml-4" mat-flat-button [color]="'primary'" (click)="toggleDrawerOpen();"> Toggle drawer open </button> <div class="relative flex overflow-hidden border mt-8 min-h-80"> <fuse-drawer [name]="'leftDrawer'" [opened]="drawerOpened" [mode]="drawerMode"> <div class="p-4"> Left drawer </div> </fuse-drawer> <div class="flex-auto bg-gray-100 p-4"> Some content </div> <!-- Right drawer must be positioned after the content <fuse-drawer [name]="'leftDrawer'" [opened]="true" [position]="'right'" [mode]="'side'"> <div class="p-4"> Right drawer </div> </fuse-drawer> --> </div> // Set the defaults this.drawerMode = 'side'; this.drawerOpened = true; /** * Toggle the drawer mode */ toggleDrawerMode(): void { this.drawerMode = this.drawerMode === 'side' ? 'over' : 'side'; } /** * Toggle the drawer open */ toggleDrawerOpen(): void { this.drawerOpened = !this.drawerOpened; } /** * Drawer opened changed * * @param opened */ drawerOpenedChanged(opened: boolean): void { this.drawerOpened = opened; }