mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

feat: Tag support borderless (#41305)

Browse Source 
* feat: Tag support borderless

* update demo

* update colorFillSecondary

* update color

* fix

* update demo size
This commit is contained in:
lijianan 2023-03-21 13:02:27 +08:00 committed by GitHub
parent 2ece2c6b63
commit f829e40110
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 1010 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/tag/CheckableTag.tsx
View File

@ -18,14 +18,15 @@ export interface CheckableTagProps {
onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
}
const CheckableTag: React.FC<CheckableTagProps> = ({
const CheckableTag: React.FC<CheckableTagProps> = (props) => {
const {
prefixCls: customizePrefixCls,
className,
checked,
onChange,
onClick,
...restProps
}) => {
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {

420
components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -221,6 +221,426 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
</div>
`;
exports[`renders components/tag/demo/borderless.tsx extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 1
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 2
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 3
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 4
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-magenta ant-tag-borderless"
>
magenta
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-red ant-tag-borderless"
>
red
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-volcano ant-tag-borderless"
>
volcano
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-orange ant-tag-borderless"
>
orange
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-gold ant-tag-borderless"
>
gold
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-lime ant-tag-borderless"
>
lime
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-green ant-tag-borderless"
>
green
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-cyan ant-tag-borderless"
>
cyan
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-blue ant-tag-borderless"
>
blue
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-geekblue ant-tag-borderless"
>
geekblue
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-purple ant-tag-borderless"
>
purple
</span>
</div>
</div>,
]
`;
exports[`renders components/tag/demo/borderlessLayout.tsx extend context correctly 1`] = `
<div
style="background-color: rgb(245, 245, 245); padding: 16px;"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 1
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 2
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 3
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 4
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
</div>
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-magenta ant-tag-borderless"
>
magenta
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-red ant-tag-borderless"
>
red
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-volcano ant-tag-borderless"
>
volcano
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-orange ant-tag-borderless"
>
orange
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-gold ant-tag-borderless"
>
gold
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-lime ant-tag-borderless"
>
lime
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-green ant-tag-borderless"
>
green
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-cyan ant-tag-borderless"
>
cyan
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-blue ant-tag-borderless"
>
blue
</span>
</div>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-geekblue ant-tag-borderless"
>
geekblue
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<span
class="ant-tag ant-tag-purple ant-tag-borderless"
>
purple
</span>
</div>
</div>
</div>
`;
exports[`renders components/tag/demo/checkable.tsx extend context correctly 1`] = `
Array [
<span

420
components/tag/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -221,6 +221,426 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
</div>
`;
exports[`renders components/tag/demo/borderless.tsx correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap:wrap;margin-bottom:-8px"
>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 1
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 2
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 3
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 4
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>,
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap:wrap;margin-bottom:-8px"
>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-magenta ant-tag-borderless"
>
magenta
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-red ant-tag-borderless"
>
red
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-volcano ant-tag-borderless"
>
volcano
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-orange ant-tag-borderless"
>
orange
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-gold ant-tag-borderless"
>
gold
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-lime ant-tag-borderless"
>
lime
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-green ant-tag-borderless"
>
green
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-cyan ant-tag-borderless"
>
cyan
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-blue ant-tag-borderless"
>
blue
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-geekblue ant-tag-borderless"
>
geekblue
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom:8px"
>
<span
class="ant-tag ant-tag-purple ant-tag-borderless"
>
purple
</span>
</div>
</div>,
]
`;
exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
<div
style="background-color:#f5f5f5;padding:16px"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap:wrap;margin-bottom:-8px"
>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 1
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 2
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 3
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom:8px"
>
<span
class="ant-tag ant-tag-borderless"
>
Tag 4
<span
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
</span>
</div>
</div>
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap:wrap;margin-bottom:-8px"
>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-magenta ant-tag-borderless"
>
magenta
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-red ant-tag-borderless"
>
red
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-volcano ant-tag-borderless"
>
volcano
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-orange ant-tag-borderless"
>
orange
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-gold ant-tag-borderless"
>
gold
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-lime ant-tag-borderless"
>
lime
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-green ant-tag-borderless"
>
green
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-cyan ant-tag-borderless"
>
cyan
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-blue ant-tag-borderless"
>
blue
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px;padding-bottom:8px"
>
<span
class="ant-tag ant-tag-geekblue ant-tag-borderless"
>
geekblue
</span>
</div>
<div
class="ant-space-item"
style="padding-bottom:8px"
>
<span
class="ant-tag ant-tag-purple ant-tag-borderless"
>
purple
</span>
</div>
</div>
</div>
`;
exports[`renders components/tag/demo/checkable.tsx correctly 1`] = `
Array [
<span

2
components/tag/demo/basic.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Space, Tag } from 'antd';
import React from 'react';
const log = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);

7
components/tag/demo/borderless.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
无边框模式。
## en-US
borderless.

55
components/tag/demo/borderless.tsx Normal file
View File

@ -0,0 +1,55 @@
import { Divider, Space, Tag } from 'antd';
import React from 'react';
const App: React.FC = () => (
<>
<Space size="small" wrap>
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
Tag 3
</Tag>
<Tag bordered={false} closable>
Tag 4
</Tag>
</Space>
<Divider />
<Space size="small" wrap>
<Tag bordered={false} color="magenta">
magenta
</Tag>
<Tag bordered={false} color="red">
red
</Tag>
<Tag bordered={false} color="volcano">
volcano
</Tag>
<Tag bordered={false} color="orange">
orange
</Tag>
<Tag bordered={false} color="gold">
gold
</Tag>
<Tag bordered={false} color="lime">
lime
</Tag>
<Tag bordered={false} color="green">
green
</Tag>
<Tag bordered={false} color="cyan">
cyan
</Tag>
<Tag bordered={false} color="blue">
blue
</Tag>
<Tag bordered={false} color="geekblue">
geekblue
</Tag>
<Tag bordered={false} color="purple">
purple
</Tag>
</Space>
</>
);
export default App;

7
components/tag/demo/borderlessLayout.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
深色背景中的无边框模式。
## en-US
borderless in layout background.

58
components/tag/demo/borderlessLayout.tsx Normal file
View File

@ -0,0 +1,58 @@
import { Divider, Space, Tag, theme } from 'antd';
import React from 'react';
const App: React.FC = () => {
const { token } = theme.useToken();
return (
<div style={{ backgroundColor: token.colorBgLayout, padding: 16 }}>
<Space size="small" wrap>
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
Tag 3
</Tag>
<Tag bordered={false} closable>
Tag 4
</Tag>
</Space>
<Divider />
<Space size="small" wrap>
<Tag bordered={false} color="magenta">
magenta
</Tag>
<Tag bordered={false} color="red">
red
</Tag>
<Tag bordered={false} color="volcano">
volcano
</Tag>
<Tag bordered={false} color="orange">
orange
</Tag>
<Tag bordered={false} color="gold">
gold
</Tag>
<Tag bordered={false} color="lime">
lime
</Tag>
<Tag bordered={false} color="green">
green
</Tag>
<Tag bordered={false} color="cyan">
cyan
</Tag>
<Tag bordered={false} color="blue">
blue
</Tag>
<Tag bordered={false} color="geekblue">
geekblue
</Tag>
<Tag bordered={false} color="purple">
purple
</Tag>
</Space>
</div>
);
};
export default App;

3
components/tag/index.en-US.md
View File

@ -27,6 +27,8 @@ Tag for categorizing or markup.
<code src="./demo/animation.tsx">Animate</code>
<code src="./demo/icon.tsx">Icon</code>
<code src="./demo/status.tsx">Status Tag</code>
<code src="./demo/borderless.tsx">borderless</code>
<code src="./demo/borderlessLayout.tsx" debug>borderless in layout</code>
<code src="./demo/customize.tsx" debug>Customize close</code>
## API
@ -39,6 +41,7 @@ Tag for categorizing or markup.
| closeIcon | Custom close icon | ReactNode | - | 4.4.0 |
| color | Color of the Tag | string | - | |
| icon | Set the icon of tag | ReactNode | - | |
| bordered | Whether has border style | boolean | true | 5.4.0 |
| onClose | Callback executed when tag is closed | (e) => void | - | |
### Tag.CheckableTag

27
components/tag/index.tsx
View File

@ -1,14 +1,14 @@
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
import { isPresetColor, isPresetStatusColor } from '../_util/colors';
import Wave from '../_util/wave';
import type { LiteralUnion } from '../_util/type';
import warning from '../_util/warning';
import Wave from '../_util/wave';
import { ConfigContext } from '../config-provider';
import CheckableTag from './CheckableTag';
import useStyle from './style';
import type { LiteralUnion } from '../_util/type';
export type { CheckableTagProps } from './CheckableTag';
@ -24,6 +24,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
onClose?: (e: React.MouseEvent<HTMLElement>) => void;
style?: React.CSSProperties;
icon?: React.ReactNode;
bordered?: boolean;
}
export interface TagType
@ -31,8 +32,8 @@ export interface TagType
CheckableTag: typeof CheckableTag;
}
const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
{
const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (tagProps, ref) => {
const {
prefixCls: customizePrefixCls,
className,
rootClassName,
@ -43,10 +44,9 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
onClose,
closeIcon,
closable = false,
bordered = true,
...props
},
ref,
) => {
} = tagProps;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const [visible, setVisible] = React.useState(true);
@ -67,7 +67,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
const isInternalColor = isPresetColor(color) || isPresetStatusColor(color);
const tagStyle = {
const tagStyle: React.CSSProperties = {
backgroundColor: color && !isInternalColor ? color : undefined,
...style,
};
@ -83,6 +83,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
[`${prefixCls}-has-color`]: color && !isInternalColor,
[`${prefixCls}-hidden`]: !visible,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered,
},
className,
rootClassName,
@ -99,7 +100,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
setVisible(false);
};
const renderCloseIcon = () => {
const closeIconNode = React.useMemo<React.ReactNode>(() => {
if (closable) {
return closeIcon ? (
<span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
@ -110,12 +111,14 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
);
}
return null;
};
}, [closable, closeIcon, prefixCls, handleCloseClick]);
const isNeedWave =
typeof props.onClick === 'function' ||
(children && (children as React.ReactElement<any>).type === 'a');
const iconNode = icon || null;
const kids = iconNode ? (
<>
{iconNode}
@ -128,7 +131,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
const tagNode = (
<span {...props} ref={ref} className={tagClassName} style={tagStyle}>
{kids}
{renderCloseIcon()}
{closeIconNode}
</span>
);

3
components/tag/index.zh-CN.md
View File

@ -27,6 +27,8 @@ demo:
<code src="./demo/animation.tsx">添加动画</code>
<code src="./demo/icon.tsx">图标按钮</code>
<code src="./demo/status.tsx">预设状态的标签</code>
<code src="./demo/borderless.tsx">无边框</code>
<code src="./demo/borderlessLayout.tsx" debug>深色背景中无边框</code>
<code src="./demo/customize.tsx" debug>自定义关闭按钮</code>
## API
@ -39,6 +41,7 @@ demo:
| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
| color | 标签色 | string | - | |
| icon | 设置图标 | ReactNode | - | |
| bordered | 是否有边框 | boolean | true | 5.4.0 |
| onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e) => void | - | |
### Tag.CheckableTag

16
components/tag/style/index.ts
View File

@ -1,9 +1,9 @@
import type { CSSInterpolation } from '@ant-design/cssinjs';
import type React from 'react';
import type { FullToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import capitalize from '../../_util/capitalize';
import { genPresetColor, resetComponent } from '../../style';
import type { FullToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {}
@ -14,6 +14,7 @@ interface TagToken extends FullToken<'Tag'> {
tagDefaultColor: string;
tagIconSize: number;
tagPaddingHorizontal: number;
tagBorderlessBg: string;
}
// ============================== Styles ==============================
@ -41,13 +42,15 @@ const genPresetStyle = (token: TagToken) =>
color: textColor,
background: lightColor,
borderColor: lightBorderColor,
// Inverse color
'&-inverse': {
color: token.colorTextLightSolid,
background: darkColor,
borderColor: darkColor,
},
[`&${token.componentCls}-borderless`]: {
borderColor: 'transparent',
},
},
}));
@ -138,6 +141,10 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
marginInlineStart: paddingInline,
},
},
[`${componentCls}-borderless`]: {
borderColor: 'transparent',
background: token.tagBorderlessBg,
},
};
};
@ -148,7 +155,7 @@ export default genComponentStyleHook('Tag', (token) => {
const tagFontSize = token.fontSizeSM;
const tagLineHeight = tagHeight - lineWidth * 2;
const tagDefaultBg = token.colorFillAlter;
const tagDefaultBg = token.colorFillQuaternary;
const tagDefaultColor = token.colorText;
const tagToken = mergeToken<TagToken>(token, {
@ -158,6 +165,7 @@ export default genComponentStyleHook('Tag', (token) => {
tagDefaultColor,
tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
tagPaddingHorizontal: 8, // Fixed padding.
tagBorderlessBg: token.colorFillTertiary,
});
return [