# Treeview

Displays hierarchical-related items

# Usage

Root
- Node 1
  - Node 1.1
  - Node 1.2
- Node 2

<template>
  <winui-treeview>
    <li>
      Root
      <ul>
        <li>
          Node 1
          <ul>
            <li>Node 1.1</li>
            <li>Node 1.2</li>
          </ul>
        </li>
        <li>Node 2</li>
      </ul>
    </li>
  </winui-treeview>
</template>

# Props

Not available.

# Customization

Use the class name .winui-treeview to override/customize the component's styles.

The component also supports the following classes:

.has-connector - renders connector lines between the treeview items.
.has-collapse-button - changes the expand/collapse carets to buttons.

# Examples

# Combining with the Collapse component

Root Node
- Node 1
  - Node 1.1
  - Node 1.2
- Node 2

<template>
  <winui-treeview>
    <li>
      Root Node
      <ul>
        <li>
          <winui-collapse title="Node 1" open>
            <ul>
              <li>Node 1.1</li>
              <li>Node 1.2</li>
            </ul>
          </winui-collapse>
        </li>
        <li>Node 2</li>
      </ul>
    </li>
  </winui-treeview>
</template>

# Connector lines and collapse buttons

Root Node
- Node 1
  - Node 1.1
  - Node 1.2
- Node 2

<template>
  <winui-treeview class="has-connector has-collapse-button">
    <li>
      Root Node
      <ul>
        <li>
          <winui-collapse title="Node 1" open>
            <ul>
              <li>Node 1.1</li>
              <li>Node 1.2</li>
            </ul>
          </winui-collapse>
        </li>
        <li>Node 2</li>
      </ul>
    </li>
  </winui-treeview>
</template>

← Textbox