From 208041f43d862990cdd45c0713170228c1cc9fb9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 10 Nov 2026 15:14:19 +0000 Subject: [PATCH 1/4] Replay #935 (update tabs topics) for the JP sync Reapplies the English changes of aecd0e1e45 (Merge pull request #935 from IgniteUI/hhristov/update-tabs-topics) so a workflow_dispatch of the JP sync workflows sees them as HEAD. The tree is identical to vnext 168f91d846a5f5694406357b875cb1b33417196e. From f93855f4eeb16ca82f343470bee5603d900026e1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 10 Nov 2026 15:14:21 +0000 Subject: [PATCH 2/4] Sync JP xplat docs: tabs, carousel, accessibility-compliance Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../accessibility-compliance.mdx | 6 +- .../jp/components/layouts/carousel.mdx | 4 +- .../content/jp/components/layouts/tabs.mdx | 1304 ++++++++++++++--- 3 files changed, 1123 insertions(+), 191 deletions(-) diff --git a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx index b639f37196..16c04260de 100644 --- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -87,7 +87,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Avatar](../layouts/avatar.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/avatar.mdx#アクセシビリティ) | | [Badge](../inputs/badge.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/badge.mdx#アクセシビリティ) | | [Banner](../banner.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Bottom Navigation](../tabs.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Bottom Navigation](../tabbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Button](../inputs/button.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Button Group](../inputs/button-group.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Calendar](../calendar.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../calendar.mdx#キーボード-ナビゲーション) | @@ -117,7 +117,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Slider](../slider/slider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Snackbar](../snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Switch](../inputs/switch.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Tabs](../tabs.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Tabs](../layouts/tabs.mdx#accessibility) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/tabs.mdx#accessibility) | | [Time Picker](../time-picker.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../time-picker.mdx#キーボード-ナビゲーション) | | [Toast](../toast.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Tooltip](../tooltip.mdx) | ドキュメント化済み | 未ドキュメント化 | [アクセシビリティ](../tooltip.mdx#ユーザー補助) | @@ -166,7 +166,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Snackbar](../notifications/snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Stepper](../layouts/stepper.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../layouts/stepper.mdx#キーボード-ナビゲーション) | | [Switch](../inputs/switch.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Tabs](../layouts/tabs.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../layouts/tabs.mdx#キーボード-ナビゲーション) | +| [Tabs](../layouts/tabs.mdx#accessibility) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/tabs.mdx#accessibility) | | [Text Area](../inputs/text-area.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Toast](../notifications/toast.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Tooltip](../inputs/tooltip.mdx#アクセシビリティと-aria-サポート) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/tooltip.mdx#アクセシビリティと-aria-サポート) | diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx index d17a64df52..cfe7427073 100644 --- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx @@ -1067,7 +1067,7 @@ const images = [ -**使用すべきでない場合:** プライマリ ナビゲーション、長い連続的なワークフロー、またはユーザーが並べて比較する必要があるコンテンツには Carousel を使用しないでください。名前付きセクションを切り替えるには [Tabs](../tabs.mdx) を、ガイド付きの連続タスクには [Stepper](../stepper.mdx) を使用してください。 +**使用すべきでない場合:** プライマリ ナビゲーション、長い連続的なワークフロー、またはユーザーが並べて比較する必要があるコンテンツには Carousel を使用しないでください。名前付きセクションを切り替えるには [Tabs](./tabs.mdx) を、ガイド付きの連続タスクには [Stepper](../stepper.mdx) を使用してください。 @@ -1306,7 +1306,7 @@ Carousel が最適なインタラクション モデルでない場合は、こ -- [Tabs](../tabs.mdx) - スライド形式のナビゲーションなしで名前付きセクションを切り替える必要がある場合は Tabs を使用します。 +- [Tabs](./tabs.mdx) - スライド形式のナビゲーションなしで名前付きセクションを切り替える必要がある場合は Tabs を使用します。 - [Stepper](../stepper.mdx) - ガイド付きの一連の手順を完了する必要がある場合は Stepper を使用します。 diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index 159004aabc..af1ef71d92 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -1,82 +1,184 @@ --- -title: "{Platform} Tabs コントロール | レイアウト コントロール | {ProductName}" -description: "{Platform} タブ コンポーネントを使用すると、ユーザーはタブを上部に配置して、同様のデータ セットを切り替えることができます。今すぐお試しください。" -keywords: "{Platform}, UI controls, web widgets, UI widgets, {Platform} Tabs Component, Infragistics, UI コントロール, web ウィジェット, UI ウィジェット, {Platform} タブ コンポーネント, インフラジスティックス" +title: "{Platform} Tabs (タブ) コンポーネント" +description: "{ProductName} Tabs コンポーネントは、関連するコンテンツをタブに整理し、選択したタブのコンテンツを表示します。タブが収まらない場合はスクロール ボタンが追加されます。" +keywords: "{Platform} Tabs, {ProductName}, tab header, tab panel, scroll buttons, {Platform} タブ, タブ ヘッダー, タブ パネル, スクロール ボタン" license: MIT -mentionedTypes: ["Tabs", "Tab", "Icon", "IconButton", "RadioGroup"] +last_updated: "2026-11-04" +relatedComponents: ["Stepper", "Accordion"] +mentionedTypes: ["Tabs", "Tab"] _language: ja llms: - description: "{Platform} タブは軽量で使いやすいコンポーネントで、対応するコンテンツをタブ形式または通常は水平に配置されたタブのコレクションで整理します。" + description: "{ProductName} Tabs コンポーネントは、同じ階層レベルの関連するコンテンツをタブに整理し、選択したタブのコンテンツを表示します。" +platformType: web-only --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import DoDont from 'igniteui-astro-components/components/mdx/DoDont.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import tabsAnatomy from '@xplat-images/anatomy-content-light/tabs-lt-a.png'; +import tabsDoInformation from '@xplat-images/tabs/tabs-do-1.png'; +import tabsDoNotWorkflow from '@xplat-images/tabs/tabs-do-not-1.png'; +import tabsDoContent from '@xplat-images/tabs/tabs-do-2.png'; +import tabsDoNotMixedContent from '@xplat-images/tabs/tabs-do-not-2.png'; +# Tabs (タブ) +{ProductName} Tabs コンポーネントは、同じ階層レベルの関連するコンテンツをタブに整理し、選択したタブのコンテンツを表示します。 -# {Platform} Tabs (タブ) の概要 + -{Platform} タブは軽量で使いやすいコンポーネントで、対応するコンテンツをタブ形式または通常は水平に配置されたタブのコレクションで整理します。{Platform} タブを使用すると、エンドユーザーは簡単にクリックしてさまざまなビューを表示できます。タブの向き、テンプレート、組み込みのヘッダー スタイル、アニメーション、スクロール ボタンなど、いくつかの機能とカスタマイズ オプションがあります。 +Angular Tabs コンポーネントのセレクターは `igx-tabs` です。その中の各 `igx-tab-item` は、タブ ヘッダーと、タブが選択されたときに Tabs コンポーネントが表示するコンテンツを保持します。 -{ProductName} タブは、同様のデータ セットを整理して切り替えます。タブは、データ コンテンツの上部に配置されます。タブが選択されると、対応するコンテンツパネルが表示されます。 + -## {Platform} タブの例 + -以下の {Platform} タブの例では、3 つの異なるタブが 1 行に並んで表示されているため、それぞれをすばやく簡単に移動できます。 +各タブは、ヘッダーとコンテンツを 1 つの要素に保持します。Tabs コンポーネントはキーボード ナビゲーションをサポートし、タブ ヘッダーが収まらない場合にスクロール ボタンを表示します。 - + +## ライブ デモ -## {ProductName} でタブを使用する方法 + + - + + + -まず、次のコマンドを実行して {ProductName} をインストールする必要があります: + -```cmd -npm install {PackageWebComponents} +## 構造 + +{Platform} Tabs コンポーネントは、タブ項目を含むコンテナー、任意のスクロール ボタン、および選択したタブのコンテンツ領域で構成されます。 + + + + + +1. Tabs コンテナー: すべてのタブ項目をグループ化して配置します
+2. ヘッダー ボタン (任意): タブ コンテナーに表示されていないタブに移動するための矢印が表示されます
+3. ラベル: タブの名前を示し、どのコンテンツが開くかを示すテキストです
+4. アクティブなタブ項目: アクティブな、選択可能な単一のタブ要素です
+5. 左アイコン (任意): タブにコンテキストを加えるため、ラベルの前に表示されるアイコンです
+6. 上アイコン (任意): タブにコンテキストを加えるため、ラベルの上に表示されるアイコンです
+7. 右アイコン (任意): タブにコンテキストを加えるため、ラベルの後に表示されるアイコンです
+8. コンテンツ領域: 選択したタブのコンテンツが表示されるパネルです + + + +`igc-tabs` 要素は、ヘッダー ストリップとスクロール ボタンをレンダリングします。各 `igc-tab` は自身のヘッダーとコンテンツをレンダリングし、Tabs コンポーネントはすべてのタブのコンテンツをヘッダー ストリップの下に配置します: + +```text +igc-tabs[role="tablist"] +└─ #shadow-root + └─ div[part="tabs"] // the scrollable header strip + └─ div[part="inner"] + ├─ igc-icon-button[part="start-scroll-button"] // rendered when the headers overflow + ├─ slot // the igc-tab elements + │ └─ igc-tab + │ └─ #shadow-root + │ ├─ div[part="tab-header"][role="tab"] + │ │ └─ div[part="base"] + │ │ ├─ slot[name="prefix"][part="prefix"] + │ │ ├─ div[part="content"] + │ │ │ └─ slot[name="label"] // falls back to the label property + │ │ └─ slot[name="suffix"][part="suffix"] + │ └─ div[part="tab-body"][role="tabpanel"] // visible only for the selected tab + │ └─ slot // the content of the tab + ├─ igc-icon-button[part="end-scroll-button"] // rendered when the headers overflow + └─ div[part="selected-indicator"] + └─ span // moves under the selected tab header ``` - + + +`igx-tabs` 要素は、各タブ項目の `igx-tab-header` からヘッダー ストリップを、各タブ項目の `igx-tab-content` からコンテンツ領域をレンダリングします: + +```text +igx-tabs.igx-tabs +├─ div.igx-tabs-header +│ ├─ button.igx-tabs-header-button // start scroll button, hidden when the headers fit +│ ├─ div.igx-tabs-header__content +│ │ └─ div.igx-tabs-header__wrapper[role="tablist"] +│ │ ├─ div.igx-tabs-header-scroll +│ │ │ └─ igx-tab-header[role="tab"] // one for each igx-tab-item +│ │ │ ├─ [igxPrefix] +│ │ │ ├─ div.igx-tab-header__inner // [igxTabHeaderIcon] above [igxTabHeaderLabel] +│ │ │ └─ [igxSuffix] +│ │ └─ div.igx-tabs-header__active-indicator +│ └─ button.igx-tabs-header-button // end scroll button, hidden when the headers fit +└─ div.igx-tabs-content + └─ igx-tab-content[role="tabpanel"] // one for each igx-tab-item; renders its content only when selected +``` + - +## はじめに +{Platform} Tabs を使用するには、基本的なプロジェクト セットアップについて [{ProductName} はじめに](../general/getting-started.mdx)[{ProductName} はじめに](../general-getting-started.mdx) トピックに従い、その後、対象プラットフォーム用のコンポーネントを追加します。 + -まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: +**{PackageCommon}** パッケージをインストールします: ```cmd -npm install igniteui-react +npm install {PackageCommon} ``` +次に、、そのテーマ CSS をインポートし、コンポーネントを登録します。この登録により、`igc-tab` 要素と `igc-icon-button` 要素も登録されます: - - - - +```ts +import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のようにインポートする必要があります: +defineComponents(IgcTabsComponent); +``` +**{PackageCommon}** パッケージをインストールします: + +```cmd +npm install {PackageCommon} +``` + +次に、 および ラッパーとテーマ CSS をインポートします: + ```tsx -import { IgrTabs, IgrTab } from "igniteui-react"; +import { IgrTabs, IgrTab } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` - -{ProductName} のサービスを登録します。 +{ProductName} サービスを登録します: ```csharp // in Program.cs file @@ -84,99 +186,215 @@ import { IgrTabs, IgrTab } from "igniteui-react"; builder.Services.AddIgniteUIBlazor(); ``` - コンポーネントのクライアント リソース モジュールである の登録は**任意**です。コンポーネントは初めてレンダリングされるときにリソースを読み込みます。ただし、`builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule))` のように指定すると、リソースを事前に読み込んだり、クライアント側でのみ作成される要素に対応したりできます ([コンポーネント モジュール](../general-getting-started.mdx#コンポーネント-モジュール)を参照)。 + のクライアント リソース モジュールである の登録は**任意**です。コンポーネントは最初にレンダリングされるときにリソースを読み込みます。`builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule))` のように指定すると、リソースをプリロードしたり、クライアント上でのみ作成される要素をサポートしたりできます ([コンポーネント モジュール](../general-getting-started.mdx#component-modules)を参照)。 + +次に、アプリのホスト ページでテーマ CSS ファイルをリンクします (スタンドアロンの Blazor WebAssembly アプリまたは Blazor Hybrid アプリでは **wwwroot/index.html**、Blazor Server アプリでは **Pages/_Host.cshtml**、Blazor Web アプリでは **Components/App.razor**): + +```razor + +``` - + -```ts -import { defineComponents, IgcTabsComponent } from 'igniteui-webcomponents'; +プロジェクトで {ProductName} をまだ使用していない場合は、`ng add igniteui-angular` を実行します。次に、`IGX_TABS_DIRECTIVES` トークンをインポートし、コンポーネントの `imports` に追加します。このトークンには、、タブ項目、ヘッダー、コンテンツの各コンポーネント、ヘッダーのラベルとアイコンのディレクティブ、およびプレフィックスとサフィックスのディレクティブが含まれます: -defineComponents(IgcTabsComponent); +```ts +import { Component } from '@angular/core'; +import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs'; +// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular/tabs'; for licensed package + +@Component({ + selector: 'app-home', + template: ` + + + + Overview + + The overview content. + + + + Details + + The details content. + + + `, + imports: [IGX_TABS_DIRECTIVES] +}) +export class HomeComponent {} ``` +タブ項目が選択されておらず、タブ項目にコンテンツがある場合、Angular Tabs コンポーネントは初期化時に最初のタブ項目を選択します。 + -{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。 + + +登録後、セクションごとに を含む をレンダリングします。タブのラベルがそのヘッダーになり、タブの子要素がそのコンテンツになります: -単純な の宣言は次のように行われます: + ```html - - Content for tab 1 - - - Content for tab 2 - - -
Tab 3
- Content for tab 3 - + +

The overview content.

+ + +

The details content.

+ ``` + + +```tsx + + +

The overview content.

+ + +

The details content.

+ + +``` + + + ```razor - - Content for tab 1 + +

The overview content.

 - - Content for tab 2 - - -
Tab 3
- Content for tab 3 + +

The details content.

 ``` + + +最初のレンダリングでタブが選択されていない場合、{Platform} Tabs コンポーネントは最初の有効なタブを選択します。その後、選択されているタブの `selected` を `false` に設定すると、どのタブも選択されません。 + + + +## 使用方法 + +{Platform} Tabs を使用して、同じ情報の異なるビューを整理したり、類似または関連するデータ セットを切り替えたりします。 + +### タイプ + +Tabs には 2 つのタイプがあります。Short は既定ではテキストのみを表示し、プレフィックス アイコンとサフィックス アイコンを追加することもできます。Tall は、テキストの上にさらに 3 つ目のアイコンを表示します。 + + + +Short タブにするには、タブの `label` を設定します。Tall タブにするには、代わりに Icon と `` を `label` スロットに配置すると、Tabs コンポーネントはテキストの上にアイコンを表示します。`label` スロットは `label` プロパティより優先されます。[Icon](./icon.mdx) トピックで説明されているように、最初にアイコンを登録します: + + + + + +```html + + + + + + + + + Cart + + + + Shipping + + +``` + + + ```tsx - - Content for tab 1 - - - Content for tab 2 - - -
Tab 3
- Content for tab 3 - + + + + + + + + Cart + + + + Shipping + ``` -タブ テキストは、 プロパティを使用して単純な文字列として設定することも、`label` スロットに子要素を割り当てることで設定することもできます。デフォルト スロットの残りの子要素は、タブ コンテンツとしてレンダリングされます。 + -### 選択 +```razor + + + + -ユーザーがキーを押すかクリックして項目を選択すると、 は イベントを発行します。 メソッドを使用すると、 またはその ID を指定してタブを選択できます。 + + + + Cart + + + + Shipping + + +``` -選択したタブが初期の読み込み時に指定されていない場合、無効になっていない最初のタブが選択されます。 + -ユーザーが矢印キーでナビゲートしているときにタブを選択するデフォルトの動作は、 プロパティによって変更できます。`Manual` に設定すると、矢印キーを押すと次 / 前のタブにフォーカスしますが、タブは SPACE または ENTER を押した後にのみ選択されます。 + -### 無効化されたタブ +アイコンやバッジなど、ラベルの前後にコンテンツを表示するには、タブの `prefix` スロットと `suffix` スロットに配置します: - 属性を設定すると、タブが無効になります: + ```html - + + + Inbox + 12 + +``` + + + + + +```tsx + + + Inbox + 12 + ``` @@ -184,7 +402,81 @@ defineComponents(IgcTabsComponent); ```razor - + + + Inbox + 12 + +``` + + + + + +Short タブにするには、 ディレクティブを持つ `` を `igx-tab-header` に配置します。Tall タブにするには、さらに ディレクティブを持つ `igx-icon` を追加すると、Tabs コンポーネントはテキストの上にアイコンを表示します。コンポーネントの `imports` に、`IGX_TABS_DIRECTIVES` と併せて `IgxIconComponent` を追加します: + +```html + + + + shopping_basket + Cart + + The cart content. + + + + local_shipping + Shipping + + The shipping content. + + +``` + +アイコンやバッジなど、ラベルの前後にコンテンツを表示するには、`igxPrefix` ディレクティブと `igxSuffix` ディレクティブを使用して `igx-tab-header` に追加します。以下のバッジには、`imports` に `IgxBadgeComponent` も必要です: + +```html + + inbox + Inbox + + +``` + + + + + + + + + + + + + + + +### レスポンシブ対応 + +Tabs は、幅を調整して使用可能な水平方向のスペースを埋める Content Fit にすることも、多数のタブ項目間を移動するためのスクロール ボタンを備えた Fixed にすることもできます。これにより、もう一方のモードと同じ合計スペースで、通常より多くのコンテンツを収めることができます。 + + プロパティは、{Platform} Tabs コンポーネントがタブ ヘッダーを配置する方法を設定します: + +- `start` (既定): 各タブ ヘッダーはコンテンツと同じ幅になり、ヘッダーは Tabs の開始端から並びます。 +- `center`: 各タブ ヘッダーはコンテンツと同じ幅になり、ヘッダーは中央に配置されます。 +- `end`: 各タブ ヘッダーはコンテンツと同じ幅になり、ヘッダーは Tabs の終了端に揃います。 +- `justify`: タブ ヘッダーは Tabs の幅を埋めるように伸びます。Content Fit モードで使用します。 + + + +```html + + + + + ``` @@ -192,205 +484,845 @@ defineComponents(IgcTabsComponent); ```tsx - + + + + + ``` -### 配置 + - プロパティは、{Platform} タブの配置方法を制御します。プロパティは以下の値を含みます: +```razor + + + + + +``` -- `Start` (デフォルト): タブの幅はコンテンツ (ラベル、アイコン、両方) に依存し、すべてのタブのパディングは等しくなります。最初のタブは、タブ コンテナーの左側に配置されます。 -- `Center`: タブの幅はコンテンツによって異なり、タブ コンテナーの中心を占めます。 -- `End`: タブの幅はコンテンツによって異なり、すべてのタブのパディングは同じです。最後のタブは、タブ コンテナーの右側に配置されます。 -- `Justify`: すべてのタブは幅が等しく、タブ コンテナーに完全に収まります。 + -スペースがすべてのタブに収まらない場合は、スクロール ボタンが表示されます。 + - +```html + + + Podcasts + The podcasts content. + + + Playlists + The playlists content. + + +``` + +タブ ヘッダーが収まらない場合、{Platform} Tabs コンポーネントはヘッダー ストリップの両端にスクロール ボタンを表示します。これが Fixed モードです。スクロール ボタンは、その方向で表示範囲外にある次のタブ ヘッダーまでストリップをスクロールし、ストリップがその端までスクロールされると無効になります。ユーザーがタブを選択すると、Tabs コンポーネントはそのヘッダーが表示されるようにスクロールします。 + -### スクローリング + -スクロール ボタンは、利用可能なスペースがすべての {Platform} タブを描画するのに十分でない場合に表示されます。最初のタブが表示されている場合、スクロール開始ボタンは無効になります。最後のタブが表示されている場合、スクロール終了ボタンは無効になります。スクロール ボタンの 1 つを押すと、その方向のタブが完全に表示されるようにタブがスクロールされます。または、既に表示されている場合は、その方向の前 / 次のタブが表示されます。 + - + + + +### 数 -### キーボード ナビゲーション +ほとんどのシナリオでは、Tabs には 2 から 5 個の項目を含める必要があります。ユースケースで 6 個以上のタブが必要な場合は、上記の Fixed モードを検討してください。 -|キー|説明| -|----|-----------| -| ← | 前 (右から左モードでは次) のタブを選択します。 が `Manual` に設定されている場合は、タブのみがフォーカスされます。最初のタブにある場合は最後までスクロールします。 | -| → | 次へ (右から左モードでは前へ) タブを選択します。 が `Manual` に設定されている場合は、タブのみがフォーカスされます。最後のタブにある場合は、スクロールして開始します。 | -| HOME | 最初のタブを選択します。 | -| END | 最後のタブを選択します。 | -| ENTER / SPACE | が `Manual` の場合、フォーカスされたタブを選択します。 | + -### Prefix / Suffix (プレフィックス / サフィックス) +実行時にタブを追加および削除できます。`selected` を設定して追加したタブは選択されたタブになり、選択されているタブを削除すると、{Platform} Tabs コンポーネントは最初の有効なタブを選択します。 -各タブは `label` スロットでアイコン、テキスト、またはその両方などの情報を表示できるほか、`prefix` と `suffix` スロットで開始および / または終了に追加のコンテンツを表示することもできます。 + - + +たとえば `@for` を使用して、実行時にタブ項目を追加および削除できます。選択されているタブ項目を削除すると、Angular Tabs コンポーネントは、そのインデックスを引き継ぐタブ項目を選択します。削除されたものが最後のタブ項目だった場合は、最後のタブ項目を選択します。 + + -## スタイル設定 + - コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。 + + - + + -| 名前 | 説明 | -|--|--| -| `selected-indicator` | 選択されたインジケーター。 | -| `start-scroll-button` | タブがオーバーフローしたときに表示されるスクロール開始ボタン。 | -| `end-scroll-button` | タブがオーバーフローしたときに表示されるスクロール終了ボタン。 | +### 状態 + +タブ項目は、Active、Inactive、Active & Hover、Inactive & Hover、および Disabled の状態をサポートします。Tabs では、常に 1 つの Active タブと、任意の数の Inactive タブおよび Disabled タブがあります。 + +タブの `selected` を設定するとそのタブがアクティブなタブになり、`disabled` を設定するとオフになります。ユーザーは無効なタブを選択できず、キーボード ナビゲーションでもスキップされます。 選択されているタブを無効にすると、{Platform} Tabs コンポーネントは最初の有効なタブを選択します。 + + + +```html + + + + + +``` + + +```tsx + + + + + +``` + +```razor + + + + + +``` -| 名前 | 説明 | -|--|--| -| `headers` | タブとスクロール ボタンを含むラッパー。 | -| `headers-content` | タブの描画に使用できるスペースを表すタブのコンテナー。 | -| `headers-wrapper` | タブと選択されたインジケーターのラッパー。 | -| `headers-scroll` | タブのコンテナー。 | -| `selected-indicator` | 選択されたインジケーター。 | -| `start-scroll-button` | タブがオーバーフローしたときに表示されるスクロール開始ボタン。 | -| `end-scroll-button` | タブがオーバーフローしたときに表示されるスクロール終了ボタン。| -| `content` | データが表示されるコンテンツのコンテナー。 | + + + + +```html + + + Overview + The overview content. + + + Activity + The activity content. + + + Billing + The billing content. + + +``` + - コンポーネントは、次の CSS パーツを公開します: + + - + + -|名前|説明| -|--|--| -| `content` | タブ ヘッダーのラベル スロット コンテナー。 | -| `prefix` | タブ ヘッダーのラベル プレフィックス。 | -| `suffix` | タブ ヘッダーのラベル サフィックス。 | -| `tab-header` | 単一のタブのヘッダー。 | -| `tab-body` | 単一のタブの本体コンテンツを保持します。選択したタブの本体のみが表示されます。 | + -```css -igc-tab::part(tab-header), -igc-tabs::part(inner)::after { - --item-background: var(--ig-surface-600); - --border-color: var(--ig-success-300); -} +### 選択 -igc-tab::part(tab-body), -igc-tab[selected] igc-icon { - --item-active-icon-color: var(--ig-success-300); -} + -igc-tab:not([selected]) igc-icon { - --item-icon-color: var(--ig-gray-500); -} +{Platform} Tabs コンポーネントは、ユーザーがクリックまたはキーでタブを選択すると、新しく選択されたタブとともに `igcChange` を発行します。コードでタブを選択するには、タブ、またはその `id` もしくは `label` を指定して を呼び出します。選択されているタブは から読み取ります: + +```html + + + + +``` + +```ts +const tabs = document.querySelector('igc-tabs')!; + +tabs.addEventListener('igcChange', (event) => { + console.log(`Selected: ${event.detail.label}`); +}); -igc-tabs::part(start-scroll-button), -igc-tabs::part(end-scroll-button) { - --background: var(--ig-surface-600); - --hover-background: var(--ig-surface-700); - --active-background: var(--ig-surface-700); - --disabled-background: var(--ig-gray-100); - --button-color: var(--ig-gray-700); - --button-hover-color: var(--ig-gray-800); - --button-disabled-color: var(--ig-gray-300); - --border-color: var(--ig-surface-600); +tabs.select('details'); +console.log(tabs.selectedTab?.label); // "Details" +``` + + + + + +{Platform} Tabs コンポーネントは、ユーザーがクリックまたはキーでタブを選択すると、新しく選択されたタブとともに `onChange` を呼び出します。コードでタブを選択するには、タブ、またはその `id` もしくは `label` を指定して を呼び出します: + +```tsx +import { useRef } from 'react'; +import { IgrTab, IgrTabs } from 'igniteui-react'; + +export default function ProfileTabs() { + const tabsRef = useRef(null); + + return ( + <> + ) => console.log(e.detail.label)}> + + + + + + ); } +``` -igc-tab::part(tab-header) { - --item-hover-color: var(--ig-success-500); + + + + +{Platform} Tabs コンポーネントは、ユーザーがクリックまたはキーでタブを選択すると、新しく選択されたタブとともに `Change` を発生させます。コードでタブを選択するには、タブの `id` または `Label` を指定して を呼び出します: + +```razor + + + + + + + +@code { + private IgbTabs Tabs { get; set; } + + private async Task ShowDetails() + { + await Tabs.SelectAsync("Details"); + } + + private void OnTabChange(IgbTabComponentEventArgs e) + { + Console.WriteLine(e.Detail.Label); + } } +``` + + + + + +コードでタブを選択するか、タブの `selected` を設定すると、change イベントなしで選択が変更されます。Tabs コンポーネントは、無効なタブとどのタブにも一致しない値を無視します。 + + -igc-tab::part(tab-header)::before { - --border-color--hover: var(--ig-gray-500); + + +選択されているタブのインデックスを読み取って設定するには、 をバインドします。Angular Tabs コンポーネントは、選択が変更される前に を発行し、そのハンドラーで変更をキャンセルできます: + +```html + + + Profile + The profile form. + + + Billing + The billing form. + + +``` + +```ts +import { ITabsSelectedIndexChangingEventArgs } from 'igniteui-angular/tabs'; + +public selectedIndex = 0; +public hasUnsavedChanges = false; + +public onSelectedIndexChanging(event: ITabsSelectedIndexChangingEventArgs) { + if (this.hasUnsavedChanges) { + event.cancel = true; + } } ``` +選択が変更された後、Angular Tabs コンポーネントは、変更前と変更後のタブ項目とともに を発行します。これらのイベントは、コードで `selectedIndex` を設定した場合にも発生します。 + +### アクティブ化 +既定では、{Platform} Tabs コンポーネントは、矢印キー、Home、または End でフォーカスがタブのヘッダーに移動するとすぐに、そのタブを選択します。これらのキーでフォーカスのみを移動し、フォーカスされたタブを Enter または Space で選択するには、 を `manual` に設定します。タブのコンテンツの表示に時間がかかる場合 (たとえばデータを読み込む場合) は、手動アクティブ化を使用します。 + + + +```html + + + + +``` + + + + + +```tsx + + + + +``` + + +```razor + + + + +``` -|名前|説明| -|--|--| -| `content` | コンテンツのラッパー。 | -| `prefix` | プレフィックス ラッパー。 | -| `suffix` | サフィックス ラッパー。 | + -```css -igc-tab::part(tab-header), -igc-tabs::part(inner)::after { - --item-background: var(--ig-surface-600); - --border-color: var(--ig-success-300); -} + + +```html + + ... + +``` + + + +### 推奨事項と非推奨事項 + +Tabs は情報を整理するのに適しており、チェックアウト プロセスや構成ウィザードのような、論理的な順序で進むワークフローやアクションの設計には使用しないでください。Short タブを使用する場合、同じバーでテキスト タブとアイコン タブを組み合わせないでください。2 つのコンテンツ モードのいずれかを選択し、バー内のすべての項目で一貫して使用します。 + + + + +タブを使用して関連情報を整理します。 + + + + +チェックアウト プロセスなど、順次ワークフローのステップにタブを使用しないでください。 + + + -igc-tab::part(tab-body), -igc-tab[selected] igc-icon { - --item-active-icon-color: var(--ig-success-300); + + + +バー内のすべてのタブで、テキストまたはアイコンのいずれか同じコンテンツ モードを使用します。 + + + + +同じバーでテキスト タブとアイコン タブを組み合わせないでください。 + + + + +## プロパティ + +{Platform} Tabs コンポーネントは、次のプロパティを公開します。完全な型定義については、API リファレンスを参照してください。 + + + +| 名前 | 型 | 既定値 | 説明 | +| --- | --- | --- | --- | +| | `'start' \| 'end' \| 'center' \| 'justify'` | `'start'` | タブ ヘッダーをヘッダー ストリップ内に配置する方法。 | +| | `'auto' \| 'manual'` | `'auto'` | キーボードでタブ ヘッダーにフォーカスを移動したときに、そのタブも選択するかどうか。 | +| | `IgcTabComponent \| null``IgrTab \| null` | `null` | 読み取り専用。選択されているタブ。 | +| | `string` | `''` | 読み取り専用。選択されているタブの `label`。タブに `label` がない場合は `id`。 | +| | `IgcTabComponent[]``IgrTab[]` | — | 読み取り専用。Tabs の直接の子であるタブ。 | +| | `string` | `''` | タブ ヘッダーのテキスト。`label` スロットが優先されます。 | +| | `boolean` | `false` | タブが選択されているかどうか。 | +| | `boolean` | `false` | タブが無効かどうか。 | + + + + + +| 名前 | 型 | 既定値 | 説明 | +| --- | --- | --- | --- | +| | `TabsAlignment` | `Start` | タブ ヘッダーをヘッダー ストリップ内に配置する方法。 | +| | `TabsActivation` | `Auto` | キーボードでタブ ヘッダーにフォーカスを移動したときに、そのタブも選択するかどうか。 | +| | `string` | — | タブ ヘッダーのテキスト。`label` スロットが優先されます。 | +| | `bool` | `false` | タブが選択されているかどうか。 | +| | `bool` | `false` | タブが無効かどうか。 | + + + + + +| 名前 | 型 | 既定値 | 説明 | +| --- | --- | --- | --- | +| | `number` | `-1` | 選択されているタブ項目のインデックス。タブ項目が選択されておらず、タブ項目にコンテンツがある場合、Tabs コンポーネントは最初のタブ項目を選択します。双方向バインディングをサポートします。 | +| | `'start' \| 'end' \| 'center' \| 'justify'` | `'start'` | タブ ヘッダーをヘッダー ストリップ内に配置する方法。 | +| | `'auto' \| 'manual'` | `'auto'` | キーボードでタブ ヘッダーにフォーカスを移動したときに、そのタブも選択するかどうか。 | +| | `boolean` | `false` | 選択変更時のコンテンツ アニメーションをオフにするかどうか。 | +| | `IgxTabItemDirective` | — | 読み取り専用。選択されているタブ項目。 | +| | `QueryList` | — | 読み取り専用。Tabs のタブ項目。 | +| | `boolean` | `false` | タブ項目が選択されているかどうか。双方向バインディングをサポートします。 | +| | `boolean` | `false` | タブ項目が無効かどうか。 | + + + + + +## メソッド + + + + + +{Platform} Tabs コンポーネントは、次のメソッドを公開します。このメソッドは、change イベントを発行せずに選択を変更します。 + +| メソッド | 説明 | +| --- | --- | +| | 渡したタブ、または渡した文字列に一致する `id` もしくは `label` を持つタブを選択します。無効なタブとどのタブにも一致しない文字列は無視されます。 | + + + + + +{Platform} Tabs コンポーネントは、次のメソッドを公開します。各メソッドには、`Async` サフィックスのない同期バージョンもあります。 + +| メソッド | 説明 | +| --- | --- | +| | 渡した文字列に一致する `id` または `Label` を持つタブを、`Change` を発生させずに選択します。無効なタブとどのタブにも一致しない文字列は無視されます。 | +| | 選択されているタブの `Label` を返します。タブに `Label` がない場合は `id` を返します。 | + + + +## イベント + +{Platform} Tabs コンポーネントは、次のイベントを発行します。 + + + +| 名前 | 型 | 説明 | +| --- | --- | --- | +| `igcChange` | `CustomEvent``CustomEvent``EventCallback` | ユーザーがクリックまたはキーでタブを選択したときに発行されます。イベントの detail には、選択されたタブが含まれます。 | + + + + + +| 名前 | 説明 | +| --- | --- | +| | 選択インデックスが変更される前に、 とともに発行されます。現在のタブを維持するには `cancel` を設定し、別のタブを選択するには `newIndex` を変更します。 | +| | 選択インデックスが変更された後に、新しいインデックス (`number`) とともに発行されます。`[(selectedIndex)]` 双方向バインディングを有効にします。 | +| | 選択されたタブ項目が変更された後に、変更前と変更後のタブ項目を保持する とともに発行されます。 | +| | タブ項目が選択または選択解除されたときに、`boolean` とともに発行されます。`[(selected)]` 双方向バインディングを有効にします。 | + + + +## スタイル設定 + +{Platform} Tabs コンポーネントは、テーマから色を取得します。次の CSS 変数で色を変更します: + +| 変数 | 変更内容 | +| --- | --- | +| `--ig-tabs-item-background` | タブ ヘッダーの背景。 | +| `--ig-tabs-item-text-color` | タブ ヘッダーのテキストの色。 | +| `--ig-tabs-item-icon-color` | タブ ヘッダーのアイコンの色。 | +| `--ig-tabs-item-hover-background` | ホバーまたはフォーカスされたタブ ヘッダーの背景。 | +| `--ig-tabs-item-hover-color` | ホバーまたはフォーカスされたタブ ヘッダーのテキストの色。 | +| `--ig-tabs-item-active-background` | 選択されたタブ ヘッダーの背景。 | +| `--ig-tabs-item-active-color` | 選択されたタブ ヘッダーのテキストの色。 | +| `--ig-tabs-item-active-icon-color` | 選択されたタブ ヘッダーのアイコンの色。 | +| `--ig-tabs-item-disabled-color` | 無効なタブ ヘッダーのテキストの色。 | +| `--ig-tabs-item-disabled-icon-color` | 無効なタブ ヘッダーのアイコンの色。 | +| `--ig-tabs-indicator-color` | 選択されたタブ ヘッダーの下にあるインジケーターの色。 | +| `--ig-tabs-button-background` | スクロール ボタンの背景。 | +| `--ig-tabs-button-color` | スクロール ボタンのアイコンの色。 | +| `--ig-tabs-button-hover-background` | ホバーされたスクロール ボタンの背景。 | +| `--ig-tabs-button-disabled-color` | 無効なスクロール ボタンのアイコンの色。 | +| `--ig-tabs-header-background` | タブ ヘッダーの背後にあるヘッダー ストリップの背景。 | + + + +`igc-tabs` 要素は、次の CSS パーツを公開します: + +| パーツ | スタイル設定の対象 | +| --- | --- | +| `start-scroll-button` | 開始スクロール ボタン。 | +| `end-scroll-button` | 終了スクロール ボタン。 | +| `selected-indicator` | 選択されたタブ ヘッダーの下にあるインジケーター。 | + +`igc-tab` 要素は、次の CSS パーツを公開します: + +| パーツ | スタイル設定の対象 | +| --- | --- | +| `tab-header` | タブのヘッダー。 | +| `prefix` | `prefix` スロットのコンテナー。 | +| `content` | `label` スロットのコンテナー。 | +| `suffix` | `suffix` スロットのコンテナー。 | +| `tab-body` | タブのコンテンツ。選択されているタブでのみ表示されます。 | + + + +### Sass テーマ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。`tabs-theme` 関数のプライマリ パラメーターは、テーマがすべてのタブ状態の色を導出する `$item-background` と、インジケーターの色を導出する `$item-active-color` です。この関数でテーマを作成し、`tokens()` ミックスインでインクルードします。これにより、インクルードしたスコープに、対応する `--ig-tabs-*` 変数が出力されます。 + + + +```scss +@use "igniteui-angular/theming" as *; + +$custom-tabs-theme: tabs-theme( + $item-background: #292826, + $item-active-color: #f4d45c +); + +:host { + @include tokens($custom-tabs-theme); } +``` + + + + + +Sass 関数は `igniteui-theming` パッケージに含まれています。Sass のセットアップについては、[テーマ](../themes/overview.mdx)トピックを参照してください。 + +```scss +@use "igniteui-theming" as *; + +$custom-tabs-theme: tabs-theme( + $item-background: #292826, + $item-active-color: #f4d45c +); -igc-tab:not([selected]) igc-icon { - --item-icon-color: var(--ig-gray-500); +:root { + @include tokens($custom-tabs-theme); } +``` + + + +### CSS 変数 -igc-tabs::part(start-scroll-button), -igc-tabs::part(end-scroll-button) { - --background: var(--ig-surface-600); - --hover-background: var(--ig-surface-700); - --active-background: var(--ig-surface-700); - --disabled-background: var(--ig-gray-100); - --button-color: var(--ig-gray-700); - --button-hover-color: var(--ig-gray-800); - --button-disabled-color: var(--ig-gray-300); - --border-color: var(--ig-surface-600); +Sass のビルド手順なしでローカルにスタイルを設定する必要がある場合は、Tabs コンポーネントまたはコンテナーに CSS 変数を設定します: + +```css +.profile-tabs { + --ig-tabs-item-active-color: #e41c77; + --ig-tabs-indicator-color: #e41c77; } +``` + + +その他のスタイルには CSS パーツを使用します: + +```css igc-tab::part(tab-header) { - --item-hover-color: var(--ig-success-500); + font-weight: 600; } -igc-tab::part(tab-header)::before { - --border-color--hover: var(--ig-gray-500); +igc-tabs::part(selected-indicator) { + opacity: 0.8; } ``` - + + + + + + + + + + + + +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して、{Platform} Tabs のスタイルを設定できます。最初に [Tailwind をセットアップ](../themes/misc/tailwind-classes.mdx)[Tailwind をセットアップ](../themes/tailwind.mdx)してください。 + + + +グローバル スタイルシートに Ignite UI ユーティリティをインポートします: + +```css +@import "tailwindcss"; +@import "igniteui-theming/tailwind/utilities/material.css"; +``` + +対応するテーマには `light-tabs` クラスまたは `dark-tabs` クラスを使用し、生成された CSS 変数を任意のプロパティでオーバーライドします: + +```html + + ... + +``` + +感嘆符 (`!`) により、Tailwind ユーティリティが Tabs の既定のテーマ スタイルより優先されます。 + + + + + +Tailwind の任意のプロパティで `--ig-tabs-*` CSS 変数を設定します: + + + + + +```html + + ... + +``` + + + + + +```tsx + + ... + +``` + + + + + +```razor + + ... + +``` + + + + + + + + + + + + + + + +## アクセシビリティ + +{Platform} Tabs コンポーネントは、WAI-ARIA タブ パターンのロールを使用します。ユーザーは Tab キーでタブ ヘッダーに移動し、矢印キーでヘッダー間を移動し、タブを選択してそのコンテンツを表示します。 + +### キーボード操作 + + + +{Platform} Tabs コンポーネントのヘッダー ストリップは単一のタブ ストップです。タブ順序に含まれるのは、選択されているタブ ヘッダーのみ、またはタブが選択されていない場合は最初の有効なタブ ヘッダーです。選択されているタブのコンテンツが次のタブ ストップです。タブ ヘッダーにフォーカスがある間は、次のキーが機能します: + +| キー | 動作 | +| --- | --- | +| Tab / Shift + Tab | フォーカスをヘッダー ストリップの外へ、選択されているタブのコンテンツまたは前のフォーカス可能な要素に移動します。Tabs コンポーネントはこれらのキーを処理しません。 | +| Arrow Right | フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。右から左へのレイアウトでは、前のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Arrow Left | フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。右から左へのレイアウトでは、次のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Home | フォーカスを最初の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| End | フォーカスを最後の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Enter / Space | フォーカスされたタブを選択します。 | + +{Platform} Tabs コンポーネントは、`keydown` でこれらのキーを次のように処理します: + +- 既定の動作を抑止するため、矢印キー、Home、End、Space でページはスクロールしません。 +- 押し続けたキーは、動作を繰り返しません。 +- Shift、Ctrl、Alt、Meta キーと同時に押したキーは、何も行いません。 +- Tabs コンポーネントは、フォーカスを受け取ったヘッダーが表示されるようにスクロールします。 + +ポインターでは、タブ ヘッダーをクリックすると、そのタブにフォーカスが移動して選択されます。無効なタブはクリックを無視します。スクロール ボタンはタブ順序に含まれません。 + + + + +Angular Tabs コンポーネントでは、選択されているタブ ヘッダーのみがタブ順序に含まれるため、ヘッダー ストリップは単一のタブ ストップです。タブ項目が選択されていない場合、タブ ヘッダーはタブ順序に含まれません。選択されているタブのコンテンツが次のタブ ストップです。タブ ヘッダーにフォーカスがある間は、次のキーが機能します: + +| キー | 動作 | +| --- | --- | +| Tab / Shift + Tab | フォーカスをヘッダー ストリップの外へ、選択されているタブのコンテンツまたは前のフォーカス可能な要素に移動します。Tabs コンポーネントはこれらのキーを処理しません。 | +| Arrow Right | フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。右から左へのレイアウトでは、前のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Arrow Left | フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。右から左へのレイアウトでは、次のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Home | フォーカスを最初の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| End | フォーカスを最後の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Enter / Space | `manual` アクティブ化では、フォーカスされたタブのヘッダーをクリックして、そのタブを選択します。 | + +ポインターでは、タブ項目にコンテンツがある場合、タブ ヘッダーをクリックするとそのタブが選択されます。無効なタブ ヘッダーはクリックを無視します。スクロール ボタンはタブ順序に含まれません。 + + + +### スクリーン リーダー / ARIA + + + +{Platform} Tabs コンポーネントは、次のロールと属性をレンダリングします: + +| 要素 | ロール | 属性 | +| --- | --- | --- | +| `igc-tabs` | `tablist` | `aria-orientation="horizontal"`。要素の内部機能を通じて設定されます | +| 各タブの `tab-header` パーツ | `tab` | `aria-selected`、`aria-disabled`、タブのコンテンツを指す `aria-controls`、`aria-posinset`、`aria-setsize` | +| 各タブの `tab-body` パーツ | `tabpanel` | タブのヘッダーを指す `aria-labelledby` | + +{Platform} Tabs コンポーネントは、支援技術に対して次のように動作します: + +- タブは、ヘッダーのコンテンツ (`label` プロパティまたは `label` スロット、および `prefix` スロットと `suffix` スロットのコンテンツ) からアクセシブル名を取得します。 +- 選択されていないタブのコンテンツは非表示かつ `inert` になるため、支援技術とキーボードはそれをスキップします。 +- 各タブ ヘッダーの `aria-posinset` 属性と `aria-setsize` 属性により、スクリーン リーダーにセット内のタブの位置 (「3 個中 2 番目」など) が伝えられます。 +- Tabs コンポーネントはライブ リージョンを使用しません。選択の変更は、`aria-selected` 状態とフォーカスを通じて支援技術に伝わります。 + + + + + +Angular Tabs コンポーネントは、次のロールと属性をレンダリングします: + +| 要素 | ロール | 属性 | +| --- | --- | --- | +| ヘッダー内の `div.igx-tabs-header__wrapper` 要素 | `tablist` | — | +| `igx-tab-header` | `tab` | `aria-selected`、`aria-disabled`、およびタブ項目にコンテンツがある場合は `id` とコンテンツを指す `aria-controls` | +| `igx-tab-content` | `tabpanel` | タブ項目のヘッダーを指す `aria-labelledby` | + +Angular Tabs コンポーネントは、支援技術に対して次のように動作します: + +- タブは、`igx-tab-header` のコンテンツからアクセシブル名を取得します。 +- Tabs コンポーネントは選択されているタブ項目のコンテンツのみをレンダリングするため、他のタブ項目のコンテンツは DOM に存在しません。 +- ルーターを操作するタブなど、`igx-tab-content` のないタブ項目には、`id` と `aria-controls` が設定されません。 +- Tabs コンポーネントはライブ リージョンを使用しません。選択の変更は、`aria-selected` 状態とフォーカスを通じて支援技術に伝わります。 + + + +### アクセシビリティ準拠 + +Infragistics は、Section 508 と WCAG 2.1 ガイドラインの各領域に対する {ProductName} のアクセシビリティ サポートを、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx)トピックで説明しています。 + +| 基準 | コンポーネントの準拠方法 | +| --- | --- | +| [1.3.1 情報及び関係性](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) | `tablist`、`tab`、`tabpanel` ロールが構造を公開し、各タブ パネルは `aria-labelledby` によってタブ ヘッダーでラベル付けされます。 | +| [1.4.1 色の使用](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color) | Material、Fluent、Indigo テーマでは、選択されたタブ ヘッダーの下にインジケーター ラインが表示されるため、選択状態が色だけに依存しません。 | +| [2.1.1 キーボード](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | 矢印キー、Home、End でタブ ヘッダー間を移動し、Enter と Space でフォーカスされたタブを選択します (`manual` アクティブ化の場合)。 | +| [2.1.2 キーボード トラップなし](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap) | Tabs コンポーネントは Tab キーを処理しないため、Tab と Shift + Tab でフォーカスをヘッダー ストリップの外へ移動できます。 | +| [2.4.3 フォーカス順序](https://www.w3.org/WAI/WCAG21/Understanding/focus-order) | ヘッダー ストリップは単一のタブ ストップで、その次が選択されているタブのコンテンツです。 | +| [2.4.7 フォーカスの可視化](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible) | フォーカスされたタブ ヘッダーにはテーマのホバー色が適用されるため、他のタブ ヘッダーと区別できます。 | +| [4.1.2 名前 (name)・役割 (role)・値 (value)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | 各タブ ヘッダーは、`tab` ロール、コンテンツからの名前、および `aria-selected` と `aria-disabled` による選択状態と無効状態を公開します。 | + +ユーザーの責任: + +- すべてのタブに、そのコンテンツを示すテキスト ラベルを指定します。タブはヘッダーのコンテンツからアクセシブル名を取得するため、アイコンのみのヘッダーにはテキストの代替が必要です。[タイプ](#タイプ)を参照してください。 +- テーマの色をオーバーライドする場合は、[1.4.11 非テキストのコントラスト](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast)で求められているように、選択インジケーターと背景の間で 3:1 以上のコントラスト比を維持し、フォーカスされたタブ ヘッダーが他のヘッダーと区別できるようにします。 +- 順次プロセスのステップに Tabs を使用しないでください。ステップの順序を伝える Stepper を使用します。 +- キーボード ユーザーがヘッダー ストリップに到達できるように、タブ項目を選択された状態に保ち、ルーターを操作するタブには `manual` アクティブ化を設定します。 ## API リファレンス -
-
-
-
-
+{Platform} Tabs の API リファレンスには、対象プラットフォームの API サーフェス全体が一覧表示されます。 + + + +- +- + + + + + +- +- +- +- +- +- +- + + + +## 依存関係 + +{Platform} Tabs コンポーネントが色とサイズを適用するには、テーマが必要です。フレームワーク固有のセットアップについては、[**はじめに**](../general/getting-started.mdx)[**はじめに**](../general-getting-started.mdx)を参照してください。 + + + +Angular Tabs のスクロール ボタンは Icon Button と Icon を使用し、`theme()` ミックスインはそれらのスタイルを Tabs のスタイルとともに含めます。 + + + + + +`IgcTabsComponent` の登録により、`igc-tab` 要素とスクロール ボタンの `igc-icon-button` 要素も登録されます。Icon など、タブ内に配置するコンポーネントは別途登録してください。 + + + + + +`IgbIconModule` など、タブ内に配置するコンポーネントのモジュールは別途登録してください。 + + ## その他のリソース -- [{ProductName} **フォーラム (英語)**]({ForumsLink}) -- [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file +次のリソースでは、{Platform} Tabs のその他のガイダンスとプロジェクトのサポートを提供しています: + +- [Tabs - デザイン システム コンポーネント](https://www.infragistics.com/products/indigo-design/help/components/tabs) +- [{ProductName} **フォーラム**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) + +## 関連コンポーネント + +{Platform} Tabs コンポーネントは、一度に関連するコンテンツの 1 つのセクションを表示します。コンテンツに異なる構造が必要な場合は、次のコンポーネントを使用します: + +- [Stepper](../stepper.mdx)[Stepper](./stepper.mdx) - チェックアウト プロセスなど、ユーザーが一連のステップを完了する場合は、Stepper (ステッパー) を使用します。 +- [Accordion](./accordion.mdx) - ユーザーが縦方向のリストの複数のセクションを同時に展開する必要がある場合は、Accordion (アコーディオン) を使用します。 +- [Bottom Navigation](../tabbar.mdx) - モバイル アプリのトップレベルのビューを画面下部から切り替えるには、Bottom Navigation を使用します。 + +## FAQ + +これらの質問では、{Platform} Tabs の一般的なセットアップ、アクセシビリティ、使用シナリオを取り上げます。 + + + + Angular Tabs の `selectedIndex` プロパティを設定するか、タブ項目の `selected` 入力を `true` に設定します。Angular Tabs コンポーネントは、これらの変更に対しても `selectedIndexChanging` と `selectedItemChange` を発行します。{Platform} Tabs の `select` メソッドを、タブ、またはタブの `id` もしくは `label` を指定して呼び出すか、タブの `selected` を設定します。{Platform} Tabs コンポーネントは、コードで行った選択に対して change イベントを発行しません。Blazor Tabs の `SelectAsync` メソッドを、タブの `id` または `Label` を指定して呼び出すか、タブの `Selected` を設定します。Blazor Tabs コンポーネントは、コードで行った選択に対して `Change` を発生させません。 + + + はい。Angular Tabs の `selectedIndexChanging` イベントを処理し、`cancel` を `true` に設定して現在のタブを維持します。たとえば、タブ内のフォームに未保存の変更がある場合です。タブを常に使用不可にするには、タブ項目の `disabled` を設定します。{Platform} Tabs コンポーネントの change イベントは、選択が変更された後に発行されるため、キャンセルできません。ユーザーが開いてはならないタブには `disabled` を設定し、使用可能になったときに有効にします。 + + + いいえ。Angular Tabs コンポーネントは、選択されているタブ項目のコンテンツを DOM に追加し、他のタブ項目のコンテンツを DOM から削除します。`document.querySelector` などの DOM を照会するコードは、選択されているタブ項目のコンテンツのみを検出します。はい。{Platform} Tabs コンポーネントはすべてのタブのコンテンツを DOM に保持し、選択されていないタブのコンテンツを非表示にして `inert` にするため、そのタブが選択されるまで、ユーザーと支援技術はそれにアクセスできません。 + + + いいえ。{Platform} Tabs コンポーネントは、ユーザーが任意の順序で開くことができる関連情報を整理するものであり、ステップの順序を伝えません。チェックアウトや構成ウィザードなどの順次プロセスには、{Platform} Stepper を使用します。 + + From ca33dfced165211824b7aa54738a19fa52e9fdab Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Tue, 10 Nov 2026 17:17:01 +0200 Subject: [PATCH 3/4] Mirror the English Tabs toc entry in the JP xplat toc #935 removed exclude: ["Angular"] from the Tabs entry and marked it updated. Without the same change in the JP toc, generate.mjs skips layouts/tabs for Angular, and the Angular JP site loses Tabs once #1038 removes the native JP tabs.mdx. Co-Authored-By: Claude Opus 5.5 --- docs/xplat/src/content/jp/toc.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/xplat/src/content/jp/toc.json b/docs/xplat/src/content/jp/toc.json index 2ff0117227..3b0ea2314f 100644 --- a/docs/xplat/src/content/jp/toc.json +++ b/docs/xplat/src/content/jp/toc.json @@ -3120,11 +3120,9 @@ ] }, { - "exclude": [ - "Angular" - ], "name": "タブ", "href": "layouts/tabs.mdx", + "updated": true, "include": [ "Web" ] From 5a67ab84c16fc316c94f7f2855aff9c197ba4d31 Mon Sep 17 00:00:00 2001 From: norikois <33947244+norikois@users.noreply.github.com> Date: Wed, 11 Nov 2026 13:40:21 +0900 Subject: [PATCH 4/4] fix: update accessibility documentation and sample descriptions for Tabs component in Japanese --- .../accessibility-compliance.mdx | 4 +- .../content/jp/components/layouts/tabs.mdx | 46 +++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx index 16c04260de..307c86c8eb 100644 --- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -117,7 +117,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Slider](../slider/slider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Snackbar](../snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Switch](../inputs/switch.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Tabs](../layouts/tabs.mdx#accessibility) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/tabs.mdx#accessibility) | +| [Tabs](../layouts/tabs.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/tabs.mdx#アクセシビリティ) | | [Time Picker](../time-picker.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../time-picker.mdx#キーボード-ナビゲーション) | | [Toast](../toast.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Tooltip](../tooltip.mdx) | ドキュメント化済み | 未ドキュメント化 | [アクセシビリティ](../tooltip.mdx#ユーザー補助) | @@ -166,7 +166,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Snackbar](../notifications/snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Stepper](../layouts/stepper.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../layouts/stepper.mdx#キーボード-ナビゲーション) | | [Switch](../inputs/switch.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Tabs](../layouts/tabs.mdx#accessibility) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/tabs.mdx#accessibility) | +| [Tabs](../layouts/tabs.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/tabs.mdx#アクセシビリティ) | | [Text Area](../inputs/text-area.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Toast](../notifications/toast.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Tooltip](../inputs/tooltip.mdx#アクセシビリティと-aria-サポート) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/tooltip.mdx#アクセシビリティと-aria-サポート) | diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index af1ef71d92..2376492dd2 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -44,13 +44,13 @@ Angular Tabs コンポーネントのセレクターは `igx-tabs` です。そ - + - + @@ -61,9 +61,9 @@ Angular Tabs コンポーネントのセレクターは `igx-tabs` です。そ