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

Improve form documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-13 20:06:56 +01:00
parent e5390369a9
commit a87e20b5c7
5 changed files with 213 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
docs/documentation/form/general.html
View File

@@ -106,6 +106,12 @@ variables_keys:
</div>
{% endcapture %}
{% capture control_example %}
<div class="control">
<input class="input" type="text" placeholder="Text input">
</div>
{% endcapture %}
{% capture field_example %}
<div class="field">
<label class="label">Label</label>
@@ -807,23 +813,66 @@ variables_keys:
{% endcapture %}
<div class="content">
<p>The following form controls <strong>classes</strong> are supported:</p>
<p>
Bulma supports the following native <strong>HTML form elements</strong>: <code>&lt;form&gt;</code> <code>&lt;button&gt;</code> <code>&lt;input&gt;</code> <code>&lt;textarea&gt;</code> and <code>&lt;label&gt;</code>.
</p>
<p>
The following CSS <strong>classes</strong> are supported:
</p>
<ul>
<li><code>.label</code></li>
<li><code>.input</code></li>
<li><code>.textarea</code></li>
<li><code>.select</code></li>
<li><code>.checkbox</code></li>
<li><code>.radio</code></li>
<li><code>.button</code></li>
<li><code>.help</code></li>
<li><code>label</code></li>
<li><code>input</code></li>
<li><code>textarea</code></li>
<li><code>select</code></li>
<li><code>checkbox</code></li>
<li><code>radio</code></li>
<li><code>button</code></li>
<li><code>help</code></li>
</ul>
<p>Each of them should be wrapped in a <code>.control</code> container.<br>
When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
</div>
<div class="content">
<p>
To maintain the design evenly balanced, Bulma provides a very useful <code>control</code> container with which you can <strong>wrap</strong> the form controls.
<br>
When combining several controls in a <strong>form</strong>, use the <code>field</code> class as a <strong>container</strong>, to keep the spacing consistent.
</p>
</div>
{% include elements/anchor.html name="Complete form example" %}
{% include elements/snippet.html content=example more=true %}
{% include elements/anchor.html name="Form control" %}
<div class="content">
<p>
The <code>control</code> element is a wrapper for form controls. It gives the possibility to:
</p>
<ul>
<li>
resize form controls
</li>
<li>
combine form controls into a group
</li>
<li>
combine form controls into a list
</li>
<li>
append and prepend icons to a form control
</li>
</ul>
</div>
{% include elements/snippet.html content=control_example %}
<div class="content">
<p>
For the best results using Bulma, it's recommended to use the <code>control</code> element as often as possible.
</p>
</div>
{% include elements/anchor.html name="Form field" %}
<div class="content">
@@ -1015,20 +1064,20 @@ variables_keys:
<div class="content">
<p>
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>field-label</code> comes with <strong>4 size modifiers</strong>:
</p>
<ul>
<li>
<code>.is-small</code>
<code>is-small</code>
</li>
<li>
<code>.is-normal</code> for any <code>.input</code> or <code>.button</code>
<code>is-normal</code> for any <code>input</code> or <code>button</code>
</li>
<li>
<code>.is-medium</code>
<code>is-medium</code>
</li>
<li>
<code>.is-large</code>
<code>is-large</code>
</li>
</ul>
</div>