Layouts"
From Documentation
| Line 1: | Line 1: | ||
{{ZKComponentReferencePageHeader}} | {{ZKComponentReferencePageHeader}} | ||
| − | = | + | = 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 | ||
| − | |||
== Related components == | == Related components == | ||
None. | None. | ||
| Line 42: | Line 41: | ||
</div> | </div> | ||
</splitlayout> | </splitlayout> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</zk> | </zk> | ||
</source> | </source> | ||
Revision as of 10:45, 14 July 2020
Splitlayout
- Demonstration: N/A
- Style Guide: N/A
- Available in ZK EE only
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
| 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>