library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add checkbox and radio

Browse Source
This commit is contained in:
Jeremy Thomas 2017-07-17 19:41:58 +01:00
parent fcca456bac
commit 15ac353b38
5 changed files with 189 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/subnav-elements.html
View File

@ -13,9 +13,6 @@
<a class="navbar-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
Delete Delete
</a> </a>
<a class="navbar-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/form/">
Form
</a>
<a class="navbar-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/icon/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/icon/">
Icon Icon
</a> </a>

3
docs/_includes/subnav-form.html
View File

@ -19,9 +19,6 @@
<a class="navbar-item is-tab {% if page.doc-subtab == 'radio' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/radio/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'radio' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/radio/">
Radio Radio
</a> </a>
<a class="navbar-item is-tab {% if page.doc-subtab == 'other' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/other/">
Other
</a>
</div> </div>
</div> </div>
</nav> </nav>

2
docs/documentation/elements/form.html
View File

@ -4,6 +4,8 @@ doc-tab: elements
doc-subtab: form doc-subtab: form
--- ---
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/form/general/">
{% capture form_example %} {% capture form_example %}
<div class="field"> <div class="field">
<label class="label">Name</label> <label class="label">Name</label>

78
docs/documentation/form/checkbox.html Normal file
View File

@ -0,0 +1,78 @@
---
layout: documentation
doc-tab: form
doc-subtab: checkbox
---
{% capture checkbox_example %}
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
{% endcapture %}
{% capture checkbox_link_example %}
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
{% endcapture %}
{% capture checkbox_disabled_example %}
<label class="checkbox" disabled>
<input type="checkbox" disabled>
Save my preferences
</label>
{% endcapture %}
{% include subnav-form.html %}
<section class="section">
<div class="container">
<h1 class="title">Checkbox</h1>
<h2 class="subtitle">
The 2-state <strong>checkbox</strong> in its native format
</h2>
<hr>
<div class="content">
<p>
The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</code> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_example}}{% endhighlight %}
</div>
</div>
<div class="content">
<p>
You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_link_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_disabled_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
</div>
</div>
</div>
</section>

109
docs/documentation/form/radio.html Normal file
View File

@ -0,0 +1,109 @@
---
layout: documentation
doc-tab: form
doc-subtab: radio
---
{% capture radio_example %}
<div class="control">
<label class="radio">
<input type="radio" name="answer">
Yes
</label>
<label class="radio">
<input type="radio" name="answer">
No
</label>
</div>
{% endcapture %}
{% capture radio_default_example %}
<div class="control">
<label class="radio">
<input type="radio" name="foobar">
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
Bar
</label>
</div>
{% endcapture %}
{% capture radio_disabled_example %}
<div class="control">
<label class="radio">
<input type="radio" name="rsvp">
Going
</label>
<label class="radio">
<input type="radio" name="rsvp">
Not going
</label>
<label class="radio" disabled>
<input type="radio" name="rsvp" disabled>
Maybe
</label>
</div>
{% endcapture %}
{% include subnav-form.html %}
<section class="section">
<div class="container">
<h1 class="title">Radio</h1>
<h2 class="subtitle">
The mutually exclusive <strong>radio buttons</strong> in their native format
</h2>
<hr>
<div class="content">
<p>
The <code>radio</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.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{radio_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{radio_example}}{% endhighlight %}
</div>
</div>
<div class="content">
<p>
You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the <code>&lt;input&gt;</code> element.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{radio_default_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{radio_default_example}}{% endhighlight %}
</div>
</div>
<div class="content">
<p>
You can add <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the <code>&lt;label&gt;</code> and the <code>&lt;input&gt;</code>.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{radio_disabled_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}
</div>
</div>
</div>
</section>