TREEVIEW - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

<TREEVIEW/> : <BOX/>

The <TREEVIEW/> widget creates a nestable list of clickable NODE links.

Restrictions:

  • TREEVIEW may only contain NODEs as direct children.
  • NODEs can only be a child of a TREEVIEW or nested in another NODE
  • Attributes on TREE will cascade their values down each NODE in the TREE unless overridden.
  • If not using nested NODEs in the TREEVIEW use a LIST widget instead.
  • TREEVIEW is only intended to provide text and/or an icon to be clicked/tapped, for more customization use a LIST.

Attributes

Name Type Default Description Req
expandedicon string null The icon on NODE(s) if expanded == true.
icon string null The icon on NODE(s) if expanded == false.
color string true The color of each icon and expandedicon.

Node Exclusive Attributes

Name Type Default Description Req
label string null The label on the node ✔️
onclick string null The Events to be executed ✔️
expanded bool false If the widget should be initially expanded or not

Examples

Treeview example inside a Splitview opening tabs within a Tabview

<FML>
    <SPLITVIEW width="230">
        <VIEW>
            <TREEVIEW icon="keyboard_arrow_right" expandedicon="keyboard_arrow_down">
                <NODE label="Information Components" expanded="true">
                    <NODE label="Text Attributes" >
                        <NODE label="Demo All Text" onclick="open('/resources/demo/demo-text.xml?title=Text')" />
                        <NODE label="Markdown" onclick="" />
                        <NODE label="Font" onclick="" />
                        <NODE label="Style" onclick="" />
                    </NODE>
                    <NODE label="Tooltip" onclick="open('/resources/demo/demo-tooltip.xml?title=Tooltip')" />
                </NODE>
                <NODE label="Input Types" expanded="true">
                    <NODE label="Input" onclick="open('/resources/demo/demo-input.xml?title=Input')" />
                </NODE>
            </TREEVIEW>
        </VIEW>

        <VIEW>
            <BOX>
                <TABVIEW id="tv" tabbutton="true" tabbar="true" />
            </BOX>
        </VIEW>
    </SPLITVIEW>
</FML>

Example

logo See it in Action

Other Widgets You May Find Useful:

⚠️ **GitHub.com Fallback** ⚠️