Checkbox"

From Documentation
Line 80: Line 80:
 
background-color: green;
 
background-color: green;
 
}
 
}
 +
</source>
 +
 +
== tristate ==
 +
[ Since 9.0.0 ]
 +
Allowing users to set the indeterminate state, in addition to the checked and unchecked states.
 +
 +
[[File:Tristate.png]]
 +
 +
<source language="xml">
 +
<checkbox mold="tristate"></checkbox>
 +
</source>
 +
 +
And provides a getState method returns the current state.
 +
<source language="java">
 +
checkbox.getState() // returns the current state
 
</source>
 
</source>
  

Revision as of 10:30, 6 November 2019

Checkbox

Employment/Purpose

A checkbox.

Example

ZKComRef Checkbox Example.png

<window title="Checkbox demo" border="normal" width="350px">
	<checkbox id="apple" label="Apple" onCheck="doChecked()" />
	<checkbox id="orange" label="Orange" onCheck="doChecked()" />
	<checkbox id="banana" label="Banana" onCheck="doChecked()" />
	<hbox>
		You have selected :
		<label id="fruit2" />
	</hbox>
	<zscript> void doChecked() { fruit2.value = (apple.isChecked() ?
		apple.label+' ' : &quot;&quot;) 
                     + (orange.isChecked() ? orange.label+' ' : &quot;&quot;) 
                     + (banana.isChecked() ? banana.label+' ' : &quot;&quot;);
             }
         </zscript>
 </window>

Mold

[ Since 8.6.0 ]

There are two additional molds for Checkbox: switch and toggle, you can customize the mold in css by overriding class.

  <checkbox mold="switch" />
  <checkbox mold="toggle" />

switch

Default:

Switch-off.png Switch-on.png

Customized in CSS:

Switch-off-customized.png Switch-on-customized.png

.z-checkbox-switch-off > .z-checkbox-mold {
	background-color: red;
}
.z-checkbox-switch-on > .z-checkbox-mold {
	background-color: green;
}
.z-checkbox-switch-off > .z-checkbox-mold:before {
	background-color: black;
}
.z-checkbox-switch-on > .z-checkbox-mold:before {
	background-color: white;
}

toggle

Default:

Toggle-off.png Toggle-on.png

Customized in CSS:

Toggle-off-customized.png Toggle-on-customized.png

.z-checkbox-toggle-off > .z-checkbox-mold {
	background-color: red;
}
.z-checkbox-toggle-on > .z-checkbox-mold {
	background-color: green;
}

tristate

[ Since 9.0.0 ]

Allowing users to set the indeterminate state, in addition to the checked and unchecked states.

Tristate.png

<checkbox mold="tristate"></checkbox>

And provides a getState method returns the current state.

checkbox.getState() // returns the current state

Indeterminate

[ Since 8.6.0 ]

Indeterminate is a state that is neither checked nor unchecked.

Note: changing indeterminate will not affect checked state, but changing checked will set indeterminate to false.

Indeterminate.png

    <checkbox indeterminate="true"/>

Supported Events

Name
Event Type
onFocus
Event: Event

Denotes when a component gets the focus.

onBlur
Event: Event

Denotes when a component loses the focus.

onCheck
Event: CheckEvent

Denotes when a component is checked or unchecked.

Supported Children

*None

Use Cases

Version Description Example Location
     

Version History

Last Update : 2019/11/06


Version Date Content
     



Last Update : 2019/11/06

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.