Layouts"

From Documentation
 
(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>
 

Latest revision as of 08:41, 17 July 2020

This section outline Accessibilities in Layout components.

Note: the following subsections are only applied for ZK EE version only.





Last Update : 2020/07/17

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.