Antd中的文本、图标和提示组件

• 文本展示类组件和图标按钮，提供了丰富的文案和样式体验。
• 提示组件归纳，了解为什么要设置这么多弹框提示类型，对于原型图上的弹框，如何选择提示组件。

一、按钮Button

import React, { useState } from "react";
import { Button, Input, Space, Typography, Tooltip } from "antd";
import { SearchOutlined } from "@ant-design/icons";
export default function TextPage() {
  const [loading, setLoading] = useState(false);
  const handleClick = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };
  return (
    <div className="text-page">
      {/* Tooltip 可以设置描述提示 */}
      <Tooltip title="Tooltip title">
        {/* shape 基本等同于快速设置 border-radius  */}
        <Button
          type="default"
          shape="round"
          icon={<SearchOutlined />} // 设置图标
          loading={loading}
          onClick={handleClick}
        >
          Default
        </Button>
      </Tooltip>
      {/* 文字按钮 */}
      <Button type="link" shape="round" loading={loading} onClick={handleClick}>
        link
      </Button>
      {/* ghost 按钮，默认透明，hover 后变色 */}
      <Button ghost loading={loading} onClick={handleClick}>
        Ghost
      </Button>
    </div>
  );
}

按钮组件基础

import React, { useState } from "react";
import { Button, Tooltip } from "antd";
import { SearchOutlined } from "@ant-design/icons";
export default function BtnCom({
  text = "按钮",
  onSubmit = () => {},
  TooltipTitle = "",
  shape = "default",
  type = "primary",
  icon = <SearchOutlined />,
}) {
  const [loading, setLoading] = useState(false);
  const handleClick = async () => {
    setLoading(true);
    await onSubmit();
    setLoading(false);
  };
  return (
    <div className="text-page">
      {/* Tooltip 可以设置描述提示 */}
      <Tooltip title={TooltipTitle}>
        {/* shape 基本等同于快速设置 border-radius  */}
        <Button
          type={type}
          shape={shape}
          icon={icon} // 设置图标
          loading={loading}
          onClick={handleClick}
        >
          {text}
        </Button>
      </Tooltip>
    </div>
  );
}

二、图标

注意按钮的名字特点，对于LeftCircle按钮，边框按钮 = LeftCircle + Outlined；实底按钮 = LeftCircle + Filled；双色按钮 = LeftCircle + TwoTone

// 部分代码示例，细节在注释中体现
<Button
  type={refresh ? "primary" : "default"}
  // 注意图标在按钮里面的时候，颜色会随着按钮背景色自动变化
  icon={<LeftCircleOutlined />}
  onClick={() => {
    // 切换双色图标(全局)
    setTwoToneColor(refresh ? "#1677FF" : "blue");
    // 样式设置了，但是组件未更新，不会展示新的样式；可以主动更新
    setRefresh(!refresh);
  }}
>
  Button
</Button>
{/* 图标样式类似于字体样式 */}
{/* 边框图标 */}
<LeftCircleOutlined
  spin={refresh}
  style={{ color: "#1677FF", fontSize: "20px" }}
/>
{/* 实底图标 */}
<LeftCircleFilled
  rotate={refresh ? 90 : 0}
  style={{ color: "#1677FF", fontSize: "20px" }}
/>
{/* 多色图标 这里的color无效 使用twoToneColor设置 */}
<LeftCircleTwoTone
  style={{ color: "red", fontSize: "20px" }}
  twoToneColor={refresh ? "#1677FF" : "blue"}
/>

三、Typography

提供了文字快捷排版、文字copy等功等辅助功能

{/* Paragraph、Title、Text、Link 他们大部分属性公用，少部分不同 */}
{/* Typography 组件可以设置标题、段落、文本、链接等 */}
<Typography>
  {/* level 1-6 类似于 h1-h6 */}
  <Title level={1}>Title 1</Title>
  <Title level={2}>Title 2</Title>
  {/* Paragraph 段落主体内容 */}
  <Paragraph>
    Paragraph: Paragraph Paragraph
    {/* Text 文本 单独设置标记样式 */}
    <Text strong>Text strong: Text Text</Text>
    {/* keyboard 键盘背景色样式，看起来像一个按钮 */}
    <Text keyboard>Text keyboard: Text Text</Text>
    {/* Link 链接样式 */}
    <Link>Link Link</Link>
    {/* blockquote 类似于编辑器的引用 */}
    <blockquote>blockquote blockquote blockquote</blockquote>
    {/* pre 代码块 */}
    <pre>pre pre pre</pre>
    {/* Text 类似于快速设计样式，注意这里只是增加了设计样式 */}
    <Space direction="vertical">
      <Text
        disabled
        onClick={() => {
          // 可以点击
          alert("disabled");
        }}
      >
        Ant Design (disabled)
      </Text>
      <Text mark>Ant Design (mark)</Text>
      <Text code>Ant Design (code)</Text>
      <Text keyboard>Ant Design (keyboard)</Text>
      <Text underline>Ant Design (underline)</Text>
      <Text delete>Ant Design (delete)</Text>
      <Text strong>Ant Design (strong)</Text>
      <Text italic>Ant Design (italic)</Text>
    </Space>
    <Space direction="vertical" style={{ width: "100px" }}>
      <Paragraph
        editable={{
          // 编辑点击后的文字，和Paragraph.children可以不相同
          text: ParagraphStr,
          icon: <StepBackwardFilled />, // 编辑按钮图标
          enterIcon: <CheckOutlined />, // 编辑区域末尾的图标；默认是个回车键
          triggerType: "icon", // 编辑按钮触发方式；both = icon + hover
          tooltip: "Edit tooltip", // 编辑按钮上方的提示
          onChange: setParagraphStr, // 这里编辑的是text，children内容只是展示
          maxLength: 20, // 最大长度限制，类似于textarea的maxlength
        }}
        // 省略号会自动加上...，可以设置后缀文案
        ellipsis={{
          suffix: "123",
          // 点击后可以展开完整内容；默认false; 注意点击展开只能一次
          expandable: true,
          rows: 2, // 显示几行后省略号；默认1
          tooltip: "More", // 省略号上方的提示
        }}
      >
        {/* Paragraph.children 内容，直观看到的内容 */}
        {ParagraphStr}
      </Paragraph>
      <Text
        copyable={{
          // 复制按钮，点击后复制内容到粘贴板
          text: "Copyable text",
          icon: [
            <SmileOutlined key="copy-icon" />, // 复制按钮图标
            <SmileFilled key="copied-icon" />, // 复制成功后的提示图标
          ],
          tooltips: ["复制", "复制成功"], // hover提示，复制成功提示
          onCopy: () => {
            // 复制成功后的回调; 这样可以自定义复制后的提示
            alert("Copied");
          },
        }}
      >
        Text editable
      </Text>

四、提示

1、Tooltip

<Tooltip
  title="Tooltip title"
  overlayStyle={{ width: "200px" }} // 卡片外层
  // 卡片内层
  overlayInnerStyle={{ background: "red", width: "100px" }}
>
  <span>Tooltip Tooltip Tooltip Tooltip</span>
</Tooltip>
{/* placement 位置; arrowPointAtCenter 箭头指向中心, 相当于在placement基础上移动 */}
<Tooltip
  title="Tooltip title"
  placement="topLeft"
  arrowPointAtCenter
  // click 点击触发 contextMenu 右键点击, 会阻止浏览器右键的菜单;
  // focus 是点击按压下去触发；click需要点击左键抬起才会触发；
  trigger={["click", "focus", "contextMenu"]}
>
  <span>Tooltip Tooltip Tooltip Tooltip</span>
</Tooltip>

2、Popover

{/* Popover 弹出框类似于Tooltip，只不过划分了内容区；可以设置title、content */}
<Popovertitle="Title" content={<div>content</div>}>
  <Button type="primary">Hover me</Button>
</Popover>

3、Modal

主要用法有受控Modal、info提示、confirm确认等，这三种方式属性基本上公用，个别属性不一致

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const [ModalVisible, setModalVisible] = useState(false);

<Button
  type="primary"
  onClick={() => {
    setModalVisible(true);
  }}
>
  Open Modal
</Button>
<Button
  type="primary"
  onClick={() => {
    // 确认框; 点击后默认都关闭了
    Modal.confirm({
      title: "Confirm Modal",
      content: "Confirm content",
      onOk: () => {
        console.log("ok");
        // 返回Promise，可以异步关闭弹窗(confirm默认是自动关闭的)
        return delay(1000);
      },
      // 也可以使用async/await
      onCancel: async () => {
        console.log("cancel");
        await delay(1000);
      },
      // okText\cancelText 公用属性
      okText: "确认",
      cancelText: "取消",
      // 确认按钮额外属性；属于快速添加属性
      okButtonProps: {
        type: "default",
      },
      cancelButtonProps: {
        type: "dashed",
        danger: true,
      },
      // 自定义footer, 覆盖默认的确认取消按钮
      // footer: <div>footer</div>,
    });
  }}
>
  Open Modal confirm
</Button>
<Button
  type="primary"
  onClick={() => {
    // 信息提示框; 点击后默认关闭了
    // info 信息提示框，success 成功提示框，error 错误提示框
    // warning 警告提示框(相当于不带取消按钮的Modal.confirm)
    Modal.info({
      title: "Info Modal",
      content: "Info content",
      onOk: () => {
        console.log("ok");
        return delay(1000);
      },
    });
  }}
>
  Open Modal info
</Button>
{/* Modal 弹出框，手动更新和关闭弹窗 */}
<Button
  type="primary"
  onClick={() => {
    // 自定义宽度的弹出框
    const modal = Modal.info({
      title: "Info Modal Handel close",
      content: "Info content",
      onOk: () => {
        console.log("ok");
        return delay(1000);
      },
    });
    // 手动更新弹窗内容
    setTimeout(() => {
      modal.update({
        title: "Info Modal Handel close update",
        content: "Info content update",
      });
    }, 1000);
    // 手动关闭弹窗
    setTimeout(() => {
      modal.destroy();
    }, 2000);
  }}
>
  Open Modal by Handel close
</Button>
<Button
  type="primary"
  onClick={() => {
    Modal.info({
      title: "Info Modal destroyAll outside",
      content: (
        <Button
          onClick={() => {
            Modal.info({
              title: "Info Modal destroyAll inside",
              content: "最终内容",
              onOk: () => {
                // 关闭所有弹窗
                Modal.destroyAll();
              },
            });
          }}
        >
          open Modal inside
        </Button>
      ),
    });
  }}
>
  Open Modal Modal.destroyAll
</Button>
{/* Modal 弹出框，特点是受控，需要手动控制打开和关闭 */}
{/* ant-modal-mask 遮罩层的类名，弹框的蒙层，z-index 1000 */}
<Modal
  open={ModalVisible}
  // 关闭时销毁 Modal 里的子元素, 一般开启好一些
  destroyOnClose
  keyboard // 按 Esc 关闭弹窗
  // mask={false} // 关闭蒙层, 半透明的遮罩层
  title="Modal Title"
  width={500}
  onOk={() => {
    console.log("ok");
  }}
  onCancel={() => {
    setModalVisible(false);
  }}
  // 对整个弹窗的样式设置，比如距离顶部的距离
  style={{ top: 20 }}
  bodyStyle={{ padding: 10 }} // 弹窗内容的样式设置
  wrapClassName="custom-class" // 弹窗外层的类名\和遮罩层同级
>
  content
</Modal>

4、Popconfirm

{/* 和 Modal.confirm类似，只不过更轻量级，在按钮处展示弹框 */}
{/* 区别是Modal有遮罩层；Popconfirm和文案联系比较紧密，就是由文案触发弹框 */}
{/* 一般不需要受控, 可以简化使用，文案点击触发和关闭 */}
<Popconfirm
  title="Are you sure delete this task?"
  // disabled // 阻止点击文案后自动弹框显示
  onConfirm={async () => {
    console.log("ok");
    await delay(1000);
  }}
  onCancel={() => {
    console.log("cancel");
  }}
>
  <Button type="primary">Delete</Button>
</Popconfirm>