This repository was archived by the owner on Nov 30, 2020. It is now read-only.
File tree Expand file tree Collapse file tree 17 files changed +256
-215
lines changed Expand file tree Collapse file tree 17 files changed +256
-215
lines changed Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change 3
3
class =" mdc-drawer mdc-drawer--persistent"
4
4
v-on =" $listeners" >
5
5
<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 />
23
9
</nav >
24
10
</aside >
25
11
</template >
@@ -31,7 +17,6 @@ export default {
31
17
props: {
32
18
initialOpen: {
33
19
type: Boolean ,
34
- required: false ,
35
20
default: true
36
21
}
37
22
},
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change 3
3
class =" mdc-drawer mdc-drawer--temporary"
4
4
v-on =" $listeners" >
5
5
<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 />
23
9
</nav >
24
10
</aside >
25
11
</template >
@@ -31,7 +17,6 @@ export default {
31
17
props: {
32
18
initialOpen: {
33
19
type: Boolean ,
34
- required: false ,
35
20
default: false
36
21
}
37
22
},
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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 >
Load Diff This file was deleted.
Load Diff This file was deleted.
Load Diff This file was deleted.
Original file line number Diff line number Diff line change 2
2
3
3
* [ PermanentDrawer] ( PermanentDrawer/README.md )
4
4
* [ PersistentDrawer] ( PersistentDrawer/README.md )
5
- * [ TemporaryDrawer] ( TemporaryDrawer/README.md )
5
+ * [ TemporaryDrawer] ( TemporaryDrawer/README.md )
6
+
7
+ ## DrawerContent
8
+
9
+ ### Slots
10
+
11
+ | Slot | Description |
12
+ | ------| -------------|
13
+ | default | main content |
14
+
15
+ ## DrawerHeader
16
+
17
+ ### Slots
18
+
19
+ | Slot | Description |
20
+ | ------| -------------|
21
+ | default | header content |
22
+
23
+ ## DrawerToolbarSpacer
24
+
25
+ ### Slots
26
+
27
+ | Slot | Description |
28
+ | ------| -------------|
29
+ | default | toolbarSpacer content |
You can’t perform that action at this time.
0 commit comments