UNPKG

zent

Version:

一套前端设计语言和基于React的实现

github.com/youzan/zent

youzan/zent

68 lines (51 loc) • 3.11 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
--- title: Select path: component/select group: Data Entry --- ## Select Select is a drop-down selection component with variety functions. ### Guides Component mainly made up of Select, Popup, Trigger three modules. #### Select Core controller, the main responsibility is to format data and data transfer between Popup and Trigger. #### Popup Options list pop-up layer, is mainly responsible for display options, data filtering control. #### Trigger - Triggers, exposed to the user, can be configured via the trigger prop. - Core triggers are SelectTrigger and InputTrigger. - TagsTrigger is based on the InputTrigger extended multi-select function. - Users can expand or develop their own trigger. ### API | Props | Description | Type | Default | Required | |------|------|------|--------|--------| | data | Option data | array | `[]` | yes | | value | Selected value, when tags type, can be passed into the array | any | `null` | no | | index | Select the index | any | `null` | no | | disabled | Disable switch | bool | `false` | no | | placeholder | The default prompt text | string | `'请选择'` | no | | searchPlaceholder | Search box default text | string | `''` | no | | emptyText | Empty list prompt text | string | `'没有找到匹配项'` | no | | trigger | Custom trigger | function | `Select.SelectTrigger` | no | | optionText | Custom options display text's corresponding key, e.g. `{ id: 1, name: 'Doc' }` needs `optionText="name"` | string | `'text'` | no | | optionValue | Custom options value's corresponding key, e.g. `{ id: 1, name: 'Doc' }` needs `optionValue="id"` | string | `'value'` | no | | onChange | Select changed callback | function | `noop` | no | | onDelete | Tag removed callback | function | `noop` | no | | filter | Filter conditions, set to open the filter function | function | `null` | no | | maxToShow | When there is a filter, set the maximum number options to display | number | | no | | onAsyncFilter | Asynchronous filter function | function | `null` | no | | onEmptySelected | Empty filtered data callback | function | `noop` | no | | onOpen | Expanded callback | function | `noop` | no | | className | Optional, custom trigger additional classname | string | `''` | no | | popupClassName | Optional, custom popup classname | string | `''` | no | | autoWidth | Whether to automatically set the width of pop-up layer equal with input-box's width | bool | `false` | no | | width | input-box's width | string or number | | no | | prefix | Custom prefix | string | `'zent'` | no | If both data and children are used, data will cover the children, mainly in order to receive asynchronous data directly change the data property to change the options. #### Trigger | Props | Desctription | Type | Default | Required | |------|------|------|--------|--------| | selectedItems | Selected entry | array | `[]` | no | | extraFilter | Whether has filter function | boolean | `false` | no | | open | Whether to open Popup | boolean | `false` | no | Trigger can pass parameter changes by changing the props of Popup by calling `this.props.onChange({...})`.