Blame view
src/pages/ui/Avatar.vue
6.02 KB
8ab31dc8b
changes
|
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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
<template>
<div id="page-alerts">
<v-container grid-list-xl fluid>
<v-layout row wrap>
<v-flex lg12>
<v-widget title="Basic Usage">
<div slot="widget-content">
<v-layout wrap justify-space-around align-center class="ma-0">
<v-avatar class="indigo">
<v-icon dark>account_circle</v-icon>
</v-avatar>
<v-avatar>
<img src="/static/avatar/me.jpeg" alt="John">
</v-avatar>
<v-badge overlap>
<span slot="badge">3</span>
<v-avatar
class="purple red--after"
>
<v-icon dark>notifications</v-icon>
</v-avatar>
</v-badge>
<v-avatar class="teal">
<span class="white--text headline">C</span>
</v-avatar>
<v-avatar class="red">
<span class="white--text headline">J</span>
</v-avatar>
</v-layout>
</div>
</v-widget>
</v-flex>
<v-flex lg12>
<v-widget title="Advance usage">
<div slot="widget-content">
<v-layout justify-center column class="ma-0">
<v-subheader>Today</v-subheader>
<v-expansion-panel popout>
<v-expansion-panel-content
hide-actions
v-for="(message, i) in messages"
:key="i"
>
<v-layout align-center row spacer slot="header">
<v-flex xs4 sm2 md1>
<v-avatar
size="36px"
slot="activator"
>
<img
src="/static/avatar/me.jpeg"
alt=""
v-if="message.avatar"
>
<v-icon :color="message.color" v-else>{{ message.icon }}</v-icon>
</v-avatar>
</v-flex>
<v-flex sm5 md3 hidden-xs-only>
<strong v-html="message.name"/>
<span class="grey--text" v-if="message.total"> ({{ message.total }})</span>
</v-flex>
<v-flex no-wrap xs5 sm3>
<v-chip
label
small
:color="`${message.color} lighten-4`"
class="ml-0"
v-if="message.new"
>{{ message.new }} new</v-chip>
<strong v-html="message.title"/>
</v-flex>
<v-flex
class="grey--text"
ellipsis
hidden-sm-and-down
v-if="message.excerpt"
>
—
{{ message.excerpt }}
</v-flex>
</v-layout>
<v-card>
<v-divider></v-divider>
<v-card-text v-text="lorem"></v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-layout>
</div>
</v-widget>
</v-flex>
<v-flex lg12>
<v-widget title="Resizable">
<div slot="widget-content">
<v-container grid-list-md>
<v-layout row wrap>
<v-flex xs12 sm6 md4>
<v-slider
v-model="slider"
:min="16"
:max="256"
label="Size"
thumb-label
></v-slider>
<v-switch
label="Tile"
v-model="tile"
></v-switch>
</v-flex>
<v-flex
xs12
sm6
md8
text-xs-center
layout
align-center
justify-center
>
<v-avatar
:tile="tile"
:size="avatarSize"
class="grey lighten-4"
>
<img src="/static/avatar/me.jpeg" alt="avatar">
</v-avatar>
</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: () => ({
messages: [
{
avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460',
name: 'John Leider',
title: 'Welcome to Vuetify.js!',
excerpt: 'Thank you for joining our community...'
},
{
color: 'red',
icon: 'people',
name: 'Social',
new: 1,
total: 3,
title: 'Twitter'
},
{
color: 'teal',
icon: 'local_offer',
name: 'Promos',
new: 2,
total: 4,
title: 'Shop your way',
exceprt: 'New deals available, Join Today'
}
],
slider: 56,
tile: false,
lorem: 'Lorem ipsum dolor sit amet, at aliquam vivendum vel, everti delicatissimi cu eos. Dico iuvaret debitis mel an, et cum zril menandri. Eum in consul legimus accusam. Ea dico abhorreant duo, quo illum minimum incorrupte no, nostro voluptaria sea eu. Suas eligendi ius at, at nemore equidem est. Sed in error hendrerit, in consul constituam cum.'
}),
computed: {
avatarSize () {
return `${this.slider}px`;
}
},
methods: {
}
};
</script>
|