@mcwv/drawer

Usage

The mdc-drawer component implements permanent, persistent, and temporary drawers. By default the drawer component is responsive and will switch from temporary to persistent design according to viewport width.

<mdc-drawer v-model="open">
  <mdc-drawer-list>
    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
  </mdc-drawer-list>
</mdc-drawer>

For proper positioning of the drawer, use the mdc-layout-app component.

<mdc-layout-app>
  <mdc-toolbar slot="toolbar" fixed>
    <mdc-toolbar-row>
      <mdc-toolbar-section align-start >
        <mdc-toolbar-menu-icon event="toggle-drawer"></mdc-toolbar-menu-icon>
        <mdc-toolbar-title>Drawer Example</mdc-toolbar-title>
      </mdc-toolbar-section>
    </mdc-toolbar-row>
  </mdc-toolbar>
  <mdc-drawer slot="drawer" toggle-on="toggle-drawer">
    <mdc-drawer-list>
        <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
        <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
        <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
    </mdc-drawer-list>
  </mdc-drawer>
  <main class="content" >
  </main>
</mdc-layout-app>

Drawer

prop	Type	Default	Description
drawer-type	String	undefined	'temporary', 'persistent' or 'permanent' (*)
permanent	Boolean	undefined	shorthand for drawer-type="permanent" (*)
persistent	Boolean	undefined	shorthand for drawer-type="persistent" (*)
temporary	Boolean	undefined	shorthand for drawer-type="temporary" (*)
toolbar-spacer	Boolean	undefined	add a toolbar spacer
open	Boolean	false	optional v-model when true opens drawer
toggle-on	String	undefined	optional toggle event to listen on
toggle-on-source	Object	vm.$root	optional toggle event source, defaults to root bus
open-on	String	undefined	optional open event to listen on
open-on-source	Object	vm.$root	optional open event source, defaults to root bus
close-on	String	undefined	optional close event to listen on
close-on-source	Object	vm.$root	optional close event source, defaults to root bus

(*) drawer is responsive if drawer-type undefined: temporary on mobile breakpoint and persistent otherwise.

event	args	Description
@change	Boolean	notify v-model/listeners that drawer state has changed.
@open		triggered on drawer open
@close		triggered on drawer close
@vma:layout	Boolean	notify listeners that screen layout has changed.

Drawer Header

prop	Type	Default	Description
permanent	Boolean	undefined	show only if drawer is permanent (**)
persistent	Boolean	undefined	show only if drawer is persistent (**)
temporary	Boolean	undefined	show only if drawer is temporary (**)

(**) specifies whether or not the header is shown for responsive drawer

Drawer Items

prop	Type	Default	Description
start-icon	String	undefined	material start icon
temporary-close	Boolean	true	whether temporary drawer closes on click
event	String	undefined	optional event to emit on click
event-target	Object	vm.$root	optional event target, defaults to root bus
event-args	Array	[]	optional event args
to	String, Object	undefined	router-link property (*)
replace	Boolean	false	router-link property (*)
append	Boolean	false	router-link property (*)
exact	Boolean	false	router-link property (*)
active-class	String	router-link-active	router-link property (*)
exact-active-class	String	router-link-exact-active	router-link property (*)
activated	Boolean	undefined	whether this item is selected (not needed if router-link mode is used)

(*) Requires vue-router If the to property is defined, the item behaves as a router-link

Item usage

• A simple link

  <mdc-drawer-item href="#">Inbox</mdc-drawer-item>

• With vue-router

  <mdc-drawer-item  to="/path">Inbox</mdc-drawer-item>
  <mdc-drawer-item  :to='folder' append >Inbox</mdc-drawer-item>

Customize the active links style with vue-router active or exact-active classes:

.mdc-drawer-item.router-link-exact-active {
  color: red;
}

• Trigger an event

  <mdc-drawer-item event='my-event'>Inbox</mdc-drawer-item>

• Click handler

  <mdc-drawer-item @click='handler'>Inbox</mdc-drawer-item>

Start Detail

<mdc-drawer>
  <mdc-drawer-list>
    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
    <mdc-drawer-divider />
    <mdc-drawer-item start-icon="email">All mail</mdc-drawer-item>
    <mdc-drawer-item start-icon="delete">Trash</mdc-drawer-item>
    <mdc-drawer-item start-icon="report">Spam</mdc-drawer-item>
  </mdc-drawer-list>
</mdc-drawer>

to override start-icon detail, use start-detail named slot:

<mdc-drawer-item>
  <mdc-icon slot='start-detail' class="fa fa-home"></mdc-icon>
  {{ Text }}
</mdc-drawer-item>

Reference

• https://material.io/components/web/catalog/drawers