For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/components/typography.md.
Leaf UI
  • 简体中文

      • 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 的主题和减少动画设置。