Tag Новинка

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

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

Добавляйте через метаданные для отображения в боковой панели или панели навигации:

foo.mdx

---
tag: new
---

# Foo

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

Новинка

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

---
tag: new, experimental
---

НовинкаЭкспериментально

Вы также можете использовать его в _meta.json. Например:

_meta.json

[
  {
    "name": "foo",
    "type": "file",
    "tag": "new, experimental"
  }
]

Совет

Боковая панель (sidebar) и верхняя навигация (navbar) используют компонент Tag как точку входа для отображения меток. Панель оглавления (outline) более гибкая и поддерживает любые React-компоненты внутри заголовков.

index.mdx

# Foo

### Bar <MyComponent />

Типы тегов

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

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

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

Тег	Соответствующий UI-значок
`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 или путь к папке public в качестве тега:

---
tag: https://example.com/icon.png
---

---
tag: data:image/svg+xml;base64,...
---

---
tag: /icons/status.svg
---

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

Любой текст, не соответствующий указанным выше шаблонам, будет отображён в виде простого текстового 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:...', или '/icons/status.svg'
   * - Простой текст: любая другая строка
   */
  tag?: string;
}

#Tag Новинка

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

#Типы тегов

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

#Строка SVG

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

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

#Пропсы