Listbox"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Listbox = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Relate...")
 
Line 11: Line 11:
  
 
== Required Settings ==
 
== Required Settings ==
'''aria-label''' is required.
+
{| border="1px"
 +
! <center>Attributes</center>
 +
! <center>Description</center>
 +
|-
 +
| aria-label
 +
| Describe the listbox.
 +
|}
  
 
== Keyboard Support ==
 
== Keyboard Support ==

Revision as of 10:54, 14 July 2020

Listbox

 since 9.5.0

Related components

Auxhead, Auxheader, Listcell, Listfooter, Listgroup, Listgroupfoot, Listheader, Listitem

Required Settings

Attributes
Description
aria-label Describe the listbox.

Keyboard Support

Key
Description
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>