Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 19:34:30 -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

46
docs/documentation/form/textarea.html
View File

@@ -132,6 +132,12 @@ meta:
</div>
{% endcapture %}
<div class="content">
<p>
The Bulma <code>textarea</code> CSS class is the multiline version of the <a href="{{ site.data.links.by_id.form-input.path }}"><code>input</code> element</a>:
</p>
</div>
{% include elements/snippet.html content=textarea_example %}
{% capture fixedsize_example %}
@@ -142,7 +148,7 @@ meta:
<div class="content">
<p>
You can set the height of the textarea using the `rows` HTML attribute.
You can set the height of the textarea using the <code>rows</code> HTML attribute.
</p>
</div>
@@ -150,14 +156,46 @@ meta:
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The <code>textarea</code> element is available in several colors:
</p>
</div>
{% include elements/snippet.html content=colors_example %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>
The <code>textarea</code> element comes in <strong>4 different sizes:</strong>
</p>
</div>
{% include elements/snippet.html content=sizes_example %}
{% include elements/anchor.html name="States" %}
<div class="content">
<p>
Bulma styles the different <strong>states</strong> of the <code>textarea</code> elment. Each state is available as a pseudo-class and a CSS class:
</p>
<ul>
<li>
<code>:hover</code> and <code>is-hovered</code>
</li>
<li>
<code>:focus</code> and <code>is-focused</code>
</li>
<li>
<code>:active</code> and <code>is-active</code>
</li>
</ul>
<p>
This allows you to obtain the style of a certain state without having to trigger it.
</p>
</div>
<h4 class="subtitle">Normal</h4>
{% include elements/snippet.html content=normal_example %}
@@ -209,4 +247,10 @@ meta:
<h4 class="subtitle">Fixed Size</h4>
<div class="content">
<p>
You can disable a <code>textarea</code> resizing by appending the <code>has-fixed-size</code> modifier:
</p>
</div>
{% include elements/snippet.html content=fixedsize_example %}