# Stripe Apps の Tabs コンポーネント Tab を使用してコンテンツのセクションを表示します。 # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tabs?app-sdk-version=8. Tab (タブ) は、一度に 1 つのコンテンツパネルとして表示されるコンテンツのセクションです。現在表示されているパネルの上端に沿って、タブエレメントのリストが並べられます。 `Tabs` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Tabs プロパティ | プロパティー | タイプ | | ------------------- | ------------------------------------------------------------------------------------------------------------------ | | `children` | (必須) `React.ReactNode` 1 つ以上の `TabList` コンポーネントまたは `TabPanels` コンポーネント。 | | `fitted` | (オプション) `boolean | undefined` `TabList` がコンテナーの幅全体を使用するかどうか。 | | `onSelectionChange` | (オプション) `((event: React.Key) => void) | undefined` `Tab` が選択されたときに起動されるコールバック。 | | `selectedKey` | (オプション) `React.Key | undefined` 選択した `Tab` を制御コンポーネントとして使用する場合のキー。`onSelectionChange` とともに使用して、タブの選択状態を制御します。 | | `size` | (オプション) `("small" | "medium" | "large") | undefined` コンポーネントのサイズ。 | ## Tab `TabList` コンポーネントはコンテンツの選択に対応しています。`TabList` は `Tab` コンポーネントのコレクションで構成されます。各 `Tab` は、`tabKey` プロパティで一意に識別できます。`map` 関数を使用して `Tab` コンポーネントをレンダリングする場合も、[React のルール](https://reactjs.org/docs/lists-and-keys.html#keys)を満たすために `key` を追加する必要があります。 ### TabList プロパティ | プロパティー | タイプ | | ---------- | ------------------------------------------------- | | `children` | (必須) `React.ReactNode` 1 つ以上の `Tab` コンポーネント。 | ### Tab プロパティ | プロパティー | タイプ | | ---------- | ------------------------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `disabled` | (オプション) `boolean | undefined` タブを無効化するかどうか。 | | `id` | (オプション) `string | undefined` `Tabs` コンポーネントの `selectedKey` プロパティを使用して、選択項目を制御する一意の識別子。 | | `tabKey` | (オプション)(非推奨) 代わりに `id` プロパティを使用してください。 `(React.Key | null) | undefined` `Tabs` の `selectedKey` で使用する一意の識別子。 | ## TabPanel `TabPanels` コンポーネントは、タブ付きのコンテンツパネルの表示に対応します。`TabPanels` は `TabPanel` コンポーネントのコレクションで構成されます。各 `TabPanel` は、`tabKey` プロパティで一意に識別できます。`map` 関数を使用して `TabPanel` コンポーネントをレンダリングする場合も、[React のルール](https://reactjs.org/docs/lists-and-keys.html#keys)を満たすために `key` を追加する必要があります 。 ### TabPanel プロパティ | プロパティー | タイプ | | ---------- | ------------------------------------------------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `id` | (オプション) `string | undefined` `Tabs` コンポーネントの `selectedKey` プロパティを使用して、選択項目を制御する一意の識別子。 | | `tabKey` | (オプション)(非推奨) 代わりに `id` プロパティを使用してください。 `(React.Key | null) | undefined` `Tabs` の `selectedKey` で使用する一意の識別子。 | ## 小さな Tab ## 無効化された Tab ## サポートされていない使用法 フラグメントのすべての子に同じキーが付与されている場合を除き、Tab はフラグメント内の条件付きコンテンツをサポートしていません。 サポートされていない方法で Tab を使用しないようにするため、フラグメントの代わりにコンポーネントを使用してください。または、フラグメントのすべての子に共有の `key` を付与してください。 ## 制御タブ `Tabs` の `selectedKey` プロパティを、`Tab` および `TabPanel` の `tabKey` プロパティと組み合わせて使用し、制御コンポーネントを作成します。 # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tabs?app-sdk-version=9. Tab (タブ) は、一度に 1 つのコンテンツパネルとして表示されるコンテンツのセクションです。現在表示されているパネルの上端に沿って、タブエレメントのリストが並べられます。 `Tabs` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui'; ``` ### Tabs プロパティ | プロパティー | タイプ | | ------------------- | ------------------------------------------------------------------------------------------------------------------ | | `children` | (必須) `React.ReactNode` 1 つ以上の `TabList` コンポーネントまたは `TabPanels` コンポーネント。 | | `fitted` | (オプション) `boolean | undefined` `TabList` がコンテナーの幅全体を使用するかどうか。 | | `onSelectionChange` | (オプション) `((event: string) => void) | undefined` `Tab` が選択されたときに起動されるコールバック。 | | `selectedKey` | (オプション) `string | undefined` 選択した `Tab` を制御コンポーネントとして使用する場合の `id`。`onSelectionChange` とともに使用して、タブの選択状態を制御します。 | | `size` | (オプション) `("small" | "medium" | "large") | undefined` コンポーネントのサイズ。 | ## Tab `TabList` コンポーネントはコンテンツの選択に対応しています。`TabList` は `Tab` コンポーネントのコレクションで構成されます。各 `Tab` は、`id` プロパティで一意に識別できます。`map` 関数を使用して `Tab` コンポーネントをレンダリングする場合も、[React のルール](https://reactjs.org/docs/lists-and-keys.html#keys)を満たすために `key` を追加する必要があります。 ### TabList プロパティ | プロパティー | タイプ | | ---------- | ------------------------------------------------- | | `children` | (必須) `React.ReactNode` 1 つ以上の `Tab` コンポーネント。 | ### Tab プロパティ | プロパティー | タイプ | | ---------- | ---------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `id` | (必須) `string` `Tabs` コンポーネントの `selectedKey` プロパティを使用して、選択項目を制御する一意の識別子。 | | `disabled` | (オプション) `boolean | undefined` タブを無効化するかどうか。 | ## TabPanels `TabPanels` コンポーネントは、タブ付きのコンテンツパネルの表示に対応します。`TabPanels` は `TabPanel` コンポーネントのコレクションで構成されます。各 `TabPanel` は、`id` プロパティで一意に識別できます。`map` 関数を使用して `TabPanel` コンポーネントをレンダリングする場合も、[React のルール](https://reactjs.org/docs/lists-and-keys.html#keys)を満たすために `key` を追加する必要があります 。 ### TabPanels プロパティ | プロパティー | タイプ | | ---------- | ---------------------------------------------------- | | `children` | (必須) `React.ReactNode` 1 つ以上の TabPanel コンポーネント。 | ### TabPanel プロパティ | プロパティー | タイプ | | ---------- | ---------------------------------------------------------------------------- | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `id` | (必須) `string` `Tabs` コンポーネントの `selectedKey` プロパティを使用して、選択項目を制御する一意の識別子。 | ## 小さな Tab ## 無効化された Tab ## サポートされていない使用法 フラグメントのすべての子に同じキーが付与されている場合を除き、Tab はフラグメント内の条件付きコンテンツをサポートしていません。 サポートされていない方法で Tab を使用しないようにするため、フラグメントの代わりにコンポーネントを使用してください。または、フラグメントのすべての子に共有の `key` を付与してください。 ## 制御タブ `Tabs` の `selectedKey` プロパティを、`Tab` および `TabPanel` の `id` プロパティと組み合わせて使用し、制御コンポーネントを作成します。 ## See also - [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md) - [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md) - [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)