select.vue
3.26 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
<script setup>
import * as demoCode from '@/views/demos/forms/form-elements/select/demoCodeSelect'
</script>
<template>
<VRow>
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>Select fields components are used for collecting user provided information from a list of options.</p>
<DemoSelectBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>You can use <code>density</code> prop to reduce the field height and lower max height of list items.</p>
<DemoSelectDensity />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Variant -->
<AppCardCode
title="Variant"
:code="demoCode.variant"
>
<p>
Use <code>filled</code>, <code>outlined</code>, <code>solo</code>, <code>underlined</code> and <code>plain</code> options of <code>variant</code> prop to change appearance of select.
</p>
<DemoSelectVariant />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Custom text and value -->
<AppCardCode
title="Custom text and value"
:code="demoCode.customTextAndValue"
>
<p>You can specify the specific properties within your items array that correspond to the title and value fields. In this example we also use the return-object prop which will return the entire object of the selected item on selection.</p>
<DemoSelectCustomTextAndValue />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Icons -->
<AppCardCode
title="Icons"
:code="demoCode.icons"
>
<p>Use a custom <code>prepend</code> or <code>appended</code> icon.</p>
<DemoSelectIcons />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Chips -->
<AppCardCode
title="Chips"
:code="demoCode.chips"
>
<p>Use <code>chips</code> prop to make selected option as chip.</p>
<DemoSelectChips />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Menu Props -->
<AppCardCode
title="Menu Props"
:code="demoCode.menuProps"
>
<p>Custom props can be passed directly to <code>v-menu</code> using <code>menuProps</code> prop.</p>
<DemoSelectMenuProps />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Multiple -->
<AppCardCode
title="Multiple"
:code="demoCode.multiple"
>
<p>Use <code>multiple</code> prop to select multiple option.</p>
<DemoSelectMultiple />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Selection slot -->
<AppCardCode
title="Selection slot"
:code="demoCode.selectionSlot"
>
<p>The <code>selection</code> slot can be used to customize the way selected values are shown in the input.</p>
<DemoSelectSelectionSlot />
</AppCardCode>
</VCol>
</VRow>
</template>