### 何时使用

当需要操作的内容需要层级或父子结构展示信息时。

### 与页面布局相关

##### 在页面中，树通常放置于内容区左侧，与右侧内容产生联动。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/tree-1.png" />
  </div>

  <div class="item"></div>
</div>

### 组件搭配使用

##### 与按钮搭配使用，可以通过按钮对树进行管理。按钮控制全局可放置标题右侧、或底部常驻，控制局部可放置在对应结点上。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/tree-2.png"/>
    <em>图示：按钮在底部常驻</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/tree-3.png"/>
    <em>图示：按钮在标题右侧</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/tree-4.png"/>
    <em>图示：按钮在结点显示</em>
  </div>
</div>

### 相似组件

| 组件名             | 何时使用                                                                           |
| :----------------- | :--------------------------------------------------------------------------------- |
| [树](./tree)       | 同一页面内容篇幅较长，用户需要快速定位到某部分内容时，可通过锚点进行内容间的跳转。 |
| [导航菜单](./menu) | 当内容过多时，可以将不同类型内容分类，使用选项卡进行扁平化收纳。                   |
