+121
-42
lines changedFilter options
+121
-42
lines changed Original file line number Diff line number Diff line change
@@ -56,6 +56,7 @@
56 56
<api-item title="API - md-list">
57 57
<p>The following options can be applied to any list:</p>
58 58 59 +
<api-table :headings="list.props.headings" :props="list.props.props" slot="props" />
59 60
<api-table :headings="list.classes.headings" :props="list.classes.props" slot="classes" />
60 61
</api-item>
61 62
@@ -82,10 +83,10 @@
82 83
headings: ['Name', 'Description', 'Default'],
83 84
props: [
84 85
{
85 -
name: 'id',
86 -
type: 'String',
87 -
description: 'The item id. Used when changing the selected item dynamically',
88 -
defaults: 'a random string'
86 +
name: 'md-expand-single',
87 +
type: 'Boolean',
88 +
description: 'If set true, one expandable list item could be expanded at most at a time. The expanded list item will be collapsed when another is expanded',
89 +
defaults: 'false'
89 90
}
90 91
]
91 92
},
@@ -1,46 +1,51 @@
1 1
<template>
2 2
<div class="full-control">
3 -
<md-list>
4 -
<md-list-item md-expand :md-expanded.sync="expandNews">
5 -
<md-icon>whatshot</md-icon>
6 -
<span class="md-list-item-text">News</span>
3 +
<div class="list">
4 +
<md-list :md-expand-single="expandSingle">
5 +
<md-list-item md-expand :md-expanded.sync="expandNews">
6 +
<md-icon>whatshot</md-icon>
7 +
<span class="md-list-item-text">News</span>
7 8 8 -
<md-list slot="md-expand">
9 -
<md-list-item class="md-inset">World</md-list-item>
10 -
<md-list-item class="md-inset">Europe</md-list-item>
11 -
<md-list-item class="md-inset">South America</md-list-item>
12 -
</md-list>
13 -
</md-list-item>
9 +
<md-list slot="md-expand">
10 +
<md-list-item class="md-inset">World</md-list-item>
11 +
<md-list-item class="md-inset">Europe</md-list-item>
12 +
<md-list-item class="md-inset">South America</md-list-item>
13 +
</md-list>
14 +
</md-list-item>
14 15 15 -
<md-list-item md-expand>
16 -
<md-icon>videogame_asset</md-icon>
17 -
<span class="md-list-item-text">Games</span>
16 +
<md-list-item md-expand>
17 +
<md-icon>videogame_asset</md-icon>
18 +
<span class="md-list-item-text">Games</span>
18 19 19 -
<md-list slot="md-expand">
20 -
<md-list-item class="md-inset">Console</md-list-item>
21 -
<md-list-item class="md-inset">PC</md-list-item>
22 -
<md-list-item class="md-inset">Phone</md-list-item>
23 -
</md-list>
24 -
</md-list-item>
20 +
<md-list slot="md-expand">
21 +
<md-list-item class="md-inset">Console</md-list-item>
22 +
<md-list-item class="md-inset">PC</md-list-item>
23 +
<md-list-item class="md-inset">Phone</md-list-item>
24 +
</md-list>
25 +
</md-list-item>
25 26 26 -
<md-list-item md-expand>
27 -
<md-icon>video_library</md-icon>
28 -
<span class="md-list-item-text">Video</span>
27 +
<md-list-item md-expand>
28 +
<md-icon>video_library</md-icon>
29 +
<span class="md-list-item-text">Video</span>
29 30 30 -
<md-list slot="md-expand">
31 -
<md-list-item class="md-inset">Humor</md-list-item>
32 -
<md-list-item class="md-inset">Music</md-list-item>
33 -
<md-list-item class="md-inset">Movies</md-list-item>
34 -
<md-list-item class="md-inset">TV Shows</md-list-item>
35 -
</md-list>
36 -
</md-list-item>
31 +
<md-list slot="md-expand">
32 +
<md-list-item class="md-inset">Humor</md-list-item>
33 +
<md-list-item class="md-inset">Music</md-list-item>
34 +
<md-list-item class="md-inset">Movies</md-list-item>
35 +
<md-list-item class="md-inset">TV Shows</md-list-item>
36 +
</md-list>
37 +
</md-list-item>
37 38 38 -
<md-list-item>
39 -
<md-icon>shopping_basket</md-icon>
40 -
<span class="md-list-item-text">Shop</span>
41 -
</md-list-item>
42 -
</md-list>
43 -
<md-checkbox v-model="expandNews">Expand News</md-checkbox>
39 +
<md-list-item>
40 +
<md-icon>shopping_basket</md-icon>
41 +
<span class="md-list-item-text">Shop</span>
42 +
</md-list-item>
43 +
</md-list>
44 +
</div>
45 +
<div class="control">
46 +
<md-switch v-model="expandSingle">Expand Only One</md-switch>
47 +
<md-checkbox v-model="expandNews">Expand News</md-checkbox>
48 +
</div>
44 49
</div>
45 50
</template>
46 51
@@ -50,20 +55,40 @@
50 55 51 56
data () {
52 57
return {
53 -
expandNews: false
58 +
expandNews: false,
59 +
expandSingle: false
54 60
}
55 61
}
56 62
}
57 63
</script>
58 64 59 65
<style lang="scss" scoped>
66 +
$list-width: 320px;
67 + 68 +
.full-control {
69 +
display: flex;
70 +
flex-direction: row;
71 +
flex-wrap: wrap-reverse;
72 +
}
73 + 74 +
.list {
75 +
width: $list-width;
76 +
}
77 + 60 78
.full-control > .md-list {
61 -
width: 320px;
79 +
width: $list-width;
62 80
max-width: 100%;
63 81
height: 400px;
64 82
display: inline-block;
65 83
overflow: auto;
66 84
border: 1px solid rgba(#000, .12);
67 85
vertical-align: top;
68 86
}
87 + 88 +
.control {
89 +
min-width: 250px;
90 +
display: flex;
91 +
flex-direction: column;
92 +
padding: 16px;
93 +
}
69 94
</style>
Original file line number Diff line number Diff line change
@@ -8,7 +8,49 @@
8 8
import MdComponent from 'core/MdComponent'
9 9 10 10
export default new MdComponent({
11 -
name: 'MdList'
11 +
name: 'MdList',
12 +
data () {
13 +
return {
14 +
MdList: {
15 +
expandable: [],
16 +
expandATab: this.expandATab,
17 +
pushExpandable: this.pushExpandable,
18 +
removeExpandable: this.removeExpandable
19 +
}
20 +
}
21 +
},
22 +
provide () {
23 +
return {
24 +
MdList: this.MdList
25 +
}
26 +
},
27 +
props: {
28 +
mdExpandSingle: {
29 +
default: false
30 +
}
31 +
},
32 +
methods: {
33 +
expandATab (expandedListItem) {
34 +
if (this.mdExpandSingle && expandedListItem) {
35 +
const otherExpandableListItems = this.MdList.expandable.filter(target => target !== expandedListItem)
36 +
otherExpandableListItems.forEach(expandableListItem => expandableListItem.close())
37 +
}
38 +
},
39 +
pushExpandable (expandableListItem) {
40 +
let expandableListItems = this.MdList.expandable
41 + 42 +
if (!expandableListItems.find(target => target === expandableListItem)) {
43 +
this.MdList.expandable = expandableListItems.concat([expandableListItem])
44 +
}
45 +
},
46 +
removeExpandable (expandableListItem) {
47 +
let expandableListItems = this.MdList.expandable
48 + 49 +
if (expandableListItems.find(target => target === expandableListItem)) {
50 +
this.MdList.expandable = expandableListItems.filter(target => target !== expandableListItem)
51 +
}
52 +
}
53 +
}
12 54
})
13 55
</script>
14 56
@@ -23,6 +23,7 @@
23 23
MdArrowDownIcon
24 24
},
25 25
mixins: [MdListItemMixin],
26 +
inject: ['MdList'],
26 27
data: () => ({
27 28
expandStyles: {},
28 29
showContent: false
@@ -98,12 +99,22 @@
98 99
let expanded = this.showContent
99 100
this.$emit('update:mdExpanded', expanded)
100 101
this.$nextTick(() => this.$emit(expanded ? 'md-expanded' : 'md-collapsed'))
102 + 103 +
if (expanded) {
104 +
this.MdList.expandATab(this)
105 +
}
101 106
}
102 107
},
108 +
created () {
109 +
this.MdList.pushExpandable(this)
110 +
},
103 111
mounted () {
104 112
if (this.mdExpanded) {
105 113
this.open()
106 114
}
115 +
},
116 +
beforeDestroy () {
117 +
this.MdList.removeExpandable(this)
107 118
}
108 119
}
109 120
</script>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4