mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
Add file
This commit is contained in:
Jeremy Thomas
@@ -8,6 +8,14 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.experimental %}
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.since %}
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
|
||||
@@ -19,6 +19,12 @@
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'radio' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/radio/">
|
||||
Radio
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'file' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/file/">
|
||||
File
|
||||
<span class="tag is-success" style="margin-left: 1em;">
|
||||
New!
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -37,10 +37,15 @@
|
||||
.anchor-title
|
||||
padding-top: 1.5rem
|
||||
position: relative
|
||||
+mobile
|
||||
padding-left: 2rem
|
||||
|
||||
.anchor-link
|
||||
position: absolute
|
||||
right: calc(100% + 1rem)
|
||||
+mobile
|
||||
left: 0
|
||||
right: auto
|
||||
|
||||
.article-image
|
||||
background-color: $primary
|
||||
|
||||
File diff suppressed because one or more lines are too long
487
docs/documentation/form/file.html
Normal file
487
docs/documentation/form/file.html
Normal file
@@ -0,0 +1,487 @@
|
||||
---
|
||||
title: File upload
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: upload
|
||||
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
---
|
||||
|
||||
{% capture file %}
|
||||
<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="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_path %}
|
||||
<div class="file has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered %}
|
||||
<div class="file is-centered">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered_path %}
|
||||
<div class="file is-centered has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes %}
|
||||
<div class="field">
|
||||
<div class="file is-small">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<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="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_path %}
|
||||
<div class="field">
|
||||
<div class="file is-small has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_centered %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-centered">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-centered">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-centered">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-centered">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_centered_path %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-centered has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-centered has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-centered has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-centered has-path">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">File upload</h1>
|
||||
<h2 class="subtitle">
|
||||
A custom <strong>file upload</strong> input, without JavaScript
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
experimental=true
|
||||
since="0.5.1"
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.file</code> class is a simple wrapper around the <code><input type="radio"></code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
</p>
|
||||
<p>
|
||||
Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_centered }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_centered }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_centered_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_centered_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_centered }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_centered }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_centered_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user