mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 08:03:34 +09:00
86 lines
2.4 KiB
Markdown
86 lines
2.4 KiB
Markdown
### Boxed File
|
|
|
|
Vuero file inputs can have a boxed style.
|
|
You just need to add the `is-boxed` class to your file input element
|
|
to apply this style. Please refer to markup for more details about usage.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<template>
|
|
<VField grouped>
|
|
<VControl>
|
|
<div class="file is-boxed">
|
|
<label class="file-label">
|
|
<input
|
|
class="file-input"
|
|
type="file"
|
|
name="resume"
|
|
>
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-cloud-upload-alt" />
|
|
</span>
|
|
<span class="file-label"> Choose a file… </span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VField grouped>
|
|
<VControl>
|
|
<div class="file is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</VControl>
|
|
<VControl>
|
|
<div class="file is-default is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</VControl>
|
|
<VControl>
|
|
<div class="file is-primary is-boxed">
|
|
<label class="file-label">
|
|
<input class="file-input" type="file" name="resume">
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!--/example-->
|