Layouts"
From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Accessibility = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] = Components = ...") |
|||
| Line 5: | Line 5: | ||
*Style Guide: N/A | *Style Guide: N/A | ||
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] | *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] | ||
| − | |||
| − | |||
since 9.5 | since 9.5 | ||
| − | + | = Splitlayout = | |
| − | + | == Related components == | |
None. | 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. | 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" | {| border="1px" | ||
! <center>Key</center> | ! <center>Key</center> | ||
| Line 31: | Line 29: | ||
|} | |} | ||
| − | + | == Example == | |
<source lang="xml"> | <source lang="xml"> | ||
<zk xmlns:ca="client/attribute"> | <zk xmlns:ca="client/attribute"> | ||
| Line 47: | Line 45: | ||
</source> | </source> | ||
| − | + | = Splitter = | |
| − | + | == Related components == | |
Hbox, Vbox. | 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. | 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" | {| border="1px" | ||
! <center>Key</center> | ! <center>Key</center> | ||
| Line 69: | Line 67: | ||
|} | |} | ||
| − | + | == Example == | |
<source lang="xml"> | <source lang="xml"> | ||
<zk xmlns:ca="client/attribute"> | <zk xmlns:ca="client/attribute"> | ||
Revision as of 10:42, 14 July 2020
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
| 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
| 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>