Layouts"

From Documentation
Line 1: Line 1:
 
{{ZKComponentReferencePageHeader}}
 
{{ZKComponentReferencePageHeader}}
  
= Accessibility =
+
= Splitlayout =
 
*Demonstration: N/A
 
*Demonstration: N/A
 
*Style Guide: N/A
 
*Style Guide: N/A
Line 7: Line 7:
 
   since 9.5.0
 
   since 9.5.0
  
= Splitlayout =
 
 
== Related components ==
 
== Related components ==
 
None.
 
None.
Line 42: Line 41:
 
         </div>
 
         </div>
 
     </splitlayout>
 
     </splitlayout>
</zk>
 
</source>
 
 
= Splitter =
 
== 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 ==
 
{| border="1px"
 
! <center>Key</center>
 
! <center>Description</center>
 
|-
 
| 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.
 
|}
 
 
== 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>
 
</zk>
 
</source>
 
</source>

Revision as of 10:45, 14 July 2020

Splitlayout

 since 9.5.0

Related components

None.

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

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.

Example

<zk xmlns:ca="client/attribute">
    <splitlayout orient="horizontal" width="600px" height="500px" collapse="after">
        <div>
            Hello Left
            <button label="Left"/>
        </div>
        <div>
            <button label="Right"/>
            Hello Right
        </div>
    </splitlayout>
</zk>