import { ColorSwatch } from "@chakra-ui/react"
const Demo = () => {
return <ColorSwatch value="#bada55" />
}
用法
import { ColorSwatch } from "@chakra-ui/react"<ColorSwatch />示例
尺寸
使用 size 属性来改变色板的尺寸。
import { HStack } from "@chakra-ui/react"
import { ColorSwatch } from "@chakra-ui/react"
import { For } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
{(size) => <ColorSwatch key={size} value="#bada55" size={size} />}
</For>
</HStack>
)
}
透明度
这里是一个如何创建带透明通道的色板的示例。
import { ColorSwatch, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
{colors.map((color) => (
<ColorSwatch key={color} value={color} size="xl" />
))}
</HStack>
)
}
const colors = [
"rgba(255, 0, 0, 0.5)",
"rgba(0, 0, 255, 0.7)",
"rgba(0, 255, 0, 0.4)",
"rgba(255, 192, 203, 0.6)",
]
带徽章
这里是一个如何将 ColorSwatch 与 Badge 组合使用的示例。
#bada55
import { Badge, ColorSwatch } from "@chakra-ui/react"
const Demo = () => {
return (
<Badge>
<ColorSwatch value="#bada55" boxSize="0.82em" />
#bada55
</Badge>
)
}
混合颜色
使用 ColorSwatchMix 可以创建包含多种颜色但保持单色板尺寸的色板。
import { ColorSwatchMix, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<ColorSwatchMix size="lg" items={["red", "pink"]} />
<ColorSwatchMix size="lg" items={["red", "pink", "green"]} />
<ColorSwatchMix
size="lg"
items={["lightgreen", "green", "darkgreen", "black"]}
/>
</HStack>
)
}
调色板
这里是一个组合多个色板以创建调色板的示例。
import { ColorSwatch, Group } from "@chakra-ui/react"
const Demo = () => {
return (
<Group attached width="full" maxW="sm" grow>
{swatches.map((color) => (
<ColorSwatch key={color} value={color} size="2xl" />
))}
</Group>
)
}
const swatches = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff"]