React Suite 抽屉组件

React Suite是一个基于React的组件库，提供了各种常用组件的实现。其中抽屉组件(Drawer)是一个非常常用的组件，可以方便地实现左右侧边栏的展开和收起。

安装

npm install rsuite --save

基本用法

import { useState } from 'react';
import { Drawer, Button } from 'rsuite';

function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => {
    setShow(false);
  };

  const handleToggle = () => {
    setShow((prev) => !prev);
  };

  return (
    <div>
      <Button onClick={handleToggle}>Toggle Drawer</Button>
      <Drawer show={show} onHide={handleClose}>
        <Drawer.Header>
          <Drawer.Title>Drawer Title</Drawer.Title>
        </Drawer.Header>
        <Drawer.Body>Drawer Body</Drawer.Body>
        <Drawer.Footer>Drawer Footer</Drawer.Footer>
      </Drawer>
    </div>
  );
}

Props

• show：是否展示抽屉
• placement：抽屉展示的位置，可选值为left、right、top、bottom，默认为right
• size：抽屉大小，可选值为xs、sm、md、lg、xl，默认为md
• backdrop：是否展示背景遮罩，可选值为true、false、static，默认为true
• closeOnEscape：是否在按下ESC键时关闭抽屉，如果backdrop为static时，该属性默认为false，否则为true
• closeOnBackdropClick：是否在点击背景时关闭抽屉，如果backdrop为static时，该属性默认为false，否则为true

更多属性可参考官方文档。

Drawer.Header

抽屉的头部，通常包含标题和关闭按钮。

<Drawer.Header>
  <Drawer.Title>Drawer Title</Drawer.Title>
  <Drawer.Close />
</Drawer.Header>

Drawer.Body

抽屉的内容区。

<Drawer.Body>Drawer Body</Drawer.Body>

Drawer.Footer

抽屉的底部区。

<Drawer.Footer>Drawer Footer</Drawer.Footer>

自定义样式

想要自定义抽屉的样式，可以通过修改theme实现。例如，想要修改抽屉的宽度和背景色：

import { useState } from 'react';
import { createTheme, Drawer, Button } from 'rsuite';

const myTheme = createTheme({
  drawerWidth: '400px',
  drawerBg: 'green',
});

function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => {
    setShow(false);
  };

  const handleToggle = () => {
    setShow((prev) => !prev);
  };

  return (
    <div>
      <Button onClick={handleToggle}>Toggle Drawer</Button>
      <Drawer show={show} onHide={handleClose} theme={myTheme}>
        <Drawer.Header>
          <Drawer.Title>Drawer Title</Drawer.Title>
        </Drawer.Header>
        <Drawer.Body>Drawer Body</Drawer.Body>
        <Drawer.Footer>Drawer Footer</Drawer.Footer>
      </Drawer>
    </div>
  );
}

总结

React Suite 抽屉组件是一个非常实用的组件，可以帮助我们方便地实现侧边栏的展开和收起。该组件内置了丰富的属性和插槽，同时也可以通过自定义主题来实现更加灵活的样式。