close

    Tag новинка

    Компонент Tag используется для отображения в интерфейсе в боковой панели или навигационной панели. Он поддерживает несколько форматов, включая обычные теги, SVG-иконки, изображения и обычный текст.

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

    Используйте через метаданные, и он будет отображаться в боковой панели или навигационной панели:

    foo.mdx
    ---
tag: новинка
---

# Foo

какой-нибудь текст
    новинка

    Поддерживается и вывод нескольких тегов, через запятую:

    ---
tag: новинка, экспериментально
---
    новинкаэкспериментально

    Также можно указывать теги через файл _meta.json:

    _meta.json
    [
  {
    "name": "foo",
    "type": "file",
    "tag": "новинка, экспериментально"
  }
]
    Совет

    Отображение в интерфейсе в боковой панели или навигационной панели в основном использует компонент Tag как точку входа. Кроме того, outline bar (панель оглавления) справа для отображения заголовков более гибкая и поддерживает любые React-компоненты.

    index.mdx
    # Foo

### Bar <MyComponent />

    Типы тегов

    Чтобы сделать передачу значений в блок метаданных удобной, компонент Tag поддерживает следующие типы тегов:

    Общие теги new

    Компонент имеет несколько встроенных тегов, которые отображаются с помощью <Badge />. Полный список:

    ТегСоответствующий UI Badge
    tipсовет
    infoинформация
    warningпредупреждение
    dangerопасность
    newновинка
    experimentalэкспериментально
    deprecatedустарело
    Расширение списка тегов

    Компонент Tag является ejectable. Когда вы хотите расширить стандартные теги, вы можете использовать оборачивание или извлечение для модификации компонента Tag. Значение тега передаётся как пропсы в компонент Tag.

    Ниже приведён пример того, как этот сайт использует оборачивание для добавления пользовательского тега eject-only:

    theme/components/Tag/index.tsx
    import {
  Badge as BasicBadge,
  Tag as BasicTag,
} from '@rspress/core/theme-original';

export const Tag = ({ tag }: { tag: string }) => {
  if (tag === 'eject-only') {
    return <BasicBadge text="eject-only" type="warning" />;
  }
  return <BasicTag tag={tag} />;
};
    index.mdx
    ---
tag: новинка, eject-only
---

    Строка SVG

    Строку SVG можно передать напрямую:

    ---
tag: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2L2 7l10 5 10-5-10-5z"/></svg>
---

    URL-адрес изображения

    Вы можете использовать внешний URL или data URL в качестве тега:

    ---
tag: https://example.com/icon.png
---
    ---
tag: data:image/svg+xml;base64,...
---

    Обычный текст

    Любой текст, не соответствующий указанным выше шаблонам, будет отображён в виде простого текстового Badge:

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

<Tag tag="v1.0.0" />
<Tag tag="Beta" />
    v1.0.0Beta

    Пропсы

    interface TagProps {
  /**
   * Содержимое тега. Поддерживает:
   * - Общие теги: 'tip', 'info', 'warning', 'danger', 'new', 'experimental', 'deprecated'
   * - Несколько тегов вместе: 'new, experimental'
   * - SVG-строку: '<svg>...</svg>'
   * - URL изображения: 'https://...' или 'data:...'
   * - Простой текст: любая другая строка
   */
  tag?: string;
}