Components

标题

敏捷的棕色狐狸跳过了懒狗

<Heading>敏捷的棕色狐狸跳过了懒狗</Heading>

API 参考

此组件基于 h1 元素,支持 常见的边距属性

PropTypeDefault
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

示例

作为另一个元素

使用 as 属性来改变标题级别。这个属性纯粹是语义上的,不会改变视觉外观。

级别 1

级别 2

级别 3

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

尺寸

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

标题大小与 文本 大小相匹配。 然而,由于标题通常比普通文本短,因此行高设置得稍微紧凑一些。

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

<Flex direction="column" gap="3">
<Heading size="1">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="2">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="3">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="4">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="5">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="6">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="7">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="8">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading size="9">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>

字重

使用 weight 属性来设置文本的字重。

敏捷的棕色狐狸跳过了懒狗。

敏捷的棕色狐狸跳过了懒狗。

敏捷的棕色狐狸跳过了懒狗。

<Heading weight="regular">
敏捷的棕色狐狸跳过了懒狗。
</Heading>
<Heading weight="medium">
敏捷的棕色狐狸跳过了懒狗。
</Heading>
<Heading weight="bold">
敏捷的棕色狐狸跳过了懒狗。
</Heading>

对齐

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

左对齐

居中对齐

右对齐

<Heading align="left">左对齐</Heading>
<Heading align="center">居中对齐</Heading>
<Heading align="right">右对齐</Heading>

修剪

使用 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)", }} >
未修剪
</Heading>
<Heading trim="both" style={{ background: "var(--gray-a2)", borderTop: "1px dashed var(--gray-a7)", borderBottom: "1px dashed var(--gray-a7)", }} >
已修剪
</Heading>
</Flex>

修剪前导空间在调整卡片或其他“盒状”组件的垂直间距时非常有用。否则,内边距看起来上面和下面比两侧大。

未修剪

排版的目标是以比例的方式使字体大小、行高和行宽相互关联, 从而最大化美感,使阅读更容易和愉快。

已修剪

排版的目标是以比例的方式使字体大小、行高和行宽相互关联, 从而最大化美感,使阅读更容易和愉快。
<Flex direction="column" gap="3">
<Box style={{ background: "var(--gray-a2)", border: "1px dashed var(--gray-a7)", }} p="4" >
<Heading mb="1" size="3">
未修剪
</Heading>
<Text>
排版的目标是以比例的方式使字体大小、行高和行宽相互关联,
从而最大化美感,使阅读更容易和愉快。
</Text>
</Box>
<Box p="4" style={{ background: "var(--gray-a2)", border: "1px dashed var(--gray-a7)", }} >
<Heading mb="1" size="3" trim="start">
已修剪
</Heading>
<Text trim="end">
排版的目标是以比例的方式使字体大小、行高和行宽相互关联,
从而最大化美感,使阅读更容易和愉快。
</Text>
</Box>
</Flex>

默认的修剪值是为 Radix 主题所使用的系统字体栈配置的。如果您使用自定义字体,您可以 调整 修剪值,使用相应的 CSS 变量。

.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 属性在文本溢出其容器时用省略号截断文本。

敏捷的棕色狐狸跳过了懒狗

<Flex maxWidth="300px">
<Heading truncate>敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>

包裹

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

敏捷的棕色狐狸跳过了懒狗

<Flex maxWidth="300px">
<Heading wrap="nowrap">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>

敏捷的棕色狐狸跳过了懒狗

<Flex maxWidth="300px">
<Heading wrap="balance">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>

敏捷的棕色狐狸跳过了懒狗

<Flex maxWidth="300px">
<Heading wrap="pretty">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>

text-wrap: pretty 是一个实验值,目前 尚未支持所有浏览器。然而,它可以被视为支持此功能的浏览器的渐进式增强。

颜色

使用 color 属性分配一个特定的 颜色。文本颜色旨在实现与常见背景颜色至少 Lc 60 APCA 的对比度。

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

敏捷的棕色狐狸跳过了懒狗

<Flex direction="column">
<Heading color="indigo">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading color="cyan">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading color="orange">敏捷的棕色狐狸跳过了懒狗</Heading>
<Heading color="crimson">敏捷的棕色狐狸跳过了懒狗</Heading>
</Flex>

高对比度

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

敏捷的棕色狐狸跳过了懒狗。

敏捷的棕色狐狸跳过了懒狗。

<Flex direction="column">
<Heading color="gray">敏捷的棕色狐狸跳过了懒狗。</Heading>
<Heading color="gray" highContrast>
敏捷的棕色狐狸跳过了懒狗。
</Heading>
</Flex>