Drawer

import {Drawer} from '@gravity-ui/uikit';

Drawer - компонент, который позволяет отображать содержимое в виде боковой панели. Он может быть использован для отображения навигации, инструментов или дополнительного контента. Компонент реализован с помощью React и включает CSS-переходы для плавных анимаций.

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

Ниже приводится простой пример использования компонента Drawer:

import React from 'react';
import {Drawer} from '@gravity-ui/uikit';

const App = () => {
  const [isVisible, setVisible] = React.useState(false);

  return (
    <div>
      <button onClick={() => setVisible(true)}>Open Drawer</button>
      <Drawer onOpenChange={setVisible} open={isVisible}>
        <p>Content of the drawer</p>
      </Drawer>
    </div>
  );
};

export default App;

§Направление (placement)

Чтобы управлять направлением Drawer, вы можете передать свойство placement в компонент. Возможные значения: left, right, top, и bottom.

<Drawer onOpenChange={setVisible} open={isVisible} placement="left">
  <p>Content of the drawer</p>
</Drawer>
<Drawer onOpenChange={setVisible} open={isVisible} placement="right">
  <p>Content of the drawer</p>
</Drawer>
<Drawer onOpenChange={setVisible} open={isVisible} placement="top">
  <p>Content of the drawer</p>
</Drawer>
<Drawer onOpenChange={setVisible} open={isVisible} placement="bottom">
  <p>Content of the drawer</p>
</Drawer>

§Изменяемый размер (resizable)

Компонент Drawer может быть изменяемым размером, передав свойство resizable.

<Drawer onOpenChange={setVisible} open={isVisible} resizable>
  <p>Content of the drawer</p>
</Drawer>

Дополнительно, вы можете использовать свойство size, чтобы управлять размером Drawer и передать обработчик onResize, чтобы сохранить измененное значение.

const [size, setSize] = useState(500);

<Drawer onOpenChange={setVisible} open={isVisible} resizable size={size} onResize={setSize}>
  <p>Content of the drawer</p>
</Drawer>;

§Свойства