mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
feat: Input support clearIcon (#34325)
* feat: Input support clearIcon * docs: update Input api
This commit is contained in:
parent
8d7f137a09
commit
77960c3f75
@ -113,7 +113,7 @@ export function triggerFocus(
|
|||||||
export interface InputProps
|
export interface InputProps
|
||||||
extends Omit<
|
extends Omit<
|
||||||
RcInputProps,
|
RcInputProps,
|
||||||
'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName' | 'clearIcon'
|
'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName'
|
||||||
> {
|
> {
|
||||||
size?: SizeType;
|
size?: SizeType;
|
||||||
status?: InputStatus;
|
status?: InputStatus;
|
||||||
@ -129,6 +129,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
|||||||
onBlur,
|
onBlur,
|
||||||
onFocus,
|
onFocus,
|
||||||
suffix,
|
suffix,
|
||||||
|
clearIcon,
|
||||||
...rest
|
...rest
|
||||||
} = props;
|
} = props;
|
||||||
const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
|
const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
|
||||||
@ -207,7 +208,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
|||||||
onBlur={handleBlur}
|
onBlur={handleBlur}
|
||||||
onFocus={handleFocus}
|
onFocus={handleFocus}
|
||||||
suffix={suffixNode}
|
suffix={suffixNode}
|
||||||
clearIcon={<CloseCircleFilled />}
|
clearIcon={clearIcon || <CloseCircleFilled />}
|
||||||
inputClassName={classNames(
|
inputClassName={classNames(
|
||||||
!withPrefixSuffix && {
|
!withPrefixSuffix && {
|
||||||
[`${prefixCls}-sm`]: mergedSize === 'small',
|
[`${prefixCls}-sm`]: mergedSize === 'small',
|
||||||
|
@ -22,6 +22,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
|
|||||||
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | |
|
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | |
|
||||||
| allowClear | If allow to remove input content with clear icon | boolean | false | |
|
| allowClear | If allow to remove input content with clear icon | boolean | false | |
|
||||||
| bordered | Whether has border style | boolean | true | 4.5.0 |
|
| bordered | Whether has border style | boolean | true | 4.5.0 |
|
||||||
|
| clearIcon | Icon displayed when `allowClear` is enabled | ReactNode | <CloseCircleFilled /> | 4.19.0 |
|
||||||
| defaultValue | The initial input content | string | - | |
|
| defaultValue | The initial input content | string | - | |
|
||||||
| disabled | Whether the input is disabled | boolean | false | |
|
| disabled | Whether the input is disabled | boolean | false | |
|
||||||
| id | The ID for input | string | - | |
|
| id | The ID for input | string | - | |
|
||||||
|
@ -23,6 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
|
|||||||
| addonBefore | 带标签的 input,设置前置标签 | ReactNode | - | |
|
| addonBefore | 带标签的 input,设置前置标签 | ReactNode | - | |
|
||||||
| allowClear | 可以点击清除图标删除内容 | boolean | - | |
|
| allowClear | 可以点击清除图标删除内容 | boolean | - | |
|
||||||
| bordered | 是否有边框 | boolean | true | 4.5.0 |
|
| bordered | 是否有边框 | boolean | true | 4.5.0 |
|
||||||
|
| clearIcon | 清除按钮,与 `allowClear` 一同使用 | ReactNode | <CloseCircleFilled /> | 4.19.0 |
|
||||||
| defaultValue | 输入框默认内容 | string | - | |
|
| defaultValue | 输入框默认内容 | string | - | |
|
||||||
| disabled | 是否禁用状态,默认为 false | boolean | false | |
|
| disabled | 是否禁用状态,默认为 false | boolean | false | |
|
||||||
| id | 输入框的 id | string | - | |
|
| id | 输入框的 id | string | - | |
|
||||||
|
Loading…
Reference in New Issue
Block a user