Typography 排版

用于标题、段落和文本格式的语义文本组件。

导入

import { Typography } from 'asterui'

const { Title, Paragraph, Text, Link } = Typography

示例

标题

从 h1 到 h5 的标题级别。

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

import { Typography } from 'asterui'

function App() {
  const { Title } = Typography
  
  return (
      <div>
        <Title level={1}>h1. Heading</Title>
        <Title level={2}>h2. Heading</Title>
        <Title level={3}>h3. Heading</Title>
        <Title level={4}>h4. Heading</Title>
        <Title level={5}>h5. Heading</Title>
      </div>
    )
}

export default App

段落

块级文本内容。

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Good typography creates a visual hierarchy, helps users navigate content, and improves the overall user experience. It's an essential element of web design that directly impacts readability and engagement.

import { Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <div>
        <Paragraph>
          Typography is the art and technique of arranging type to make written language legible,
          readable, and appealing when displayed. The arrangement of type involves selecting
          typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
        </Paragraph>
        <Paragraph>
          Good typography creates a visual hierarchy, helps users navigate content, and improves the
          overall user experience. It's an essential element of web design that directly impacts
          readability and engagement.
        </Paragraph>
      </div>
    )
}

export default App

文本类型

用于各种上下文的不同文本类型。

Default TextSecondary TextSuccess TextWarning TextDanger TextDisabled Text

import { Typography, Space } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical">
        <Text>Default Text</Text>
        <Text type="secondary">Secondary Text</Text>
        <Text type="success">Success Text</Text>
        <Text type="warning">Warning Text</Text>
        <Text type="danger">Danger Text</Text>
        <Text disabled>Disabled Text</Text>
      </Space>
    )
}

export default App

文本样式

各种文本格式选项。

Bold TextItalic TextUnderlined Text~~Strikethrough Text~~Code TextMarked TextKeyboard Text

import { Typography, Space } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical">
        <Text strong>Bold Text</Text>
        <Text italic>Italic Text</Text>
        <Text underline>Underlined Text</Text>
        <Text delete>Strikethrough Text</Text>
        <Text code>Code Text</Text>
        <Text mark>Marked Text</Text>
        <Text keyboard>Keyboard Text</Text>
      </Space>
    )
}

export default App

链接

样式化的锚元素。

Basic Link Secondary Link Success Link Warning Link Danger Link

import { Typography, Space } from 'asterui'

function App() {
  const { Link } = Typography
  
  return (
      <Space direction="vertical">
        <Link href="#">Basic Link</Link>
        <Link href="#" type="secondary">
          Secondary Link
        </Link>
        <Link href="#" type="success">
          Success Link
        </Link>
        <Link href="#" type="warning">
          Warning Link
        </Link>
        <Link href="#" type="danger">
          Danger Link
        </Link>
      </Space>
    )
}

export default App

可复制

单击即可将文本复制到剪贴板。

This is copyable text. Click the icon to copy.

Copy different text than displayed.

import { Typography, Space } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <Space direction="vertical">
        <Paragraph copyable>This is copyable text. Click the icon to copy.</Paragraph>
        <Paragraph copyable={{ text: 'Custom copied text!' }}>
          Copy different text than displayed.
        </Paragraph>
      </Space>
    )
}

export default App

省略

使用省略号截断长文本。

This is a very long paragraph that will be truncated with an ellipsis when it exceeds the available width. This helps maintain clean layouts when dealing with variable-length content.

This paragraph will show two lines before truncating. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

import { Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <div className="max-w-md">
        <Paragraph ellipsis>
          This is a very long paragraph that will be truncated with an ellipsis when it exceeds the
          available width. This helps maintain clean layouts when dealing with variable-length
          content.
        </Paragraph>
        <Paragraph ellipsis={{ rows: 2 }}>
          This paragraph will show two lines before truncating. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </Paragraph>
      </div>
    )
}

export default App

可编辑

内联可编辑文本。

This text can be edited. Click to modify.

Editable Heading

import { Typography, Space } from 'asterui'

function App() {
  const { Title, Paragraph } = Typography
  
  return (
      <Space direction="vertical">
        <Paragraph editable>This text can be edited. Click to modify.</Paragraph>
        <Title level={4} editable>
          Editable Heading
        </Title>
      </Space>
    )
}

export default App

API

属性	描述	类型	默认值
`children`	内容	`React.ReactNode`	-
`className`	额外的 CSS 类	`string`	-
`level`	标题级别 (h1-h5) - 仅 Title	`1 \| 2 \| 3 \| 4 \| 5`	`1`
`copyable`	启用复制到剪贴板 - Title 和 Paragraph	`boolean \| { text?: string }`	`false`
`ellipsis`	使用省略号截断 - Title 和 Paragraph	`boolean \| { rows?: number }`	`false`
`editable`	启用内联编辑 - 仅 Title	`boolean`	`false`
`type`	用于样式的文本类型 - Text 和 Link	`'secondary' \| 'success' \| 'warning' \| 'danger'`	-
`disabled`	禁用样式 - 仅 Text	`boolean`	`false`
`strong`	粗体文本 - 仅 Text	`boolean`	`false`
`italic`	斜体文本 - 仅 Text	`boolean`	`false`
`underline`	下划线文本 - 仅 Text	`boolean`	`false`
`delete`	删除线文本 - 仅 Text	`boolean`	`false`
`code`	代码样式 - 仅 Text	`boolean`	`false`
`mark`	高亮文本 - 仅 Text	`boolean`	`false`
`keyboard`	键盘样式 - 仅 Text	`boolean`	`false`
`size`	文本大小 - Text、Paragraph 和 Link	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'`	-
`align`	文本对齐 - 仅 Paragraph	`'left' \| 'center' \| 'right'`	-
`href`	链接 URL - 仅 Link	`string`	`'#'`
`external`	在新标签页中打开并带有外部图标 - 仅 Link	`boolean`	`false`
`data-testid`	用于测试的测试 ID	`string`	-

可访问性

使用语义 HTML 元素 (h1-h5, p, span, a)
保持正确的标题层次结构
链接具有可访问的标签
复制和编辑操作可通过键盘访问