ReactJS UI Ant Design 排版组件

Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。排版组件对于基本文本编写、正文（包括标题、列表等）很有用。我们可以在 ReactJS 中使用以下方法来使用 Ant Design Typography 组件。

Typography.Text 道具：

code：用于代码风格。
copyable：用于表示是否可复制。
delete：用于删除的线型。
disabled：用于禁用内容。
可编辑：如果设置为可编辑，则用于编辑对象时的状态。
省略号：用于在文本溢出时显示省略号。
键盘：用于键盘样式。
mark：用于标记样式。
onClick：用于设置处理点击事件的handler。
strong：用于粗体风格。
斜体：用于斜体样式。
type：用于表示内容类型。
underline：用于下划线样式。

Typography.Title 道具：

code：用于代码风格。
copyable：用于表示是否可复制。
delete：用于删除的线型。
disabled：用于禁用内容。
可编辑：如果设置为可编辑，则用于编辑对象时的状态。
省略号：用于在文本溢出时显示省略号。
level：用于设置内容的重要性。
mark：用于标记样式。
onClick：用于设置处理点击事件的handler。
斜体：用于斜体样式。
type：用于表示内容类型。
underline：用于下划线样式。

Typography.Paragraph 道具：

code：用于代码风格。
copyable：用于表示是否可复制。
delete：用于删除的线型。
disabled：用于禁用内容。
可编辑：如果设置为可编辑，则用于编辑对象时的状态。
省略号：用于在文本溢出时显示省略号。
mark：用于标记样式。
onClick：用于设置处理点击事件的handler。
strong：用于粗体风格。
斜体：用于斜体样式。
type：用于表示内容类型。
underline：用于下划线样式。

可复制道具：

图标：用于自定义复制图标。
text：用于表示要复制的文本。
tooltips：用于自定义工具提示文本。
onCopy：复制文本时调用的函数。

可编辑道具：

autoSize：用于表示 textarea 的 autoSize 属性。
编辑：用于指示是否可编辑。
图标：用于自定义可编辑图标。
maxLength：用于表示textarea数字的maxLength属性。
tooltip：用于自定义工具提示文本。
onCancel：是一个回调函数，当按 ESC 退出可编辑状态时调用。
onChange：在textarea输入时调用的回调函数。
onEnd：这是一个回调函数，当输入 ENTER 退出可编辑状态时调用。
onStart：进入可编辑状态时调用的回调函数。
onCancel：是一个回调函数，当按 ESC 退出可编辑状态时调用。
onEnd：是一个回调函数，当输入ENTER退出可编辑状态时调用。

省略号道具：

expandable：用于指示是否可扩展。
rows：用于表示内容的最大行数。
suffix：用于表示省略号内容的后缀。
symbol：用于自定义省略号的描述。
tooltip：用于在省略号时显示工具提示。
onEllipsis：进入或离开省略号状态时调用的回调函数。
onExpand：是展开内容时调用的回调函数。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install antd
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Typography } from 'antd';
  
const { Title } = Typography;
  
export default function App() {
  
  return (
    
      ReactJS Ant-Design Typography Component
      <>
        h1 Size Heading
        h2 Size Heading
        h3 Size Heading
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://ant.design/components/typography/