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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/typography.md.
Leaf UIReact 组件库
GitHub

Typography 排版

组织标题、正文和链接。

基础用法

项目说明

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

今天更新 · 查看 API
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
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

属性类型默认值说明
compactboolean—减少正文段落间距。

Text API

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

Title API

属性类型默认值说明
level1 | 2 | 3 | 4 | 5 | 62标题层级，输出对应的 h1–h6。
属性类型默认值说明
disabledboolean—禁用交互。
underlinebooleantrue显示下划线。
externalboolean—在新标签页打开并设置安全的 rel。
iconReactNode—图标内容。

类型与交互

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

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

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