## 下拉组件

### 属性列表
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| searchable | 是否可以启用文字输入框搜索选项 | `bool` | `false` |
| hoverable | 当hover时是否展示下拉 | `bool` | `false` |
| options | @transformable 下拉列表所有选项数据 | `array` | `undefined` |
| value | @transformable 选中的选项的value值,可动态设置dropdown的值 | `any` | `undefined` |
| showSelectedIcon | 是否在下拉列表的被选中的项的右侧显示选中icon | `bool` | `false` |
| onChange | 当选中的值发生变化时调用callback(newName,oldName) | `function` | `undefined` |
| onBlur | 用户离开dropdown组件时回调callback(newName) | `function` | `undefined` |
| onFocus | 用户进入dropdown组件时回调 | `function` | `undefined` |
| disabled | 当前dropdown组件是否不可用 | `bool` | `false` |
| placeholder | 没有选中时的placeholder提示 | `string` | `undefined` |
| cleanable | 是否可以清除dropdown所选的值，让它不选择任何一个 | `bool` | `false` |
| noBorder | 是否要隐藏边框 | `bool` | `false` |
| noIcon | 是否要隐藏右边的下拉icon | `bool` | `false` |
| dropdownWidth | 下拉菜单的width px | `number` | `undefined` |

### options 属性说明
options属性是一个数组用于传入所有下拉选项，options数组的每个元素的属性如下：

| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| value | value字段会作为key要保证唯一性,onChange 回调时返回value,设置默认选中是根据value是否相等来判断 | `string.isRequired` | `undefined` |
| display | 用于在下拉列表里显示每个选项的样子，以及选中改选项后组件中间显示的文字,如果该属性是 react 元素将把这个元素显示在选项列表里，否则将作为文字显示，如果 display==null ，display=value | `string or react.element` | `undefined` |
| search | 用于搜索时的关键字匹配,如果search==null，search=value | `string` | `undefined` |

options支持选项组，选项组标题使用 label 属性
```javascript
options = [{
    label: '热门城市',
    options: [{
        value: 'Beijing',
        display: '北京',
        search: '北京'
    }, {
        value: 'Shanghai',
        display: '上海',
        search: '上海'
    }]
}, {
    label: '城市名',
    options: [{
        value: 'Shenzhen',
        display: '深圳',
        search: '深圳'
    }, {
        value: 'Guangzhou',
        display: '广州',
        search: '广州'
    }]
}]
```

### 异步加载选项列表
如果选项列表需要异步加载，可以先传入options=null，等选项列表数据加载成功再给options属性赋新值

### 自定义模板
将自定义的 HTML 模板插入 `Dropdown.Option` 中即可。
```jsx
<Dropdown
    options={options}
    value={options[0].value}
>
{
    options.map(option => {
        return (
            <Dropdown.Option key={option.value} option={option}>
                <span style={{ float: 'left' }}>{option.value}</span>
                <span style={{ float: 'right' }}>{option.value.toUpperCase()}</span>
            </Dropdown.Option>
        );
    })
}
</Dropdown>
```