console.log("Hello, world!")import { Code } from "@chakra-ui/react"
const Demo = () => {
return <Code>{`console.log("Hello, world!")`}</Code>
}
用法
import { Code } from "@chakra-ui/react"<Code>Hello world</Code>示例
尺寸
使用 size 属性来改变代码组件的尺寸。
console.log()console.log()console.log()console.log()import { Code, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
<Code size="xs">console.log()</Code>
<Code size="sm">console.log()</Code>
<Code size="md">console.log()</Code>
<Code size="lg">console.log()</Code>
</Stack>
)
}
变体
使用 variant 属性来改变代码组件的外观。
console.log()console.log()console.log()console.log()import { Code, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
<Code variant="solid">console.log()</Code>
<Code variant="outline">console.log()</Code>
<Code variant="subtle">console.log()</Code>
<Code variant="surface">console.log()</Code>
</Stack>
)
}
颜色
使用 colorPalette 属性来改变组件的颜色方案。
灰色
console.log()console.log()console.log()console.log()红色
console.log()console.log()console.log()console.log()绿色
console.log()console.log()console.log()console.log()蓝色
console.log()console.log()console.log()console.log()蓝绿色
console.log()console.log()console.log()console.log()粉色
console.log()console.log()console.log()console.log()紫色
console.log()console.log()console.log()console.log()青色
console.log()console.log()console.log()console.log()橙色
console.log()console.log()console.log()console.log()黄色
console.log()console.log()console.log()console.log()import { Code, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
px="4"
width="full"
>
<Text minW="8ch" textStyle="sm">
{colorPalette}
</Text>
<Code colorPalette={colorPalette} variant="solid">
{`console.log()`}
</Code>
<Code colorPalette={colorPalette} variant="outline">
{`console.log()`}
</Code>
<Code colorPalette={colorPalette} variant="subtle">
{`console.log()`}
</Code>
<Code colorPalette={colorPalette} variant="surface">
{`console.log()`}
</Code>
</Stack>
))}
</Stack>
)
}
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | '灰色' | '灰色' | '红色' | '橙色' | '黄色' | '绿色' | '蓝绿色' | '蓝色' | '青色' | '紫色' | '粉色'组件的颜色方案 |
variant | '柔和' | '实色' | '柔和' | '轮廓' | '表面' | '朴素'组件的变体样式 |
size | 'sm' | 'xs' | 'sm' | 'md' | 'lg'组件的尺寸 |