ember-cli addon for @material/drawer
.
ember install ember-cli-mdc-drawer
Add a side drawer component to the page.
-
@style
- The type of drawer. The drawer is permanent is no style provided. -
open
- Open/closes the drawer.
The content of a drawer goes inside a <MdcDrawerContent>
block. For menu items,
we use <MdcList>
and <MdcListGroupSubheader>
components.
The @open
attribute on the <MdcDrawer>
is used to open and close the drawer for both
persistent and modal styles. When @open
is true
, then the drawer will open. When @open
is false
the drawer will close.
If the drawer has @style="modal"
, then drawer automatically closes after clicking an item
in the drawer.
The header in the drawer is the top portion of the drawer where you display application
specific information, such as how is currently logged into the application. You can add
a header to the drawer by adding the {{mdc-drawer-header}}
block component.
A persistent drawer remains open until the user explicitly closes the drawer.
A modal drawer appears on demand (like a modal dialog), and disappears after clicking
item in the drawer. If @style="modal"
, then the <MdcDrawer>
component will automatically
add a <MdcDrawerScrim>
component as the next sibling of the <MdcDrawer>
component. Likewise,
if you switch from a modal drawer to a dismissible drawer, the <MdcDrawer>
component will
automatically remove the <MdcDrawerScrim>
element from the page.
When working with the drawer component, the page content must placed inside a
<MdcDrawerAppContent>
component. This ensures the drawer and page function
correctly, especially when changing between styles.