checkbox.vue
3.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<script setup>
import * as demoCode from '@/views/demos/forms/form-elements/checkbox/demoCodeCheckbox'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p><code>v-checkbox</code> in its simplest form provides a toggle between 2 values.</p>
<DemoCheckboxBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>Use <code>density</code> prop to reduces the input height. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
<DemoCheckboxDensity />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>Checkboxes can be colored by using any of the builtin colors and contextual names using the <code>color</code> prop.</p>
<DemoCheckboxColors />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Model as array -->
<AppCardCode
title="Model as array"
:code="demoCode.modelAsArray"
>
<p>Multiple <code>v-checkbox</code>'s can share the same <code>v-model</code> by using an array.</p>
<DemoCheckboxModelAsArray />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Icon -->
<AppCardCode
title="Icon"
:code="demoCode.icon"
>
<p>Use <code>false-icon</code> and <code>true-icon</code> prop to change the icon on the checkbox.</p>
<DemoCheckboxIcon />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Checkbox Value -->
<AppCardCode
title="Checkbox Value"
:code="demoCode.checkboxValue"
>
<p>Use <code>false-value</code> and <code>true-value</code> prop to sets value for truthy and falsy state</p>
<DemoCheckboxCheckboxValue />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 States -->
<AppCardCode
title="States"
:code="demoCode.states"
>
<p><code>v-checkbox</code> can have different states such as <code>default</code>, <code>disabled</code>, and <code>indeterminate</code>.</p>
<DemoCheckboxStates />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Label Slot -->
<AppCardCode
title="Label Slot"
:code="demoCode.labelSlot"
>
<p>Checkbox labels can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
<DemoCheckboxLabelSlot />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Inline text-field -->
<AppCardCode
title="Inline text-field"
:code="demoCode.inlineTextField"
>
<p>You can place <code>v-checkbox</code> in line with other components such as <code>v-text-field</code>.</p>
<DemoCheckboxInlineTextField />
</AppCardCode>
</VCol>
</VRow>
</template>