Listbox"

From Documentation
Line 6: Line 6:
 
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
 
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
 
   since 9.5.0
 
   since 9.5.0
 
== Related components ==
 
Auxhead, Auxheader, Listcell, Listfooter, Listgroup, Listgroupfoot, Listheader, Listitem
 
  
 
== Required Settings ==
 
== Required Settings ==
Line 16: Line 13:
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| aria-label
+
| aria-label / aria-labelledby
| Describe the listbox.
+
| Name the Listbox. For more information about naming, please refer to [[ZK_Component_Reference/Accessibility | Accessibility]]
 
|}
 
|}
  
Line 25: Line 22:
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| ArrowUp/ArrowDown
+
| ArrowUp / ArrowDown
 
| Select Listitems or focus on Listheaders.
 
| Select Listitems or focus on Listheaders.
 
|-
 
|-
| ArrowLeft/ArrowRight
+
| ArrowLeft / ArrowRight
 
| Focus on Listcells or Listheaders
 
| Focus on Listcells or Listheaders
 
|-
 
|-
| Enter/Spacebar
+
| Enter / Spacebar
 
| If the checkmark is enabled, press Enter/Spacebar would toggle the checkbox.
 
| If the checkmark is enabled, press Enter/Spacebar would toggle the checkbox.
 
|}
 
|}
 
== Example ==
 
<source lang="xml">
 
    <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>
 
</source>
 

Revision as of 23:37, 28 July 2020

Listbox

 since 9.5.0

Required Settings

Attributes
Description
aria-label / aria-labelledby Name the Listbox. For more information about naming, please refer to Accessibility

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.