radio.vue
2.66 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/forms/form-elements/radio/demoCodeRadio'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-radio</code> component is a simple radio button.</p>
<DemoRadioBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>Radios can be colored by using any of the built-in colors and contextual names using the <code>color</code> prop.</p>
<DemoRadioColors />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Inline -->
<AppCardCode
title="Inline"
:code="demoCode.inline"
>
<p>Use <code>inline</code> prop to displays radio buttons in row.</p>
<DemoRadioInline />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>Use <code>density</code> prop to adjusts the spacing within the component. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
<DemoRadioDensity />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Label Slot -->
<AppCardCode
title="Label Slot"
:code="demoCode.labelSlot"
>
<p>Radio Group labels can be defined in <code>label</code> slot - that will allow to use HTML content.</p>
<DemoRadioLabelSlot />
</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 set icon on inactive and active state.</p>
<DemoRadioIcon />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Validation -->
<AppCardCode
title="Validation"
:code="demoCode.validation"
>
<p>Use <code>rules</code> prop to validate a radio. Accepts a mixed array of types <code>function</code>, <code>boolean</code> and <code>string</code>. Functions pass an input value as an argument and must return either <code>true</code> / <code>false</code> or a string containing an error message.</p>
<DemoRadioValidation />
</AppCardCode>
</VCol>
</VRow>
</template>