Typography 排版 #

概述 #

Typography 排版组件用于展示标题、段落、文本内容等。它提供了丰富的文本样式和功能，如可编辑、可复制、可省略等。

基础用法 #

标题 #

使用 Title 组件展示标题：

tsx

import { Typography } from 'antd';

const { Title } = Typography;

<Title>h1 标题</Title>
<Title level={2}>h2 标题</Title>
<Title level={3}>h3 标题</Title>
<Title level={4}>h4 标题</Title>
<Title level={5}>h5 标题</Title>

level	字号	行高
1	38px	1.4
2	30px	1.4
3	24px	1.4
4	20px	1.5
5	16px	1.5

文本 #

使用 Text 组件展示文本：

tsx

import { Typography } from 'antd';

const { Text } = Typography;

<Text>默认文本</Text>
<Text type="secondary">次要文本</Text>
<Text type="success">成功文本</Text>
<Text type="warning">警告文本</Text>
<Text type="danger">错误文本</Text>
<Text disabled>禁用文本</Text>
<Text mark>标记文本</Text>
<Text code>代码文本</Text>
<Text keyboard>键盘文本</Text>
<Text underline>下划线文本</Text>
<Text delete>删除线文本</Text>
<Text strong>加粗文本</Text>
<Text italic>斜体文本</Text>

段落 #

使用 Paragraph 组件展示段落：

tsx

import { Typography } from 'antd';

const { Paragraph } = Typography;

<Paragraph>
  这是一段很长的文本内容，用于展示段落组件的使用方法。
  段落组件支持自动换行，适合展示较长的文本内容。
</Paragraph>

链接 #

使用 Link 组件展示链接：

tsx

import { Typography } from 'antd';

const { Link } = Typography;

<Link href="https://ant.design">Ant Design</Link>
<Link href="https://ant.design" target="_blank">新窗口打开</Link>
<Link href="https://ant.design" disabled>禁用链接</Link>

文本省略 #

基础省略 #

tsx

import { Typography } from 'antd';

const { Paragraph, Text, Title } = Typography;

<Paragraph ellipsis>
  这是一段非常长的文本内容，当文本超出容器宽度时，会自动省略显示...
  这里可以放置很多很多的内容来演示省略效果。
</Paragraph>

<Text ellipsis style={{ maxWidth: 200 }}>
  这是一段很长的文本，超出部分会被省略显示...
</Text>

展开收起 #

tsx

import { Typography } from 'antd';

const { Paragraph } = Typography;

<Paragraph
  ellipsis={{
    rows: 2,
    expandable: true,
    symbol: '展开',
  }}
>
  这是一段非常长的文本内容，默认只显示两行，点击展开可以查看全部内容。
  Ant Design 是一个企业级 UI 设计语言和 React 组件库，
  它提供了丰富的组件和完善的文档，帮助开发者快速构建高质量的企业级应用。
</Paragraph>

省略回调 #

tsx

import { Typography } from 'antd';

const { Paragraph } = Typography;

<Paragraph
  ellipsis={{
    rows: 2,
    onExpand: (e) => console.log('展开'),
    onEllipsis: (ellipsis) => console.log('省略状态:', ellipsis),
  }}
>
  这是一段可以监听省略状态的文本内容...
</Paragraph>

可编辑文本 #

tsx

import { Typography } from 'antd';
import { useState } from 'react';

const { Paragraph } = Typography;

const [text, setText] = useState('这是可编辑的文本');

<Paragraph editable={{ onChange: setText }}>{text}</Paragraph>

自定义图标 #

tsx

import { Typography } from 'antd';
import { EditOutlined } from '@ant-design/icons';

const { Paragraph } = Typography;

<Paragraph
  editable={{
    icon: <EditOutlined />,
    tooltip: '点击编辑',
    onChange: handleChange,
  }}
>
  可编辑文本
</Paragraph>

可复制文本 #

tsx

import { Typography } from 'antd';

const { Paragraph, Text } = Typography;

<Paragraph copyable>这是一段可以复制的文本</Paragraph>

<Text copyable>可复制的文本</Text>

自定义复制 #

tsx

import { Typography } from 'antd';

const { Paragraph } = Typography;

<Paragraph
  copyable={{
    text: '这是要复制的内容',
    onCopy: () => console.log('复制成功'),
    tooltips: ['点击复制', '复制成功'],
  }}
>
  点击复制按钮会复制指定的内容
</Paragraph>

组合使用 #

同时支持编辑和复制 #

tsx

import { Typography } from 'antd';
import { useState } from 'react';

const { Paragraph } = Typography;

const [text, setText] = useState('可编辑且可复制的文本');

<Paragraph copyable editable={{ onChange: setText }}>
  {text}
</Paragraph>

标题带操作 #

tsx

import { Typography, Space } from 'antd';

const { Title } = Typography;

<Title editable={{ onChange: handleChange }} copyable>
  可编辑和复制的标题
</Title>

后缀/前缀 #

tsx

import { Typography, Space } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Text } = Typography;

<Space>
  <Text type="secondary">前缀</Text>
  <Text>主文本</Text>
  <Text type="secondary">后缀</Text>
</Space>

API #

Typography #

属性	说明	类型	默认值
copyable	是否可复制	boolean \| copyable配置	false
delete	删除线样式	boolean	false
disabled	禁用状态	boolean	false
editable	是否可编辑	boolean \| editable配置	false
ellipsis	自动省略	boolean \| ellipsis配置	false
mark	标记样式	boolean	false
type	文本类型	`secondary` \| `success` \| `warning` \| `danger`	-
underline	下划线样式	boolean	false

Typography.Title #

属性	说明	类型	默认值
level	标题级别	1 \| 2 \| 3 \| 4 \| 5	1

Typography.Paragraph #

属性	说明	类型	默认值
ellipsis	自动省略	boolean \| ellipsis配置	false

Typography.Text #

属性	说明	类型	默认值
code	代码样式	boolean	false
copyable	是否可复制	boolean \| copyable配置	false
delete	删除线样式	boolean	false
disabled	禁用状态	boolean	false
editable	是否可编辑	boolean \| editable配置	false
ellipsis	自动省略	boolean \| ellipsis配置	false
keyboard	键盘样式	boolean	false
mark	标记样式	boolean	false
strong	加粗	boolean	false
italic	斜体	boolean	false
type	文本类型	`secondary` \| `success` \| `warning` \| `danger`	-
underline	下划线样式	boolean	false

Typography.Link #

属性	说明	类型	默认值
href	链接地址	string	-
target	链接目标	string	-
underline	下划线样式	boolean	false

ellipsis 配置 #

属性	说明	类型	默认值
rows	省略行数	number	-
expandable	是否可展开	boolean	false
suffix	后缀	string	-
symbol	展开按钮文案	ReactNode	`展开`
tooltip	提示信息	boolean \| ReactNode	false
onExpand	展开回调	function	-
onEllipsis	省略回调	function	-

copyable 配置 #

属性	说明	类型	默认值
text	复制内容	string	-
onCopy	复制回调	function	-
icon	复制图标	ReactNode	-
tooltips	提示文案	[ReactNode, ReactNode]	-

editable 配置 #

属性	说明	类型	默认值
icon	编辑图标	ReactNode	-
tooltip	提示信息	boolean \| ReactNode	-
editing	是否编辑中	boolean	-
maxLength	最大长度	number	-
autoSize	自适应高度	boolean \|	-
onStart	开始编辑回调	function	-
onChange	内容变化回调	function	-
onCancel	取消编辑回调	function	-
onEnd	结束编辑回调	function	-

最佳实践 #

1. 合理使用标题层级 #

tsx

<Title level={1}>页面主标题</Title>
<Title level={2}>章节标题</Title>
<Title level={3}>小节标题</Title>

2. 长文本使用省略 #

tsx

<Paragraph ellipsis={{ rows: 3, expandable: true }}>
  长文本内容...
</Paragraph>

3. 重要信息使用强调 #

tsx

<Text strong>重要信息</Text>
<Text type="danger">警告信息</Text>
<Text type="success">成功信息</Text>

4. 可交互文本提供反馈 #

tsx

<Paragraph copyable={{ tooltips: ['复制链接', '已复制'] }}>
  https://example.com/very/long/url
</Paragraph>

下一步 #

接下来学习 Grid 栅格组件！