Code
Code はコードブロックを表すコンポーネントです。デフォルトでは code 要素をレンダリングします。
console.log("Hello, Yamada!")<Code>console.log("Hello, Yamada!")</Code>
使い方
import { Code } from "@yamada-ui/react"
import { Code } from "@/components/ui"
import { Code } from "@workspaces/ui"
<Code />
バリアントを変更する
console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")<VStack alignItems="flex-start">
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant, index) => (
<Code key={index} variant={variant}>
console.log("Hello, Yamada!")
</Code>
)}
</For>
</VStack>
サイズを変更する
console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")<VStack alignItems="flex-start">
<For each={["xs", "sm", "md", "lg"]}>
{(size, index) => (
<Code key={index} size={size}>
console.log("Hello, Yamada!")
</Code>
)}
</For>
</VStack>
カラースキームを変更する
console.log("Hello, Yamada!")console.log("Hello, Yamada!")<VStack alignItems="flex-start">
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<Code key={index} colorScheme={colorScheme}>
console.log("Hello, Yamada!")
</Code>
)}
</For>
</VStack>
Props
類似のコンポーネント
Text
Textは、テキストの段落を表すコンポーネントです。デフォルトでは、p要素をレンダリングします。
Mark
Markは、特定のテキストを強調するコンポーネントです。
Kbd
Kbdは、キーボード入力を表すコンポーネントです。
Heading
Headingは、セクションの見出しを表すコンポーネントです。デフォルトでは、h1要素をレンダリングします。
Highlight
Highlightは、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、p要素をレンダリングします。
Em
Emは、強調されたテキストを表すコンポーネントです。デフォルトでは、em要素をレンダリングします。
Blockquote
Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。
Link
Linkは、別のウェブページや同一ページ内の場所、または他のURLへのハイパーリンクを作成するコンポーネントです。