标记文本以表示一小段计算机代码。
console.log()<Code>console.log()</Code>
该组件基于 code 元素，并支持 常见边距属性。
| Prop | Type | Default |
|---|---|---|
asChild | boolean | No default value |
size | Responsive<enum> | No default value |
variant | "solid" | "soft" | "outline" | "ghost" | "soft" |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | No default value |
color | enum | No default value |
highContrast | boolean | No default value |
truncate | boolean | No default value |
wrap | Responsive<"wrap" | "nowrap" | "pretty" | "balance"> | No default value |
使用 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>