file-input.vue
4.35 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<script setup>
import * as demoCode from '@/views/demos/forms/form-elements/file-input/demoCodeFileInput'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-file-input</code> component is used to selecting files.</p>
<DemoFileInputBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>You can reduces the file input height with <code>density</code> prop. Available options are: <code>default</code>, <code>comfortable</code>, and <code>compact</code>.</p>
<DemoFileInputDensity />
</AppCardCode>
</VCol>
<VCol cols="12">
<!-- 👉 Variant -->
<AppCardCode
title="Variant"
:code="demoCode.variant"
>
<p>use <code>solo</code>, <code>filled</code>, <code>outlined</code>, <code>plain</code> and <code>underlined</code> option of <code>variant</code> prop to change the look of file input.</p>
<DemoFileInputVariant />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Accept -->
<AppCardCode
title="Accept"
:code="demoCode.accept"
>
<p><code>v-file-input</code> component can accept only specific media formats/file types if you want.</p>
<DemoFileInputAccept />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Chips -->
<AppCardCode
title="Chips"
:code="demoCode.chips"
>
<p>Use <code>chip</code> prop to display the selected file as a chip.</p>
<DemoFileInputChips />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Counter -->
<AppCardCode
title="Counter"
:code="demoCode.counter"
>
<p>When using the <code>show-size</code> property along with <code>counter</code>, the total number of files and size will be displayed under the input.</p>
<DemoFileInputCounter />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Multiple -->
<AppCardCode
title="Multiple"
:code="demoCode.multiple"
>
<p>
The <code>v-file-input</code> can contain multiple files at the same time when using the <code>multiple</code> prop.
</p>
<DemoFileInputMultiple />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Prepend icon -->
<AppCardCode
title="Prepend icon"
:code="demoCode.prependIcon"
>
<p>
The <code>v-file-input</code> has a default <code>prepend-icon</code> that can be set on the component or adjusted globally.
</p>
<DemoFileInputPrependIcon />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Show size -->
<AppCardCode
title="Show size"
:code="demoCode.showSize"
>
<p>The displayed size of the selected file(s) can be configured with the <code>show-size</code> property.</p>
<DemoFileInputShowSize />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Validation -->
<AppCardCode
title="Validation"
:code="demoCode.validation"
>
<p>You can use the <code>rules</code> prop to create your own custom validation parameters.</p>
<DemoFileInputValidation />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Selection slot -->
<AppCardCode
title="Selection slot"
:code="demoCode.selectionSlot"
>
<p>Using the <code>selection</code> slot, you can customize the appearance of your input selections.</p>
<DemoFileInputSelectionSlot />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Loading -->
<AppCardCode
title="Loading"
:code="demoCode.loading"
>
<p>Use <code>loading</code> prop to displays linear progress bar.</p>
<DemoFileInputLoading />
</AppCardCode>
</VCol>
</VRow>
</template>