import { Checkmark, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Checkmark />
<Checkmark checked />
<Checkmark indeterminate />
<Checkmark disabled />
<Checkmark checked disabled />
<Checkmark indeterminate disabled />
</Stack>
)
}
用法
¥Usage
import { Checkmark } from "@chakra-ui/react"<Checkmark checked />示例
¥Examples
不确定
¥Indeterminate
使用 indeterminate 属性显示不确定状态。
¥Use the indeterminate prop to show an indeterminate state.
import { Checkmark, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4}>
<Checkmark />
<Checkmark checked />
<Checkmark indeterminate />
</HStack>
)
}
状态
¥States
Checkmark 组件支持三种状态：未选中（默认）、选中和不确定。
¥The Checkmark component supports three states: unchecked (default), checked, and indeterminate.
import { Checkmark, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={3}>
<Checkmark />
<Checkmark checked />
<Checkmark indeterminate />
<Checkmark disabled />
<Checkmark checked disabled />
<Checkmark indeterminate disabled />
</HStack>
)
}
变量
¥Variants
使用 variant 属性更改复选标记的视觉样式。
¥Use the variant prop to change the visual style of the checkmark.
import { Checkmark, For, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4}>
<For each={["solid", "outline", "subtle", "plain", "inverted"]}>
{(variant) => <Checkmark key={variant} variant={variant} checked />}
</For>
</HStack>
)
}
尺寸
¥Sizes
使用 size 属性更改复选标记的大小。
¥Use the size prop to change the size of the checkmark.
import { Checkmark, For, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4} alignItems="center">
<For each={["xs", "sm", "md", "lg"]}>
{(size) => <Checkmark key={size} size={size} checked />}
</For>
</HStack>
)
}
颜色
¥Colors
使用 colorPalette 属性更改复选标记的配色方案。
¥Use the colorPalette prop to change the color scheme of the checkmark.
import { Checkmark, For, HStack } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<HStack gap={4}>
<For each={colorPalettes}>
{(colorPalette) => (
<Checkmark key={colorPalette} colorPalette={colorPalette} checked />
)}
</For>
</HStack>
)
}
已填充
¥Filled
使用 filled 属性和 outline 变量为复选标记添加背景颜色。
¥Use the filled prop with the outline variant to add a background color to
the checkmark.
import { Checkmark } from "@chakra-ui/react"
const Demo = () => {
return <Checkmark variant="outline" filled />
}
属性
¥Props