diff --git a/.hintrc b/.hintrc new file mode 100644 index 0000000000..cb34607dff --- /dev/null +++ b/.hintrc @@ -0,0 +1,8 @@ +{ + "extends": [ + "development" + ], + "hints": { + "no-inline-styles": "off" + } +} \ No newline at end of file diff --git a/components/tag/Compact.tsx b/components/tag/Compact.tsx new file mode 100644 index 0000000000..7294145ec5 --- /dev/null +++ b/components/tag/Compact.tsx @@ -0,0 +1,57 @@ +import React, { forwardRef } from 'react'; +import Space, { SpaceProps } from '../space'; +import useToken from '../theme/useToken'; + +interface CompactProps extends React.HTMLAttributes { + direction?: SpaceProps['direction']; +} + +const Compact: React.ForwardRefRenderFunction = ( + { direction, children, className, style, ...restProps }, + ref, +) => { + const token = useToken()[1]; + const csClas: React.CSSProperties = { + overflow: 'hidden', + backdropFilter: 'saturate(180%) blur(16px)', + borderRadius: token.borderRadius, + ...style, + }; + + return ( + + {React.Children.map(children, (child) => { + if (React.isValidElement(child)) { + // 明确类型为包含 style 属性的 React 元素 + const typedChild = child as React.ReactElement<{ + style?: React.CSSProperties; + }>; + + // 合并 props 强制修改标签样式 + return React.cloneElement(typedChild, { + ...(typedChild.props as Record), // 明确 props 是对象类型 + style: { + margin: 0, + borderRadius: 0, + width: '100%', + textAlign: 'center', + ...typedChild.props.style, + }, + }); + } + return child; + })} + + ); +}; + +export default forwardRef(Compact); + +Compact.displayName = 'Compact'; diff --git a/components/tag/demo/compact.md b/components/tag/demo/compact.md new file mode 100644 index 0000000000..7cbdc46e47 --- /dev/null +++ b/components/tag/demo/compact.md @@ -0,0 +1,7 @@ +## zh-CN + +与 `variant="clear"` 配合使用，可以得到一个背景模糊的效果，通常用于封面。 + +## en-US + +When used with variant="clear", a background blur effect can be achieved, which is often used for covers. diff --git a/components/tag/demo/compact.tsx b/components/tag/demo/compact.tsx new file mode 100644 index 0000000000..c3d7ecd199 --- /dev/null +++ b/components/tag/demo/compact.tsx @@ -0,0 +1,100 @@ +import React, { useState } from 'react'; +import { Divider, Flex, Segmented, SpaceProps, Tag } from 'antd'; +import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'; + +const App: React.FC = () => { + const [TagLayout, setTagLayout] = useState('horizontal'); + return ( + <> + TagLayout + }, + { value: 'horizontal', icon: }, + ]} + /> + Demo + + + success + + + error + + + yellow + + + Cover Demo + +
+ game + + + 预购 + + + ¥298 + + +
+
+ game + + + 策略 + + + 冒险 + + +
+ + + ); +}; + +export default App; diff --git a/components/tag/demo/variant.md b/components/tag/demo/variant.md new file mode 100644 index 0000000000..4f48cefddf --- /dev/null +++ b/components/tag/demo/variant.md @@ -0,0 +1,7 @@ +## zh-CN + +可以为标签设置透明`clear`变体，设置后背景将会为半透明效果，受主题Token`colorBgMask`影响，设置后，如果没有设置`color`字体颜色为`#ffffff`。 + +## en-US + +You can set a tag's variant to clear for a transparent effect. When set, the background will be semi-transparent and influenced by the colorBgMask theme token. After setting the variant to clear, if no color is set, the font color defaults to #ffffff (white). diff --git a/components/tag/demo/variant.tsx b/components/tag/demo/variant.tsx new file mode 100644 index 0000000000..206a66067b --- /dev/null +++ b/components/tag/demo/variant.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Flex, Tag } from 'antd'; +const PresetColors = [ + 'magenta', + 'red', + 'volcano', + 'orange', + 'gold', + 'lime', + 'green', + 'cyan', + 'blue', + 'geekblue', + 'purple', +]; +const App: React.FC = () => ( + <> + + {PresetColors.map((color) => ( + + {color} + + ))} + + +); + +export default App; diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index dbbfdc06fa..b3edca9317 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -19,6 +19,8 @@ demo: Basic +Transparent variant +Combined Tag Colorful Tag Inverse Colorful Tag Add & Remove Dynamically @@ -42,10 +44,17 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | false | 4.4.0 | | color | Color of the Tag | string | - | | +| variant | Variant | `clear` \| `default` | `default` | | | 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: React.MouseEvent) => void | - | | +### Tag.Compact + +| Property | Description | Type | Default | +| --------- | ------------- | ------------ | ---------- | --------- | ------------ | +| direction | Layout method | "horizontal" | "vertical" | undefined | “horizontal” | + ### Tag.CheckableTag | Property | Description | Type | Default | diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 30849c63f8..71c189accf 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -15,7 +15,8 @@ import CheckableTag from './CheckableTag'; import useStyle from './style'; import PresetCmp from './style/presetCmp'; import StatusCmp from './style/statusCmp'; - +import FunVariant, { TagVariant } from './style/variant'; +import Compact from './Compact'; export type { CheckableTagProps } from './CheckableTag'; export interface TagProps extends React.HTMLAttributes { @@ -32,6 +33,7 @@ export interface TagProps extends React.HTMLAttributes { style?: React.CSSProperties; icon?: React.ReactNode; bordered?: boolean; + variant?: TagVariant; } const InternalTag = React.forwardRef((tagProps, ref) => { @@ -46,6 +48,7 @@ const InternalTag = React.forwardRef((tagProps, ref) onClose, bordered = true, visible: deprecatedVisible, + variant, ...props } = tagProps; const { getPrefixCls, direction, tag: tagContext } = React.useContext(ConfigContext); @@ -69,9 +72,10 @@ const InternalTag = React.forwardRef((tagProps, ref) const isPreset = isPresetColor(color); const isStatus = isPresetStatusColor(color); const isInternalColor = isPreset || isStatus; - + const isVariant = FunVariant(variant as TagVariant); const tagStyle: React.CSSProperties = { - backgroundColor: color && !isInternalColor ? color : undefined, + color: isVariant ? (!isInternalColor ? '#fff' : undefined) : undefined, + backgroundColor: isVariant || (color && !isInternalColor ? color : undefined), ...tagContext?.style, ...style, }; @@ -153,6 +157,7 @@ const InternalTag = React.forwardRef((tagProps, ref) export type TagType = typeof InternalTag & { CheckableTag: typeof CheckableTag; + Compact: typeof Compact; }; const Tag = InternalTag as TagType; @@ -160,7 +165,7 @@ const Tag = InternalTag as TagType; if (process.env.NODE_ENV !== 'production') { Tag.displayName = 'Tag'; } - +Tag.Compact = Compact; Tag.CheckableTag = CheckableTag; export default Tag; diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index d9cb776aaf..759f40857c 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -19,6 +19,8 @@ demo: 基本 +透底变体 +组合标签 多彩标签 反色多彩标签 动态添加和删除 @@ -42,6 +44,7 @@ demo: | --- | --- | --- | --- | --- | | closeIcon | 自定义关闭按钮。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | false | 4.4.0 | | color | 标签色 | string | - | | +| variant | 变体 | `clear` \| `default` | `default` | | | icon | 设置图标 | ReactNode | - | | | bordered | 是否有边框 | boolean | true | 5.4.0 | | onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e: React.MouseEvent) => void | - | | @@ -53,6 +56,12 @@ demo: | checked | 设置标签的选中状态 | boolean | false | | onChange | 点击标签时触发的回调 | (checked) => void | - | +### Tag.Compact + +| 参数 | 说明 | 类型 | 默认值 | +| --------- | -------- | --------------------------------------- | ------------ | +| direction | 布局方式 | "horizontal" \| "vertical" \| undefined | “horizontal” | + ## 主题变量（Design Token） diff --git a/components/tag/style/statusCmp.ts b/components/tag/style/statusCmp.ts index d4dadcc158..72dd81f701 100644 --- a/components/tag/style/statusCmp.ts +++ b/components/tag/style/statusCmp.ts @@ -8,7 +8,6 @@ import { genSubStyleComponent } from '../../theme/internal'; // ============================== Status ============================== type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning'; - const genTagStatusStyle = ( token: TagToken, status: 'success' | 'processing' | 'error' | 'warning', diff --git a/components/tag/style/variant.ts b/components/tag/style/variant.ts new file mode 100644 index 0000000000..73682267b8 --- /dev/null +++ b/components/tag/style/variant.ts @@ -0,0 +1,8 @@ +import { useToken } from '../../theme/internal'; + +export type TagVariant = 'clear' | 'default'; + +export default (variant: TagVariant) => { + const token = useToken()[1]; + return variant === 'clear' ? token.colorBgMask : null; +};