antd Form表单给标题头添加图标或一些其他样式

文章介绍了如何在表单标题旁添加Icon图标并设置提示信息。可以使用Form.Item的tooltip属性直接添加,或者自定义函数封装样式,通过label属性展示。同时提到可以在label中直接添加标签或组件来实现个性化设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 给表单标题旁添加一个Icon图标并设置一个提示信息

 如果就一个icon图标和提示信息可以直接使用Form.Item中的tooltip属性:

tooltip={{ 
    title: 'Tooltip with customize icon', 
    icon: <InfoCircleOutlined /> 
}}

如果有一些其他的样式,可以使用以下方法,这里还是以icon图标为例:

用一个函数将你要设置的label样式进行一个封装

function formItemTooltip () {
    return (
       {'这是我要添加的标题'} 
       <Tooltip>
            <这是添加的Icon图标>
       </Tooltip>
    )
};

直接在Form.Item的label属性中添加

label={formItemTooltip()}

也可以直接在label中添加标签或组件

label={ <div>这是标题</div> }
或:
label={ <FunTooltip/> }  //组件

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值