コンテンツにスキップ
Starlight

タブ

タブインターフェースを作成するには、<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>
プレビュー
シリウス、ベガ、ベテルギウス

タブを同期させる

複数のタブグループを同期させるには、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>
プレビュー

いくつかの星:

ベラトリックス、リゲル、ベテルギウス

いくつかのエキソプラネット:

HD 34445 b、グリーゼ 179 b、Wasp-82 b

タブにアイコンを追加する

icon属性を使用してタブ項目にアイコンを追加し、Starlightの組み込みアイコンの名前を指定して、ラベルの横にアイコンを表示します。

import { Tabs, TabItem } from '@astrojs/starlight/components';


<Tabs>
  <TabItem label="星" icon="star">
    シリウス、ベガ、ベテルギウス
  </TabItem>
  <TabItem label="衛星" icon="moon">
    イオ、エウロパ、ガニメデ
  </TabItem>
</Tabs>
プレビュー

シリウス、ベガ、ベテルギウス

<Tabs> プロパティ

実装: Tabs.astro

<Tabs>コンポーネントは複数の<TabItem>コンポーネントをグループ化し、以下のプロパティを受け付けます。

syncKey

型: string

複数のページにわたってタブグループを同期させるためのキー。

<TabItem> プロパティ

実装: TabItem.astro

タブは複数のタブ項目から構成され、それぞれ以下のプロパティを持ちます。

label

必須
型: string

タブ項目には、タブに表示されるテキストを指定するlabel属性が必要です。

icon

型: string

各タブ項目には、ラベルの横に表示されるStarlightに組み込まれたアイコンを指定するicon属性を設定できます。