#Callout eject-only

Компонент Callout используется для отображения выделенных информационных блоков, таких как советы, предупреждения и заметки.

#Синтаксис контейнера

В большинстве случаев используйте синтаксис контейнера для создания callouts:

:::note
Это `блок` типа `note`
:::

:::tip
Это `блок` типа `tip`
:::

:::info
Это `блок` типа `info`
:::

:::warning
Это `блок` типа `warning`
:::

:::danger
Это `блок` типа `danger`
:::

:::details
Это `блок` типа `details`
:::

:::tip Пользовательский заголовок
Это `блок` с `пользовательским заголовком`
:::

:::tip{title="Пользовательский заголовок"}
Это `блок` с `пользовательским заголовком`
:::

Для получения дополнительной информации о синтаксисе контейнера см. Контейнер.

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

Вы также можете использовать компонент Callout непосредственно в MDX-файлах:

import { Callout } from '@rspress/core/theme-original';

<Callout type="tip">Это подсказка callout</Callout>

<Callout type="warning" title="Предупреждение">
  Это предупреждение с пользовательским заголовком
</Callout>

#Настройка

Вы можете извлечь компонент Callout для настройки его стилей и поведения:

npx rspress eject Callout

Это скопирует компонент в theme/components/Callout. После настройки повторно экспортируйте его в вашем theme/index.tsx:

export { Callout } from './components/Callout';
export * from '@rspress/core/theme-original';

#Пропсы

interface CalloutProps {
  /**
   * Тип callout, который определяет его цвет и иконку.
   */
  type: 'tip' | 'note' | 'warning' | 'caution' | 'danger' | 'info' | 'details';
  /**
   * Пользовательский заголовок для callout. Если не указан, будет использован заглавный тип.
   */
  title?: string;
  /**
   * Содержимое для отображения внутри callout.
   */
  children: React.ReactNode;
}