标题

用于渲染语义化的 HTML 标题元素。

敏捷的棕狐狸跃过懒惰的狗

import { Heading } from "@chakra-ui/react"

const Demo = () => {
  return <Heading>The quick brown fox jumps over the lazy dog</Heading>
}

用法

import { Heading } from "@chakra-ui/react"

<Heading>I'm a Heading</Heading>

示例

尺寸

使用 size prop 更改标题组件的尺寸。

标题 (sm)

标题 (md)

标题 (lg)

标题 (xl)

标题 (2xl)

标题 (3xl)

标题 (4xl)

标题 (5xl)

标题 (6xl)

import { Heading, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="2" align="flex-start">
      <Heading size="sm">Heading (sm)</Heading>
      <Heading size="md">Heading (md)</Heading>
      <Heading size="lg">Heading (lg)</Heading>
      <Heading size="xl">Heading (xl)</Heading>
      <Heading size="2xl">Heading (2xl)</Heading>
      <Heading size="3xl">Heading (3xl)</Heading>
      <Heading size="4xl">Heading (4xl)</Heading>
      <Heading size="5xl">Heading (5xl)</Heading>
      <Heading size="6xl">Heading (6xl)</Heading>
    </Stack>
  )
}

高亮

将 Heading 组件与 Highlight 组件组合，以高亮文本。

快速创建可访问的 React 应用程序速度更快

Chakra UI 是一个简单、模块化且易于访问的组件库，为您提供所需的构建块。

import { Heading, Highlight, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Heading size="3xl" letterSpacing="tight">
        <Highlight query="with speed" styles={{ color: "teal.600" }}>
          Create accessible React apps with speed
        </Highlight>
      </Heading>
      <Text fontSize="md" color="fg.muted">
        Chakra UI is a simple, modular and accessible component library that
        gives you the building blocks you need.
      </Text>
    </Stack>
  )
}

作为另一个元素

使用 as prop 将标题渲染为另一个 HTML 元素。

级别 1

级别 2

级别 3

import { Heading, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Heading as="h1">Level 1</Heading>
      <Heading as="h2">Level 2</Heading>
      <Heading as="h3">Level 3</Heading>
    </Stack>
  )
}

字重

使用 fontWeight prop 更改标题组件的字重。

正常

中等

半粗

粗体

import { Heading, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Heading fontWeight="normal">Normal</Heading>
      <Heading fontWeight="medium">Medium</Heading>
      <Heading fontWeight="semibold">Semibold</Heading>
      <Heading fontWeight="bold">Bold</Heading>
    </Stack>
  )
}

组合

使用 Heading 组件组合其他组件。

适用于商店的现代化支付

PayMe 帮助初创公司在世界任何地方向任何人收款

import { Button, Heading, Stack, Text } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack align="flex-start">
      <Heading size="2xl">Modern payments for Stores</Heading>
      <Text mb="3" fontSize="md" color="fg.muted">
        PayMe helps startups get paid by anyone, anywhere in the world
      </Text>
      <Button>
        Create account <LuArrowRight />
      </Button>
    </Stack>
  )
}

自定义

要覆盖 fontSize，我们建议使用 textStyle prop，因为它也考虑了行高和字间距。

基础样式

这是一个自定义 Heading 组件的示例。

provider.tsx

import { createSystem, defineRecipe } from "@chakra-ui/react"
import { defaultConfig } from "@chakra-ui/react"

const headingRecipe = defineRecipe({
  base: {
    fontWeight: "normal",
    textStyle: "4xl",
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { heading: headingRecipe },
  },
})

自定义尺寸

更新 variants.size 属性以创建自定义尺寸。