> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/typography.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Typography 排版

组织标题、正文和链接。

## 基础用法


### 项目说明

用一致的阅读节奏组织标题、正文和链接。

今天更新 · [查看 API](#typography-api)

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/typography/basic.tsx"
import { Link, Paragraph, Text, Title, Typography } from '@ifhover/leaf-ui';

export function TypographyBasic() {
  return (
    <Typography>
      <Title level={3}>{'项目说明'}</Title>
      <Paragraph>
        {'用一致的阅读节奏组织标题、正文和链接。'}
      </Paragraph>
      <Text tone="muted">{'今天更新'}</Text>
      {' · '}
      <Link href="#typography-api">{'查看 API'}</Link>
    </Typography>
  );
}
```

展开代码

## 复制与编辑


Leaf workspace

工作区帮助团队整理项目并分享有用的信息。先展示最重要的内容，阅读者需要更多细节时，可以展开段落查看完整说明。展开

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/typography/basic.tsx"
import { Paragraph, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TypographyActions() {
  const [text, setText] = useState('Leaf workspace');
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Text copyable editable={{ onChange: setText }}>
        {text}
      </Text>
      <Paragraph ellipsis={{ rows: 2, expandable: true }} style={{ maxWidth: 320 }}>
        {'工作区帮助团队整理项目并分享有用的信息。先展示最重要的内容，阅读者需要更多细节时，可以展开段落查看完整说明。'}
      </Paragraph>
    </div>
  );
}
```

展开代码

## Typography API

| 属性        | 类型        | 默认值 | 说明        |
| --------- | --------- | --- | --------- |
| `compact` | `boolean` | —   | 减少正文段落间距。 |

## Text API

| 属性          | 类型                                                                                                  | 默认值         | 说明                         |
| ----------- | --------------------------------------------------------------------------------------------------- | ----------- | -------------------------- |
| `tone`      | `'default' \| 'muted' \| 'primary' \| 'success' \| 'warning' \| 'danger'`                           | `'default'` | 文字的语义色。                    |
| `strong`    | `boolean`                                                                                           | —           | 加粗文字。                      |
| `italic`    | `boolean`                                                                                           | —           | 斜体文字。                      |
| `underline` | `boolean`                                                                                           | —           | 显示下划线。                     |
| `code`      | `boolean`                                                                                           | —           | 以行内代码展示。                   |
| `mark`      | `boolean`                                                                                           | —           | 突出标记文字。                    |
| `ellipsis`  | `boolean \| { rows?: number; expandable?: boolean }`                                                | —           | 单行或多行省略，可提供展开操作。           |
| `copyable`  | `boolean \| { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }` | —           | 提供复制操作，可指定复制内容和回调。         |
| `editable`  | `{ onChange: (text: string) => void; text?: string }`                                               | —           | 提供编辑操作；onChange 后由调用者更新文字。 |

## Paragraph API

| 属性          | 类型                                                                                                  | 默认值         | 说明                         |
| ----------- | --------------------------------------------------------------------------------------------------- | ----------- | -------------------------- |
| `tone`      | `'default' \| 'muted' \| 'primary' \| 'success' \| 'warning' \| 'danger'`                           | `'default'` | 文字的语义色。                    |
| `strong`    | `boolean`                                                                                           | —           | 加粗文字。                      |
| `italic`    | `boolean`                                                                                           | —           | 斜体文字。                      |
| `underline` | `boolean`                                                                                           | —           | 显示下划线。                     |
| `code`      | `boolean`                                                                                           | —           | 以行内代码展示。                   |
| `mark`      | `boolean`                                                                                           | —           | 突出标记文字。                    |
| `ellipsis`  | `boolean \| { rows?: number; expandable?: boolean }`                                                | —           | 单行或多行省略，可提供展开操作。           |
| `copyable`  | `boolean \| { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }` | —           | 提供复制操作，可指定复制内容和回调。         |
| `editable`  | `{ onChange: (text: string) => void; text?: string }`                                               | —           | 提供编辑操作；onChange 后由调用者更新文字。 |

## Title API

| 属性      | 类型                           | 默认值 | 说明                |
| ------- | ---------------------------- | --- | ----------------- |
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | 标题层级，输出对应的 h1–h6。 |

## Link API

| 属性          | 类型          | 默认值    | 说明                 |
| ----------- | ----------- | ------ | ------------------ |
| `disabled`  | `boolean`   | —      | 禁用交互。              |
| `underline` | `boolean`   | `true` | 显示下划线。             |
| `external`  | `boolean`   | —      | 在新标签页打开并设置安全的 rel。 |
| `icon`      | `ReactNode` | —      | 图标内容。              |

## 类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

```ts
import type { TypographyProps, TextProps, ParagraphProps, TitleProps, LinkProps } from '@ifhover/leaf-ui';
```

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。