Splitter"

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 ==
 
Hbox, Vbox.
 
  
 
== Required Settings ==
 
== Required Settings ==
Line 15: Line 12:
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| aria-label
+
| aria-label / aria-labelledby
| Describe the splitter.
+
| Name the Splitter. For more information about naming, please refer to [[ZK_Component_Reference/Accessibility | Accessibility]]
 
|}
 
|}
  
Line 24: Line 21:
 
! <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.
 
|-
 
|-
Line 33: Line 30:
 
| 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, collapses the pane. If the pane is collapsed, restores 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" ca:aria-label="Information"/>
 
        <div>
 
            <button label="Right"/>
 
            Hello Right
 
        </div>
 
    </hbox>
 
</zk>
 
</source>
 

Revision as of 23:47, 28 July 2020

Splitter

 since 9.5.0

Required Settings

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

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, collapses the pane. If the pane is collapsed, restores the splitter to its previous position.