# 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`  подключен.
```tsx
import ReactDOM from 'react-dom';
import { PopupBaseProvider } from '@salutejs/plasma-web';
import { App } from './App';
ReactDOM.render(
<PopupBaseProvider>
<App />
</PopupBaseProvider>,
document.getElementById('root')
);
```
### Отображения Drawer Drawer можно использовать как и на всем окне, так и в отдельном фрейме - свойство  `frame` .
Также это свойство поддержиавет передачу id элемента, в котором будет использоваться компонент.
Само позиционирование можно указать с помощью свойства  `placement` (left  - по умолчанию, right, top, bottom),
а также определить отступы от точки с помощью  `offset` . У компонента Drawer есть 2 режима отображения:
модальный - добавляет при этом подложку( `overlay` ), а также блокирует скролл и фокус;
немодальный - нет подложки, скролл и фокус не заблокированы.
```tsx
import React, { useRef } from 'react';
import styled, { css } from 'styled-components';
import { IconDone } from '@salutejs/plasma-icons';
import { surfaceSolid03 } from '@salutejs/plasma-tokens-web';
import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupBaseProvider } from  '@salutejs/plasma-web';
export function App() {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
const ref = useRef();
return (
<SSRProvider>
<PopupBaseProvider>
<div style={{height: "500px"}}>
<div style={{ display: "flex", flexDirection: "column" }}>
<Button
text="Открыть в document"
onClick={() => setIsOpenA(true)}
style={{
marginTop: "1rem",
width: "15rem"
}}
/>
<Button
text="Открыть во Frame"
onClick={() => setIsOpenB(true)}
style={{
marginTop: "1rem",
width: "15rem"
}}
/>
</div>
<Drawer
id="drawerA"
opened={isOpenA}
onClose={() => setIsOpenA(false)}
placement="right"
withBlur={false}
closeOnEsc={true}
closeOnOverlayClick={true}
asModal={true}
width="25vw"
height="100vh"
>
<DrawerHeader
hasClose={true}
closePlacement="right"
actions={(
<Button size="s" view="clear" style={{
position: "relative",
width: "1.5rem",
height: "1.5rem"
}}>
<IconDone size="s" />
</Button>
)}
onClose={() => setIsOpenA(false)}
>
<H3>Header</H3>
</DrawerHeader>
<DrawerContent>Content</DrawerContent>
<DrawerFooter>
<H3>Footer</H3>
</DrawerFooter>
</Drawer>
<div
ref={ref}
style={{
marginTop: "1rem",
width: "400px",
height: "500px",
background: surfaceSolid03,
position: "absolute",
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
padding: "1rem",
bottom: 0,
right: 0
}}
>
<>Frame</>
</div>
<Drawer
id="drawerB"
opened={isOpenB}
onClose={() => setIsOpenB(false)}
placement="right"
asModal={false}
frame={ref}
width="250px"
height="100%"
>
<DrawerHeader
hasClose={true}
closePlacement="right"
actions={(
<Button size="s" view="clear" style={{
position: "relative",
width: "1.5rem",
height: "1.5rem"
}}>
<IconDone size="s" />
</Button>
)}
onClose={() => setIsOpenB(false)}
>
<H3>Header</H3>
</DrawerHeader>
<DrawerContent>Content</DrawerContent>
<DrawerFooter>
<H3>Footer</H3>
</DrawerFooter>
</Drawer>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```
### Анимация Для работы с анимацией необходимо использовать свойство  `animationInfo` .
Данное свойство содержит два поля: enter exit В каждом из них можно указать собственную анимацию открытия и закрытия Drawer соответственно.
Формат:  `enterAnimation 0.2s forwards`
```tsx
import React from 'react';
import { IconDone } from '@salutejs/plasma-icons';
import { createGlobalStyle } from 'styled-components';
import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/plasma-web';
export function App() {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
const animationInfo = {
enter: 'enterAnimation 0.2s forwards',
exit: 'exitAnimation 0.2s forwards',
}
const GlobalAnimations = createGlobalStyle`
@keyframes enterAnimation {
from {
transform: translate(100%, -150%);
opacity: 0;
}
to {
transform: translate(0, -50%);
opacity: 1;
}
}
@keyframes exitAnimation {
from {
transform: translate(0, -50%);
opacity: 1;
}
to {
transform: translate(100%, -150%);
opacity: 0;
}
}
`;
return (
<SSRProvider>
<GlobalAnimations />
<PopupProvider>
<div style={{height: "500px"}}>
<div style={{ display: "flex", flexDirection: "column" }}>
<Button
text="Открыть в document"
onClick={() => setIsOpenA(true)}
style={{
marginTop: "1rem",
width: "15rem"
}}
/>
</div>
<Drawer
animationInfo={animationInfo}
id="drawerA"
opened={isOpenA}
onClose={() => setIsOpenA(false)}
placement="right"
withBlur={false}
closeOnEsc={true}
closeOnOverlayClick={true}
asModal={true}
width="25vw"
height="100vh"
>
<DrawerHeader
hasClose={true}
closePlacement="right"
actions={(
<Button size="s" view="clear" style={{
position: "relative",
width: "1.5rem",
height: "1.5rem"
}}>
<IconDone size="s" />
</Button>
)}
onClose={() => setIsOpenA(false)}
>
<H3>Header</H3>
</DrawerHeader>
<DrawerContent>Content</DrawerContent>
<DrawerFooter>
<H3>Footer</H3>
</DrawerFooter>
</Drawer>
</div>
</PopupProvider>
</SSRProvider>
);
}
```
### Анимация Для работы с анимацией необходимо использовать свойство  `animationInfo` .
Данное свойство содержит два поля: enter exit В каждом из них можно указать собственную анимацию открытия и закрытия Drawer соответственно.
Формат:  `enterAnimation 0.2s forwards` ```tsx
import React from 'react';
import { IconDone } from '@salutejs/plasma-icons';
import { createGlobalStyle } from 'styled-components';
import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/plasma-web';
export function App() {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
const animationInfo = {
enter: 'enterAnimation 0.2s forwards',
exit: 'exitAnimation 0.2s forwards',
}
const GlobalAnimations = createGlobalStyle`
@keyframes enterAnimation {
from {
transform: translate(100%, -150%);
opacity: 0;
}
to {
transform: translate(0, -50%);
opacity: 1;
}
}
@keyframes exitAnimation {
from {
transform: translate(0, -50%);
opacity: 1;
}
to {
transform: translate(100%, -150%);
opacity: 0;
}
}
`;
return (
<SSRProvider>
<GlobalAnimations />
<PopupProvider>
<div style={{height: "500px"}}>
<div style={{ display: "flex", flexDirection: "column" }}>
<Button
text="Открыть в document"
onClick={() => setIsOpenA(true)}
style={{
marginTop: "1rem",
width: "15rem"
}}
/>
</div>
<Drawer
animationInfo={animationInfo}
id="drawerA"
opened={isOpenA}
onClose={() => setIsOpenA(false)}
placement="right"
withBlur={false}
closeOnEsc={true}
closeOnOverlayClick={true}
asModal={true}
width="25vw"
height="100vh"
>
<DrawerHeader
hasClose={true}
closePlacement="right"
actions={(
<Button size="s" view="clear" style={{
position: "relative",
width: "1.5rem",
height: "1.5rem"
}}>
<IconDone size="s" />
</Button>
)}
onClose={() => setIsOpenA(false)}
>
<H3>Header</H3>
</DrawerHeader>
<DrawerContent>Content</DrawerContent>
<DrawerFooter>
<H3>Footer</H3>
</DrawerFooter>
</Drawer>
</div>
</PopupProvider>
</SSRProvider>
);
}
```
Для linaria / css-modules необходимо определять анимацию так,
чтобы не добавлялся хеш к названию анимации. Иначе анимация не применится.
Для css необходимо просто задать анимацию либо inline (как в примере), либо в отдельном css-файле
```tsx
import React from 'react';
import { IconDone } from '@salutejs/plasma-icons';
import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/plasma-web';
const drawerAnimation = `
@keyframes enterAnimation {
0% {
transform: translate(100%, -150%);
opacity: 0;
}
100% {
transform: translate(0, -50%);
opacity: 1;
}
}
@keyframes exitAnimation {
0% {
transform: translate(0, -50%);
opacity: 1;
}
100% {
transform: translate(100%, -150%);
opacity: 0;
}
}
`;
export function App() {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
const animationInfo = {
enter: 'enterAnimation 0.2s forwards',
exit: 'exitAnimation 0.2s forwards',
}
return (
<SSRProvider>
<style>{drawerAnimation}</style>
<PopupProvider>
<div style={{height: "500px"}}>
<div style={{ display: "flex", flexDirection: "column" }}>
<Button
text="Открыть в document"
onClick={() => setIsOpenA(true)}
style={{
marginTop: "1rem",
width: "15rem"
}}
/>
</div>
<Drawer
animationInfo={animationInfo}
id="drawerA"
opened={isOpenA}
onClose={() => setIsOpenA(false)}
placement="right"
withBlur={false}
closeOnEsc={true}
closeOnOverlayClick={true}
asModal={true}
width="25vw"
height="100vh"
>
<DrawerHeader
hasClose={true}
closePlacement="right"
actions={(
<Button size="s" view="clear" style={{
position: "relative",
width: "1.5rem",
height: "1.5rem"
}}>
<IconDone size="s" />
</Button>
)}
onClose={() => setIsOpenA(false)}
>
<H3>Header</H3>
</DrawerHeader>
<DrawerContent>Content</DrawerContent>
<DrawerFooter>
<H3>Footer</H3>
</DrawerFooter>
</Drawer>
</div>
</PopupProvider>
</SSRProvider>
);
}
```