+61
-11
lines changedFilter options
+61
-11
lines changed Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
1 1
<template>
2 2
<div class="full-control">
3 3
<md-list>
4 -
<md-list-item md-expand>
4 +
<md-list-item md-expand :md-expanded.sync="expandNews">
5 5
<md-icon>whatshot</md-icon>
6 6
<span class="md-list-item-text">News</span>
7 7
@@ -40,12 +40,19 @@
40 40
<span class="md-list-item-text">Shop</span>
41 41
</md-list-item>
42 42
</md-list>
43 +
<md-checkbox v-model="expandNews">Expand News</md-checkbox>
43 44
</div>
44 45
</template>
45 46 46 47
<script>
47 48
export default {
48 -
name: 'ListExpansion'
49 +
name: 'ListExpansion',
50 + 51 +
data () {
52 +
return {
53 +
expandNews: false
54 +
}
55 +
}
49 56
}
50 57
</script>
51 58
@@ -65,7 +65,8 @@
65 65
createElement(listComponent, {
66 66
props,
67 67
scopedSlots: resolveScopedSlot(props, children),
68 -
staticClass: 'md-list-item-container md-button-clean'
68 +
staticClass: 'md-list-item-container md-button-clean',
69 +
on: listeners,
69 70
}, children.default)
70 71
])
71 72
}
@@ -27,6 +27,9 @@
27 27
expandStyles: {},
28 28
showContent: false
29 29
}),
30 +
props: {
31 +
mdExpanded: Boolean
32 +
},
30 33
computed: {
31 34
expandClasses () {
32 35
return {
@@ -45,17 +48,56 @@
45 48 46 49
return size
47 50
},
48 -
toggleExpand () {
49 -
raf(() => {
50 -
let fullHeight = 0
51 +
fetchStyle () {
52 +
return new Promise(resolve => {
53 +
raf(() => {
54 +
let fullHeight = 0
51 55 52 -
if (!this.showContent) {
53 -
fullHeight = 'auto' // this.getChildrenSize() + 'px'
54 -
}
56 +
if (!this.showContent) {
57 +
fullHeight = 'auto' // this.getChildrenSize() + 'px'
58 +
}
55 59 56 -
this.expandStyles = { height: fullHeight }
57 -
this.showContent = !this.showContent
60 +
this.expandStyles = { height: fullHeight }
61 +
resolve()
62 +
})
58 63
})
64 +
},
65 +
async toggleExpand () {
66 +
await this.fetchStyle()
67 +
this.showContent = !this.showContent
68 +
},
69 +
async open () {
70 +
if (this.showContent) {
71 +
return false
72 +
}
73 + 74 +
await this.fetchStyle()
75 +
this.showContent = true
76 +
},
77 +
async close () {
78 +
if (!this.showContent) {
79 +
return false
80 +
}
81 + 82 +
await this.fetchStyle()
83 +
this.showContent = false
84 +
}
85 +
},
86 +
watch: {
87 +
mdExpanded () {
88 +
if (this.mdExpanded) {
89 +
this.open()
90 +
} else {
91 +
this.close()
92 +
}
93 +
},
94 +
showContent () {
95 +
this.$emit('update:mdExpanded', this.showContent)
96 +
}
97 +
},
98 +
mounted () {
99 +
if (this.mdExpanded) {
100 +
this.open()
59 101
}
60 102
}
61 103
}
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