Tree"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Listbox = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Relate...")
 
Line 17: Line 17:
 
|-
 
|-
 
| aria-label
 
| aria-label
−
| Describe the listbox.
+
| Describe the tree.
 
|}
 
|}
  
Line 34: Line 34:
 
== Example ==
 
== Example ==
 
<source lang="xml">
 
<source lang="xml">
−
    <zk xmlns:ca="client/attribute">
+
<zk xmlns:ca="client/attribute">
−
         <listbox width="350px" ca:aria-label="Team Member">
+
    <tree ca:aria-label="Option tree">
−
    <listhead>
+
         <treecols>
−
        <listheader label="name" sort="auto" />
+
            <treecol width="100px" id="tcola" label="A" />
−
                <listheader label="gender" />
+
            <treecol label="B" />
−
                <listheader label="phone" />
+
            <treecol label="C" />
−
    </listhead>
+
        </treecols>
−
    <listitem>
+
        <treechildren>
−
        <listcell label="Mary" />
+
            <treeitem id="ti0" selected="true">
−
        <listcell label="FEMALE" />
+
                <treerow>
−
        <listcell label="000000000" />
+
                    <treecell label="A" />
−
    </listitem>
+
                    <treecell label="B" />
−
    <listitem>
+
                    <treecell label="C" />
−
        <listcell label="John" />
+
                </treerow>
−
        <listcell label="MALE" />
+
                <treechildren>
−
    </listitem>
+
                    <treeitem selected="true">
−
</listbox>
+
                        <treerow>
−
     </zk>
+
                            <treecell label="A-1" />
 +
                            <treecell label="B" />
 +
                            <treecell label="C" />
 +
                        </treerow>
 +
                    </treeitem>
 +
                    <treeitem>
 +
                        <treerow>
 +
                            <treecell label="A-2" />
 +
                            <treecell label="B" />
 +
                            <treecell label="C" />
 +
                        </treerow>
 +
                    </treeitem>
 +
                </treechildren>
 +
            </treeitem>
 +
        </treechildren>
 +
     </tree>
 +
</zk>
 
</source>
 
</source>

Revision as of 10:59, 14 July 2020


DocumentationZK Component ReferenceAccessibilityDataTree
Tree

Listbox

 since 9.5.0

Related components

Auxhead, Auxheader, Treecell, Treecol, Treefooter, Treeitem, Treerow

Required Settings

Attributes
Description
aria-label Describe the tree.

Keyboard Support

Key
Description
ArrowUp/ArrowDown Select Treeitems or focus on Treecols.
ArrowLeft/ArrowRight If the treeitem is openable, toggle the open status. Focus on Treecell or Treecols.

Example

<zk xmlns:ca="client/attribute">
    <tree ca:aria-label="Option tree">
        <treecols>
            <treecol width="100px" id="tcola" label="A" />
            <treecol label="B" />
            <treecol label="C" />
        </treecols>
        <treechildren>
            <treeitem id="ti0" selected="true">
                <treerow>
                    <treecell label="A" />
                    <treecell label="B" />
                    <treecell label="C" />
                </treerow>
                <treechildren>
                    <treeitem selected="true">
                        <treerow>
                            <treecell label="A-1" />
                            <treecell label="B" />
                            <treecell label="C" />
                        </treerow>
                    </treeitem>
                    <treeitem>
                        <treerow>
                            <treecell label="A-2" />
                            <treecell label="B" />
                            <treecell label="C" />
                        </treerow>
                    </treeitem>
                </treechildren>
            </treeitem>
        </treechildren>
    </tree>
</zk>
Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Accessibility/Data/Tree&oldid=50033"