Latest revision as of 06:16, 26 July 2023

Since 9.5.0

Label a Component

To name a component with ARIA attribute by adding the aria-label client attribute to the component, please refer to ZK_Developer's_Reference/Accessibility#Specify_ARIA_Attributes

Key	Description
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.

@@ Line 1: / Line 1: @@
 {{ZKComponentReferencePageHeader}}
+{{versionSince|9.5.0}} {{ZK EE}}
-= Splitlayout =
+{{ZKComponentReferenceAccessibilityNamingReference}}
-*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"
+{| class="wikitable"
 ! <center>Key</center>
 ! <center>Description</center>
 |-
-| ArrowUp/ArrowDown
+| ArrowUp / ArrowDown
 | When the splitter is focused, move the splitter vertically.
 |-
-| ArrowLeft/ArrowRight
+| ArrowLeft / ArrowRight
 | When the splitter is focused, move the splitter horizontally.
 |-
@@ Line 27: / Line 17: @@
 | 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>