mdcDrawerContainer directives are used to create different kinds
Slidable Drawer Demo
Permanent Drawer Demo
Permanent Drawer below Toolbar Demo
A toolbar spacer is an optional first child of an
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.
A toolbar header is an optional first child of an
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
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
Directive for the drawer content. You would typically also apply the
mdcListGroup directive to the drawer content (see the examples).
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.
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.
Event emitted when the drawer is opened or closed. The event value will be
Set the type of drawer. Either
Input to open (assign value