Checkbox"

From Documentation
Line 92: Line 92:
 
</source>
 
</source>
  
And provides a getState method returns the current state.
+
We provide a new API getState() return CHECKED, UNCHECKED or INDETERMINATE since ZK 9.0.0 .
 
<source language="java">
 
<source language="java">
checkbox.getState() // returns the current state
+
State state = checkbox.getState() // CHECKED, UNCHECKED or INDETERMINATE
 
</source>
 
</source>
  

Revision as of 02:24, 19 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. The behavior when users click on the checkbox is different from the default mold, the state will switching between checked, unchecked and indeterminate.

Tristate.png

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

We provide a new API getState() return CHECKED, UNCHECKED or INDETERMINATE since ZK 9.0.0 .

State state = checkbox.getState() // CHECKED, UNCHECKED or INDETERMINATE

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/19


Version Date Content
     



Last Update : 2019/11/19

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