如何创建一组具有复选框功能的按钮？
如何创建一组具有复选框功能的按钮？
提问于 2022-04-28 22:23:05
import { HStack, VStack, Button, CheckboxGroup, useCheckboxGroup, Input, IconButton, Switch, FormControl,Box, useColorMode } from '@chakra-ui/react';
<HStack width='100%' justifyContent='space-around' paddingBottom='10'>
<Button colorScheme ='qTurquoise' variant='ghost'>
TOP PLOT
</Button>
<Button colorScheme = 'qPurple' variant='ghost'>
TOP ACTING
</Button>
<Button colorScheme = 'qPurple' variant='ghost'>
TOP CINEMATOGRAPHY
</Button>
<Button colorScheme = 'qPurple' variant='ghost'>
TOP NOVELTY
</Button>
<Button colorScheme = 'qPurple' variant='ghost'>
TOP ENDING
</Button>
</HStack>我正在使用ChakraUI，但是我还没有找到解决这个问题的方法，我愿意使用其他的React框架，或者只是从零开始使用React。但我不知道如何做到这一点。我在Reactstrap框架中找到了一个复选框按钮，但是，我不确定我是否能够以我需要的方式定制它。
目前，我有一个使用Chakra、显示创建的H堆栈按钮(多少有点像我希望它们那样)，但我需要它们具有复选框/复选框组的功能，在这里我可以同时选择多个按钮，打开或关闭它们，就像内容过滤器一样。如果有选项可供选择，我也愿意让复选框组件看起来像一个按钮。
回答 1
Stack Overflow用户
发布于 2022-09-29 19:31:57
下面是一个简单的示例，用于自定义Chakra中的复选框组组件
function Example() {
function CustomCheckbox(props) {
const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } =
useCheckbox(props)
return (
<chakra.label
display='flex'
flexDirection='row'
alignItems='center'
gridColumnGap={2}
maxW='40'
bg='green.50'
border='1px solid'
borderColor='green.500'
rounded='lg'
px={3}
py={1}
cursor='pointer'
{...htmlProps}
>
<input {...getInputProps()} hidden />
<Flex
alignItems='center'
justifyContent='center'
border='2px solid'
borderColor='green.500'
w={4}
h={4}
{...getCheckboxProps()}
>
{state.isChecked && <Box w={2} h={2} bg='green.500' />}
</Flex>
<Text color="gray.700" {...getLabelProps()}>Click me for {props.value}</Text>
</chakra.label>
)
}
const { value, getCheckboxProps } = useCheckboxGroup({
defaultValue: ['2'],
})
return (
<Stack>
<Text>The selected checkboxes are: {value.sort().join(' and ')}</Text>
<CustomCheckbox {...getCheckboxProps({ value: '1' })} />
<CustomCheckbox {...getCheckboxProps({ value: '2' })} />
<CustomCheckbox {...getCheckboxProps({ value: '3' })} />
</Stack>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72050845
复制相关文章
相似问题
腾讯云开发者
