Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/documentation/form/checkbox.html
View File

@@ -1,75 +1,72 @@
---
title: Checkbox
layout: documentation
layout: docs
theme: library
doc-tab: form
doc-subtab: checkbox
breadcrumb:
- home
- documentation
- form
- form-checkbox
- home
- documentation
- form
- form-checkbox
meta:
colors: false
sizes: false
variables: false
---
{% capture checkbox_example %}
<label class="checkbox">
<input type="checkbox">
<input type="checkbox" />
Remember me
</label>
{% endcapture %}
{% capture checkbox_link_example %}
<label class="checkbox">
<input type="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>
<input type="checkbox" disabled />
Save my preferences
</label>
{% endcapture %}
<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.
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">{{ checkbox_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html %}{{checkbox_example}}{% endhighlight %}
{% 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>
<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">{{ checkbox_link_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
{% 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">{{ checkbox_disabled_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
{% highlight html -%}
{{- checkbox_disabled_example -}}
{%- endhighlight %}
</div>
</div>