Blox Material v1.0.0

Drawers

Different types of navigation drawers can be created with the mdcDrawer directive.

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 for the title of a drawer. The use of this directive is optional. If used, it should be placed as first element inside an mdcDrawerHeader

Directive: MdcDrawerSubtitleDirective

Selector: [mdcDrawerSubtitle]

Directive for the subtitle of a drawer. The use of this directive is optional. If used, it should be placed as a sibling element of mdcDrawerTitle inside an mdcDrawerHeader

Directive: MdcDrawerHeaderDirective

Selector: [mdcDrawerHeader]

A toolbar header is an optional first child of an mdcDrawer. The header will not scroll with the rest of the drawer content, so is a good place to place titles and account switchers.

Directives that are typically used inside an mdcDrawerHeader: mdcDrawerTitle, and mdcDrawerSubTitle

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]

Directive for a (navigation) drawer. The following drawer types are supported:

  • permanent: the default type if none was specified.
  • dismissible: the drawer is hidden by default, and can slide into view. Typically used when navigation is not common, and the main app content is prioritized.
  • modal: the drawer is hidden by default. When activated, the drawer is elevated above the UI of the app. It uses a scrim to block interaction with the rest of the app with a scrim.

Drawers may contain an mdcDrawerHeader, and should contain an mdcDrawerContent directive.

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 type is permanent.
@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.