文档演练博客

标题

语义标题元素。

View source Report an issue View in Playground

The quick brown fox jumps over the lazy dog

<Heading>The quick brown fox jumps over the lazy dog</Heading>

API 参考

¥API Reference

此组件基于 h1 元素并支持常用边距属性。

¥This component is based on the h1 element and supports common margin props.

Prop	Type	Default
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h1"`
`asChild`	`boolean`	No default value
`size`	`Responsive<enum>`	`"6"`
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	No default value
`align`	`Responsive<"left" \| "center" \| "right">`	No default value
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	No default value
`truncate`	`boolean`	No default value
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	No default value
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

示例

¥Examples

作为其他元素

¥As another element

使用 as 属性更改标题级别。此属性纯粹是语义性的，不会改变视觉外观。

¥Use the as prop to change the heading level. This prop is purely semantic and does not change the visual appearance.

Level 1

Level 2

Level 3

<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>

尺寸

¥Size

使用 size 属性控制标题的大小。该属性还提供正确的行高和校正的字母间距 - 随着文本大小的增加，相对行高和字母间距会减小。

¥Use the size prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

Heading sizes match Text sizes. However, the line heights are set a bit tighter as headings tend to be shorter than running text.

The quick brown fox jumps over the lazy dog

<Flex direction="column" gap="3">
	<Heading size="1">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="2">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="3">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="4">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="5">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="6">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="7">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="8">The quick brown fox jumps over the lazy dog</Heading>
	<Heading size="9">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

重量

¥Weight

使用 weight 属性设置文本粗细。

¥Use the weight prop to set the text weight.

The quick brown fox jumps over the lazy dog.

<Heading weight="regular">
  The quick brown fox jumps over the lazy dog.
</Heading>

<Heading weight="medium">
  The quick brown fox jumps over the lazy dog.
</Heading>

<Heading weight="bold">
  The quick brown fox jumps over the lazy dog.
</Heading>

对齐

¥Align

使用 align 属性设置文本对齐方式。

¥Use the align prop to set text alignment.

Left-aligned

Center-aligned

Right-aligned

<Heading align="left">Left-aligned</Heading>
<Heading align="center">Center-aligned</Heading>
<Heading align="right">Right-aligned</Heading>

修剪

¥Trim

使用 trim 属性修剪文本框开头、结尾或两侧的前导空格。

¥Use the trim prop to trim the leading space at the start, end, or both sides of the text box.

该 prop 的工作原理与即将发布的半行距控件规范类似，但底层使用了通用的负边距解决方法以实现跨浏览器支持。

¥The prop works similarly to the upcoming half-leading control spec, but uses a common negative margin workaround under the hood for cross-browser support.

Without trim

With trim

<Flex direction="column" gap="3">
	<Heading
		trim="normal"
		style={{
			background: "var(--gray-a2)",
			borderTop: "1px dashed var(--gray-a7)",
			borderBottom: "1px dashed var(--gray-a7)",
		}}
	>
		Without trim
	</Heading>
	<Heading
		trim="both"
		style={{
			background: "var(--gray-a2)",
			borderTop: "1px dashed var(--gray-a7)",
			borderBottom: "1px dashed var(--gray-a7)",
		}}
	>
		With trim
	</Heading>
</Flex>

在卡片或其他“盒状”组件中调整垂直间距时，修剪行距非常有用。否则，顶部和底部的内边距看起来会比侧面的大。

¥Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.

Without trim

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

With trim

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

<Flex direction="column" gap="3">
	<Box
		style={{
			background: "var(--gray-a2)",
			border: "1px dashed var(--gray-a7)",
		}}
		p="4"
	>
		<Heading mb="1" size="3">
			Without trim
		</Heading>
		<Text>
			The goal of typography is to relate font size, line height, and line width
			in a proportional way that maximizes beauty and makes reading easier and
			more pleasant.
		</Text>
	</Box>

	<Box
		p="4"
		style={{
			background: "var(--gray-a2)",
			border: "1px dashed var(--gray-a7)",
		}}
	>
		<Heading mb="1" size="3" trim="start">
			With trim
		</Heading>
		<Text trim="end">
			The goal of typography is to relate font size, line height, and line width
			in a proportional way that maximizes beauty and makes reading easier and
			more pleasant.
		</Text>
	</Box>
</Flex>

默认的修剪值是根据 Radix Themes 使用的系统字体堆栈配置的。如果你使用自定义字体，可以使用相应的 CSS 变量对修剪值进行 adjust 处理。

¥The default trim values are configured for the system font stack that’s used by Radix Themes. If you are using custom fonts, you can adjust the trim values using the corresponding CSS variables.

.radix-themes {
	--default-leading-trim-start: 0.42em;
	--default-leading-trim-end: 0.36em;
	--heading-leading-trim-start: 0.42em;
	--heading-leading-trim-end: 0.36em;
}

截断

¥Truncate

当文本溢出容器时，使用 truncate 属性用省略号截断文本。

¥Use the truncate prop to truncate text with an ellipsis when it overflows its container.

The quick brown fox jumps over the lazy dog

<Flex maxWidth="300px">
	<Heading truncate>The quick brown fox jumps over the lazy dog</Heading>
</Flex>

Wrap

使用 wrap 属性控制文本换行。

¥Use the wrap prop to control text wrapping.

The quick brown fox jumps over the lazy dog

<Flex maxWidth="300px">
	<Heading wrap="nowrap">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

The quick brown fox jumps over the lazy dog

<Flex maxWidth="300px">
	<Heading wrap="balance">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

The quick brown fox jumps over the lazy dog

<Flex maxWidth="300px">
	<Heading wrap="pretty">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

text-wrap: pretty is an experimental value that is not yet supported in all browsers. However, it can be treated as a progressive enhancement for browsers that do support it.

颜色

¥Color

使用 color 属性指定特定的 color。文本颜色设计为与常见背景颜色至少达到 Lc 60 APCA 对比度。

¥Use the color prop to assign a specific color. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.

The quick brown fox jumps over the lazy dog

<Flex direction="column">
	<Heading color="indigo">The quick brown fox jumps over the lazy dog</Heading>
	<Heading color="cyan">The quick brown fox jumps over the lazy dog</Heading>
	<Heading color="orange">The quick brown fox jumps over the lazy dog</Heading>
	<Heading color="crimson">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

The quick brown fox jumps over the lazy dog.

<Flex direction="column">
	<Heading color="gray">The quick brown fox jumps over the lazy dog.</Heading>
	<Heading color="gray" highContrast>
		The quick brown fox jumps over the lazy dog.
	</Heading>
</Flex>

Previous文本

Next块引用

概览

主题

布局

排版

组件

实用工具

标题

The quick brown fox jumps over the lazy dog

Level 1

Level 2

Level 3

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Left-aligned

Center-aligned

Right-aligned

Without trim

With trim

Without trim

With trim

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.