import { ColorSwatch } from "@chakra-ui/react"
const Demo = () => {
return <ColorSwatch value="#bada55" />
}
用法
¥Usage
import { ColorSwatch } from "@chakra-ui/react"<ColorSwatch />示例
¥Examples
尺寸
¥Sizes
使用 size 属性更改色板的大小。
¥Use the size prop to change the size of the color swatch.
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>
)
}
Alpha
以下示例展示了如何使用 Alpha 通道创建色板。
¥Here's an example of how to create a color swatch with an alpha channel.
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)",
]
包含徽章
¥With Badge
以下是如何组合 ColorSwatch 和 Badge 组件的示例。
¥Here's an example of how to compose the ColorSwatch with a Badge.
#bada55
import { Badge, ColorSwatch } from "@chakra-ui/react"
const Demo = () => {
return (
<Badge>
<ColorSwatch value="#bada55" boxSize="0.82em" />
#bada55
</Badge>
)
}
混合颜色
¥Mixed Colors
使用 ColorSwatchMix 创建包含多种颜色但保留单一颜色样本大小的色板。
¥Use the ColorSwatchMix to create a color swatch that contains multiple colors,
but retains the size of a single color swatch.
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>
)
}
调色板
¥Palette
以下是组合多个色板以创建调色板的示例。
¥Here's an example of composing multiple swatches to create a palette.
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"]