reactjs 如何在andd中添加信息图标?

dtcbnfnu  于 2023-02-15  发布在  React
关注(0)|答案(1)|浏览(214)

我想在表单字段上添加信息详细信息图标,当用户将鼠标悬停在i标记上时,或者我们可以说信息详细信息图标,然后该图标将显示特定表单字段的详细信息
我想知道如何实现以上在andd形式的React

p8ekf7hl

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&nbsp;
            <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;

相关问题