コンポーネント

コンポーネントにより、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のスタイルとの互換性

Starlightは、Markdownコンテンツにデフォルトのスタイルを適用します。たとえば、要素間にマージンを追加します。これらのスタイルがコンポーネントの見た目と競合する場合は、not-contentクラスをコンポーネントに設定してスタイルを無効化してください。

src/components/Example.astro

<div class="not-content">
  <p>Starlightのデフォルトのコンテンツスタイルに影響を受けません。</p>
</div>

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

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>

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

確認しよう

強調したい興味深いコンテンツ。

恒星

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

衛星

イオ、エウロパ、ガニメデ

ヒント

プロジェクトの主要な機能を示すために、ホームページでカードグリッドを使いましょう。stagger属性を追加すると、カードの2番目の列を垂直方向にシフトして、視覚的な面白さを引き出します。

<CardGrid stagger>
  <!-- カード -->
</CardGrid>

リンクカード

<LinkCard>を使用すると、他のページへのリンクを目立たせることができます。

<LinkCard>はtitleとhref属性を必須とします。短いdescriptionや、targetなど他のリンク属性も指定できます。

十分なスペースがある場合、<CardGrid>により複数の<LinkCard>をグループ化して、カードを並べて表示できます。

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

<LinkCard
  title="Starlightのカスタマイズ"
  description="Starlightサイトをカスタマイズして、独自のスタイル、フォントなどを追加する方法について学びます。"
  href="/ja/guides/customization/"
/>

<CardGrid>
  <LinkCard
    title="Markdownでのコンテンツ作成"
    href="/ja/guides/authoring-content/"
  />
  <LinkCard title="コンポーネント" href="/ja/guides/components/" />
</CardGrid>

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

StarlightのカスタマイズStarlightサイトをカスタマイズして、独自のスタイル、フォントなどを追加する方法について学びます。

Markdownでのコンテンツ作成

コンポーネント

アイコン

Starlightは、<Icon>コンポーネントを通じてコンテンツ内に表示可能な、一般的なアイコンのセットを提供しています。

<Icon>はnameを必須とし、任意でlabel、size、color属性を含められます。

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" color="goldenrod" size="2rem" />

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

すべてのアイコン

以下に、利用可能なすべてのアイコンとその名前を示します。アイコンをクリックすると、対応するコンポーネントのコードをコピーできます。

up-caretdown-caretright-caretright-arrowleft-arrowbarstranslatepencilpendocumentadd-documentsettingexternalmoonsunlaptopopen-bookinformationmagnifierforward-slashcloseerrorwarningapprove-check-circleapprove-checkrocketstarpuzzlelist-formatrandomgithubgitlabbitbucketcodePendiscordgittertwitterx.commastodoncodebergyoutubethreadslinkedintwitchmicrosoftTeamsinstagramstackOverflowtelegramrssfacebookemailredditpatreonslack