# Drawer Props (свойства) для компонента Drawer: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\"","value":[{"value":"\"m\""}]}},{"name":"borderRadius","type":{"name":"enum","raw":"\"none\" | \"default\"","value":[{"value":"\"none\""},{"value":"\"default\""}]}},{"name":"children","type":{"name":"ReactNode"}},{"name":"opened","type":{"name":"boolean"}},{"name":"offset","type":{"name":"[number, number] | [string, string]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"placement","type":{"name":"enum","raw":"\"top\" | \"bottom\" | \"right\" | \"left\"","value":[{"value":"\"top\""},{"value":"\"bottom\""},{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"zIndex","type":{"name":"string"}},{"name":"isOpen","type":{"name":"boolean"}},{"name":"overlay","type":{"name":"ReactNode"}},{"name":"popupInfo","type":{"name":"PopupInfo"}},{"name":"withAnimation","type":{"name":"boolean"}},{"name":"width","type":{"name":"string | number"}},{"name":"height","type":{"name":"string | number"}},{"name":"customBackgroundColor","type":{"name":"string"}},{"name":"customContentBackgroundColor","type":{"name":"string"}},{"name":"animationInfo","type":{"name":"DrawerAnimationInfo"}},{"name":"asModal","type":{"name":"boolean"}},{"name":"withBlur","type":{"name":"boolean"}},{"name":"closeOnEsc","type":{"name":"boolean"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"onEscKeyDown","type":{"name":"((event: KeyboardEvent) => void)"}},{"name":"onOverlayClick","type":{"name":"((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)"}},{"name":"initialFocusRef","type":{"name":"RefObject<HTMLElement>"}},{"name":"focusAfterRef","type":{"name":"RefObject<HTMLElement>"}},{"name":"onClose","type":{"name":"(() => void)"}}] ### Использование Перед использованием убедитесь, что  `PopupBaseProvider`  подключен. 
### Отображения Drawer Drawer можно использовать как и на всем окне, так и в отдельном фрейме - свойство  `frame` .
Также это свойство поддержиавет передачу id элемента, в котором будет использоваться компонент.
Само позиционирование можно указать с помощью свойства  `placement` (left  - по умолчанию, right, top, bottom),
а также определить отступы от точки с помощью  `offset` . У компонента Drawer есть 2 режима отображения:
модальный - добавляет при этом подложку( `overlay` ), а также блокирует скролл и фокус;
немодальный - нет подложки, скролл и фокус не заблокированы. 
### Анимация Для работы с анимацией необходимо использовать свойство  `animationInfo` .
Данное свойство содержит два поля: enter exit В каждом из них можно указать собственную анимацию открытия и закрытия Drawer соответственно.
Формат:  `enterAnimation 0.2s forwards` 
Для linaria / css-modules необходимо определять анимацию так,
чтобы не добавлялся хеш к названию анимации. Иначе анимация не применится.
Для css необходимо просто задать анимацию либо inline (как в примере), либо в отдельном css-файле