Drawers

The mdcDrawer and mdcDrawerContainer directives are used to create different kinds of drawers.

Slidable Drawer Demo

Persistent Drawer

Persistent Drawer

Click the menu icon above to open the drawer, or use the controls below:




Permanent Drawer Demo

Permanent Drawer

Permanent Drawer

Customize the drawer:


Permanent Drawer below Toolbar Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

API

Directive: MdcDrawerToolbarSpacerDirective

Selector: [mdcDrawerToolbarSpacer]

A toolbar spacer is an optional first child of an mdcDrawer. A toolbar spacer adds space to the drawer in the same amount of the space that the toolbar takes up in your application. This is useful for visual alignment and consistency. Note that you can place content inside the toolbar spacer.

Directive: MdcDrawerHeaderDirective

Selector: [mdcDrawerHeader]

A toolbar header is an optional first child of an mdcDrawer. A toolbar header adds space to create a 16:9 drawer header. It's often used for user account selection or profile information.

To place content inside a toolbar header, add a child element with the mdcDrawerHeaderContent directive.

Directive: MdcDrawerHeaderContentDirective

Selector: [mdcDrawerHeaderContent]

Directive for the content of a drawer header. This should be the child of an mdcDrawerHeader directive. The content of the header will be bottom aligned.

Directive: MdcDrawerContentDirective

Selector: [mdcDrawerContent]

Directive for the drawer content. You would typically also apply the mdcList or mdcListGroup directive to the drawer content (see the examples).

Directive: MdcDrawerDirective

Selector: [mdcDrawer]

A standalone mdcDrawer is a permanent drawer. A permanent drawer is always open, sitting to the side of the content. It is appropriate for any display size larger than mobile.

To make a drawer that can be opened/closed, wrap the mdcDrawer inside an mdcDrawerContainer. That makes the drawer a persistent or temporary drawer. See MdcDrawerContainerDirective for more information.

Directive: MdcDrawerContainerDirective

Selector: [mdcDrawerContainer]

Wrap an mdcDrawer inside a mdcDrawerContainer to make it a persistent or temporary drawer. Persistent and temporary drawers are slideable: they can be opened or closed by the user, or by code.

PropertyDescription
@Output()
openChange
EventEmitter<boolean>

Event emitted when the drawer is opened or closed. The event value will be true when the drawer is opened, and false when the drawer is closed.

@Input()
mdcDrawerContainer
'persistent' | 'temporary' | null

Set the type of drawer. Either persistent or temporary. The default (when no value given) is persistent. Please note that a third type of drawer exists: the permanent drawer. But a permanent drawer is created by not wrapping your mdcDrawer in a mdcDrawerContainer.

@Input()
open
any

Input to open (assign value true) or close (assign value false) the drawer.