Drawer 抽屉

从屏幕边缘滑出的浮层面板，用于展示额外信息或操作。

基础用法

import { useState } from 'react'
import { Drawer, Button } from '@airo-ui/react'

function Demo() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button variant="primary" onClick={() => setVisible(true)}>
        打开抽屉
      </Button>
      <Drawer
        visible={visible}
        title="抽屉标题"
        onClose={() => setVisible(false)}
      >
        <p>抽屉内容区域</p>
      </Drawer>
    </>
  )
}

不同方向

import { useState } from 'react'
import { Drawer, Button } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Drawer placement="right" visible={visibleR} title="右侧抽屉" onClose={closeR}>
        <p>从右侧滑出</p>
      </Drawer>
      <Drawer placement="left" visible={visibleL} title="左侧抽屉" onClose={closeL}>
        <p>从左侧滑出</p>
      </Drawer>
      <Drawer placement="top" visible={visibleT} title="顶部抽屉" onClose={closeT}>
        <p>从顶部滑出</p>
      </Drawer>
      <Drawer placement="bottom" visible={visibleB} title="底部抽屉" onClose={closeB}>
        <p>从底部滑出</p>
      </Drawer>
    </>
  )
}

自定义宽度

import { Drawer } from '@airo-ui/react'

<Drawer
  visible={visible}
  title="自定义宽度"
  width="500px"
  onClose={() => setVisible(false)}
>
  <p>宽度为 500px 的抽屉</p>
</Drawer>

点击遮罩关闭

import { Drawer } from '@airo-ui/react'

<Drawer
  visible={visible}
  title="点击遮罩关闭"
  maskClosable
  onClose={() => setVisible(false)}
>
  <p>点击背景遮罩即可关闭</p>
</Drawer>

API

Props

名称	类型	默认值	说明
visible	boolean	false	是否显示
placement	'left' | 'right' | 'top' | 'bottom'	'right'	抽屉弹出方向
width	string	—	抽屉宽度（左右方向时）
height	string	—	抽屉高度（上下方向时）
closable	boolean	true	是否显示关闭按钮
maskClosable	boolean	false	点击遮罩层是否关闭
title	string	—	标题
children	ReactNode	—	抽屉内容
onOpen	() => void	—	打开时触发
onClose	() => void	—	关闭时触发