Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

代码

标记文本以表示一小段计算机代码。

View sourceReport an issueView in Playground
console.log()
<Code>console.log()</Code>

API 参考

¥API Reference

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

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

PropTypeDefault
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

示例

¥Examples

尺寸

¥Size

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

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

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

使用 variant 属性控制视觉样式。

¥Use the variant prop to control the visual style.

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

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific 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>

高对比度

¥High-contrast

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

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

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

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

¥Use the weight prop to set the text 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

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

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

linear-gradient(red, orange, yellow, green, blue);
<Flex maxWidth="200px">

	<Code truncate>linear-gradient(red, orange, yellow, green, blue);</Code>

</Flex>
Previous块引用
NextEm