タブ
タブインターフェースを作成するには、<Tabs>と<TabItem>コンポーネントを使用します。
タブは、ユーザーが複数のオプションのうち1つだけを見る必要がある場合に、同等の情報をグループ化するのに便利です。
import { Tabs, TabItem } from '@astrojs/starlight/components';<Tabs>と<TabItem>コンポーネントを使用してタブインターフェースを表示します。
各<TabItem>には、ユーザーに表示されるlabelが必要です。
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="星">シリウス、ベガ、ベテルギウス</TabItem> <TabItem label="衛星">イオ、エウロパ、ガニメデ</TabItem></Tabs>{% tabs %}{% tabitem label="星" %}シリウス、ベガ、ベテルギウス{% /tabitem %}
{% tabitem label="衛星" %}イオ、エウロパ、ガニメデ{% /tabitem %}{% /tabs %}タブを同期させる
Section titled “タブを同期させる”複数のタブグループを同期させるには、syncKey属性を追加します。
ページ上のすべての<Tabs>に同じsyncKey値を設定すると、同じアクティブなラベルが表示されます。
これにより、読者は一度選択（例: オペレーティングシステムやパッケージマネージャー）すると、その選択がページを移動しても保持されます。
関連するタブを同期させるには、各<Tabs>コンポーネントに同じsyncKeyプロパティを追加し、同じ<TabItem>ラベルを使用してください。
import { Tabs, TabItem } from '@astrojs/starlight/components';
_いくつかの星:_
<Tabs syncKey="constellations"> <TabItem label="オリオン座">ベラトリックス、リゲル、ベテルギウス</TabItem> <TabItem label="ふたご座">ポルックス、カストルA、カストルB</TabItem></Tabs>
_いくつかのエキソプラネット:_
<Tabs syncKey="constellations"> <TabItem label="オリオン座">HD 34445 b、グリーゼ 179 b、Wasp-82 b</TabItem> <TabItem label="ふたご座">ポルックスb、HAT-P-24b、HD 50554 b</TabItem></Tabs>_いくつかの星:_
{% tabs syncKey="constellations" %}{% tabitem label="オリオン座" %}ベラトリックス、リゲル、ベテルギウス{% /tabitem %}
{% tabitem label="ふたご座" %}ポルックス、カストルA、カストルB{% /tabitem %}{% /tabs %}
_いくつかのエキソプラネット:_
{% tabs syncKey="constellations" %}{% tabitem label="オリオン座" %}HD 34445 b、グリーゼ 179 b、Wasp-82 b{% /tabitem %}
{% tabitem label="ふたご座" %}ポルックスb、HAT-P-24b、HD 50554 b{% /tabitem %}{% /tabs %}タブにアイコンを追加する
Section titled “タブにアイコンを追加する”icon属性を使用してタブ項目にアイコンを追加し、Starlightの組み込みアイコンの名前を指定して、ラベルの横にアイコンを表示します。
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="星" icon="star"> シリウス、ベガ、ベテルギウス </TabItem> <TabItem label="衛星" icon="moon"> イオ、エウロパ、ガニメデ </TabItem></Tabs>{% tabs %}{% tabitem label="星" icon="star" %}シリウス、ベガ、ベテルギウス{% /tabitem %}
{% tabitem label="衛星" icon="moon" %}イオ、エウロパ、ガニメデ{% /tabitem %}{% /tabs %}<Tabs> プロパティ
Section titled “<Tabs> プロパティ”実装: Tabs.astro
<Tabs>コンポーネントは複数の<TabItem>コンポーネントをグループ化し、以下のプロパティを受け付けます。
syncKey
Section titled “syncKey”型: string
複数のページにわたってタブグループを同期させるためのキー。
<TabItem> プロパティ
Section titled “<TabItem> プロパティ”実装: TabItem.astro
タブは複数のタブ項目から構成され、それぞれ以下のプロパティを持ちます。
必須
型: string
タブ項目には、タブに表示されるテキストを指定するlabel属性が必要です。
型: string
各タブ項目には、ラベルの横に表示されるStarlightに組み込まれたアイコンを指定するicon属性を設定できます。