### 何时使用

需要在有限的空间展示大量选项，并从中选取单个或多个选项时。

### 与页面布局相关

##### 选择器下拉面板出现时，应确保其布局在页面可视区内。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/selecter_1.png"/>
    <em>图示：在左上角，向右下角展开</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/selecter_2.png"/>
    <em>图示：在右上角，向左下角展开</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/selecter_3.png"/>
    <em>图示：在左下角，向右上角展开</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/selecter_4.png"/>
    <em>图示：在右下角，向左上角展开</em>
  </div>
</div>

### 组件搭配使用

##### 与搜索框搭配使用，当选项较多时，便于用户快速搜索到相关对象。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E9%80%89%E6%8B%A9%E5%99%A8-------5@2x.png" />
  </div>

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

### 相似组件

| 组件名                 | 何时使用                                                                           |
| :--------------------- | :--------------------------------------------------------------------------------- |
| [选择器](./select)     | 需要在有限的空间展示大量选项，并从中选取单个或多个选项时。用于收纳较多选项入口时。 |
| [下拉菜单](./dropdown) | 下拉菜单主要用于对过多的操作进行收纳，常跟随于按钮后面，点击后是触发相应的操作。   |
