Themes
Advanced
Utils
Components

Code

짧은 코드 조각을 표시하기 위한 텍스트 마크업입니다.

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

API Reference

이 컴포넌트는 code 요소를 기반으로 하며 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 prop을 사용하여 텍스트 크기를 제어할 수 있습니다. 이 prop은 또한 적절한 줄 높이와 보정된 자간을 제공합니다 - 텍스트 크기가 커질수록 상대적인 줄 높이와 자간이 감소합니다.

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 prop을 사용하여 시각적 스타일을 제어할 수 있습니다.

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 prop을 사용하여 특정 색상을 지정할 수 있습니다.

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 prop을 사용하여 배경과의 색상 대비를 높일 수 있습니다.

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 prop을 사용하여 텍스트 두께를 설정할 수 있습니다.

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 prop을 사용하여 컨테이너를 넘어가는 텍스트를 말줄임표로 처리할 수 있습니다.

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

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

</Flex>
PreviousBlockquote
NextEm
Edit this page on GitHub.