From 2635a2215fab6c4a590bb4eea3a3263ea15babbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CKenzo-Wada=E2=80=9D?= Date: Sat, 21 Sep 2024 00:30:36 +0900 Subject: [PATCH] feat: add `tabs.mdx` for ja --- docs/src/content/docs/ja/components/tabs.mdx | 221 +++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 docs/src/content/docs/ja/components/tabs.mdx diff --git a/docs/src/content/docs/ja/components/tabs.mdx b/docs/src/content/docs/ja/components/tabs.mdx new file mode 100644 index 0000000000..10060928f4 --- /dev/null +++ b/docs/src/content/docs/ja/components/tabs.mdx @@ -0,0 +1,221 @@ +--- +title: タブ +description: Starlightで同等の情報をグループ化するためのタブインターフェースを作成する方法を学びましょう。 +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +タブインターフェースを作成するには、``と``コンポーネントを使用します。 +タブは、ユーザーが複数のオプションのうち1つだけを見る必要がある場合に、同等の情報をグループ化するのに便利です。 + +import Preview from '~/components/component-preview.astro'; + + + + + シリウス、ベガ、ベテルギウス + イオ、エウロパ、ガニメデ + + + + +## インポート + +```tsx +import { Tabs, TabItem } from '@astrojs/starlight/components'; +``` + +## 使用方法 + +``と``コンポーネントを使用してタブインターフェースを表示します。 +各``には、ユーザーに表示される[`label`](#label)が必要です。 + + + +```mdx +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + シリウス、ベガ、ベテルギウス + イオ、エウロパ、ガニメデ + +``` + + + +```markdoc +{% tabs %} +{% tabitem label="Stars" %} +シリウス、ベガ、ベテルギウス +{% /tabitem %} + +{% tabitem label="Moons" %} +イオ、エウロパ、ガニメデ +{% /tabitem %} +{% /tabs %} +``` + + + + + シリウス、ベガ、ベテルギウス + イオ、エウロパ、ガニメデ + + + + +### タブを同期させる + +複数のタブグループを同期させるには、[`syncKey`](#synckey)属性を追加します。 + +ページ上のすべての``に同じ`syncKey`値を設定すると、同じアクティブなラベルが表示されます。 +これにより、読者は一度選択（例: オペレーティングシステムやパッケージマネージャー）すると、その選択がページを移動しても保持されます。 + +関連するタブを同期させるには、各``コンポーネントに同じ`syncKey`プロパティを追加し、同じ``ラベルを使用してください。 + + + +```mdx 'syncKey="constellations"' +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +_いくつかの星:_ + + + ベラトリックス、リゲル、ベテルギウス + ポルックス、カストルA、カストルB + + +_いくつかのエキソプラネット:_ + + + HD 34445 b、グリーゼ 179 b、Wasp-82 b + ポルックスb、HAT-P-24b、HD 50554 b + +``` + + + +```markdoc 'syncKey="constellations"' +_いくつかの星:_ + +{% tabs syncKey="constellations" %} +{% tabitem label="Orion" %} +ベラトリックス、リゲル、ベテルギウス +{% /tabitem %} + +{% tabitem label="Gemini" %} +ポルックス、カストルA、カストルB +{% /tabitem %} +{% /tabs %} + +_いくつかのエキソプラネット:_ + +{% tabs syncKey="constellations" %} +{% tabitem label="Orion" %} +HD 34445 b、グリーゼ 179 b、Wasp-82 b +{% /tabitem %} + +{% tabitem label="Gemini" %} +ポルックスb、HAT-P-24b、HD 50554 b +{% /tabitem %} +{% /tabs %} +``` + + + + + +_いくつかの星:_ + + + ベラトリックス、リゲル、ベテルギウス + ポルックス、カストルA、カストルB + + +_いくつかのエキソプラネット:_ + + + HD 34445 b、グリーゼ 179 b、Wasp-82 b + ポルックスb、HAT-P-24b、HD 50554 b + + + + + + +### タブにアイコンを追加する + +[`icon`](#icon)属性を使用してタブ項目にアイコンを追加し、[Starlightの組み込みアイコン](/reference/icons/#all-icons)の名前を指定して、ラベルの横にアイコンを表示します。 + + + +```mdx /icon="\w+"/ +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + + シリウス、ベガ、ベテルギウス + + + イオ、エウロパ、ガニメデ + + +``` + + + +```markdoc /icon="\w+"/ +{% tabs %} +{% tabitem label="Stars" icon="star" %} +シリウス、ベガ、ベテルギウス +{% /tabitem %} + +{% tabitem label="Moons" icon="moon" %} +イオ、エウロパ、ガニメデ +{% /tabitem %} +{% /tabs %} +``` + + + + + + シリウス、ベガ、ベテルギウス + + + イオ、エウロパ、ガニメデ + + + + + +## `` プロパティ + +**実装:** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro) + +``コンポーネントは複数の``コンポーネントをグループ化し、以下のプロパティを受け付けます。 + +### `syncKey` + +**タイプ:** `string` + +複数のページにわたってタブグループを同期させるためのキー。 + +## `` プロパティ + +**実装:** [`TabItem.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro) + +タブは複数のタブ項目から構成され、それぞれ以下のプロパティを持ちます。 + +### `label` + +**必須** +**タイプ:** `string` + +タブ項目には、タブに表示されるテキストを指定する`label`属性が必要です。 + +### `icon` + +**タイプ:** `string` + +各タブ項目には、ラベルの横に表示されるアイコンを指定する`icon`属性を設定できます。