Layouts

Accessibility

• Demonstration: N/A
• Style Guide: N/A
• Available in ZK EE only

 since 9.5

Splitlayout

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>

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

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">
    <hbox width="600px" height="500px">
        <div>
            Hello Left
            <button label="Left"/>
        </div>
        <splitter collapse="before"/>
        <div>
            <button label="Right"/>
            Hello Right
        </div>
    </hbox>
</zk>