Значки

Для отображения небольших фрагментов информации, таких как статус или категория, используйте компонент <Badge>.

Превью

Новинка

Импорт

import { Badge } from '@astrojs/starlight/components';

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

Отображайте значки с помощью компонента <Badge>, с передачей желаемого содержимого через атрибут text.

По умолчанию значок будет использовать акцентный цвет темы вашего сайта. Чтобы использовать встроенный цвет значка, установите для атрибута variant одно из поддерживаемых значений.

MDX

import { Badge } from '@astrojs/starlight/components';

<Badge text="Примечание" variant="note" />
<Badge text="Успешно" variant="success" />
<Badge text="Совет" variant="tip" />
<Badge text="Внимание" variant="caution" />
<Badge text="Опасность" variant="danger" />

Markdoc

{% badge text="Примечание" variant="note" /%}
{% badge text="Успешно" variant="success" /%}
{% badge text="Совет" variant="tip" /%}
{% badge text="Внимание" variant="caution" /%}
{% badge text="Опасность" variant="danger" /%}

Превью

Примечание Успешно Совет Внимание Опасность

Использование разных размеров

Используйте атрибут size для управления размером текста значка.

MDX

import { Badge } from '@astrojs/starlight/components';

<Badge text="Новинки" size="small" />
<Badge text="Новинки и улучшения" size="medium" />
<Badge text="Новинки, улучшения и другое" size="large" />

Markdoc

{% badge text="Новинки" size="small" /%}
{% badge text="Новинки и улучшения" size="medium" /%}
{% badge text="Новинки, улучшения и другое" size="large" /%}

Превью

Новинки Новинки и улучшения Новинки, улучшения и другое

Настройка значков

Настраивайте значки, используя другие атрибуты <span>, такие как class или style, с помощью пользовательского CSS.

MDX

import { Badge } from '@astrojs/starlight/components';

<Badge text="Свой текст" variant="success" style={{ fontStyle: 'italic' }} />

Markdoc

{% badge text="Свой текст" variant="success" style="font-style: italic;" /%}

Превью

Свой текст

Параметры <Badge>

Реализация: Badge.astro

Компонент <Badge> принимает следующие параметры, а также любые другие атрибуты <span>:

text

обязательный
тип: string

Текстовое содержимое для отображения в значке.

variant

тип: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
по умолчанию: 'default'

Вариант цвета значка для использования: note (синий), tip (фиолетовый), danger (красный), caution (оранжевый), success (зелёный) или default (акцентный цвет темы).

size

тип: 'small' | 'medium' | 'large'

Определяет размер отображаемого значка.