-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: renamed openDrawer as show, closeDrawer as close and toggleDrawer as toggle
- Loading branch information
Showing
3 changed files
with
353 additions
and
363 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,168 +1,159 @@ | ||
| ## 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. | ||
|
|
||
| ```html | ||
| <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> | ||
| ``` | ||
|
|
||
| ```javascript | ||
| // ... | ||
| methods: { | ||
| toggle() { | ||
| this.open = !this.open; | ||
| } | ||
| }, | ||
| ``` | ||
|
|
||
| > For proper positioning of the drawer, use the `mdc-layout-app` component. | ||
| ```html | ||
| <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](https://router.vuejs.org) | ||
| > If the `to` property is defined, the item behaves as a | ||
| > [router-link](https://router.vuejs.org/en/api/router-link.html) | ||
| ### Item usage | ||
|
|
||
| * A simple link | ||
|
|
||
| ```html | ||
| <mdc-drawer-item href="#">Inbox</mdc-drawer-item> | ||
| ``` | ||
|
|
||
| * With vue-router | ||
|
|
||
| ```html | ||
| <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: | ||
| ```css | ||
| .mdc-drawer-item.router-link-exact-active { | ||
| color: red; | ||
| } | ||
| ``` | ||
|
|
||
| * Trigger an event | ||
|
|
||
| ```html | ||
| <mdc-drawer-item event='my-event'>Inbox</mdc-drawer-item> | ||
| ``` | ||
|
|
||
| * Click handler | ||
|
|
||
| ```html | ||
| <mdc-drawer-item @click='handler'>Inbox</mdc-drawer-item> | ||
| ``` | ||
|
|
||
| #### Start Detail | ||
|
|
||
| ```html | ||
| <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: | ||
| ```html | ||
| <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> | ||
| ## 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. | ||
|
|
||
| ```html | ||
| <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. | ||
| ```html | ||
| <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](https://router.vuejs.org) | ||
| > If the `to` property is defined, the item behaves as a | ||
| > [router-link](https://router.vuejs.org/en/api/router-link.html) | ||
| ### Item usage | ||
|
|
||
| * A simple link | ||
|
|
||
| ```html | ||
| <mdc-drawer-item href="#">Inbox</mdc-drawer-item> | ||
| ``` | ||
|
|
||
| * With vue-router | ||
|
|
||
| ```html | ||
| <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: | ||
| ```css | ||
| .mdc-drawer-item.router-link-exact-active { | ||
| color: red; | ||
| } | ||
| ``` | ||
|
|
||
| * Trigger an event | ||
|
|
||
| ```html | ||
| <mdc-drawer-item event='my-event'>Inbox</mdc-drawer-item> | ||
| ``` | ||
|
|
||
| * Click handler | ||
|
|
||
| ```html | ||
| <mdc-drawer-item @click='handler'>Inbox</mdc-drawer-item> | ||
| ``` | ||
|
|
||
| #### Start Detail | ||
|
|
||
| ```html | ||
| <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: | ||
| ```html | ||
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.