en-US

Nesting drawers through dChildDrawer.

zh-CN

通过 dChildDrawer 嵌套抽屉。

import { useState } from 'react';

import { DDrawer, DButton } from '@react-devui/ui';

export default function Demo() {
  const [visible1, setVisible1] = useState(false);
  const [visible2, setVisible2] = useState(false);

  return (
    <>
      <DButton
        onClick={() => {
          setVisible1(true);
        }}
      >
        Show Drawer1
      </DButton>
      <DDrawer
        dVisible={visible1}
        dHeader="Drawer1"
        dChildDrawer={
          <DDrawer
            dVisible={visible2}
            dHeader="Drawer2"
            onClose={() => {
              setVisible2(false);
            }}
          >
            <div className="app-demo-text-container">
              <div>Some contents...</div>
              <div>Some contents...</div>
              <div>Some contents...</div>
            </div>
          </DDrawer>
        }
        onClose={() => {
          setVisible1(false);
        }}
      >
        <DButton
          onClick={() => {
            setVisible2(true);
          }}
        >
          Show Drawer2
        </DButton>
      </DDrawer>
    </>
  );
}