Skip to content

Commit 29e76b2

Browse files
committed
doc: update select
1 parent 1a77a98 commit 29e76b2

File tree

2 files changed

+87
-71
lines changed

2 files changed

+87
-71
lines changed

components/select/index.en-US.md

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -24,43 +24,43 @@ Select component to select value from options.
2424

2525
| Property | Description | Type | Default | Version |
2626
| --- | --- | --- | --- | --- |
27-
| allowClear | Show clear button. | boolean | false | |
28-
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | boolean | true | |
29-
| autofocus | Get focus by default | boolean | false | |
30-
| bordered | Whether has border style | boolean | true | |
31-
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
32-
| disabled | Whether disabled select | boolean | false | |
33-
| dropdownClassName | className of dropdown menu | string | - | |
34-
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true | |
35-
| dropdownRender | Customize dropdown content | ({menuNode: VNode, props}) => VNode \| v-slot | - | |
36-
| dropdownStyle | style of dropdown menu | object | - | |
37-
| dropdownMenuStyle | additional style applied to dropdown menu | object | - | |
38-
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | |
39-
| firstActiveValue | Value of action option by default | string\|string\[] | - | |
40-
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. | function(triggerNode) | () => document.body | |
41-
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}` | boolean | false | |
42-
| maxTagCount | Max tag count to show | number | - | |
43-
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | |
44-
| maxTagTextLength | Max text length to show | number | - | |
45-
| mode | Set mode of Select | 'multiple' \| 'tags' | - | |
46-
| notFoundContent | Specify content to show when no result matches.. | string\|slot | 'Not Found' | |
47-
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | |
48-
| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes | |
49-
| placeholder | Placeholder of select | string\|slot | - | |
50-
| showSearch | Whether show search input in single mode. | boolean | false | |
51-
| showArrow | Whether to show the drop-down arrow | boolean | true | |
52-
| size | Size of Select input. `default` `large` `small` | string | default | |
53-
| suffixIcon | The custom suffix icon | VNode \| slot | - | |
54-
| removeIcon | The custom remove icon | VNode \| slot | - | |
55-
| clearIcon | The custom clear icon | VNode \| slot | - | |
56-
| menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - | |
57-
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | |
58-
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - | |
59-
| options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array<{value, label, [disabled, key, title]}> | \[] | |
27+
| allowClear | Show clear button. | boolean | false | |
28+
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | boolean | true | |
29+
| autofocus | Get focus by default | boolean | false | |
30+
| bordered | Whether has border style | boolean | true | |
31+
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
32+
| disabled | Whether disabled select | boolean | false | |
33+
| dropdownClassName | className of dropdown menu | string | - | |
34+
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true | |
35+
| dropdownRender | Customize dropdown content | ({menuNode: VNode, props}) => VNode \| v-slot | - | |
36+
| dropdownStyle | style of dropdown menu | object | - | |
37+
| dropdownMenuStyle | additional style applied to dropdown menu | object | - | |
38+
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | |
39+
| firstActiveValue | Value of action option by default | string\|string\[] | - | |
40+
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. | function(triggerNode) | () => document.body | |
41+
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}` | boolean | false | |
42+
| maxTagCount | Max tag count to show | number | - | |
43+
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | |
44+
| maxTagTextLength | Max text length to show | number | - | |
45+
| mode | Set mode of Select | 'multiple' \| 'tags' | - | |
46+
| notFoundContent | Specify content to show when no result matches.. | string\|slot | 'Not Found' | |
47+
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | |
48+
| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes | |
49+
| placeholder | Placeholder of select | string\|slot | - | |
50+
| showSearch | Whether show search input in single mode. | boolean | false | |
51+
| showArrow | Whether to show the drop-down arrow | boolean | true | |
52+
| size | Size of Select input. `default` `large` `small` | string | default | |
53+
| suffixIcon | The custom suffix icon | VNode \| slot | - | |
54+
| removeIcon | The custom remove icon | VNode \| slot | - | |
55+
| clearIcon | The custom clear icon | VNode \| slot | - | |
56+
| menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - | |
57+
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | |
58+
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - | |
59+
| options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array<{value, label, [disabled, key, title]}> | \[] | |
6060
| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
61-
| defaultOpen | Initial open state of dropdown | boolean | - | |
62-
| open | Controlled open state of dropdown | boolean | - | |
63-
| loading | indicate loading state | Boolean | false | |
61+
| defaultOpen | Initial open state of dropdown | boolean | - | |
62+
| open | Controlled open state of dropdown | boolean | - | |
63+
| loading | indicate loading state | Boolean | false | |
6464

6565
### events
6666

@@ -107,3 +107,11 @@ Select component to select value from options.
107107
### The dropdown is closed when click `dropdownRender` area?
108108

109109
See the [dropdownRender example](/components/select/#components-select-demo-custom-dropdown).
110+
111+
### Why is `placeholder` not displayed?
112+
113+
`placeholder` will only be displayed when `value = undefined`, and other values such as null, 0,'', etc. are meaningful values for the JS language.
114+
115+
You can check [JS Language Specification](https://262.ecma-international.org/5.1/#sec-4.3.9) for further details.
116+
117+
You can also check [antd issue](https://github.com/ant-design/ant-design/issues/2367) to view the discussion.

components/select/index.zh-CN.md

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -25,42 +25,42 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
2525

2626
| 参数 | 说明 | 类型 | 默认值 | 版本 |
2727
| --- | --- | --- | --- | --- |
28-
| allowClear | 支持清除 | boolean | false | |
29-
| autoClearSearchValue | 是否在选中项后清空搜索框,只在 `mode``multiple``tags` 时有效。 | boolean | true | |
30-
| autofocus | 默认获取焦点 | boolean | false | |
31-
| bordered | 是否有边框 | boolean | true | |
32-
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
33-
| disabled | 是否禁用 | boolean | false | |
34-
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
35-
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | 」
36-
| dropdownRender | 自定义下拉框内容 | ({menuNode: VNode, props}) => VNode \| v-slot | - | |
37-
| dropdownStyle | 下拉菜单的 style 属性 | object | - | |
38-
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | - | |
39-
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`| boolean or function(inputValue, option) | true | |
40-
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - | |
41-
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | Function(triggerNode) | () => document.body | |
42-
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false | |
43-
| maxTagCount | 最多显示多少个 tag | number | - | |
44-
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | |
45-
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
46-
| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' \| 'combobox' | - | |
47-
| notFoundContent | 当下拉列表为空时显示的内容 | string\|slot | 'Not Found' | |
48-
| optionFilterProp | 搜索时过滤对应的 option 属性,不支持 children | string | value | |
49-
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`| string | `children` (combobox 模式下为 `value`| |
50-
| placeholder | 选择框默认文字 | string\|slot | - | |
51-
| showSearch | 使单选模式可搜索 | boolean | false | |
52-
| showArrow | 是否显示下拉小箭头 | boolean | true | |
53-
| size | 选择框大小,可选 `large` `small` | string | default | |
54-
| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - | |
55-
| removeIcon | 自定义的多选框清除图标 | VNode \| slot | - | |
56-
| clearIcon | 自定义的多选框清空图标 | VNode \| slot | - | |
57-
| menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - | |
58-
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
59-
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - | |
60-
| options | options 数据,如果设置则不需要手动构造 selectOption 节点 | array<{value, label, [disabled, key, title]}> | \[] | |
28+
| allowClear | 支持清除 | boolean | false | |
29+
| autoClearSearchValue | 是否在选中项后清空搜索框,只在 `mode``multiple``tags` 时有效。 | boolean | true | |
30+
| autofocus | 默认获取焦点 | boolean | false | |
31+
| bordered | 是否有边框 | boolean | true | |
32+
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
33+
| disabled | 是否禁用 | boolean | false | |
34+
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
35+
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | |
36+
| dropdownRender | 自定义下拉框内容 | ({menuNode: VNode, props}) => VNode \| v-slot | - | |
37+
| dropdownStyle | 下拉菜单的 style 属性 | object | - | |
38+
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | - | |
39+
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`| boolean or function(inputValue, option) | true | |
40+
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - | |
41+
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | Function(triggerNode) | () => document.body | |
42+
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false | |
43+
| maxTagCount | 最多显示多少个 tag | number | - | |
44+
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | |
45+
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
46+
| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' \| 'combobox' | - | |
47+
| notFoundContent | 当下拉列表为空时显示的内容 | string\|slot | 'Not Found' | |
48+
| optionFilterProp | 搜索时过滤对应的 option 属性,不支持 children | string | value | |
49+
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`| string | `children` (combobox 模式下为 `value`| |
50+
| placeholder | 选择框默认文字 | string\|slot | - | |
51+
| showSearch | 使单选模式可搜索 | boolean | false | |
52+
| showArrow | 是否显示下拉小箭头 | boolean | true | |
53+
| size | 选择框大小,可选 `large` `small` | string | default | |
54+
| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - | |
55+
| removeIcon | 自定义的多选框清除图标 | VNode \| slot | - | |
56+
| clearIcon | 自定义的多选框清空图标 | VNode \| slot | - | |
57+
| menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - | |
58+
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
59+
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - | |
60+
| options | options 数据,如果设置则不需要手动构造 selectOption 节点 | array<{value, label, [disabled, key, title]}> | \[] | |
6161
| option | 通过 option 插槽,自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
62-
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
63-
| open | 是否展开下拉菜单 | boolean | - | |
62+
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
63+
| open | 是否展开下拉菜单 | boolean | - | |
6464

6565
> 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
6666
@@ -109,3 +109,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
109109
### 点击 `dropdownRender` 里的内容浮层关闭怎么办?
110110

111111
看下 [dropdownRender 例子](/components/select-cn/#components-select-demo-custom-dropdown) 里的说明。
112+
113+
### 为什么 `placeholder` 不显示 ?
114+
115+
`placeholder` 只有在 value = undefined 才会显示,对于其它的 null、0、'' 等等对于 JS 语言都是有意义的值。
116+
117+
你可以查看 [JS 语言规范](https://262.ecma-international.org/5.1/#sec-4.3.9) 进一步了解详情。
118+
119+
也可以查看 [antd issue](https://github.com/ant-design/ant-design/issues/2367) 查看讨论情况。

0 commit comments

Comments
 (0)