|
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | {{ZKComponentReferencePageHeader}} | | {{ZKComponentReferencePageHeader}} |
| | | | |
| − | = Accessibility =
| + | This section outline Accessibilities in Layout components. |
| − | *Demonstration: N/A
| |
| − | *Style Guide: N/A
| |
| − | *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
| |
| − | since 9.5
| |
| | | | |
| − | = Splitlayout =
| + | '''Note:''' the following subsections are only applied for ZK EE version only. |
| − | == Related components ==
| |
| − | None.
| |
| | | | |
| − | == Required Settings ==
| + | {{ZKComponentReferenceHeadingToc}} |
| − | 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 ==
| + | {{ZKComponentReferencePageFooter}} |
| − | {| 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>
| |
| − | | |
| − | = 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>
| |
| − | </source>
| |