Code
Code
はコードブロックを表すコンポーネントです。デフォルトでは code
要素をレンダリングします。
インポート
import { Code } from "@yamada-ui/react"
使い方
編集可能な例
<Code>console.log("Hello, Yamada!")</Code>
バリアントを変更する
編集可能な例
<VStack alignItems="start"> <For each={["solid", "outline", "subtle", "surface"]}> {(variant, index) => ( <Code key={index} variant={variant}> console.log("Hello, Yamada!") </Code> )} </For> </VStack>
サイズを変更する
アイコンを含むCode
の例です。
編集可能な例
<VStack alignItems="start"> <For each={["xs", "sm", "md", "lg"]}> {(size, index) => ( <Code key={index} size={size}> console.log("Hello, Yamada!") </Code> )} </For> </VStack>
カラースキーマを変更する
編集可能な例
<Wrap gap="md" w="full"> <VStack w="auto"> <For each={[ "primary", "secondary", "success", "warning", "danger", "link", "gray", "neutral", "red", "rose", "pink", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", ]} > {(colorScheme, index) => ( <Code key={index} variant="solid" colorScheme={colorScheme}> console.log("Hello, Yamada!") </Code> )} </For> </VStack> <VStack w="auto"> <For each={[ "primary", "secondary", "success", "warning", "danger", "link", "gray", "neutral", "red", "rose", "pink", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", ]} > {(colorScheme, index) => ( <Code key={index} variant="outline" colorScheme={colorScheme}> console.log("Hello, Yamada!") </Code> )} </For> </VStack> <VStack w="auto"> <For each={[ "primary", "secondary", "success", "warning", "danger", "link", "gray", "neutral", "red", "rose", "pink", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", ]} > {(colorScheme, index) => ( <Code key={index} variant="subtle" colorScheme={colorScheme}> console.log("Hello, Yamada!") </Code> )} </For> </VStack> <VStack w="auto"> <For each={[ "primary", "secondary", "success", "warning", "danger", "link", "gray", "neutral", "red", "rose", "pink", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", ]} > {(colorScheme, index) => ( <Code key={index} variant="surface" colorScheme={colorScheme}> console.log("Hello, Yamada!") </Code> )} </For> </VStack> </Wrap>
GitHubでこのページを編集する