为 React 构建的界面语言。v1.7.5 已发布
UI
开始设计规范组件变更记录
GitHub 仓库9

Heading 标题

标题，语义层级与视觉字号相互独立。

源码

狼と香辛料

電撃文庫，2006 年 2 月 10 日刊行。

第一卷 启航

第一章 港口的清晨

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

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Heading level={1}>狼と香辛料</Heading>
      <Text tone="muted">電撃文庫，2006 年 2 月 10 日刊行。</Text>
      <Heading level={2}>第一卷 启航</Heading>
      <Heading level={3}>第一章 港口的清晨</Heading>
    </Stack>
  )
}
tsx

用法

import { Heading } from '@hina-ui/react'
ts

level 决定渲染成 h1 到 h6 中的哪一个，默认为 2。字号默认跟随层级，因此通常只需要设置 level。

章节标题

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

export default function Demo() {
  return <Heading level={2}>章节标题</Heading>
}
tsx

示例

层级

六个层级对应六档字号，从 30 像素递减到 14 像素。xl 及以上的字号会收紧字距。

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
import { Heading, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Heading level={1}>一级标题</Heading>
      <Heading level={2}>二级标题</Heading>
      <Heading level={3}>三级标题</Heading>
      <Heading level={4}>四级标题</Heading>
      <Heading level={5}>五级标题</Heading>
      <Heading level={6}>六级标题</Heading>
    </Stack>
  )
}
tsx

语义与视觉分开

size 单独指定字号，不改变标签。页面的标题结构由内容决定，视觉大小由版面决定，两者不必一致。

三级标题，一级字号

一级标题，正文字号

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

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Heading level={3} size="2xl">
        三级标题，一级字号
      </Heading>
      <Heading level={1} size="base">
        一级标题，正文字号
      </Heading>
    </Stack>
  )
}
tsx

字重

默认为 semibold。版面需要更轻的标题时可以改为 medium 或 normal。

半粗，默认字重

中等字重

常规字重

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

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Heading level={3} weight="semibold">
        半粗，默认字重
      </Heading>
      <Heading level={3} weight="medium">
        中等字重
      </Heading>
      <Heading level={3} weight="normal">
        常规字重
      </Heading>
    </Stack>
  )
}
tsx

截断

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

很长很长的章节标题会在容器边界处截断并显示省略号

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

export default function Demo() {
  return (
    <Heading level={3} truncate className="max-w-xs">
      很长很长的章节标题会在容器边界处截断并显示省略号
    </Heading>
  )
}
tsx

正文中的标题

Prose 会为其中的原生 h1 到 h6 应用同一套字号。渲染 Markdown 或富文本时不需要替换标签。

正文中的标题

渲染 Markdown 时不需要替换标签。

下一层标题

层级与字号的对应关系与组件一致。

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

export default function Demo() {
  return (
    <Prose className="max-w-lg">
      <h2>正文中的标题</h2>
      <p>渲染 Markdown 时不需要替换标签。</p>
      <h3>下一层标题</h3>
      <p>层级与字号的对应关系与组件一致。</p>
    </Prose>
  )
}
tsx

无障碍

  • 一个页面只应有一个 h1，其余标题按内容层级依次递进，不要为了字号跳级。需要更大或者更小的字时改 size。
  • 屏幕阅读器可以按标题跳转浏览，层级正确才能形成可用的大纲。

API

Props

属性
类型
默认值
说明
level
1 | 2 | 3 | 4 | 5 | 6
2
渲染的标题标签
size
'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl'
跟随 level
字号
weight
'normal' | 'medium' | 'semibold'
'semibold'
字重
truncate
boolean
false
是否单行截断并显示省略号
className
string
—
追加至根元素的类名

内容属性

属性
说明
children
标题文字