snackbar.vue
3 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<script setup>
import * as demoCode from '@/views/demos/components/snackbar/demoCodeSnackbar'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-snackbar</code> component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.</p>
<DemoSnackbarBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 With Action -->
<AppCardCode
title="With Action"
:code="demoCode.withAction"
>
<p>Use <code>actions</code> slot to add action button. A <code>v-snackbar</code> in its simplest form displays a temporary and closable notification to the user.</p>
<DemoSnackbarWithAction />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Multi line -->
<AppCardCode
title="Multi Line"
:code="demoCode.multiLine"
>
<p>The <code>multi-line</code> property extends the height of the <code>v-snackbar</code> to give you a little more room for content.</p>
<DemoSnackbarMultiLine />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Timeout -->
<AppCardCode
title="Timeout"
:code="demoCode.timeout"
>
<p>The <code>timeout</code> property lets you customize the delay before the <code>v-snackbar</code> is hidden.</p>
<DemoSnackbarTimeout />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Vertical -->
<AppCardCode
title="Vertical"
:code="demoCode.vertical"
>
<p>The <code>vertical</code> property allows you to stack the content of your <code>v-snackbar</code>.</p>
<DemoSnackbarVertical />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Position -->
<AppCardCode
title="Position"
:code="demoCode.position"
>
<p>Use <code>location</code> prop to change the position of snackbar.</p>
<DemoSnackbarPosition />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Variants -->
<AppCardCode
title="Variants"
:code="demoCode.variants"
>
<p>Apply different styles to the snackbar using props such as <code>shaped</code>, <code>rounded</code>, <code>color</code>, <code>text</code>, <code>outlined</code>, <code>tile</code> and more.</p>
<DemoSnackbarVariants />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Transition -->
<AppCardCode
title="Transition"
:code="demoCode.transition"
>
<p>Use transition prop to sets the component transition.</p>
<DemoSnackbarTransition />
</AppCardCode>
</VCol>
</VRow>
</template>