switch.vue
2.55 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
<script setup>
import * as demoCode from '@/views/demos/forms/form-elements/switch/demoCodeSwitch'
</script>
<template>
<VRow>
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>A <code>v-switch</code> in its simplest form provides a toggle between 2 values.</p>
<DemoSwitchBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Inset -->
<AppCardCode
title="Inset"
:code="demoCode.inset"
>
<p>To change the default <code>inset</code> switch, simply modify the inset prop to a <code>false</code> value.</p>
<DemoSwitchInset />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>Switches can be colored by using any of the builtin colors and contextual names using the <code>color</code> prop.</p>
<DemoSwitchColors />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Model as array -->
<AppCardCode
title="Model as array"
:code="demoCode.modelAsArray"
>
<p>Multiple <code>v-switch</code>'s can share the same <code>v-model</code> by using an array.</p>
<DemoSwitchModelAsArray />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Label slot -->
<AppCardCode
title="Label slot"
:code="demoCode.labelSlot"
>
<p>Switch labels can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
<DemoSwitchLabelSlot />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 True and False Value -->
<AppCardCode
title="True and False Value"
:code="demoCode.trueAndFalseValue"
>
<p>
Use <code>false-value</code> and <code>true-value</code> prop to sets value for truthy and falsy state
</p>
<DemoSwitchTrueAndFalseValue />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 States -->
<AppCardCode
title="States"
:code="demoCode.states"
>
<p><code>v-switch</code> can have different states such as <code>default</code>, <code>disabled</code>, and <code>loading</code>.</p>
<DemoSwitchStates />
</AppCardCode>
</VCol>
</VRow>
</template>