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

Add fullheight Section, Add more color helpers, Add tablet Container, Add list of checkboxes and radios

Browse Source
This commit is contained in:
Jeremy Thomas
2024-07-07 17:59:24 +01:00
parent 2ed62be159
commit ab4a7b7d18
27 changed files with 490 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,59 +14,106 @@ meta:
sizes: false
variables: false
---
{% capture checkbox_example %}
<label class="checkbox">
<input type="checkbox" />
Remember me
</label>
{% endcapture %}
{% capture checkbox_link_example %}
{% 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 %}
{% endcapture %} {% capture checkbox_disabled_example %}
<label class="checkbox" disabled>
<input type="checkbox" disabled />
Save my preferences
</label>
{% endcapture %} {% capture list_of_checkboxes %}
<div class="checkboxes">
<label class="checkbox">
<input type="checkbox" />
Monday
</label>
<label class="checkbox">
<input type="checkbox" />
Tuesday
</label>
<label class="checkbox">
<input type="checkbox" />
Wednesday
</label>
<label class="checkbox">
<input type="checkbox" />
Thursday
</label>
<label class="checkbox">
<input type="checkbox" />
Friday
</label>
<label class="checkbox">
<input type="checkbox" checked />
Saturday
</label>
<label class="checkbox">
<input type="checkbox" checked />
Sunday
</label>
</div>
{% 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 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 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 bd-highlight-full">
{% highlight html -%}
{{- checkbox_disabled_example -}}
{%- endhighlight %}
{% highlight html -%} {{- checkbox_disabled_example -}} {%- endhighlight %}
</div>
</div>
{% include docs/elements/anchor.html name="List of Checkboxes" %}
<div class="content">
<p>
If you want to list several checkbox elements, wrap them in a
<code>&lt;div class="checkboxes"&gt;</code> element:
</p>
</div>
<div class="block">{{- list_of_checkboxes -}}</div>
{% highlight html -%} {{- list_of_checkboxes -}} {%- endhighlight %}

61
docs/documentation/form/radio.html
View File

@@ -14,6 +14,7 @@ meta:
sizes: false
variables: false
---
{% capture radio_example %}
<div class="control">
<label class="radio">
@@ -25,8 +26,7 @@ meta:
No
</label>
</div>
{% endcapture %}
{% capture radio_default_example %}
{% endcapture %} {% capture radio_default_example %}
<div class="control">
<label class="radio">
<input type="radio" name="foobar" />
@@ -37,8 +37,7 @@ meta:
Bar
</label>
</div>
{% endcapture %}
{% capture radio_disabled_example %}
{% endcapture %} {% capture radio_disabled_example %}
<div class="control">
<label class="radio">
<input type="radio" name="rsvp" />
@@ -53,30 +52,46 @@ meta:
Maybe
</label>
</div>
{% endcapture %} {% capture list_of_radios %}
<div class="radios">
<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 %}
<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.
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.
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 bd-highlight-full">
{% highlight html -%}
{{- radio_example -}}
{%- endhighlight %}
{% 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
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>
@@ -84,15 +99,14 @@ meta:
<div class="columns">
<div class="column is-half">{{ radio_default_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html -%}
{{- radio_default_example -}}
{%- endhighlight %}
{% highlight html -%} {{- radio_default_example -}} {%- endhighlight %}
</div>
</div>
<div class="content">
<p>
You can <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the
You can <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>
@@ -100,8 +114,19 @@ meta:
<div class="columns">
<div class="column is-half">{{ radio_disabled_example }}</div>
<div class="column is-half bd-highlight-full">
{% highlight html -%}
{{- radio_disabled_example -}}
{%- endhighlight %}
{% highlight html -%} {{- radio_disabled_example -}} {%- endhighlight %}
</div>
</div>
{% include docs/elements/anchor.html name="List of Radio Buttons" %}
<div class="content">
<p>
If you want to list several radio buttons, wrap them in a
<code>&lt;div class="radios"&gt;</code> element:
</p>
</div>
<div class="block">{{- list_of_radios -}}</div>
{% highlight html -%} {{- list_of_radios -}} {%- endhighlight %}