标题

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

The quick brown fox jumps over the lazy dog

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

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

用法

¥Usage

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

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

示例

¥Examples

尺寸

¥Sizes

使用 size 属性更改标题组件的大小。

¥Use the size prop to change the size of the heading component.

Heading (sm)

Heading (md)

Heading (lg)

Heading (xl)

Heading (2xl)

Heading (3xl)

Heading (4xl)

Heading (5xl)

Heading (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>
  )
}

高亮

¥Highlight

组合 Heading 组件与 Highlight 组件，使其高亮显示文本。

¥Compose the Heading component with the Highlight component to highlight text.

Create accessible React apps with speed

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need.

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 another element

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

¥Use the as prop to render the heading as another HTML element.

Level 1

Level 2

Level 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>
  )
}

权重

¥Weights

使用 fontWeight 属性更改标题组件的粗细。

¥Use the fontWeight prop to change the weight of the heading component.

Normal

Medium

Semibold

Bold

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>
  )
}

合成

¥Composition

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

¥Use the Heading component to compose other components.

Modern payments for Stores

PayMe helps startups get paid by anyone, anywhere in the world

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>
  )
}

自定义

¥Customization

要覆盖 fontSize，我们建议使用 textStyle 属性，因为它会同时考虑行高和字母间距。

¥To override the fontSize, we recommend using the textStyle prop since it considers the line height and letter spacing as well.

基本样式

¥Base style

以下是自定义 Heading 组件的示例。

¥Here's an example of customizing the Heading component.

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 },
  },
})

自定义尺寸

¥Custom Size

更新 variants.size 属性以创建自定义大小。

¥Update the variants.size property to create a custom size.