mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 04:42:34 +09:00
first
This commit is contained in:
101
documentation/elements/forms/file/file-base-documentation.md
Normal file
101
documentation/elements/forms/file/file-base-documentation.md
Normal file
@@ -0,0 +1,101 @@
|
||||
### Input File
|
||||
|
||||
Vuero provides default styles for file inputs, in case you need a control
|
||||
to upload a single file in your forms.
|
||||
File inputs can look like upload buttons.
|
||||
Please refer to markup for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VField grouped>
|
||||
<VControl>
|
||||
<div class="file">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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-info">
|
||||
<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-->
|
||||
@@ -0,0 +1,85 @@
|
||||
### 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-->
|
||||
59
documentation/elements/forms/file/file-left-documentation.md
Normal file
59
documentation/elements/forms/file/file-left-documentation.md
Normal file
@@ -0,0 +1,59 @@
|
||||
### 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-->
|
||||
@@ -0,0 +1,60 @@
|
||||
### File right
|
||||
|
||||
File inputs can show an additional area to display the selected file name.
|
||||
You just need to add the `has-name` and `is-right` classes
|
||||
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 is-right">
|
||||
<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 is-right">
|
||||
<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-->
|
||||
Reference in New Issue
Block a user