Blox Material v1.0.0-beta.3

Drawers

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

Drawer

Dismissible Drawer

Dismissible Drawer

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




Drawer below Toolbar

Dismissible Drawer

Dismissible Drawer

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



API

Directive: MdcDrawerTitleDirective

Selector: [mdcDrawerTitle]

Directive: MdcDrawerSubtitleDirective

Selector: [mdcDrawerSubtitle]

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: 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: MdcDrawerScrimDirective

Selector: [mdcDrawerScrim]

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.

Property Description
@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. (When this event is triggered, the drawer is starting to open/close, but the animation may not have fully completed yet)

@Output()
afterOpened
EventEmitter<void>

Event emitted after the drawer has fully opened. When this event is emitted the full opening animation has completed, and the drawer is visible.

@Output()
afterClosed
EventEmitter<void>

Event emitted after the drawer has fully closed. When this event is emitted the full closing animation has completed, and the drawer is not visible anymore.

@Input()
mdcDrawer
'permanent' | 'dismissible' | 'modal'

Set the type of drawer. Either permanent, dismissible, or modal. 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
boolean

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

Directive: MdcDrawerAppContent

Selector: [mdcDrawerAppContent]

Use this directive for marking the sibling element after a dismissible mdcDrawer. This will apply styling so that the open/close animations work correctly.

Property Description
@Input()
mdcDrawerAppContent
boolean

Set this to false to disable the styling for sibbling app content of a dismissible drawer. This is typically only used when your mdcDrawer type is dynamic. In those cases you can disable the mdcDrawerAppContent when you set your drawer type to anything other than dismissible.