Примеры использования кнопок и модальных окон

В Docusaurus можно использовать React компоненты прямо в MDX файлах. Ниже примеры использования компонентов Button и Modal.

Кнопки (Button)

Базовое использование

import Button from "@site/src/components/Button";

<Button>Обычная кнопка</Button>

Варианты стилей

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>

Кнопки с обводкой (outline)

<Button variant="primary" outline>
  Primary Outline
</Button>
<Button variant="success" outline>
  Success Outline
</Button>
<Button variant="danger" outline>
  Danger Outline
</Button>

Размеры кнопок

<Button size="small">Маленькая</Button>
<Button size="medium">Средняя</Button>
<Button size="large">Большая</Button>

Кнопка на всю ширину (block)

<Button block>Кнопка на всю ширину</Button>

Кнопки со ссылками

<Button to="/help">Внутренняя ссылка</Button>
<Button href="https://restoplace.cc" variant="secondary">
  Внешняя ссылка
</Button>

Отключенная кнопка

<Button disabled>Отключена</Button>

Модальные окна (Modal)

Простое модальное окно с триггером

Компонент ModalWithTrigger объединяет кнопку и модальное окно:

import ModalWithTrigger from "@site/src/components/ModalWithTrigger";

<ModalWithTrigger
  trigger="Открыть модальное окно"
  title="Заголовок модального окна"
>
  Это содержимое модального окна. Здесь может быть любой контент: текст,
  изображения, списки и т.д.
</ModalWithTrigger>

Модальное окно с управлением состоянием

Для более сложных случаев можно управлять состоянием вручную:

import { useState } from "react";
import Button from "@site/src/components/Button";
import Modal from "@site/src/components/Modal";

export const ExampleModal = () => {
  const [isOpen, setIsOpen] = useState(false);

return (
<>
<Button onClick={() => setIsOpen(true)}>Открыть модальное окно</Button>
<Modal
title="Пример модального окна"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
size="medium" >
<p>Это пример модального окна с управлением состоянием.</p>
<p>
Вы можете закрыть его, нажав на кнопку закрытия, кликнув вне окна или
нажав Escape.
</p>
<div style={{ marginTop: "1rem" }}>
<Button onClick={() => setIsOpen(false)} variant="secondary">
Закрыть
</Button>
</div>
</Modal>
</>
);
};

<ExampleModal />

Размеры модальных окон

export const SizeExamples = () => {
  const [smallOpen, setSmallOpen] = useState(false);
  const [mediumOpen, setMediumOpen] = useState(false);
  const [largeOpen, setLargeOpen] = useState(false);

return (
<>
<Button onClick={() => setSmallOpen(true)} size="small">
Маленькое окно
</Button>{" "}
<Button onClick={() => setMediumOpen(true)} size="medium">
Среднее окно
</Button>{" "}
<Button onClick={() => setLargeOpen(true)} size="large">
Большое окно
</Button>
<Modal
title="Маленькое окно"
isOpen={smallOpen}
onClose={() => setSmallOpen(false)}
size="small" >
Это маленькое модальное окно (максимальная ширина 400px).
</Modal>
<Modal
title="Среднее окно"
isOpen={mediumOpen}
onClose={() => setMediumOpen(false)}
size="medium" >
Это среднее модальное окно (максимальная ширина 600px).
</Modal>
<Modal
title="Большое окно"
isOpen={largeOpen}
onClose={() => setLargeOpen(false)}
size="large" >
Это большое модальное окно (максимальная ширина 900px). Оно подходит для
отображения большого количества контента, таблиц, изображений и т.д.
</Modal>
</>
);
};

<SizeExamples />

Глобальная регистрация компонентов

Чтобы не импортировать компоненты в каждом MDX файле, можно зарегистрировать их глобально через файл src/theme/MDXComponents.tsx:

// src/theme/MDXComponents.tsx
import React from "react";
import Button from "@site/src/components/Button";
import Modal from "@site/src/components/Modal";

export default {
  Button,
  Modal,
  // другие компоненты...
};

После этого компоненты можно использовать без импорта:

<Button>Кнопка без импорта</Button>

Дополнительные возможности

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

Модальные окна можно комбинировать с другими компонентами Docusaurus:

import Admonition from "@theme/Admonition";

<ModalWithTrigger
  trigger="Показать предупреждение"
  title="Важное предупреждение"
  buttonVariant="warning"
>
  <Admonition type="warning" title="Внимание!">
    Это важное предупреждение в модальном окне.
  </Admonition>
</ModalWithTrigger>