ant-design Add size Prop to < Tag> Component for Size Customization

kx1ctssn  于 22天前  发布在  其他
关注(0)|答案(2)|浏览(19)

What problem does this feature solve?

Introducing a size prop will allow users to easily customize the size of tags based on their importance or hierarchy, providing a more nuanced visual representation.
While most Ant Design components provide a size prop, the absence of this prop in the <Tag> component creates visual inconsistencies. In my actual app, I am using custom css to change the size of the <Tag>

<Tag style={{ fontSize: "large", fontWeight: "bold", padding: "8px" }}>Ant Design</Tag>;

What does the proposed API look like?

it looks like <Input>size prop (large | middle | small)

<Tag size="large">Ant Design</Tag>;

I would like to contribute to this feature with some guidance

4urapxun

4urapxun1#

Maybe style is enough for users to customize size. It hasn't been designed yet.

iaqfqrcu

iaqfqrcu2#

you can create custom component like this

import { Tag as AntTag, TagProps } from "antd";
interface ItagProps extends TagProps {
size: "large" | "medium" | "small";
}
const Tag = ({ size, ...rest }: ItagProps) => {
return (
<AntTag
{...rest}
style={{
fontSize:
size === "small"
? "your style"
: size === "medium"
? "custom style "
: "custom style",
}}
/>
);
};

export default Tag;

相关问题