material-components-vue/dist/drawer/README.md

Material Design components for Vue.js

## Drawer

### Markup

#### Minimal

```html
<m-drawer>
  <m-drawer-content>
    <m-list>
      <m-list-item activated tabindex="0">
        <m-icon icon="inbox" slot="graphic"/>
        Inbox
      </m-list-item>
      <m-list-item>
        <m-icon icon="star" slot="graphic"/>
        Star
      </m-list-item>
    </m-list>
  </m-drawer-content>
</m-drawer>
```

#### With Header

Following examples are rendered completely the same.

```html
<m-drawer title="title" sub-title="subtitle">
  <m-drawer-content>
   
  </m-drawer-content>
</m-drawer>
```

```html
<m-drawer>
  <m-drawer-header title="title" sub-title="subtitle">
      <!-- other header content here -->
  </m-drawer-header>
  <m-drawer-content>
   
  </m-drawer-content>
</m-drawer>
```

```html
<m-drawer>
  <template slot="header">
    <h3 class="mdc-drawer__title">title</h3>
    <h6 class="mdc-drawer__subtitle">subtitle</h6>
    <!-- other header content here -->
  </template>
  <m-drawer-content>
   
  </m-drawer-content>
</m-drawer>
```

```html
<m-drawer>
  <m-drawer-header>
    <h3 class="mdc-drawer__title">title</h3>
    <h6 class="mdc-drawer__subtitle">subtitle</h6>
    <!-- other header content here -->
  </m-drawer-header>
  <m-drawer-content>
   
  </m-drawer-content>
</m-drawer>
```

You may find the first two ones easier to write and less verbose, and the last two ones great for customization.

#### Dismissible

```html
<m-drawer dismissible v-model="open">
  <m-drawer-content>
     
  </m-drawer-content>
</m-drawer>
<m-drawer-app-content>
</m-drawer-app-content>
```

```js
data () {
  return {
    open: false // change to true to open the drawer
  }
}
```

#### Dismissible With Top App Bar

```html
<m-drawer dismissible>
  <m-drawer-content>
     
  </m-drawer-content>
</m-drawer>
<m-drawer-app-content>
  <m-top-app-bar>
  
  </m-top-app-bar>
</m-drawer-app-content>
```

#### Dismissible Below Top App Bar

```html
<m-top-app-bar>

</m-top-app-bar>
<m-drawer dismissible class="mdc-top-app-bar--fixed-adjust">
  <m-drawer-content>
     
  </m-drawer-content>
</m-drawer>
<m-drawer-app-content class="mdc-top-app-bar--fixed-adjust">
</m-drawer-app-content>
```

#### Modal

```html
<m-drawer modal v-model="open">
</m-drawer>
<m-drawer-scrim></m-drawer-scrim>
<div>Main Content</div>
```

```js
data () {
  return {
    open: false // change to true to open the drawer
  }
}
```

### Slots

| Slot | Description |
|------|-------------|
| header | header content |
| default | main content, usually `<m-drawer-content>` |

### Events

| Event | Payload | Description |
|-------|---------|-------------|
| opened | {} | emitted when the navigation drawer is opened |
| closed | {} | emitted when the navigation drawer is closed |

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | String | '' | title in the header |
| subtitle | String | '' | subtitle in the header |
| modal | Boolean | '' | display drawer in modal variant |
| dismissible | Boolean | '' | display drawer in dismissible variant |

`modal` and `dismissible` can not be both true at the same times. When both are false, the drawer is shown permanently.

## Drawer Content

Scrollable content area of the drawer. Usually placed in the default slot in `<m-drawer>`.

### Slots

| Slot | Description |
|------|-------------|
| default | main content, usually `<m-list>` |

## Drawer Header

Non-scrollable element that exists at the top of the drawer.

### Slots

| Slot | Description |
|------|-------------|
| default | header content |

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | String | '' | title |
| subtitle | String | '' | subtitle |

## Drawer Scrim

Mandatory for modal variant only. Used for the overlay on the app content.

### Markup

```html
<m-drawer modal>
</m-drawer>
<m-drawer-scrim></m-drawer-scrim>
```

## Drawer App Content

Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.

### Markup

```html
<m-drawer dismissible>
</m-drawer>
<m-drawer-app-content>
</m-drawer-app-content>
```

## Accessibility 

### Focus Management

It is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)

#### Dismissible Drawer

Restore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.

```html
<m-drawer dismissible @closed="onClosed">
  <m-drawer-content>
    <m-list @click="onClick">
    
    </m-list>
  </m-drawer-content>
</m-drawer>
<div class="main-content" ref="mainContent"></div>
```

```js
onClosed () {
  this.$refs.mainContent.$el.querySelector('input, button').focus();
},
onClick () {
  this.$refs.mainContent.$el.querySelector('input, button').focus();
}
```

#### Modal Drawer

```html
<m-drawer modal @closed="onClosed" v-model="open">
  <m-drawer-content>
    <m-list @click="onClick">
        
    </m-list>
  </m-drawer-content>
</m-drawer>
<div class="main-content" ref="mainContent"></div>
```

```js
data () {
  return { open: false }
},
methods: {
  onClosed () {
    this.$refs.mainContent.$el.querySelector('input, button').focus();
  },
  onClick () {
    this.open = false
  }
}
```

## Reference

- https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer
- https://github.com/matsp/material-components-vue/tree/master/components/list