コンポーネント

コンポーネントにより、UI やスタイリングの一部を一貫性を保って簡単に再利用できます。例として、リンクカードやYouTubeの埋め込みなどが考えられます。StarlightはMDXファイルでのコンポーネントの使用をサポートしており、すぐに使える一般的なコンポーネントもいくつか提供しています。

コンポーネントの作り方について、詳しくはAstroドキュメントを参照してください。

コンポーネントを使う

コンポーネントは、MDXファイルにインポートしてJSXタグとしてレンダリングすることで使用できます。HTMLタグのように見えますが、import文の名前と同じ大文字で始まります。

---
# src/content/docs/index.mdx
title: Welcome to my docs
---

import SomeComponent from '../../components/SomeComponent.astro';
import AnotherComponent from '../../components/AnotherComponent.astro';

<SomeComponent prop="何か" />

<AnotherComponent>
  コンポーネントには**ネストされたコンテンツ**を含められます。
</AnotherComponent>

StarlightはAstro製であるため、サポート対象のUIフレームワーク（React、Preact、Svelte、Vue、Solid、Lit、Alpine）で作成されたコンポーネントであればMDXファイルで使用できます。MDXでのコンポーネントの使用について、詳しくはAstroドキュメントを参照してください。

組み込みのコンポーネント

Starlightは、一般的なドキュメントのユースケースに対して組み込みのコンポーネントをいくつか提供しています。これらのコンポーネントは、@astrojs/starlight/componentsパッケージから利用できます。

タブ

<Tabs>と<TabItem>コンポーネントを使用して、タブインターフェースを表示できます。各<TabItem>は、ユーザーに表示するlabelを必要とします。

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

<Tabs>
  <TabItem label="恒星">シリウス、ベガ、ペテルギウス</TabItem>
  <TabItem label="衛星">イオ、エウロパ、ガニメデ</TabItem>
</Tabs>

上のコードは、ページに以下のタブを生成します。

カード

<Card>コンポーネントを使用すると、Starlightのスタイルに合わせたボックス内にコンテンツを表示できます。十分なスペースがある場合は、複数のカードを<CardGrid>コンポーネントで囲むことで、カードを並べて表示できます。

<Card>はtitleを必須とし、また任意でStarlightの組み込みアイコンの1つを名前に設定したicon属性を含められます。

import { Card, CardGrid } from '@astrojs/starlight/components';

<Card title="確認しよう">強調したい興味深いコンテンツ。</Card>

<CardGrid>
  <Card title="恒星" icon="star">
    シリウス、ベガ、ペテルギウス
  </Card>
  <Card title="衛星" icon="moon">
    イオ、エウロパ、ガニメデ
  </Card>
</CardGrid>

上のコードにより、ページに以下が生成されます。