website/plasma-web-docs/docs/components/Modal.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/Modal.mdx

62 строки2 KB

Alexander Lobyntsev

docs(modalBase): extend examples

26 сен 2025, 08:40

26 сен 2025, 08:40cedc607

---
id: modal
title: Modal
---

import { PropsTable, Description, Badge } from '@site/src/components';

:::caution
Данный компонент и все его механики устарели! Рекомендуем использовать `ModalBase`.
:::

# Modal

<Badge />

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

### Провайдер контекста
Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:

```tsx title="index.ts"
import ReactDOM from 'react-dom';
import { ModalsProvider } from '@salutejs/plasma-web';

import { App } from './App';

ReactDOM.render(
    <ModalsProvider>
        <App />
    </ModalsProvider>,
    document.getElementById('root')
);
```

### Вызов модального окна
После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно:

```tsx live
import React from 'react';
import { Modal, Headline3, P1, Button } from '@salutejs/plasma-web';

export function App() {
    const [isOpen, setIsOpen] = React.useState(false);

    const close = React.useCallback(() => {
      setIsOpen(false);
    });

    return (
        <div>
            <Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
            <Modal opened={isOpen} onClose={close}>
                <Headline3 mb={10}>Модальное окно</Headline3>
                <P1>Содержимое модального окна.</P1>
                <Button text="Закрыть" onClick={close} />
            </Modal>
        </div>
    );
}
```
<Description name="Modal" />
<PropsTable name="Modal" />