alert.vue
5 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
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
<script setup>
import * as demoCode from '@/views/demos/components/alert/demoCodeAlert'
</script>
<template>
<VRow>
<VCol cols="12">
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<DemoAlertBasic />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>The <code>color</code> prop is used to change the background color of the alert.</p>
<DemoAlertColors />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Icons -->
<AppCardCode
title="Icons"
:code="demoCode.icons"
>
<p>The <code>icon</code> prop allows you to add an icon to the beginning of the alert component. If a <code>type</code> is provided, this will override the default type icon. Additionally, setting the <code>icon</code> prop to false will remove the icon altogether.</p>
<DemoAlertIcons />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Border -->
<AppCardCode
title="Border"
:code="demoCode.border"
>
<p>The <code>border</code> prop adds a simple border to one of the 4 sides of the alert. This can be combined with props like <code>color</code>, <code>type</code> and <code>icon</code> to provide unique accents to the alert.</p>
<DemoAlertBorder />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Colored Border -->
<AppCardCode
title="Colored Border"
:code="demoCode.coloredBorder"
>
<p>The <code>colored-border</code> prop removes the alert background in order to accent the <code>border</code> prop. If a type is set, it will use the type's default color. If no <code>color</code> or <code>type</code> is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).</p>
<DemoAlertColoredBorder />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>The <code>density</code> prop decreases the height of the alert based upon 1 of 3 levels of density. <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
<DemoAlertDensity />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Type -->
<AppCardCode
title="Type"
:code="demoCode.type"
>
<p>The <code>type</code> prop provides 4 default v-alert styles: <code>success</code>, <code>info</code>, <code>warning</code>, and <code>error</code>. Each of these styles provide a default icon and color.</p>
<DemoAlertType />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Closable -->
<AppCardCode
title="Closable"
:code="demoCode.closable"
>
<p>The <code>closable</code> prop adds a close button to the end of the alert component. Clicking this button will set its value to false and effectively hide the alert.</p>
<DemoAlertClosable />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 V-model support -->
<AppCardCode
title="v-model support"
:code="demoCode.vModelSupport"
>
<p>Clicking this button will set its value to <code>false</code> and effectively hide the alert. You can restore the alert by binding <code>v-model</code> and setting it to true.</p>
<DemoAlertVModelSupport />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Outlined -->
<AppCardCode
title="Outlined"
:code="demoCode.outlined"
>
<p>The <code>variant="outlined"</code> prop inverts the style of an alert, inheriting the currently applied <code>color</code>, applying it to the text and border, and making its background transparent.</p>
<DemoAlertOutlined />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Tonal -->
<AppCardCode
title="Tonal"
:code="demoCode.tonal"
>
<p>The <code>variant</code> prop provides an easy way to change the overall style of your alerts. The <code>variant="tonal"</code> prop is a simple alert variant that applies a reduced opacity background of the provided color.</p>
<DemoAlertTonal />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Elevation -->
<AppCardCode
title="Elevation"
:code="demoCode.elevation"
>
<p>Use <code>elevation</code> prop to set a box-shadow to alert.</p>
<DemoAlertElevation />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Prominent -->
<AppCardCode
title="Prominent"
:code="demoCode.prominent"
>
<p>The <code>prominent</code> prop provides a more pronounced alert by increasing the size of the icon.</p>
<DemoAlertProminent />
</AppCardCode>
</VCol>
</VRow>
</template>