|
|
Line 1: |
Line 1: |
− | {{ZKComponentReferencePageHeader}}
| |
| | | |
− | = Splitlayout =
| |
− | *Demonstration: N/A
| |
− | *Style Guide: N/A
| |
− | *[http://www.zkoss.org/product/edition.dsp 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 ==
| |
− | {| 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">
| |
− | <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>
| |
− | </source>
| |