139 lines
4.6 KiB
Vue
139 lines
4.6 KiB
Vue
<template>
|
|
<v-navigation-drawer v-model="xdrawer" fixed app right temporary :width="drawerHeight">
|
|
|
|
<v-list two-line>
|
|
<template v-for="(item, index) in items">
|
|
<v-subheader
|
|
v-bind:key="item.id"
|
|
v-if="item.header"
|
|
>
|
|
{{ item.header }}
|
|
</v-subheader>
|
|
|
|
|
|
|
|
<template v-for="(itm, idx) in item.items">
|
|
<v-list-tile
|
|
:key="itm.id"
|
|
avatar
|
|
>
|
|
<v-list-tile-avatar>
|
|
<img :src="itm.avatar">
|
|
</v-list-tile-avatar>
|
|
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-html="itm.title"></v-list-tile-title>
|
|
|
|
<v-list-tile-sub-title v-html="itm.subtitle"></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
|
|
<v-list-tile-action v-if="itm.date">
|
|
|
|
{{ itm.date }}
|
|
|
|
</v-list-tile-action>
|
|
|
|
|
|
</v-list-tile>
|
|
<v-divider
|
|
:key="itm.id+50000"
|
|
:inset="true"
|
|
></v-divider>
|
|
</template>
|
|
|
|
</template>
|
|
</v-list>
|
|
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
module.exports = {
|
|
data () {
|
|
return {
|
|
items:
|
|
[
|
|
{
|
|
// header: 'Today' ,
|
|
items : [
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
|
|
title: 'Brunch this weekend?',
|
|
subtitle: "<span class='text--primary'>Ali Connors</span> — I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
|
|
date: '15 mins'
|
|
,id : 0
|
|
},
|
|
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
|
|
title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
|
|
subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> — Wish I could come, but I'm out of town this weekend.",
|
|
date: '30 mins'
|
|
,id : 1
|
|
},
|
|
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
|
|
title: 'Oui oui',
|
|
subtitle: "<span class='text--primary'>Sandra Adams</span> — Do you have Paris recommendations? Have you ever been?",
|
|
date: '45 mins'
|
|
,id : 2
|
|
}
|
|
]
|
|
},
|
|
|
|
{
|
|
// header: 'Yesterday' ,
|
|
items : [
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
|
|
title: 'Brunch this weekend?',
|
|
subtitle: "<span class='text--primary'>Ali Connors</span> — I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
|
|
date: '1 day'
|
|
,id : 3
|
|
},
|
|
|
|
{
|
|
avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
|
|
title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
|
|
subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> — Wish I could come, but I'm out of town this weekend.",
|
|
date: '2 day'
|
|
,id : 4
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
props: {
|
|
drawer: Boolean
|
|
},
|
|
|
|
computed : {
|
|
drawerHeight() {
|
|
if (this.$vuetify.breakpoint.smAndDown) {
|
|
return "300px"
|
|
}
|
|
return "500px"
|
|
},
|
|
xdrawer: {
|
|
get() {
|
|
return this.drawer
|
|
},
|
|
set(v) {
|
|
this.$emit("togleDrawer")
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
|
|
},
|
|
|
|
methods : {
|
|
|
|
}
|
|
}
|
|
</script>
|