Chosenbox"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Chosenbox = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Rela...")
 
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 ==
 
None.
 
  
 
== Required Settings ==
 
== Required Settings ==
Line 16: Line 13:
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| aria-label
+
| aria-label / aria-labelledby
| Describe the Chosenbox.
+
| Name the Chosenbox. 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
 
| Open the popup and navigate options.
 
| Open the popup and navigate options.
 
|-
 
|-
| ArrowLeft/ArrowRight
+
| ArrowLeft / ArrowRight
 
| Navigate selections
 
| Navigate selections
 
|-
 
|-
Line 37: Line 34:
 
| Close the popup
 
| Close the popup
 
|-
 
|-
| Delete/Backspace
+
| Delete / Backspace
 
| Remove the focused selection.
 
| Remove the focused selection.
 
|}
 
|}
 
== Example ==
 
<source lang="xml">
 
  <chosenbox model="${model}" width="200px" ca:aria-label="Choose fruit"/>
 
</source>
 

Revision as of 23:40, 28 July 2020

Chosenbox

 since 9.5.0

Required Settings

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

Keyboard Support

Key
Description
ArrowUp / ArrowDown Open the popup and navigate options.
ArrowLeft / ArrowRight Navigate selections
Enter Select the options
Escape Close the popup
Delete / Backspace Remove the focused selection.