Splitter"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Splitter = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Relat...")
 
m (apply wikitable (via JWB))
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKComponentReferencePageHeader}}
 
{{ZKComponentReferencePageHeader}}
 
+
{{versionSince|9.5.0}} {{ZK EE}}
= Splitter =
+
{{ZKComponentReferenceAccessibilityNamingReference}}
*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 ==
 
Hbox, Vbox.
 
 
 
== Required Settings ==
 
If the primary pane has a visible label, it is referenced by aria-labelledby on the separator element. Otherwise, the separator element has a label provided by aria-label.
 
  
 
== Keyboard Support ==
 
== Keyboard Support ==
{| border="1px"
+
{| class="wikitable"
 
! <center>Key</center>
 
! <center>Key</center>
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| ArrowUp/ArrowDown
+
| ArrowUp / ArrowDown
 
| When the splitter is focused, move the splitter vertically.
 
| When the splitter is focused, move the splitter vertically.
 
|-
 
|-
| ArrowLeft/ArrowRight
+
| ArrowLeft / ArrowRight
 
| When the splitter is focused, move the splitter horizontally.
 
| When the splitter is focused, move the splitter horizontally.
 
|-
 
|-
 
| Enter
 
| Enter
| If the primary pane is not collapsed, collapses the pane. If the pane is collapsed, restores the splitter to its previous position.
+
| If the primary pane is not collapsed, collapse the pane. If the pane is collapsed, restore the splitter to its previous position.
 
|}
 
|}
 
== Example ==
 
<source lang="xml">
 
<zk xmlns:ca="client/attribute">
 
    <hbox width="600px" height="500px">
 
        <div>
 
            Hello Left
 
            <button label="Left"/>
 
        </div>
 
        <splitter collapse="before"/>
 
        <div>
 
            <button label="Right"/>
 
            Hello Right
 
        </div>
 
    </hbox>
 
</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
ArrowUp / ArrowDown When the splitter is focused, move the splitter vertically.
ArrowLeft / ArrowRight When the splitter is focused, move the splitter horizontally.
Enter If the primary pane is not collapsed, collapse the pane. If the pane is collapsed, restore the splitter to its previous position.