Skip to content
This repository was archived by the owner on Nov 30, 2020. It is now read-only.

Commit c384a7a

Browse files
matspmatsp
committed
feat(drawer): Decoupled drawer component for better customization (closes #60)
BREAKING CHANGE: There are new sub-components - have a look at the docs.
1 parent 072905c commit c384a7a

File tree

17 files changed

+256
-215
lines changed

17 files changed

+256
-215
lines changed

‎components/Drawer/DrawerContent.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<nav
3+
class="mdc-drawer__content"
4+
v-if="$slots['default']">
5+
<slot />
6+
</nav>
7+
</template>
8+
9+
<style lang="scss">
10+
@import "@material/drawer/mdc-drawer";
11+
</style>

‎components/Drawer/DrawerHeader.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<header
3+
class="mdc-drawer__header"
4+
v-if="$slots['default']">
5+
<div class="mdc-drawer__header-content">
6+
<slot />
7+
</div>
8+
</header>
9+
</template>
10+
11+
<style lang="scss">
12+
@import "@material/drawer/mdc-drawer";
13+
</style>

‎components/Drawer/DrawerPermanent/DrawerPermanent.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<nav class="mdc-drawer mdc-drawer--permanent">
3+
<slot name="toolbarSpacer" />
4+
<slot />
5+
</nav>
6+
</template>
7+
8+
<style lang="scss">
9+
@import "@material/drawer/mdc-drawer";
10+
</style>

‎components/Drawer/DrawerPermanent/README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
## DrawerPermanent
2+
3+
### Markup
4+
5+
```html
6+
<m-drawer-permanent>
7+
<m-drawer-toolbar-spacer slot="toolbarSpacer"/>
8+
<m-drawer-content>
9+
<m-list>
10+
<m-list-item v-for="item in listItems" :key="item.text">
11+
<m-icon slot="graphic" :icon="item.icon"/>
12+
{{item.text}}
13+
</m-list-item>
14+
</m-list>
15+
</m-drawer-content>
16+
</m-drawer-permanent>
17+
```
18+
19+
### Slots
20+
21+
| Slot | Description |
22+
|------|-------------|
23+
| default | content section of the drawer |
24+
| toolbarSpacer | adds space with the same size as the toolbar on top of the drawer |
25+
26+
### Reference
27+
28+
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer

‎components/Drawer/PersistentDrawer/PersistentDrawer.vue renamed to ‎components/Drawer/DrawerPersistent/DrawerPersistent.vue

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,9 @@
33
class="mdc-drawer mdc-drawer--persistent"
44
v-on="$listeners">
55
<nav class="mdc-drawer__drawer">
6-
<div
7-
class="mdc-drawer__toolbar-spacer"
8-
v-if="$slots['toolbarSpacer']">
9-
<slot name="toolbarSpacer" />
10-
</div>
11-
<header
12-
class="mdc-drawer__header"
13-
v-if="$slots['header']">
14-
<div class="mdc-drawer__header-content">
15-
<slot name="header" />
16-
</div>
17-
</header>
18-
<nav
19-
class="mdc-drawer__content"
20-
v-if="$slots['default']">
21-
<slot />
22-
</nav>
6+
<slot name="toolbarSpacer" />
7+
<slot name="header" />
8+
<slot />
239
</nav>
2410
</aside>
2511
</template>
@@ -31,7 +17,6 @@ export default {
3117
props: {
3218
initialOpen: {
3319
type: Boolean,
34-
required: false,
3520
default: true
3621
}
3722
},

‎components/Drawer/DrawerPersistent/README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
## DrawerPersistent
2+
3+
### Markup
4+
5+
```html
6+
<m-drawer-persistent ref="drawer">
7+
<m-drawer-toolbar-spacer slot="toolbarSpacer"/>
8+
<m-drawer-content>
9+
<m-list>
10+
<m-list-item v-for="item in listItems" :key="item.text">
11+
<m-icon slot="graphic" :icon="item.icon"/>
12+
{{item.text}}
13+
</m-list-item>
14+
</m-list>
15+
</m-drawer-content>
16+
</m-drawer-persistent>
17+
```
18+
### Script
19+
20+
```javascript
21+
this.$refs.drawer.toggle()
22+
```
23+
24+
### Props & methods
25+
26+
| Prop | Type | Default | Description |
27+
|------|------|---------|-------------|
28+
| initialOpen | Boolean | true | whether the drawer should be open at start |
29+
30+
Non prop events are mapped to the inner button element.
31+
32+
| Method | Description |
33+
|--------|-------------|
34+
| toggle | toggles the drawer |
35+
36+
### Slots
37+
38+
| Slot | Description |
39+
|------|-------------|
40+
| default | content section of the drawer |
41+
| toolbarSpacer | adds space with the same size as the toolbar on top of the drawer |
42+
| header | header section of the drawer |
43+
44+
45+
### Reference
46+
47+
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer

‎components/Drawer/TemporaryDrawer/TemporaryDrawer.vue renamed to ‎components/Drawer/DrawerTemporary/DrawerTemporary.vue

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,9 @@
33
class="mdc-drawer mdc-drawer--temporary"
44
v-on="$listeners">
55
<nav class="mdc-drawer__drawer">
6-
<div
7-
class="mdc-drawer__toolbar-spacer"
8-
v-if="$slots['toolbarSpacer']">
9-
<slot name="toolbarSpacer" />
10-
</div>
11-
<header
12-
class="mdc-drawer__header"
13-
v-if="$slots['header']">
14-
<div class="mdc-drawer__header-content">
15-
<slot name="header" />
16-
</div>
17-
</header>
18-
<nav
19-
class="mdc-drawer__content"
20-
v-if="$slots['default']">
21-
<slot />
22-
</nav>
6+
<slot name="toolbarSpacer"/>
7+
<slot name="header"/>
8+
<slot />
239
</nav>
2410
</aside>
2511
</template>
@@ -31,7 +17,6 @@ export default {
3117
props: {
3218
initialOpen: {
3319
type: Boolean,
34-
required: false,
3520
default: false
3621
}
3722
},

‎components/Drawer/DrawerTemporary/README.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
## DrawerTemporary
2+
3+
### Markup
4+
5+
```html
6+
<m-drawer-temporary ref="drawer">
7+
<m-drawer-toolbar-spacer slot="toolbarSpacer"/>
8+
<m-drawer-content>
9+
<m-list>
10+
<m-list-item v-for="item in listItems" :key="item.text">
11+
<m-icon slot="graphic" :icon="item.icon"/>
12+
{{item.text}}
13+
</m-list-item>
14+
</m-list>
15+
<m-drawer-content>
16+
</m-temporary-drawer>
17+
```
18+
### Script
19+
20+
```javascript
21+
this.$refs.drawer.toggle()
22+
```
23+
24+
### Props & methods
25+
26+
| Prop | Type | Default | Description |
27+
|------|------|---------|-------------|
28+
| initialOpen | Boolean | false | whether the drawer should be open at start |
29+
30+
Non prop events are mapped to the inner button element.
31+
32+
| Method | Description |
33+
|--------|-------------|
34+
| toggle | toggles the drawer |
35+
36+
### Slots
37+
38+
| Slot | Description |
39+
|------|-------------|
40+
| default | content section of the drawer |
41+
| toolbarSpacer | adds space with the same size as the toolbar on top of the drawer |
42+
| header | header section of the drawer |
43+
44+
### Reference
45+
46+
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer

‎components/Drawer/DrawerToolbarSpacer.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div class="mdc-drawer__toolbar-spacer">
3+
<slot/>
4+
</div>
5+
</template>
6+
7+
<style lang="scss">
8+
@import "@material/drawer/mdc-drawer";
9+
</style>

‎components/Drawer/PermanentDrawer/PermanentDrawer.vue

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)