1 | ## Select 选择器
|
2 |
|
3 |
|
4 | ### 基础版
|
5 | ```jsx
|
6 | <Select
|
7 | options={[
|
8 | "选项一", "选项二", "选项三", "选项四", "选项五", "选项六",
|
9 | ]}
|
10 | value={basicValue}
|
11 | onChange={value => setBasicValue(value)}
|
12 | />
|
13 | ```
|
14 |
|
15 |
|
16 | ### 独立取值
|
17 | ```jsx
|
18 | <Select
|
19 | options={[
|
20 | { label: '显示一', value: '值一' },
|
21 | { label: '显示二', value: '值二' },
|
22 | { label: '显示三', value: '值三' },
|
23 | { label: '显示四', value: '值四' },
|
24 | { label: '显示五', value: '值五' },
|
25 | ]}
|
26 | value={basicValue}
|
27 | onChange={value => setMultiValue(value)}
|
28 | />
|
29 | ```
|
30 |
|
31 |
|
32 | ### 多选
|
33 | ```jsx
|
34 | <Select
|
35 | multiple
|
36 | options={[
|
37 | "选项一", "选项二", "选项三", "选项四", "选项五", "选项六",
|
38 | ]}
|
39 | value={multiValue}
|
40 | onChange={value => setMultiValue(value)}
|
41 | />
|
42 | ```
|
43 |
|
44 |
|
45 | ### 文本样式
|
46 | ```jsx
|
47 | <Select value={textValue} onChange={value => setTextValue(value)}>
|
48 | <Text style={{ lineHeight: 30 }} value="文本一">文本一</Text>
|
49 | <Text style={{ lineHeight: 30 }} value="文本二">文本二</Text>
|
50 | <Text style={{ lineHeight: 30 }} value="文本三">文本三</Text>
|
51 | <Text style={{ lineHeight: 30 }} value="文本四">文本四</Text>
|
52 | <Text style={{ lineHeight: 30 }} value="文本五">文本五</Text>
|
53 | </Select>
|
54 | ```
|
55 |
|
56 |
|
57 | ### 自定义
|
58 | > `Option` 要根据被传递的 `selected` 属性实现相应的样式
|
59 | ```jsx
|
60 | <Select value={customValue} onChange={value => setCustomValue(value)}>
|
61 | <Option value="自定义一">自定义一</Option>
|
62 | <Option value="自定义二">自定义二</Option>
|
63 | <Option value="自定义三">自定义三</Option>
|
64 | <Option value="自定义四">自定义四</Option>
|
65 | <Option value="自定义五">自定义五</Option>
|
66 | </Select>
|
67 | ```
|