Drawer

有些时候，Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验

基础用法

function App() {
  const [visible, setVisible] = useState(false)
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => setVisible(true)}>点击</Button>
      <Drawer 
        defaultVisible={false}
        visible={visible}
        closeOnMark
        onClose={() => setVisible(false)}
        position={'right'}
        style={{padding: '20px', width: '500px'}}
      >
        <div>这里是抽屉的主要内容</div>
      </Drawer>
    </div>
  );
}

点击遮罩层不关闭弹窗

closeOnMark : false 时点击不会关闭, 默认为 false

function App() {
  const [visible, setVisible] = useState(false)
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => setVisible(true)}>点击</Button>
      <Drawer 
        defaultVisible={false}
        visible={visible}
        closeOnMark={false}
        onClose={() => setVisible(false)}
        position={'right'}
        style={{padding: '20px', width: '500px'}}
      >
        <div>这里是抽屉的主要内容</div>
        <Button type="default" onClick={() => setVisible(false)}>关闭</Button>
      </Drawer>
    </div>
  );
}

弹窗展示不同位置

position : top〡right〡bottom〡left

function App() {
  const [visible, setVisible] = useState(false)
  const [position, setPosition] = useState('right')
  const handleClick = (type) => {
    setVisible(true)
    setPosition(type)
  }
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => handleClick('right')}>向右展示</Button>
      <Button type="default" onClick={() => handleClick('left')}>向左展示</Button>
      <Button type="default" onClick={() => handleClick('top')}>向上展示</Button>
      <Button type="default" onClick={() => handleClick('bottom')}>向下展示</Button>
      <Drawer 
        defaultVisible={false}
        visible={visible}
        closeOnMark
        onClose={() => setVisible(false)}
        position={position}
        style={{padding: '20px', width: '500px'}}
      >
        <div>这里是抽屉的主要内容</div>
      </Drawer>
    </div>
  );
}

Drawer API

属性	说明	类型	默认值
defaultVisible	初始值时是否显示	boolean	false
visible	是否显示	boolean	false
closeOnMark	点击遮罩层是否关闭弹窗	boolean	false
onClose	关闭弹窗函数	MouseEventHandler	--
className	类名	string	--
wrapClassName	最外层类名	string	--
style	样式	Object	--
showCloseIcon	是否显示关闭图标	boolean	true
wrapStyle	最外层样式	Object	--
position	抽屉展示位置	top〡right〡bottom〡left	left
children	主要内容	Function〡ReactNode	--