Text 文字

正文文字，界面上绝大多数文字都用它。

导语用 md，比正文略大。

正文用 base，界面上九成的文字都是它。

辅助说明用 sm 与次级色。

import { Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Text size="md">导语用 md，比正文略大。</Text>
      <Text>正文用 base，界面上九成的文字都是它。</Text>
      <Text size="sm" tone="muted">
        辅助说明用 sm 与次级色。
      </Text>
    </Stack>
  )
}

tsx

用法

import { Text } from '@hina-ui/react'

默认渲染为 p，正文字号，常规字重。绝大多数情况下不需要设置任何属性。

默认渲染为段落，正文字号，常规字重。

import { Text } from '@hina-ui/react'

export default function Demo() {
  return <Text className="max-w-lg">默认渲染为段落，正文字号，常规字重。</Text>
}

tsx

示例

字号

共七档，从 13 像素到 30 像素。base 是正文，md 用于导语，sm 用于界面上的辅助文字，xs 用于徽标等小标签，lg 及以上通常由 Heading 承担。

2xl 三十像素

xl 二十四像素

lg 二十像素

md 十八像素

base 十六像素

sm 十四像素

xs 十三像素

import { Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Text size="2xl">2xl 三十像素</Text>
      <Text size="xl">xl 二十四像素</Text>
      <Text size="lg">lg 二十像素</Text>
      <Text size="md">md 十八像素</Text>
      <Text size="base">base 十六像素</Text>
      <Text size="sm">sm 十四像素</Text>
      <Text size="xs">xs 十三像素</Text>
    </Stack>
  )
}

tsx

继承字号

size="inherit" 继承父元素的字号和行高，父级文字样式变化时会跟随更新。行内文字搭配 as="span"；单独设置 as 不会改变字号。

颜色和字重仍分别由 tone、weight 控制，未设置 size 时仍使用 base。

sm 父级文字，继承字号和行高。

base 父级文字，继承字号和行高。

xl 父级文字，继承字号和行高。

import { Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Text size="sm">
        sm 父级文字，{' '}
        <Text as="span" size="inherit" tone="accent">
          继承字号和行高
        </Text>{' '}
        。
      </Text>
      <Text size="base">
        base 父级文字，{' '}
        <Text as="span" size="inherit" tone="accent">
          继承字号和行高
        </Text>{' '}
        。
      </Text>
      <Text size="xl">
        xl 父级文字，{' '}
        <Text as="span" size="inherit" tone="accent">
          继承字号和行高
        </Text>{' '}
        。
      </Text>
    </Stack>
  )
}

tsx

色调

default 是正文色，muted 和 faint 依次减弱，disabled 用于不可用状态，其余四种表示语义状态。

default 正文

muted 次级说明

faint 最弱的注记

disabled 不可用

accent 强调

success 成功

warning 需要注意

danger 错误

info 补充

import { Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg" gap="xs">
      <Text tone="default">default 正文</Text>
      <Text tone="muted">muted 次级说明</Text>
      <Text tone="faint">faint 最弱的注记</Text>
      <Text tone="disabled">disabled 不可用</Text>
      <Text tone="accent">accent 强调</Text>
      <Text tone="success">success 成功</Text>
      <Text tone="warning">warning 需要注意</Text>
      <Text tone="danger">danger 错误</Text>
      <Text tone="info">info 补充</Text>
    </Stack>
  )
}

tsx

字重

三档字重。正文用常规，表头和标签用中等，需要强调时用半粗。

常规字重，正文默认

中等字重，表头与标签

半粗字重，需要强调时

import { Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg" gap="xs">
      <Text weight="normal">常规字重，正文默认</Text>
      <Text weight="medium">中等字重，表头与标签</Text>
      <Text weight="semibold">半粗字重，需要强调时</Text>
    </Stack>
  )
}

tsx

截断

设置 truncate 后，超出容器宽度的文字在末尾显示省略号，且不换行。

很长很长的一段文字会在容器边界处截断并显示省略号

import { Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text truncate className="max-w-xs">
      很长很长的一段文字会在容器边界处截断并显示省略号
    </Text>
  )
}

tsx

渲染的标签

as 指定渲染成哪个标签。用在句子中时改为 span，避免段落标签打断行内排版。

默认渲染为 p 元素。

设置 as 可以改为 span，用于行内。

也可以是 div。

import { Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Text>默认渲染为 p 元素。</Text>
      <Text as="span" tone="muted">
        设置 as 可以改为 span，用于行内。
      </Text>
      <Text as="div" size="sm">
        也可以是 div。
      </Text>
    </Stack>
  )
}

tsx

API

Props

属性	类型	默认值	说明
`size`	`'xs' \| 'sm' \| 'base' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'inherit'`	`'base'`	字号
`tone`	`'default' \| 'muted' \| 'faint' \| 'disabled' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	色调
`weight`	`'normal' \| 'medium' \| 'semibold'`	`'normal'`	字重
`truncate`	`boolean`	`false`	是否单行截断并显示省略号
`as`	`string \| Component`	`'p'`	渲染的元素或组件
`asChild`	`boolean`	`false`	不渲染自身，合并至唯一的子元素
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	文字内容

用法

示例

字号

继承字号

色调

字重

截断

渲染的标签

无障碍

API

Props

内容属性