我想在表单字段上添加信息详细信息图标,当用户将鼠标悬停在i标记上时,或者我们可以说信息详细信息图标,然后该图标将显示特定表单字段的详细信息我想知道如何实现以上在andd形式的React
p8ekf7hl1#
在Ant Design中,您可以使用the Tooltip component和**@ant-design/icons**库中的"InfoCircleOutline" icon在表单字段上添加信息详细信息图标。安装npm:* npm i@Ant Design/图标 *下面是一个示例实现:
import React from 'react'; import { Form, Input, Tooltip } from 'antd'; import { InfoCircleOutlined } from '@ant-design/icons'; const FormItem = Form.Item; const BaseForm = () => { return ( <Form> <FormItem name="username" label={ <span> Username <Tooltip title="Enter your username here"> <InfoCircleOutlined /> </Tooltip> </span> } rules={[ { required: true, message: 'Please input your username!', whitespace: true, }, ]} > <Input /> </FormItem> </Form> ); }; export default BaseForm;
1条答案
按热度按时间p8ekf7hl1#
在Ant Design中,您可以使用the Tooltip component和**@ant-design/icons**库中的"InfoCircleOutline" icon在表单字段上添加信息详细信息图标。安装npm:* npm i@Ant Design/图标 *
下面是一个示例实现: