library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add group multiline docs

Browse Source
This commit is contained in:
Jeremy Thomas 2017-07-24 20:45:21 +02:00
parent 298832fdcf
commit cbb0394975
1 changed files with 163 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -457,6 +457,51 @@ doc-subtab: general
{% endcapture %}
{% capture group_example %}
<div class="field is-grouped">
<p class="control">
<a class="button is-primary">
Submit
</a>
</p>
<p class="control">
<a class="button is-light">
Cancel
</a>
</p>
</div>
{% endcapture %}
{% capture group_centered_example %}
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-primary">
Submit
</a>
</p>
<p class="control">
<a class="button is-light">
Cancel
</a>
</p>
</div>
{% endcapture %}
{% capture group_right_example %}
<div class="field is-grouped is-grouped-right">
<p class="control">
<a class="button is-primary">
Submit
</a>
</p>
<p class="control">
<a class="button is-light">
Cancel
</a>
</p>
</div>
{% endcapture %}
{% capture group_expanded_example %}
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Find a repository">
@ -469,6 +514,76 @@ doc-subtab: general
</div>
{% endcapture %}
{% capture group_multiline_example %}
<div class="field is-grouped is-grouped-multiline">
<p class="control">
<a class="button">
One
</a>
</p>
<p class="control">
<a class="button">
Two
</a>
</p>
<p class="control">
<a class="button">
Three
</a>
</p>
<p class="control">
<a class="button">
Four
</a>
</p>
<p class="control">
<a class="button">
Five
</a>
</p>
<p class="control">
<a class="button">
Size
</a>
</p>
<p class="control">
<a class="button">
Seven
</a>
</p>
<p class="control">
<a class="button">
Eight
</a>
</p>
<p class="control">
<a class="button">
Nine
</a>
</p>
<p class="control">
<a class="button">
Ten
</a>
</p>
<p class="control">
<a class="button">
Eleven
</a>
</p>
<p class="control">
<a class="button">
Twelve
</a>
</p>
<p class="control">
<a class="button">
Thirteen
</a>
</p>
</div>
{% endcapture %}
{% capture horizontal_form_example %}
<div class="field is-horizontal">
<div class="field-label is-normal">
@ -932,18 +1047,61 @@ doc-subtab: general
<div class="content">
<p>
If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>field</code> container.
<br>
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifers to alter the <strong>alignment</strong>.
</p>
<p>
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong> with.
</p>
</div>
<div class="example">
{{group_example}}
</div>
{% highlight html %}{{group_example}}{% endhighlight %}
<div class="content">
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifers to alter the <strong>alignment</strong>.
</p>
</div>
<div class="example">
{{group_centered_example}}
</div>
{% highlight html %}{{group_centered_example}}{% endhighlight %}
<div class="example">
{{group_right_example}}
</div>
{% highlight html %}{{group_right_example}}{% endhighlight %}
<div class="content">
<p>
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong> with.
</p>
</div>
<div class="example">
{{group_expanded_example}}
</div>
{% highlight html %}{{group_expanded_example}}{% endhighlight %}
<div id="form-group-multiline" class="content">
<p>
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.4</span>
</p>
<p>
Add the <code>is-grouped-multiline</code> modifier to allow controls to fill up <strong>multiple lines</strong>. This is ideal for a long list of controls.
</p>
</div>
<div class="columns">
<div class="column is-half">
<div class="example">
{{group_multiline_example}}
</div>
</div>
<div class="column is-half">
{% highlight html %}{{group_multiline_example}}{% endhighlight %}
</div>
</div>
<hr>
<h3 class="title">Horizontal form</h3>