Выезжающая панель

Drawer удерживает и восстанавливает фокус, блокирует прокрутку страницы, закрывается по Escape и нажатию на фон, поддерживает четыре размера, два оформления заголовка и разные положения кнопки закрытия. Проп keepMounted оставляет панель смонтированной при закрытии, сохраняя состояние вложенного содержимого, а restoreFocusRef задаёт цель восстановления фокуса при закрытии.

Пример

Интерактивный пример

Использование

Импортируйте компонент из публичной точки входа пакета.

"use client";

import { Button, Drawer } from "denjs-ui";
import { useState } from "react";

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open drawer</Button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        title="Edit project"
        description="Update the project details."
      >
        Drawer content
      </Drawer>
    </>
  );
}