close

    Tag Новинка

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

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

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

    foo.mdx
    ---
tag: new
---

# Foo

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

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

    ---
tag: new, experimental
---
    НовинкаЭкспериментально

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

    _meta.json
    [
  {
    "name": "foo",
    "type": "file",
    "tag": "new, experimental"
  }
]
    Совет

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

    index.mdx
    # Foo

### Bar <MyComponent />

    Типы тегов

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

    Встроенные теги Новинка

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

    ТегСоответствующий UI Badge
    newНовинка
    experimentalЭкспериментально
    deprecatedУстарело
    updatedОбновлено
    Расширение списка тегов

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

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

    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) {
    return null;
  }

  if (tag === 'new') {
    return <BasicBadge text="Новинка" type="tip" />;
  }

  if (tag === 'experimental') {
    return <BasicBadge text="Экспериментально" type="warning" />;
  }

  if (tag === 'deprecated') {
    return <BasicBadge text="Устарело" type="danger" />;
  }

  if (tag === 'updated') {
    return <BasicBadge text="Обновлено" type="info" />;
  }

  return <BasicTag tag={tag} />;
};
    index.mdx
    ---
tag: new, theme-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 {
  /**
   * Содержимое тега. Поддерживает:
   * - Встроенные теги: 'new', 'experimental', 'deprecated', 'updated'
   * - Несколько тегов вместе: 'new, experimental'
   * - SVG-строку: '<svg>...</svg>'
   * - URL изображения: 'https://...' или 'data:...'
   * - Простой текст: любая другая строка
   */
  tag?: string;
}