バッジ
ステータスやカテゴリーのような小さな情報を表示するには、<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" /%}
新着 新着かつ改良 新着、改良、もっと大きく
バッジのカスタマイズ
カスタムCSSを使用して、class
やstyle
などの他の<span>
属性を使用してバッジをカスタマイズします。
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'
表示するバッジのサイズを定義します。