# PopupBase Props (свойства) для компонента PopupBase: [{"name":"isOpen","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"placement","type":{"name":"enum","raw":"PopupPlacement","value":[{"value":"\"center\""},{"value":"\"top\""},{"value":"\"bottom\""},{"value":"\"right\""},{"value":"\"left\""},{"value":"\"top-right\""},{"value":"\"top-left\""},{"value":"\"bottom-right\""},{"value":"\"bottom-left\""}]}},{"name":"offset","type":{"name":"[number, number] | [string, string]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"children","type":{"name":"ReactNode"}},{"name":"overlay","type":{"name":"ReactNode"}},{"name":"zIndex","type":{"name":"string"}},{"name":"popupInfo","type":{"name":"PopupInfo"}},{"name":"withAnimation","type":{"name":"boolean"}},{"name":"draggable","type":{"name":"boolean"}},{"name":"resizable","type":{"name":"boolean | { disabled?: boolean; directions?: ResizeDirections; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; ... 6 more ...; hiddenIcons?: PopupPlacementMixed[] | undefined; } | undefined"}}] ### Провайдер контекста Поместите  `PopupBaseProvider`  в  корень приложения  или там, где будете применять PopupBase:
```tsx
import ReactDOM from 'react-dom';
import { PopupBaseProvider } from '@salutejs/plasma-web';
import { App } from './App';
ReactDOM.render(
<PopupBaseProvider>
<App />
</PopupBaseProvider>,
document.getElementById('root')
);
```
### Использование PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство  `frame` .
Также это свойство поддержиавет передачу id элемента, в котором будет использоваться компонент.
Само позиционирование можно указать с помощью свойства  `placement` (center - по умолчанию; left, right, top, bottom и их комбинации),
а также определить отступы от точки с помощью  `offset` .
```tsx
import React, { useRef } from 'react';
import styled, { css } from 'styled-components';
import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
import { SSRProvider, Button, PopupBase, 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
style={{
marginTop: "1rem",
width: "15rem"
}}
text="Открыть в document"
onClick={() => setIsOpenB(true)}
/>
<Button
style={{
marginTop: "1rem",
width: "15rem"
}}
text="Открыть во Frame"
onClick={() => setIsOpenA(true)}
/>
</div>
<PopupBase
id="popupA"
frame={ref}
opened={isOpenA}
placement="center"
offset={[0, 0]}
>
<div style={{ background: surfaceSolid02, padding: "1rem" }}>
<Button onClick={() => setIsOpenA(false)}>Close</Button>
<>Content</>
</div>
</PopupBase>
<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>
<PopupBase
id="popupB"
frame="document"
opened={isOpenB}
placement="center"
offset={[0, 0]}
>
<div style={{ background: surfaceSolid02, padding: "1rem" }}>
<Button onClick={() => setIsOpenB(false)}>Close</Button>
<>Content</>
</div>
</PopupBase>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```
## Подключение анимации Для подключения анимации нужно добавить параметр  `withAnimation` .
Само управление происходит с помощью классов через переменные  `endAnimation` ,  `endTransition`  из объекта  `popupBaseClasses`  для  `PopupBase` .
Для добавления анимации необходимо использовать класс  `.popup-base-root`  через переменную  `popupBaseClasses.root`  из пакета. Пример:
```tsx
const StyledPopupTransition = styled(PopupBase)`
&& > .${popupBaseClasses.root} {
opacity: 1;
transition: opacity 0.5s 0.1s;
}
&&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
opacity: 0;
transition: opacity 0.5s 0.1s;
}
`;
```
## Подключение анимации Для подключения анимации нужно добавить параметр  `withAnimation` .
Само управление происходит с помощью классов через переменные  `endAnimation` ,  `endTransition`  из объекта  `popupBaseClasses`  для  `PopupBase` .
Для добавления анимации необходимо использовать класс  `.popup-base-root`  через переменную  `popupBaseClasses.root`  из пакета. Пример: ```tsx
const StyledPopupTransition = styled(PopupBase)`
&& > .${popupBaseClasses.root} {
opacity: 1;
transition: opacity 0.5s 0.1s;
}
&&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
opacity: 0;
transition: opacity 0.5s 0.1s;
}
`;
```
или
```tsx
const StyledPopupAnimation = styled(PopupBase)`
&& > .${popupBaseClasses.root} {
animation: fadeIn 1s forwards;
}
&&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
animation: fadeOut 1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
`;
```
## Подключение анимации Для подключения анимации нужно добавить параметр  `withAnimation` .
Само управление происходит с помощью классов через переменные  `endAnimation` ,  `endTransition`  из объекта  `popupBaseClasses`  для  `PopupBase` .
Для добавления анимации необходимо использовать класс  `.popup-base-root`  через переменную  `popupBaseClasses.root`  из пакета. Пример: ```tsx
const StyledPopupTransition = styled(PopupBase)`
&& > .${popupBaseClasses.root} {
opacity: 1;
transition: opacity 0.5s 0.1s;
}
&&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
opacity: 0;
transition: opacity 0.5s 0.1s;
}
`;
```
или ```tsx
const StyledPopupAnimation = styled(PopupBase)`
&& > .${popupBaseClasses.root} {
animation: fadeIn 1s forwards;
}
&&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
animation: fadeOut 1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
`;
```
И в самом компоненте:
```tsx
const [isOpen, setIsOpen] = React.useState(false);
return (
<>
<div>
<Button
style={{
marginTop: "1rem",
width: "15rem"
}}
text="Открыть"
onClick={() => setIsOpen(true)}
/>
</div>
<StyledPopupAnimation
id="popup-id"
withAnimation
frame="document"
opened={isOpen}
placement="center"
offset={[0, 0]}
>
<div>
<Button onClick={() => setIsOpen(false)}>Close</Button>
</div>
</StyledPopupAnimation>
</>
);
}
```
## Draggable Чтобы иметь возможность перетаскивать Popup по экрану нужно включить свойство  `draggable` . Пример: 
```tsx
import React from 'react';
import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<SSRProvider>
<PopupBaseProvider>
<div style={{height: "200px"}}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Button
style={{
marginTop: "1rem",
width: "15rem"
}}
text="Открыть"
onClick={() => setIsOpen(true)}
/>
</div>
<PopupBase
id="popup"
isOpen={isOpen}
placement="center"
draggable
>
<div style={{ background: "lightgray", padding: "1rem", height: '100%', boxSizing: 'border-box', borderRadius: '1rem' }}>
<Button onClick={() => setIsOpen(false)}>Close</Button>
<>Content</>
</div>
</PopupBase>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```
## Resizable Чтобы иметь возможность растягивать Popup нужно настроить свойство  `resizable` . Формат следующий: 
```tsx
/**
* Настройка resizable-режима.
*/
resizable?: {
/**
* Включение/выключение ресайза.
* @default false
*/
disabled?: boolean;
/**
* Направления для ресайза.
*/
directions?: ResizeDirections;
/**
* Начальный размер окна ресайза.
*/
defaultSize?: { width?: number; height?: number };
/**
* Минимальная ширина ресайза в px.
*/
minWidth?: number;
/**
* Минимальная высота ресайза в px.
*/
minHeight?: number;
/**
* Максимальная ширина ресайза в px.
*/
maxWidth?: number;
/**
* Максимальная высота ресайза в px.
*/
maxHeight?: number;
/**
* Кастомные иконки ресайза.
*/
icons?: {
topRight?: ReactNode;
bottomRight?: ReactNode;
bottomLeft?: ReactNode;
topLeft?: ReactNode;
};
/**
* Размер иконки ресайза.
* @default s
*/
iconSize?: 'xs' | 's' | 'm';
/**
* Скрывать ли иконку для ресайза.
* @default false
*/
hiddenIcons?: PopupPlacementMixed[];
};
```
## Resizable Чтобы иметь возможность растягивать Popup нужно настроить свойство  `resizable` . Формат следующий: ```tsx
/**
* Настройка resizable-режима.
*/
resizable?: {
/**
* Включение/выключение ресайза.
* @default false
*/
disabled?: boolean;
/**
* Направления для ресайза.
*/
directions?: ResizeDirections;
/**
* Начальный размер окна ресайза.
*/
defaultSize?: { width?: number; height?: number };
/**
* Минимальная ширина ресайза в px.
*/
minWidth?: number;
/**
* Минимальная высота ресайза в px.
*/
minHeight?: number;
/**
* Максимальная ширина ресайза в px.
*/
maxWidth?: number;
/**
* Максимальная высота ресайза в px.
*/
maxHeight?: number;
/**
* Кастомные иконки ресайза.
*/
icons?: {
topRight?: ReactNode;
bottomRight?: ReactNode;
bottomLeft?: ReactNode;
topLeft?: ReactNode;
};
/**
* Размер иконки ресайза.
* @default s
*/
iconSize?: 'xs' | 's' | 'm';
/**
* Скрывать ли иконку для ресайза.
* @default false
*/
hiddenIcons?: PopupPlacementMixed[];
};
```
Пример:
```tsx
import React from 'react';
import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<SSRProvider>
<PopupBaseProvider>
<div style={{height: "200px"}}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Button
style={{
marginTop: "1rem",
width: "15rem"
}}
text="Открыть"
onClick={() => setIsOpen(true)}
/>
</div>
<PopupBase
id="popup"
isOpen={isOpen}
placement="center"
offset={[0, 0]}
resizable
>
<div style={{ background: "lightgray", padding: "1rem", height: '100%', boxSizing: 'border-box', borderRadius: '1rem' }}>
<Button onClick={() => setIsOpen(false)}>Close</Button>
<>Content</>
</div>
</PopupBase>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```