Blame view
src/components/widgets/card/MenuCard.vue
2.24 KB
93a68cfa1
first commit
|
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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<template>
<v-card>
<v-toolbar color="teal" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Topics</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
<v-list>
<v-list-group
v-model="item.active"
v-for="item in items"
:key="item.title"
:prepend-icon="item.action"
no-action
>
<v-list-tile slot="activator">
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile v-for="subItem in item.items" :key="subItem.title" href="#">
<v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-card>
</template>
<script>
export default {
data () {
return {
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item' }
]
},
{
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: 'school',
title: 'Education',
items: [
{ title: 'List Item' }
]
},
{
action: 'directions_run',
title: 'Family',
items: [
{ title: 'List Item' }
]
},
{
action: 'healing',
title: 'Health',
items: [
{ title: 'List Item' }
]
},
{
action: 'content_cut',
title: 'Office',
items: [
{ title: 'List Item' }
]
},
{
action: 'local_offer',
title: 'Promotions',
items: [
{ title: 'List Item' }
]
}
]
};
}
};
</script>
|