Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 03:14:30 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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>