Listbox"
From Documentation
Line 11: | Line 11: | ||
== Required Settings == | == Required Settings == | ||
+ | |||
{| border="1px" | {| border="1px" | ||
! <center>Attributes</center> | ! <center>Attributes</center> |
Revision as of 10:54, 14 July 2020
Listbox
- Demonstration: N/A
- Style Guide: N/A
- Available in ZK EE only
since 9.5.0
Related components
Auxhead, Auxheader, Listcell, Listfooter, Listgroup, Listgroupfoot, Listheader, Listitem
Required Settings
aria-label | Describe the listbox. |
Keyboard Support
ArrowUp/ArrowDown | Select Listitems or focus on Listheaders. |
ArrowLeft/ArrowRight | Focus on Listcells or Listheaders |
Enter/Spacebar | If the checkmark is enabled, press Enter/Spacebar would toggle the checkbox. |
Example
<zk xmlns:ca="client/attribute">
<listbox width="350px" ca:aria-label="Team Member">
<listhead>
<listheader label="name" sort="auto" />
<listheader label="gender" />
<listheader label="phone" />
</listhead>
<listitem>
<listcell label="Mary" />
<listcell label="FEMALE" />
<listcell label="000000000" />
</listitem>
<listitem>
<listcell label="John" />
<listcell label="MALE" />
</listitem>
</listbox>
</zk>