Searchbox"

From Documentation
(Created page with "= Searchbox = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Related components == None. == Required...")
 
m (apply wikitable (via JWB))
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
= Searchbox =
+
{{ZKComponentReferencePageHeader}}
*Demonstration: N/A
+
{{versionSince|9.5.0}} {{ZK EE}}
*Style Guide: N/A
+
{{ZKComponentReferenceAccessibilityNamingReference}}
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
 
  since 9.5.0
 
 
 
== Related components ==
 
None.
 
 
 
== Required Settings ==
 
 
 
{| border="1px"
 
! <center>Attributes</center>
 
! <center>Description</center>
 
|-
 
| aria-label
 
| Describe the Searchbox.
 
|}
 
  
 
== Keyboard Support ==
 
== Keyboard Support ==
{| border="1px"
+
{| class="wikitable"
 
! <center>Key</center>
 
! <center>Key</center>
 
! <center>Description</center>
 
! <center>Description</center>
Line 35: Line 20:
 
| Close the popup
 
| Close the popup
 
|}
 
|}
 
== Example ==
 
<source lang="xml">
 
<zk xmlns:ca="client/attribute">
 
  <searchbox ca:aria-label="Choose something">
 
    <template name="model">
 
      <html><![CDATA[
 
      <i class="z-icon-globe"></i>
 
      <span class="name">${each}</span>
 
      <span class="description">yoyoyo</span>
 
      ]]></html>
 
    </template>
 
  </searchbox>
 
</zk>
 
</source>
 

Latest revision as of 06:16, 26 July 2023

Since 9.5.0

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Label a Component

To name a component with ARIA attribute by adding the aria-label client attribute to the component, please refer to ZK_Developer's_Reference/Accessibility#Specify_ARIA_Attributes

Keyboard Support

Key
Description
ArrowDown Open the popup and navigate options.
ArrowUp Navigate options.
Enter Select the options
Escape Close the popup