import { Radiomark, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Radiomark />
<Radiomark checked />
<Radiomark disabled />
<Radiomark checked disabled />
</Stack>
)
}
用法
¥Usage
import { Radiomark } from "@chakra-ui/react"<Radiomark checked />示例
¥Examples
状态
¥States
Radiomark 组件支持选中和未选中状态，以及可选的禁用状态。
¥The Radiomark component supports checked and unchecked states, with optional disabled state.
import { HStack, Radiomark } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4}>
<Radiomark />
<Radiomark checked />
<Radiomark disabled />
<Radiomark checked disabled />
</HStack>
)
}
变量
¥Variants
使用 variant 属性更改单选标记的视觉样式。
¥Use the variant prop to change the visual style of the radiomark.
import { For, Radiomark, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<For each={["outline", "subtle", "solid", "inverted"]}>
{(variant) => <Radiomark checked key={variant} variant={variant} />}
</For>
</Stack>
)
}
尺寸
¥Sizes
使用 size 属性更改单选标记的大小。
¥Use the size prop to change the size of the radiomark.
import { For, HStack, Radiomark } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4} alignItems="center">
<For each={["xs", "sm", "md", "lg"]}>
{(size) => <Radiomark key={size} size={size} checked />}
</For>
</HStack>
)
}
颜色
¥Colors
使用 colorPalette 属性更改单选标记的配色方案。
¥Use the colorPalette prop to change the color scheme of the radiomark.
import { For, HStack, Radiomark } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<HStack gap={4}>
<For each={colorPalettes}>
{(colorPalette) => (
<Radiomark 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 radiomark.
import { HStack, Radiomark } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4}>
<Radiomark variant="outline" />
<Radiomark variant="outline" checked />
<Radiomark variant="outline" filled />
<Radiomark variant="outline" filled checked />
</HStack>
)
}
属性
¥Props