Checkbox"

From Documentation
(8 intermediate revisions by the same user not shown)
Line 34: Line 34:
 
= Mold =
 
= Mold =
  
[ ZK EE ]
 
 
  [ Since 8.6.0 ]
 
  [ Since 8.6.0 ]
  
Line 83: Line 82:
 
</source>
 
</source>
  
=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.
 +
 
 +
[[File:Indeterminate.png]]
 +
 
 +
<source language="xml">
 +
    <checkbox indeterminate="true"/>
 +
</source>
  
 
=Supported Events=
 
=Supported Events=

Revision as of 07:54, 29 October 2018

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;
}

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 : 2018/10/29


Version Date Content
     



Last Update : 2018/10/29

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