You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
425 lines
13 KiB
425 lines
13 KiB
---
|
|
layout : 'default'
|
|
css : 'checkbox'
|
|
element : 'checkbox'
|
|
elementType : 'module'
|
|
|
|
title : 'Checkbox'
|
|
description : "A checkbox allows a user to select a value from a small set of options, often binary"
|
|
type : 'UI Module'
|
|
|
|
themes : ['Default']
|
|
---
|
|
<script src="/javascript/checkbox.js"></script>
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/checkbox.less" />
|
|
|
|
<%- @partial('header', { tabs: 'module' }) %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="ui tab" data-tab="definition">
|
|
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Checkbox</h4>
|
|
<p>A standard checkbox</p>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" name="fun" />
|
|
<label>I enjoy having fun</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Slider</h4>
|
|
<p>A checkbox can be formatted to emphasize the current selection state</p>
|
|
<div class="ui slider checkbox">
|
|
<input type="checkbox" name="newsletter" />
|
|
<label>Receive weekly poodle newsletter</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Toggle</h4>
|
|
<p>A checkbox can be formatted to show an on or off choice</p>
|
|
<div class="ui toggle checkbox">
|
|
<input type="checkbox" name="public" />
|
|
<label>Make my dog's profile public</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Radio Box</h4>
|
|
<p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
|
|
<div class="ui form">
|
|
<div class="grouped inline fields">
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" checked="checked" />
|
|
<label>Apples</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Oranges</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Pears</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Grapefruit</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Read-only</h4>
|
|
<p>A checkbox can be read-only and unable to change states</p>
|
|
<div class="ui read-only checkbox">
|
|
<input type="checkbox" />
|
|
<label>Read Only</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>A checkbox can be read-only and unable to change states</p>
|
|
<div class="ui info message">
|
|
A checkbox can be disabled by either setting the disabled attribute on the hidden input, or class <code>disabled</code> on the <code>ui checkbox</code>
|
|
</div>
|
|
<div class="ui disabled checkbox">
|
|
<input type="checkbox" disabled="disabled" />
|
|
<label>Disabled</label>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<div class="ui toggle checkbox">
|
|
<input type="checkbox" disabled="disabled" />
|
|
<label>Disabled</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="examples">
|
|
|
|
<h2>Examples</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Uncheckable Checkboxes</h4>
|
|
<p class="ignored">To make a user able to check a box, but unable to uncheck it, use the <code>uncheckable</code> setting.</p>
|
|
<p class="ignored">To always disable a checkbox, add the property <code>disabled</code> to your input.</p>
|
|
<p class="ignored">To make a checkbox read-only do not initialize it, or include the <code>read-only</code> class which will not allow toggle events.</p>
|
|
<div class="evaluated code" data-type="javascript">
|
|
$('#demo3')
|
|
.checkbox({
|
|
uncheckable: false
|
|
})
|
|
;
|
|
</div>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<div class="ui checkbox" id="demo1">
|
|
<input type="checkbox" disabled="disabled" checked="checked" />
|
|
<label> Disabled</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui read-only checkbox" id="demo2">
|
|
<input type="checkbox" checked="checked" />
|
|
<label> Read Only</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui checkbox" id="demo3">
|
|
<input type="checkbox" />
|
|
<label> Cannot Be Unchecked</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Attaching Events to other Elements</h4>
|
|
<p>Checkbox can use the <code>attach events</code> behavior to attach events easily to other activating elements. This defaults to toggling, but other behaviors can be used as well.</p>
|
|
<div class="evaluated code">
|
|
$('.test.checkbox').checkbox('attach events', '.toggle.button');
|
|
$('.test.checkbox').checkbox('attach events', '.check.button', 'check');
|
|
$('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');
|
|
</div>
|
|
<div class="ui toggle button">Toggle</div>
|
|
<div class="ui positive check button">Check</div>
|
|
<div class="ui negative uncheck button">Uncheck</div>
|
|
<div class="ui six column center aligned stackable divided grid segment">
|
|
<div class="column">
|
|
<div class="ui test slider checkbox">
|
|
<input type="checkbox" />
|
|
<label>1</label>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui test toggle checkbox">
|
|
<input type="checkbox" checked="checked" />
|
|
<label>2</label>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui test checkbox">
|
|
<input type="checkbox" />
|
|
<label>3</label>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui test slider checkbox">
|
|
<input type="checkbox" checked="checked" />
|
|
<label>4</label>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui test toggle checkbox">
|
|
<input type="checkbox" />
|
|
<label>5</label>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui test checkbox">
|
|
<input type="checkbox" />
|
|
<label>6</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="usage">
|
|
<h2 class="ui dividing header">Initializing</h2>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui dividing header">Checkbox</h4>
|
|
<p>A checkbox can be initialized with javascript for increase programmatic control</p>
|
|
|
|
<div class="code">
|
|
$('.ui.checkbox')
|
|
.checkbox()
|
|
;
|
|
</div>
|
|
<div class="code" data-type="html">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox">
|
|
<label>Poodle</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui dividing header">Basic Checkbox</h4>
|
|
<p>A checkbox can also be used without using javascript by matching the <code>id</code> attribute of the input field to the <code>for</code> attribute of the accompanying label</p>
|
|
<div class="code" data-type="html">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" id="unique-id" />
|
|
<label for="unique-id">Poodle</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Behavior</h2
|
|
>
|
|
<p>Behaviors are accessible with javascript using the syntax:<p>
|
|
<div class="code">
|
|
$('.ui.checkbox').checkbox('behavior', argumentOne, argumentTwo...);
|
|
</div>
|
|
|
|
<table class="ui definition celled table segment">
|
|
<tr>
|
|
<td>toggle</td>
|
|
<td>Switches a checkbox from current state</td>
|
|
</tr>
|
|
<tr>
|
|
<td>check</td>
|
|
<td>Set a checkbox state to checked</td>
|
|
</tr>
|
|
<tr>
|
|
<td>uncheck</td>
|
|
<td>Set a checkbox state to unchecked</td>
|
|
</tr>
|
|
<tr>
|
|
<td>attach events(selector, behavior)</td>
|
|
<td>Attach checkbox events to another element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>enable</td>
|
|
<td>Enable interaction with a checkbox</td>
|
|
</tr>
|
|
<tr>
|
|
<td>disable</td>
|
|
<td>Disable interaction with a checkbox</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is radio</td>
|
|
<td>Returns whether element is radio selection</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is checked</td>
|
|
<td>Returns whether element is currently checked</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is unchecked</td>
|
|
<td>Returns whether element is not checked</td>
|
|
</tr>
|
|
<tr>
|
|
<td>can check</td>
|
|
<td>Returns whether element is able to be checked</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<div class="ui tab" data-tab="settings">
|
|
<h2 class="ui dividing header">Checkbox</h2>
|
|
|
|
<p>These settings are specific to checkbox, and determine the parameters of its behavior</p>
|
|
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th class="three wide"></th>
|
|
<th class="three wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>uncheckable</td>
|
|
<td>auto</td>
|
|
<td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fireOnInit</td>
|
|
<td>true</td>
|
|
<td>Whether callbacks for checked status should be fired on init as well as change</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<th class="three wide"></th>
|
|
<th class="three wide">Context</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onChange</td>
|
|
<td>HTML input element</td>
|
|
<td>Callback after a checkbox is either disabled or enabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onChecked</td>
|
|
<td>HTML input element</td>
|
|
<td>Callback after a checkbox is checked.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onUnchecked</td>
|
|
<td>HTML input element</td>
|
|
<td>Callback after a checkbox is unchecked.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onEnable</td>
|
|
<td>HTML input element</td>
|
|
<td>Callback after a checkbox is enabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onDisable</td>
|
|
<td>HTML input element</td>
|
|
<td>Callback after a checkbox is disabled.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2 class="ui dividing header">Module</h2>
|
|
|
|
<p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>
|
|
<table class="ui sortable celled definition table">
|
|
<thead>
|
|
<th></th>
|
|
<th class="six wide">Default</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Checkbox</td>
|
|
<td>Name used in log statements</td>
|
|
</tr>
|
|
<tr>
|
|
<td>namespace</td>
|
|
<td>checkbox</td>
|
|
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>selector</td>
|
|
<td>
|
|
<div class="code" data-type="css">
|
|
selector : {
|
|
input : 'input[type=checkbox], input[type=radio]',
|
|
label : 'label'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Selectors used to find parts of a module</td>
|
|
</tr>
|
|
<tr>
|
|
<td>className</td>
|
|
<td>
|
|
<div class="code">
|
|
className : {
|
|
checked : 'checked',
|
|
disabled : 'disabled',
|
|
radio : 'radio',
|
|
readOnly : 'read-only'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Class names used to determine element state</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>false</td>
|
|
<td>Debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>false</td>
|
|
<td>Show <code>console.table</code> output with performance metrics</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>false</td>
|
|
<td>Debug output includes all internal behaviors</td>
|
|
</tr>
|
|
<tr>
|
|
<td>errors</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
error : {
|
|
method : 'The method you called is not defined.'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|