Значки
Для отображения небольших фрагментов информации, таких как статус или категория, используйте компонент <Badge>
.
Импорт
Использование
Отображайте значки с помощью компонента <Badge>
, с передачей желаемого содержимого через атрибут text
.
По умолчанию значок будет использовать акцентный цвет темы вашего сайта.
Чтобы использовать встроенный цвет значка, установите для атрибута variant
одно из поддерживаемых значений.
Использование разных размеров
Используйте атрибут size
для управления размером текста значка.
import { Badge } from '@astrojs/starlight/components';
<Badge text="Новинки" size="small" /><Badge text="Новинки и улучшения" size="medium" /><Badge text="Новинки, улучшения и другое" size="large" />
{% badge text="Новинки" size="small" /%}{% badge text="Новинки и улучшения" size="medium" /%}{% badge text="Новинки, улучшения и другое" size="large" /%}
Настройка значков
Настраивайте значки, используя другие атрибуты <span>
, такие как class
или style
, с помощью пользовательского CSS.
import { Badge } from '@astrojs/starlight/components';
<Badge text="Свой текст" variant="success" style={{ fontStyle: 'italic' }} />
{% 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'
Определяет размер отображаемого значка.