mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
add suffix interface to select
This commit is contained in:
HeskeyBaozi
偏右
parent
93fce1c7a4
commit
a01450debb
@ -974,6 +974,109 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/suffix.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
style="width:120px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-smile"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-select-disabled"
|
||||
style="width:120px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="Lucy"
|
||||
>
|
||||
Lucy
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-meh"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="meh"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 565H360c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/tags.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
|
||||
41
components/select/demo/suffix.md
Normal file
41
components/select/demo/suffix.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
order: 20
|
||||
debug: true
|
||||
title:
|
||||
zh-CN: 后缀图标
|
||||
en-US: Suffix
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic Usage.
|
||||
|
||||
````jsx
|
||||
import { Select, Icon } from 'antd';
|
||||
|
||||
const smileIcon = <Icon type="smile" />;
|
||||
const mehIcon = <Icon type="meh" />;
|
||||
const Option = Select.Option;
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Select suffix={smileIcon} defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
<Option value="disabled" disabled>Disabled</Option>
|
||||
<Option value="Yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
<Select suffix={mehIcon} defaultValue="lucy" style={{ width: 120 }} disabled>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
</Select>
|
||||
</div>,
|
||||
mountNode);
|
||||
````
|
||||
@ -45,6 +45,7 @@ Select component to select value from options.
|
||||
| showArrow | Whether to show the drop-down arrow | boolean | true |
|
||||
| showSearch | Whether show search input in single mode. | boolean | false |
|
||||
| size | Size of Select input. `default` `large` `small` | string | default |
|
||||
| suffix | The custom suffix icon | ReactNode | - |
|
||||
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
|
||||
| value | Current selected option. | string\|number\|string\[]\|number\[] | - |
|
||||
| onBlur | Called when blur | function | - |
|
||||
|
||||
@ -4,6 +4,7 @@ import RcSelect, { Option, OptGroup } from 'rc-select';
|
||||
import classNames from 'classnames';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import defaultLocale from '../locale-provider/default';
|
||||
import omit from 'omit.js';
|
||||
import warning from 'warning';
|
||||
import Icon from '../icon';
|
||||
|
||||
@ -63,6 +64,7 @@ export interface SelectProps extends AbstractSelectProps {
|
||||
tokenSeparators?: string[];
|
||||
getInputElement?: () => React.ReactElement<any>;
|
||||
autoFocus?: boolean;
|
||||
suffix?: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface OptionProps {
|
||||
@ -155,8 +157,11 @@ export default class Select extends React.Component<SelectProps, {}> {
|
||||
className = '',
|
||||
size,
|
||||
mode,
|
||||
suffix,
|
||||
...restProps
|
||||
} = this.props;
|
||||
const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon']);
|
||||
|
||||
const cls = classNames({
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
@ -174,9 +179,11 @@ export default class Select extends React.Component<SelectProps, {}> {
|
||||
combobox: this.isCombobox(),
|
||||
};
|
||||
|
||||
const inputIcon = (
|
||||
<Icon type="down" className={`${prefixCls}-arrow-icon`} />
|
||||
);
|
||||
const inputIcon = suffix && (
|
||||
React.isValidElement<{ className?: string }>(suffix)
|
||||
? React.cloneElement(suffix) : suffix) || (
|
||||
<Icon type="down" className={`${prefixCls}-arrow-icon`} />
|
||||
);
|
||||
|
||||
const removeIcon = (
|
||||
<Icon type="close" className={`${prefixCls}-remove-icon`} />
|
||||
@ -196,7 +203,7 @@ export default class Select extends React.Component<SelectProps, {}> {
|
||||
removeIcon={removeIcon}
|
||||
clearIcon={clearIcon}
|
||||
menuItemSelectedIcon={menuItemSelectedIcon}
|
||||
{...restProps}
|
||||
{...rest}
|
||||
{...modeConfig}
|
||||
prefixCls={prefixCls}
|
||||
className={cls}
|
||||
|
||||
@ -46,6 +46,7 @@ title: Select
|
||||
| showArrow | 是否显示下拉小箭头 | boolean | true |
|
||||
| showSearch | 使单选模式可搜索 | boolean | false |
|
||||
| size | 选择框大小，可选 `large` `small` | string | default |
|
||||
| suffix | 自定义的选择框后缀图标 | ReactNode | - |
|
||||
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
|
||||
| value | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
|
||||
| onBlur | 失去焦点的时回调 | function | - |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user