Drawer 抽屉组件 #

import {
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  Button,
  useDisclosure,
} from '@chakra-ui/react'

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onOpen}>打开抽屉</Button>

      <Drawer isOpen={isOpen} onClose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>抽屉标题</DrawerHeader>
          <DrawerBody>
            抽屉内容
          </DrawerBody>
          <DrawerFooter>
            <Button variant="outline" mr={3} onClick={onClose}>
              取消
            </Button>
            <Button colorScheme="blue">保存</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  )
}

<Drawer placement="top">顶部</Drawer>
<Drawer placement="right">右侧（默认）</Drawer>
<Drawer placement="bottom">底部</Drawer>
<Drawer placement="left">左侧</Drawer>

<Drawer size="xs">超小</Drawer>
<Drawer size="sm">小</Drawer>
<Drawer size="md">中等（默认）</Drawer>
<Drawer size="lg">大</Drawer>
<Drawer size="xl">超大</Drawer>
<Drawer size="full">全屏</Drawer>

function NavigationDrawer({ isOpen, onClose }) {
  return (
    <Drawer isOpen={isOpen} onClose={onClose} placement="left">
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>菜单</DrawerHeader>
        <DrawerBody>
          <VStack align="stretch" spacing={4}>
            <Button variant="ghost" justifyContent="flex-start">
              首页
            </Button>
            <Button variant="ghost" justifyContent="flex-start">
              功能
            </Button>
            <Button variant="ghost" justifyContent="flex-start">
              价格
            </Button>
            <Button variant="ghost" justifyContent="flex-start">
              关于
            </Button>
          </VStack>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}

function SettingsDrawer({ isOpen, onClose }) {
  return (
    <Drawer isOpen={isOpen} onClose={onClose} size="md">
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>设置</DrawerHeader>
        <DrawerBody>
          <VStack spacing={6} align="stretch">
            <FormControl display="flex" alignItems="center" justifyContent="space-between">
              <FormLabel mb="0">通知</FormLabel>
              <Switch />
            </FormControl>
            <FormControl display="flex" alignItems="center" justifyContent="space-between">
              <FormLabel mb="0">深色模式</FormLabel>
              <Switch />
            </FormControl>
            <FormControl>
              <FormLabel>语言</FormLabel>
              <Select>
                <option value="zh">中文</option>
                <option value="en">English</option>
              </Select>
            </FormControl>
          </VStack>
        </DrawerBody>
        <DrawerFooter>
          <Button variant="outline" mr={3} onClick={onClose}>
            取消
          </Button>
          <Button colorScheme="blue">保存</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}