# 组件列表

组件都是在 `antd` 组件的基础上，针对 Xform 做了兼容或新增了一些参数。

## 列表

|组件名|描述|
|--|--|
|Input|输入框|
|TextArea|富文本|
|InputNumber|数字输入框|
|Switch|开关|
|Radio/RadioGroup|单选|
|RadioButton|单选按钮|
|Checkbox/CheckboxGroup|多选|
|CheckboxAll|全选|
|Select|下拉|
|Cascader|级联选择器|
|TreeSelect|树状选择器|
|DatePicker|日期选择器|
|TimePicker|时间选择器|
|DateTimePicker|日期时间选择器|
|MonthPicker|月份选择器|
|WeekPicker|周选择器|
|RangePicker|时间段选择器|
|AutoComplete|自动补全|
|Rate|星数|
|Slider|滑块|
|Transfer|穿梭框|
|Upload|上传组件|

## 详情

### 选项类

#### Switch 开关

+ 值从 `checked` 统一为 `value`。

#### Select 下拉

+ 通过 `props` 中的 `showSearch` 判断是否有搜索框
+ 如果 `props` 中的 `mode` 是 `tag`，`options` 的 `value` 必须为 `string` 类型
+ 会对 `options` 根据 `groups` 进行分组

#### TreeSelect 树状选择器

默认样式为

``` html
<TreeSelect
    showSearch
    style={{ width: '100%' }}
    value={value}
    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
    placeholder="Please select"
    allowClear
    treeDefaultExpandAll
/>
```

### 时间类组件

|组件名|描述|
|--|--|
|DatePicker|日期选择器|
|TimePicker|时间选择器|
|DateTimePicker|日期时间选择器|
|MonthPicker|月份选择器|
|WeekPicker|周选择器|
|RangePicker|时间段选择器|

通用参数 `valueType`，为 `timestamp` 时值会以时间戳的格式保存，默认以 `moment` 的格式保存数据。

### 其他自定义组件

见 [@wowpic/xform-live](https://g.hz.netease.com/cloudmusic-frontend/xform-live)

#### UploadImg 上传图片组件

#### UploadVideo 上传视频组件