8000 Add long dark list with scroll · vuejsadmin/vue-material-admin@9e205b3 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9e205b3

Browse files
author
Antonin Slejska
committed
Add long dark list with scroll
1 parent ddcb4ba commit 9e205b3

File tree

1 file changed

+30
-10
lines changed

1 file changed

+30
-10
lines changed

‎src/pages/layout/Lists.vue

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
</v-list-tile>
5656
</v-list>
5757
</div>
58-
</v-widget>
58+
</v-widget>
5959
<v-widget title="Three line" class="mt-3">
6060
<div slot="widget-content">
6161
<v-list three-line>
@@ -74,7 +74,7 @@
7474
</template>
7575
</v-list>
7676
</div>
77-
</v-widget>
77+
</v-widget>
7878
</v-flex>
7979
<v-flex lg4>
8080
<v-widget title="Complex">
@@ -135,7 +135,7 @@
135135
</v-list-tile>
136136
</v-list>
137137
</div>
138-
</v-widget>
138+
</v-widget>
139139
<v-widget title="Complex (Three-line)" class="mt-3">
140140
<div slot="widget-content">
141141
<v-list three-line subheader>
@@ -188,7 +188,24 @@
188188
</v-list-tile>
189189
</v-list>
190190
</div>
191-
</v-widget>
191+
</v-widget>
192+
<v-widget title="Long dark list with scroll" class="mt-3">
193+
<div slot="widget-content" style="max-height: 250px; overflow-y: scroll">
194+
<v-list dense dark>
195+
<v-list-tile avatar v-for="item in allUsers" :key="item.title" @click="handleClick" height="300">
196+
<v-list-tile-action>
197+
<v-icon color="pink">star</v-icon>
198+
</v-list-tile-action>
199+
<v-list-tile-content>
200+
<v-list-tile-title v-text="item.name"></v-list-tile-title>
201+
</v-list-tile-content>
202+
<v-list-tile-avatar>
203+
<img :src="item.avatar">
204+
</v-list-tile-avatar>
205+
</v-list-tile>
206+
</v-list>
207+
</div>
208+
</v-widget>
192209
</v-flex>
193210
<v-flex lg4>
194211
<v-widget title="Expandable list">
@@ -217,7 +234,7 @@
217234
</v-list-group>
218235
</v-list>
219236
</div>
220-
</v-widget>
237+
</v-widget>
221238
<v-card class="mt-3">
222239
<v-card-media src="/static/bg/15.jpg" height="300px">
223240
<v-layout column class="media">
@@ -290,7 +307,7 @@
290307
</v-list-tile-content>
291308
</v-list-tile>
292309
</v-list>
293-
</v-card>
310+
</v-card>
294311
</v-flex>
295312
</v-layout>
296313
</v-container>
@@ -310,7 +327,7 @@ export default {
310327
sound: false,
311328
video: false,
312329
widgets: true,
313-
invites: false,
330+
invites: false,
314331
folders: [
315332
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
316333
{ icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
@@ -385,18 +402,21 @@ export default {
385402
{ avatar: 'https://randomuser.me/api/portraits/men/4.jpg', title: 'Birthday gift', subtitle: "<span class='text--primary'>Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?" },
386403
{ divider: true, inset: true },
387404
{ avatar: 'https://randomuser.me/api/portraits/men/5.jpg', title: 'Recipe to try', subtitle: "<span class='text--primary'>Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos." }
388-
]
405+
]
389406
};
390407
},
391408
computed: {
392409
users () {
393410
return getUser(3);
411+
},
412+
allUsers () {
413+
return getUser();
394414
}
395-
},
415+
},
396416
methods: {
397417
handleClick (e) {
398418
return false;
399419
}
400420
}
401421
};
402-
</script>
422+
</script>

0 commit comments

Comments
 (0)
0