#Callout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<Callout type="tip">Это подсказка со стандартным заголовком</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'
    | 'important'
    | 'warning'
    | 'caution'
    | 'danger'
    | 'info'
    | 'details';
  /**
   * Пользовательский заголовок для callout. Если не указан, будет использован заглавный тип.
   */
  title?: string;
  /**
   * Содержимое для отображения внутри callout.
   */
  children: React.ReactNode;
}