短いコンピュータコードの断片を示すためにテキストをマークします。
console.log()<Code>console.log()</Code>
このコンポーネントは code 要素に基づいており、共通のマージン props をサポートしています。
| プロパティ | 型 | デフォルト |
|---|---|---|
asChild | boolean | デフォルト値なし |
size | Responsive<enum> | デフォルト値なし |
variant | "solid" | "soft" | "outline" | "ghost" | "soft" |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | デフォルト値なし |
color | enum | デフォルト値なし |
highContrast | boolean | デフォルト値なし |
truncate | boolean | デフォルト値なし |
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>