Splitlayout"

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 ==
 
None.
 
  
 
== Required Settings ==
 
== Required Settings ==
Line 15: Line 12:
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| aria-label
+
| aria-label / aria-labelledby
| Describe the splitlayout.
+
| Name the Splitlayout. 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">
 
    <splitlayout orient="horizontal" width="600px" height="500px" collapse="after" ca:aria-label="Information">
 
        <div>
 
            Hello Left
 
            <button label="Left"/>
 
        </div>
 
        <div>
 
            <button label="Right"/>
 
            Hello Right
 
        </div>
 
    </splitlayout>
 
</zk>
 
</source>
 

Revision as of 23:47, 28 July 2020

Splitlayout

 since 9.5.0

Required Settings

Attributes
Description
aria-label / aria-labelledby Name the Splitlayout. 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.