avatar.vue
2.29 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
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
<script setup>
import * as demoCode from '@/views/demos/components/avatar/demoCodeAvatar'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>Use <code>color</code> prop to change the background color of avatar.</p>
<DemoAvatarColors />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Initials -->
<AppCardCode
title="Tonal"
:code="demoCode.tonal"
>
<p>Use <code>variant="tonal"</code> to create light background avatars.</p>
<DemoAvatarTonal />
</AppCardCode>
</VCol>
<VCol
md="6"
cols="12"
>
<!-- 👉 Sizes -->
<AppCardCode
title="Sizes"
:code="demoCode.sizes"
>
<p>The <code>size</code> prop allows you to change the height and width of the avatar.</p>
<DemoAvatarSizes />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Icons -->
<AppCardCode
title="Icons"
:code="demoCode.icons"
>
<p>You can use <code>icon</code> prop of <code>v-avatar</code> component for rendering icons.</p>
<DemoAvatarIcons />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Rounded -->
<AppCardCode
title="Rounded"
:code="demoCode.rounded"
>
<p>The <code>rounded</code> prop can be used to change the border radius of <code>v-avatar</code>.</p>
<DemoAvatarRounded />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Images -->
<AppCardCode
title="Images"
:code="demoCode.images"
>
<p>You can use <code>image</code> prop of <code>v-avatar</code> component for rendering image.</p>
<DemoAvatarImages />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Group -->
<AppCardCode
title="Group"
:code="demoCode.group"
>
<p>Use <code>v-avatar-group</code> class as a wrapper of avatars.</p>
<DemoAvatarGroup />
</AppCardCode>
</VCol>
</VRow>
</template>