Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add JS instructions

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-29 23:46:27 +01:00
parent a14b67aa50
commit e1a82944d3
4 changed files with 189 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
docs/documentation/form/file.html
View File

@@ -2,8 +2,29 @@
title: File upload
layout: documentation
doc-tab: form
doc-subtab: upload
doc-subtab: file
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
variables:
- name: $file-border-color
value: transparent
- name: $file-radius
value: $radius
- name: $file-cta-background-color
value: $white-ter
- name: $file-cta-color
value: $grey-dark
- name: $file-cta-hover-color
value: $grey-darker
- name: $file-cta-active-color
value: $grey-darker
- name: $file-name-border-color
value: $file-cta-background-color
- name: $file-name-border-style
value: solid
- name: $file-name-border-width
value: 1px 1px 1px 0
- name: $file-name-max-width
value: 16em
---
{% capture file %}
@@ -22,8 +43,8 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
{% endcapture %}
{% capture file_path %}
<div class="file has-path">
{% capture file_name %}
<div class="file has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -34,7 +55,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Choose a file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -57,8 +78,8 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
{% endcapture %}
{% capture file_centered_path %}
<div class="file is-centered has-path">
{% capture file_centered_name %}
<div class="file has-name is-centered">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -69,7 +90,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Choose a file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -142,9 +163,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
{% endcapture %}
{% capture file_sizes_path %}
{% capture file_sizes_name %}
<div class="field">
<div class="file is-small has-path">
<div class="file is-small has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -155,7 +176,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Small file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -163,7 +184,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
<div class="field">
<div class="file has-path">
<div class="file has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -174,7 +195,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Normal file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -182,7 +203,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
<div class="field">
<div class="file is-medium has-path">
<div class="file is-medium has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -193,7 +214,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Medium file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -201,7 +222,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
<div class="field">
<div class="file is-large has-path">
<div class="file is-large has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -212,7 +233,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Large file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -286,9 +307,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
{% endcapture %}
{% capture file_sizes_centered_path %}
{% capture file_sizes_centered_name %}
<div class="field">
<div class="file is-small is-centered has-path">
<div class="file is-small is-centered has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -299,7 +320,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Small file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -307,7 +328,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
<div class="field">
<div class="file is-centered has-path">
<div class="file is-centered has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -318,7 +339,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Normal file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -326,7 +347,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
<div class="field">
<div class="file is-medium is-centered has-path">
<div class="file is-medium is-centered has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -337,7 +358,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Medium file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -345,7 +366,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
</div>
<div class="field">
<div class="file is-large is-centered has-path">
<div class="file is-large is-centered has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
@@ -356,7 +377,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
Large file…
</span>
</span>
<span class="file-path">
<span class="file-name">
{{ page.file_name }}
</span>
</label>
@@ -385,11 +406,37 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
<div class="content">
<p>
The <code>.file</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</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.
The <code>.file</code> element is a simple <strong>interactive label</strong> that wraps an <code>&lt;input type="file"&gt;</code>. It comprises several sub-elements:
</p>
<ul>
<li>
<code>.file</code> the main <strong>container</strong>
<ul>
<li>
<code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
<ul>
<li>
<code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
</li>
<li>
<code>.file-cta</code> the upload <strong>call-to-action</strong>
<ul>
<li>
<code>.file-icon</code> an optional <strong>upload</strong> icon
</li>
<li>
<code>.file-label</code> the "Choose a file…" text
</li>
</ul>
</li>
<li>
<code>.file-name</code> a container for the <strong>chosen file</strong> name
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="columns">
@@ -407,17 +454,27 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
<div class="columns">
<div class="column">
<div class="content">
<p>
With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
</p>
</div>
<div class="example">
{{ file_path }}
{{ file_name }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ file_path }}{% endhighlight %}
{% highlight html %}{{ file_name }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can have a <strong>centered block</strong> with the <code>.is-centered</code> modifier.
</p>
</div>
<div class="example">
{{ file_centered }}
</div>
@@ -429,17 +486,39 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
<div class="columns">
<div class="column">
<div class="content">
<p>
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-centered</code>.
</p>
</div>
<div class="example">
{{ file_centered_path }}
{{ file_centered_name }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ file_centered_path }}{% endhighlight %}
{% highlight html %}{{ file_centered_name }}{% endhighlight %}
</div>
</div>
{% include heading.html name="Sizes" %}
<div class="content">
<p>
You can append one of <strong>3 additional sizes</strong>:
</p>
<ul>
<li>
<code>.is-small</code>
</li>
<li>
<code>.is-medium</code>
</li>
<li>
<code>.is-large</code>
</li>
</ul>
</div>
<div class="columns">
<div class="column">
<div class="example">
@@ -454,11 +533,11 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
<div class="columns">
<div class="column">
<div class="example">
{{ file_sizes_path }}
{{ file_sizes_name }}
</div>
</div>
<div class="column">
{% highlight html %}{{ file_sizes_path }}{% endhighlight %}
{% highlight html %}{{ file_sizes_name }}{% endhighlight %}
</div>
</div>
@@ -476,12 +555,25 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
<div class="columns">
<div class="column">
<div class="example">
{{ file_sizes_centered_path }}
{{ file_sizes_centered_name }}
</div>
</div>
<div class="column">
{% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}
{% highlight html %}{{ file_sizes_centered_name }}{% endhighlight %}
</div>
</div>
{% include heading.html name="JavaScript" %}
<div class="content">
<p>
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
<br>
User <a href="https://github.com/chintanbanugaria"><strong>@chintanbanugaria</strong></a> on GitHub <a href="https://github.com/jgthms/bulma/issues/280#issuecomment-294099510">has provided</a> a simple solution <a href="https://jsfiddle.net/chintanbanugaria/uzva5byy/">on JSFiddle</a>.
</p>
</div>
{% include variables.html element=true %}
</div>
</section>