mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat: Tag support borderless (#41305)
* feat: Tag support borderless * update demo * update colorFillSecondary * update color * fix * update demo size
This commit is contained in:
lijianan
GitHub
parent
2ece2c6b63
commit
f829e40110
@ -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>) => {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
7
components/tag/demo/borderless.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
无边框模式。
|
||||
|
||||
## en-US
|
||||
|
||||
borderless.
|
||||
55
components/tag/demo/borderless.tsx
Normal file
55
components/tag/demo/borderless.tsx
Normal 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
7
components/tag/demo/borderlessLayout.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
深色背景中的无边框模式。
|
||||
|
||||
## en-US
|
||||
|
||||
borderless in layout background.
|
||||
58
components/tag/demo/borderlessLayout.tsx
Normal file
58
components/tag/demo/borderlessLayout.tsx
Normal 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;
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user