Splitter"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Splitter = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Relat...")
 
Line 11: Line 11:
  
 
== Required Settings ==
 
== 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.
+
{| border="1px"
 +
! <center>Attributes</center>
 +
! <center>Description</center>
 +
|-
 +
| aria-label
 +
| Describe the splitter.
 +
|}
  
 
== Keyboard Support ==
 
== Keyboard Support ==
Line 36: Line 42:
 
             <button label="Left"/>
 
             <button label="Left"/>
 
         </div>
 
         </div>
         <splitter collapse="before"/>
+
         <splitter collapse="before" ca:aria-label="Information"/>
 
         <div>
 
         <div>
 
             <button label="Right"/>
 
             <button label="Right"/>

Revision as of 11:03, 14 July 2020

Splitter

 since 9.5.0

Related components

Hbox, Vbox.

Required Settings

Attributes
Description
aria-label Describe the splitter.

Keyboard Support

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.

Example

<zk xmlns:ca="client/attribute">
    <hbox width="600px" height="500px">
        <div>
            Hello Left
            <button label="Left"/>
        </div>
        <splitter collapse="before" ca:aria-label="Information"/>
        <div>
            <button label="Right"/>
            Hello Right
        </div>
    </hbox>
</zk>