GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: Tag support borderless (#41305) 

* feat: Tag support borderless

* update demo

* update colorFillSecondary

* update color

* fix

* update demo size
pull/41371/head
lijianan 2 years ago
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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      components/tag/CheckableTag.tsx
  2. 420
      components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
  3. 420
      components/tag/__tests__/__snapshots__/demo.test.ts.snap
  4. 2
      components/tag/demo/basic.tsx
  5. 7
      components/tag/demo/borderless.md
  6. 55
      components/tag/demo/borderless.tsx
  7. 7
      components/tag/demo/borderlessLayout.md
  8. 58
      components/tag/demo/borderlessLayout.tsx
  9. 3
      components/tag/index.en-US.md
  10. 27
      components/tag/index.tsx
  11. 3
      components/tag/index.zh-CN.md
  12. 16
      components/tag/style/index.ts

17
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> = ({
prefixCls: customizePrefixCls,
className,
checked,
onChange,
onClick,
...restProps
}) => {
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
View File

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

55
components/tag/demo/borderless.tsx
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
View File

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

58
components/tag/demo/borderlessLayout.tsx
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 [

Write Preview
Loading…
Cancel
Save