mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:53:48 +09:00
60 lines
1.5 KiB
Markdown
60 lines
1.5 KiB
Markdown
### File left
|
|
|
|
File inputs can show an additional area to display the selected file name.
|
|
You just need to add the `has-name` 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 has-name">
|
|
<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>
|
|
<span class="file-name light-text"> 22082020_project_budget.xls </span>
|
|
</label>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VField grouped>
|
|
<VControl>
|
|
<div class="file has-name">
|
|
<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>
|
|
<span class="file-name light-text">
|
|
22082020_project_budget.xls
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!--/example-->
|