mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-12 12:23:08 +08:00
docs: update select demo and site (#26417)
This commit is contained in:
xrkffgg
GitHub
parent
c53e8ac4c9
commit
008dc3e7f5
@ -735,7 +735,7 @@ exports[`renders ./components/select/demo/custom-dropdown-menu.md correctly 1`]
|
||||
|
||||
exports[`renders ./components/select/demo/custom-tag-render.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -825,6 +825,33 @@ exports[`renders ./components/select/demo/custom-tag-render.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1091,7 +1118,7 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
|
||||
exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
@ -1195,6 +1222,33 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-clear"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
允许自定义选择标签的样式
|
||||
允许自定义选择标签的样式。
|
||||
|
||||
## en-US
|
||||
|
||||
Allows for custom rendering of tags
|
||||
Allows for custom rendering of tags.
|
||||
|
||||
```jsx
|
||||
import { Select, Tag } from 'antd';
|
||||
@ -31,6 +31,7 @@ function tagRender(props) {
|
||||
ReactDOM.render(
|
||||
<Select
|
||||
mode="multiple"
|
||||
showArrow
|
||||
tagRender={tagRender}
|
||||
defaultValue={['gold', 'cyan']}
|
||||
style={{ width: '100%' }}
|
||||
|
||||
@ -31,6 +31,7 @@ ReactDOM.render(
|
||||
<>
|
||||
<Select
|
||||
mode="multiple"
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Please select"
|
||||
defaultValue={['a10', 'c12']}
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
tags select，随意输入的内容（scroll the menu）
|
||||
tags select，随意输入的内容（scroll the menu）。
|
||||
|
||||
## en-US
|
||||
|
||||
Select with tags, transform input to tag (scroll the menu)
|
||||
Select with tags, transform input to tag (scroll the menu).
|
||||
|
||||
```jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
@ -27,7 +27,10 @@ Select component to select value from options.
|
||||
| allowClear | Show clear button | boolean | false | |
|
||||
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags` | boolean | true | |
|
||||
| autoFocus | Get focus by default | boolean | false | |
|
||||
| bordered | Whether has border style | boolean | true | |
|
||||
| clearIcon | The custom clear icon | ReactNode | - | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
|
||||
| defaultOpen | Initial open state of dropdown | boolean | - | |
|
||||
| defaultValue | Initial selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - | |
|
||||
| disabled | Whether disabled select | boolean | false | |
|
||||
| dropdownClassName | The className of dropdown menu | string | - | |
|
||||
@ -36,32 +39,20 @@ Select component to select value from options.
|
||||
| dropdownStyle | The style of dropdown menu | CSSProperties | - | |
|
||||
| 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 \| function(inputValue, option) | true | |
|
||||
| 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. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
| labelInValue | Whether to embed label in value, turn the format of value from `string` to `{ value: string, label: ReactNode }` | boolean | false | |
|
||||
| labelInValue | Whether to embed label in value, turn the format of value from `string` to { value: string, label: ReactNode } | boolean | false | |
|
||||
| listHeight | Config popup height | number | 256 | |
|
||||
| loading | Indicate loading state | boolean | false | |
|
||||
| maxTagCount | Max tag count to show | number | - | |
|
||||
| maxTagTextLength | Max tag text length to show | number | - | |
|
||||
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode \| function(omittedValues) | - | |
|
||||
| tagRender | Customize tag render | (props) => ReactNode | - | |
|
||||
| maxTagTextLength | Max tag text length to show | number | - | |
|
||||
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - | |
|
||||
| mode | Set mode of Select | `multiple` \| `tags` | - | |
|
||||
| notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` | |
|
||||
| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` | |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | |
|
||||
| placeholder | Placeholder of select | string \| ReactNode | - | |
|
||||
| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) | |
|
||||
| showSearch | Whether show search input in single mode | boolean | false | |
|
||||
| size | Size of Select input | `large` \| `middle` \| `small` | - | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| removeIcon | The custom remove icon | ReactNode | - | |
|
||||
| clearIcon | The custom clear icon | ReactNode | - | |
|
||||
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - | |
|
||||
| tokenSeparators | Separator used to tokenize on tag \| multiple mode | string\[] | - | |
|
||||
| value | Current selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - | |
|
||||
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
|
||||
| onBlur | Called when blur | function | - | |
|
||||
| onChange | Called when select an option or input value change | function(value, option:Option \| Array<Option>) | - | |
|
||||
| onClear | Called when clear | function | - | 4.6.0 |
|
||||
| onDeselect | Called when a option is deselected, param is the selected option's value. Only called for multiple or tags, effective in multiple or tags mode only | function(string \| number \| LabeledValue) | - | |
|
||||
| onDeselect | Called when a option is deselected, param is the selected option's value. Only called for `multiple` or `tags`, effective in multiple or tags mode only | function(string \| number \| LabeledValue) | - | |
|
||||
| onDropdownVisibleChange | Called when dropdown open | function(open) | - | |
|
||||
| onFocus | Called when focus | function | - | |
|
||||
| onInputKeyDown | Called when key pressed | function | - | |
|
||||
| onMouseEnter | Called when mouse enter | function | - | |
|
||||
@ -69,11 +60,22 @@ Select component to select value from options.
|
||||
| onPopupScroll | Called when dropdown scrolls | function | - | |
|
||||
| onSearch | Callback function that is fired when input changed | function(value: string) | - | |
|
||||
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance | function(string \| number \| LabeledValue, option: Option) | - | |
|
||||
| defaultOpen | Initial open state of dropdown | boolean | - | |
|
||||
| open | Controlled open state of dropdown | boolean | - | |
|
||||
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |
|
||||
| loading | Indicate loading state | boolean | false | |
|
||||
| bordered | Whether has border style | boolean | true | |
|
||||
| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` | |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | |
|
||||
| placeholder | Placeholder of select | string \| ReactNode | - | |
|
||||
| removeIcon | The custom remove icon | ReactNode | - | |
|
||||
| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) | |
|
||||
| showSearch | Whether show search input in single mode | boolean | false | |
|
||||
| size | Size of Select input | `large` \| `middle` \| `small` | - | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| tagRender | Customize tag render | (props) => ReactNode | - | |
|
||||
| tokenSeparators | Separator used to tokenize on `tag` and `multiple` mode | string\[] | - | |
|
||||
| value | Current selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - | |
|
||||
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
|
||||
|
||||
> Note, if you find that the drop-down menu scrolls with the page, or you need to trigger Select in other popup layers, please try to use `getPopupContainer={triggerNode => triggerNode.parentElement}` to fix the drop-down popup rendering node in the parent element of the trigger .
|
||||
|
||||
### Select Methods
|
||||
|
||||
@ -86,10 +88,10 @@ Select component to select value from options.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ------------------------------------------ | ---------------- | ------- | ------- |
|
||||
| className | The additional class to option | string | - | |
|
||||
| disabled | Disable this option | boolean | false | |
|
||||
| title | `title` of Select after select this Option | string | - | |
|
||||
| value | Default to filter with this property | string \| number | - | |
|
||||
| className | The additional class to option | string | - | |
|
||||
|
||||
### OptGroup props
|
||||
|
||||
|
||||
@ -28,7 +28,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
| allowClear | 支持清除 | boolean | false | |
|
||||
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效 | boolean | true | |
|
||||
| autoFocus | 默认获取焦点 | boolean | false | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| clearIcon | 自定义的多选框清空图标 | ReactNode | - | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
|
||||
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
||||
| defaultValue | 指定默认选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
|
||||
@ -37,32 +40,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
| dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
|
||||
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{ value: string, label: ReactNode }` 的格式 | boolean | false | |
|
||||
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 { value: string, label: ReactNode } 的格式 | boolean | false | |
|
||||
| listHeight | 设置弹窗滚动高度 | number | 256 | |
|
||||
| loading | 加载中状态 | boolean | false | |
|
||||
| maxTagCount | 最多显示多少个 tag | number | - | |
|
||||
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
|
||||
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - | |
|
||||
| tagRender | 自定义 tag 内容 render | (props) => ReactNode | - | |
|
||||
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
|
||||
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |
|
||||
| mode | 设置 Select 的模式为多选或标签 | `multiple` \| `tags` | - | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` | |
|
||||
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
|
||||
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` | |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` | |
|
||||
| placeholder | 选择框默认文字 | string | - | |
|
||||
| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false | |
|
||||
| showSearch | 使单选模式可搜索 | boolean | false | |
|
||||
| size | 选择框大小 | `large` \| `middle` \| `small` | - | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
|
||||
| clearIcon | 自定义的多选框清空图标 | ReactNode | - | |
|
||||
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |
|
||||
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | - | |
|
||||
| value | 指定当前选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - | |
|
||||
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
|
||||
| onBlur | 失去焦点时回调 | function | - | |
|
||||
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value, option:Option \| Array<Option>) | - | |
|
||||
| onClear | 清除内容时回调 | function | - | 4.6.0 |
|
||||
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(string \| number \| LabeledValue) | - | |
|
||||
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 或 `tags` 模式下生效 | function(string \| number \| LabeledValue) | - | |
|
||||
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
|
||||
| onFocus | 获得焦点时回调 | function | - | |
|
||||
| onInputKeyDown | 按键按下时回调 | function | - | |
|
||||
| onMouseEnter | 鼠标移入时回调 | function | - | |
|
||||
@ -70,11 +61,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
| onPopupScroll | 下拉列表滚动时的回调 | function | - | |
|
||||
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
|
||||
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(string \| number \| LabeledValue, option: Option) | - | |
|
||||
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
||||
| open | 是否展开下拉菜单 | boolean | - | |
|
||||
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
|
||||
| loading | 加载中状态 | boolean | false | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
|
||||
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` | |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` | |
|
||||
| placeholder | 选择框默认文字 | string | - | |
|
||||
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
|
||||
| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false | |
|
||||
| showSearch | 使单选模式可搜索 | boolean | false | |
|
||||
| size | 选择框大小 | `large` \| `middle` \| `small` | - | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| tagRender | 自定义 tag 内容 render | (props) => ReactNode | - | |
|
||||
| tokenSeparators | 在 `tags` 和 `multiple` 模式下自动分词的分隔符 | string\[] | - | |
|
||||
| value | 指定当前选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - | |
|
||||
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
|
||||
|
||||
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
|
||||
|
||||
@ -89,10 +89,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | --------------------------------- | ---------------- | ------ | ---- |
|
||||
| className | Option 器类名 | string | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| title | 选中该 Option 后，Select 的 title | string | - | |
|
||||
| value | 默认根据此属性值进行筛选 | string \| number | - | |
|
||||
| className | Option 器类名 | string | - | |
|
||||
|
||||
### OptGroup props
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user