ExpansionPanels.vue
3.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
<div id="page-expansion-panel">
<v-container grid-list-xl fluid>
<v-layout row wrap>
<v-flex lg6>
<v-widget title="Expand">
<div slot="widget-content">
<v-expansion-panel expand>
<v-expansion-panel-content v-for="(item,i) in 5" :key="i" :value="item === 2">
<div slot="header">Item</div>
<v-card>
<v-card-text class="grey lighten-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
</v-widget>
</v-flex>
<v-flex lg6>
<v-widget title="Accordion">
<div slot="widget-content">
<v-expansion-panel focusable>
<v-expansion-panel-content v-for="(item,i) in 5" :key="i">
<div slot="header">Item</div>
<v-card>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
</v-widget>
</v-flex>
<v-flex lg12>
<v-widget title="Popout">
<div slot="widget-content">
<v-container>
<v-layout row wrap>
<v-flex xs12 lg5 mb-3>
<v-expansion-panel popout>
<v-expansion-panel-content v-for="(item,i) in 5" :key="i">
<div slot="header">Item</div>
<v-card>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
<v-flex xs12 lg5 offset-lg2>
<v-expansion-panel inset>
<v-expansion-panel-content v-for="(item,i) in 5" :key="i">
<div slot="header">Item</div>
<v-card>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
</v-layout>
</v-container>
</div>
</v-widget>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import VWidget from '@/components/VWidget';
export default {
components: {
VWidget
},
data () {
return {
};
},
computed: {
},
methods: {
}
};
</script>