mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 19:04:30 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -1,274 +1,218 @@
|
||||
---
|
||||
title: File upload
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: file
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-file
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-file
|
||||
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
variables_keys:
|
||||
- $file-border-color
|
||||
- $file-radius
|
||||
- $file-cta-background-color
|
||||
- $file-cta-color
|
||||
- $file-cta-hover-color
|
||||
- $file-cta-active-color
|
||||
- $file-name-border-color
|
||||
- $file-name-border-style
|
||||
- $file-name-border-width
|
||||
- $file-name-max-width
|
||||
- $file-border-color
|
||||
- $file-radius
|
||||
- $file-cta-background-color
|
||||
- $file-cta-color
|
||||
- $file-cta-hover-color
|
||||
- $file-cta-active-color
|
||||
- $file-name-border-color
|
||||
- $file-name-border-style
|
||||
- $file-name-border-width
|
||||
- $file-name-max-width
|
||||
meta:
|
||||
experimental: true
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture file %}
|
||||
<div class="file">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_name %}
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_name_right %}
|
||||
<div class="file has-name is-right">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_name_fullwidth %}
|
||||
<div class="file has-name is-fullwidth">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_boxed %}
|
||||
<div class="file is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_boxed_name %}
|
||||
<div class="file has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_a %}
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Primary file…
|
||||
</span>
|
||||
<span class="file-label"> Primary file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_b %}
|
||||
<div class="file is-info has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Info file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Info file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_c %}
|
||||
<div class="file is-warning is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<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">
|
||||
Warning file…
|
||||
</span>
|
||||
<span class="file-label"> Warning file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_d %}
|
||||
<div class="file is-danger has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<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">
|
||||
Danger file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Danger file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered %}
|
||||
<div class="file is-centered is-boxed is-success has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Centered file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Centered file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_right %}
|
||||
<div class="file is-right is-info">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Right file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Right file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_javascript %}
|
||||
<div id="file-js-example" class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
No file uploaded
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> No file uploaded </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const fileInput = document.querySelector('#file-js-example input[type=file]');
|
||||
const fileInput = document.querySelector("#file-js-example input[type=file]");
|
||||
fileInput.onchange = () => {
|
||||
if (fileInput.files.length > 0) {
|
||||
const fileName = document.querySelector('#file-js-example .file-name');
|
||||
const fileName = document.querySelector("#file-js-example .file-name");
|
||||
fileName.textContent = fileInput.files[0].name;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -276,7 +220,8 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>file</code> element is a simple <strong>interactive label</strong> that wraps an <code><input type="file"></code>. It comprises several sub-elements:
|
||||
The <code>file</code> element is a simple <strong>interactive label</strong> that wraps an
|
||||
<code><input type="file"></code>. It comprises several sub-elements:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -285,23 +230,15 @@ meta:
|
||||
<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-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>
|
||||
<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>
|
||||
<li><code>file-name</code> a container for the <strong>chosen file</strong> name</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -309,39 +246,37 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file %}
|
||||
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
{% include docs/elements/snippet.html content=file %}
|
||||
{% include docs/elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<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.
|
||||
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="bd-example">
|
||||
{{ file_name }}
|
||||
</div>
|
||||
<div class="bd-example">{{ file_name }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_name -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_name_right }}
|
||||
<p>You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ file_name_right }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_right }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_name_right -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -352,52 +287,49 @@ meta:
|
||||
You can also <strong>expand</strong> the name to fill up the space with the <code>is-fullwidth</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_name_fullwidth }}
|
||||
</div>
|
||||
<div class="bd-example">{{ file_name_fullwidth }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_name_fullwidth -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_boxed }}
|
||||
<p>You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ file_boxed }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_boxed -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_boxed_name }}
|
||||
<p>You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ file_boxed_name }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed_name }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_boxed_name -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can style the file element by appending one of the <strong>{{ site.data.colors.derived | size }} color modifiers</strong>:
|
||||
You can style the file element by appending one of the
|
||||
<strong>{{ site.data.colors.derived | size }} color modifiers</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
{% for color in site.data.colors.derived %}
|
||||
@@ -408,24 +340,19 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_colors_a %}
|
||||
{% include elements/snippet.html content=file_colors_b %}
|
||||
{% include elements/snippet.html content=file_colors_c %}
|
||||
{% include elements/snippet.html content=file_colors_d %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=file_colors_a %}
|
||||
{% include docs/elements/snippet.html content=file_colors_b %}
|
||||
{% include docs/elements/snippet.html content=file_colors_c %}
|
||||
{% include docs/elements/snippet.html content=file_colors_d %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append one of the <strong>4 available sizes</strong>:
|
||||
</p>
|
||||
<p>You can append one of the <strong>4 available sizes</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-small</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-normal</code> (default)
|
||||
</li>
|
||||
<li><code>is-normal</code> (default)</li>
|
||||
<li>
|
||||
<code>is-medium</code>
|
||||
</li>
|
||||
@@ -436,121 +363,94 @@ meta:
|
||||
</div>
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }}">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>align</strong> the file input:
|
||||
</p>
|
||||
<p>You can <strong>align</strong> the file input:</p>
|
||||
<ul>
|
||||
<li>
|
||||
to the <strong>center</strong> with the <code>is-centered</code> modifier
|
||||
</li>
|
||||
<li>
|
||||
to the <strong>right</strong> with the <code>is-right</code> modifier
|
||||
</li>
|
||||
<li>to the <strong>center</strong> with the <code>is-centered</code> modifier</li>
|
||||
<li>to the <strong>right</strong> with the <code>is-right</code> modifier</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_centered %}
|
||||
|
||||
{% include elements/snippet.html content=file_right %}
|
||||
|
||||
{% include elements/anchor.html name="JavaScript" %}
|
||||
{% include docs/elements/snippet.html content=file_centered %}
|
||||
{% include docs/elements/snippet.html content=file_right %}
|
||||
{% include docs/elements/anchor.html name="JavaScript" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
|
||||
Here is an example of how this could be done:
|
||||
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>. Here
|
||||
is an example of how this could be done:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html horizontal=true content=file_javascript %}
|
||||
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
file='form'
|
||||
{% include docs/elements/snippet.html horizontal=true content=file_javascript %}
|
||||
{%
|
||||
include docs/components/variables.html type='element'
|
||||
variables_keys=page.variables_keys folder='elements' file='form'
|
||||
%}
|
||||
|
||||
Reference in New Issue
Block a user