mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
feat: add closeIcon customize tag close (#24885)
* feat: add closeIcon customize tag close * docs fix * update snap * fix: css name
This commit is contained in:
xrkffgg
GitHub
parent
8957d37bfd
commit
312e4b24bc
@ -476,6 +476,53 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/customize.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
Tag1
|
||||
<div
|
||||
class="ant-tag-customize-close"
|
||||
>
|
||||
关 闭
|
||||
</div>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
Tag2
|
||||
<div
|
||||
class="ant-tag-customize-close"
|
||||
>
|
||||
<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="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-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 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
|
||||
/>
|
||||
<path
|
||||
d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/icon.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
|
||||
32
components/tag/demo/customize.md
Normal file
32
components/tag/demo/customize.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
order: 8
|
||||
debug: true
|
||||
title:
|
||||
zh-CN: 自定义关闭按钮
|
||||
en-US: Customize close
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可用 `closeIcon` 自定义关闭按钮。
|
||||
|
||||
## en-US
|
||||
|
||||
The close icon can be customized using `closeIcon`.
|
||||
|
||||
```jsx
|
||||
import { Tag } from 'antd';
|
||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Tag closable closeIcon="关 闭">
|
||||
Tag1
|
||||
</Tag>
|
||||
<Tag closable closeIcon={<CloseCircleOutlined />}>
|
||||
Tag2
|
||||
</Tag>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -17,13 +17,14 @@ Tag for categorizing or markup.
|
||||
|
||||
### Tag
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | Whether the Tag can be closed | boolean | `false` |
|
||||
| color | Color of the Tag | string | - |
|
||||
| onClose | Callback executed when tag is closed | (e) => void | - |
|
||||
| visible | Whether the Tag is closed or not | boolean | `true` |
|
||||
| icon | Set the icon of tag | ReactNode | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --------- | ------------------------------------ | ----------- | ------- | ------- |
|
||||
| closable | Whether the Tag can be closed | boolean | `false` | |
|
||||
| color | Color of the Tag | string | - | |
|
||||
| closeIcon | custom close icon | ReactNode | - | 4.4.0 |
|
||||
| onClose | Callback executed when tag is closed | (e) => void | - | |
|
||||
| visible | Whether the Tag is closed or not | boolean | `true` | |
|
||||
| icon | Set the icon of tag | ReactNode | - | |
|
||||
|
||||
### Tag.CheckableTag
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
||||
className?: string;
|
||||
color?: LiteralUnion<PresetColorType | PresetStatusColorType, string>;
|
||||
closable?: boolean;
|
||||
closeIcon?: React.ReactNode;
|
||||
visible?: boolean;
|
||||
onClose?: Function;
|
||||
style?: React.CSSProperties;
|
||||
@ -44,6 +45,7 @@ const InternalTag: React.ForwardRefRenderFunction<unknown, TagProps> = (
|
||||
icon,
|
||||
color,
|
||||
onClose,
|
||||
closeIcon,
|
||||
closable = false,
|
||||
...props
|
||||
},
|
||||
@ -98,7 +100,16 @@ const InternalTag: React.ForwardRefRenderFunction<unknown, TagProps> = (
|
||||
};
|
||||
|
||||
const renderCloseIcon = () => {
|
||||
return closable ? <CloseOutlined onClick={handleCloseClick} /> : null;
|
||||
if (closable) {
|
||||
return closeIcon ? (
|
||||
<div className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
|
||||
{closeIcon}
|
||||
</div>
|
||||
) : (
|
||||
<CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const isNeedWave =
|
||||
|
||||
@ -17,13 +17,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
|
||||
|
||||
### Tag
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | 标签是否可以关闭 | boolean | false |
|
||||
| color | 标签色 | string | - |
|
||||
| onClose | 关闭时的回调 | (e) => void | - |
|
||||
| visible | 是否显示标签 | boolean | `true` |
|
||||
| icon | 设置图标 | ReactNode | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------- | ---------------- | ----------- | ------ | ----- |
|
||||
| closable | 标签是否可以关闭 | boolean | false | |
|
||||
| color | 标签色 | string | - | |
|
||||
| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
|
||||
| onClose | 关闭时的回调 | (e) => void | - | |
|
||||
| visible | 是否显示标签 | boolean | `true` | |
|
||||
| icon | 设置图标 | ReactNode | - | |
|
||||
|
||||
### Tag.CheckableTag
|
||||
|
||||
|
||||
@ -36,12 +36,11 @@
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
&-close-icon {
|
||||
.iconfont-size-under-12px(10px);
|
||||
|
||||
margin-left: 3px;
|
||||
color: @text-color-secondary;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s @ease-in-out-circ;
|
||||
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{tag-prefix-cls}-rtl& {
|
||||
&-close-icon {
|
||||
.@{tag-prefix-cls}-rtl & {
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user