标记文本以表示一段简短的计算机代码片段。
console.log()<Code>console.log()</Code>
此组件基于 code 元素并支持 通用 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | Responsive<enum> | 无默认值 |
variant | "solid" | "soft" | "outline" | "ghost" | "soft" |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | 无默认值 |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
truncate | 布尔值 | 无默认值 |
wrap | Responsive<"wrap" | "nowrap" | "pretty" | "balance"> | 无默认值 |
使用 size 属性控制文本大小。此属性还提供正确的行高和校正的字间距——随着文本大小的增加，相对行高和字间距减小。
console.log()console.log()console.log()console.log()console.log()console.log()console.log()console.log()console.log()<Flex direction="column" gap="3" align="start">
<Code size="1">console.log()</Code>
<Code size="2">console.log()</Code>
<Code size="3">console.log()</Code>
<Code size="4">console.log()</Code>
<Code size="5">console.log()</Code>
<Code size="6">console.log()</Code>
<Code size="7">console.log()</Code>
<Code size="8">console.log()</Code>
<Code size="9">console.log()</Code>
</Flex>
使用 variant 属性控制视觉样式。
console.log()console.log()console.log()console.log()<Flex direction="column" align="start" gap="2">
<Code variant="solid">console.log()</Code>
<Code variant="soft">console.log()</Code>
<Code variant="outline">console.log()</Code>
<Code variant="ghost">console.log()</Code>
</Flex>
使用 color 属性分配特定的 颜色。
console.log()console.log()console.log()console.log()<Flex direction="column" align="start" gap="2">
<Code color="indigo">console.log()</Code>
<Code color="crimson">console.log()</Code>
<Code color="cyan">console.log()</Code>
<Code color="orange">console.log()</Code>
</Flex>
使用 highContrast 属性增加与背景的颜色对比度。
console.log()console.log()console.log()console.log()console.log()console.log()console.log()console.log()<Flex gap="3">
<Flex direction="column" align="start" gap="2">
<Code color="gray" variant="solid">
console.log()
</Code>
<Code color="gray" variant="soft">
console.log()
</Code>
<Code color="gray" variant="outline">
console.log()
</Code>
<Code color="gray" variant="ghost">
console.log()
</Code>
</Flex>
<Flex direction="column" align="start" gap="2">
<Code color="gray" variant="solid" highContrast>
console.log()
</Code>
<Code color="gray" variant="soft" highContrast>
console.log()
</Code>
<Code color="gray" variant="outline" highContrast>
console.log()
</Code>
<Code color="gray" variant="ghost" highContrast>
console.log()
</Code>
</Flex>
</Flex>
使用 weight 属性设置文本粗细。
console.log()console.log()<Flex direction="column" gap="2" align="start">
<Code weight="regular">console.log()</Code>
<Code weight="bold">console.log()</Code>
</Flex>
使用 truncate 属性在文本溢出其容器时用省略号截断文本。
linear-gradient(red, orange, yellow, green, blue);<Flex maxWidth="200px">
<Code truncate>linear-gradient(red, orange, yellow, green, blue);</Code>
</Flex>