コンテンツにスキップ
Starlight

補足情報

ページのメインコンテンツの横に補足情報を表示するには、<Aside>コンポーネントを使用します。

プレビュー

インポート

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

使用方法

<Aside>コンポーネントを使用して補足情報（「アドモニション」や「コールアウト」とも呼ばれる）を表示します。

<Aside>にはオプションのtype属性があり、これによって補足情報の色、アイコン、およびデフォルトのタイトルが制御されます。

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


<Aside>補足情報のコンテンツ。</Aside>


<Aside type="caution">注意が必要なコンテンツ。</Aside>


<Aside type="tip">


補足情報には他のコンテンツも対応しています。


```js
// たとえば、コードスニペットなど。
```


</Aside>


<Aside type="danger">パスワードを誰にも教えないでください。</Aside>
プレビュー

Starlightは、<Aside>コンポーネントの代替として、MarkdownとMDXで補足情報をレンダリングするためのカスタム構文も提供しています。 カスタム構文の詳細については、“MarkdownでのContent作成”ガイドを参照してください。

カスタムタイトルの使用

title属性を使用して、デフォルトの補足情報タイトルを上書きできます。

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


<Aside type="caution" title="注意してください！">
  カスタムタイトル*付きの*警告補足情報。
</Aside>
プレビュー

<Aside> プロパティ

実装: Aside.astro

<Aside>コンポーネントは以下のプロパティを受け入れます：

type

型: 'note' | 'tip' | 'caution' | 'danger'
デフォルト: 'note'

表示する補足情報のタイプ：

  • note補足情報（デフォルト）は青色で、情報アイコンを表示します。
  • tip補足情報は紫色で、ロケットアイコンを表示します。
  • caution補足情報は黄色で、三角形の警告アイコンを表示します。
  • danger補足情報は赤色で、八角形の警告アイコンを表示します。

title

型: string

補足情報に表示するタイトル。 titleが設定されていない場合、現在の補足情報にtypeのデフォルトタイトルが使用されます。