From ae0bf89ccfde841da05359aec1f4fb0c75fcd935 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 12 Nov 2026 15:08:33 +0000 Subject: [PATCH 1/2] docs(jp): sync tabs headerPosition Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../content/jp/components/layouts/tabs.mdx | 135 +++++++++++++++--- 1 file changed, 119 insertions(+), 16 deletions(-) diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index 864e4c7b6e..0b6619c984 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -3,7 +3,7 @@ title: "{Platform} Tabs (タブ) コンポーネント" description: "{ProductName} Tabs コンポーネントは、関連するコンテンツをタブに整理し、選択したタブのコンテンツを表示します。タブが収まらない場合はスクロール ボタンが追加されます。" keywords: "{Platform} Tabs, {ProductName}, tab header, tab panel, scroll buttons, {Platform} タブ, タブ ヘッダー, タブ パネル, スクロール ボタン" license: MIT -last_updated: "2026-11-04" +last_updated: "2026-11-11" relatedComponents: ["Stepper", "Accordion"] mentionedTypes: ["Tabs", "Tab"] _language: ja @@ -87,7 +87,7 @@ Angular Tabs コンポーネントのセレクターは `igx-tabs` です。そ -`igc-tabs` 要素は、ヘッダー ストリップとスクロール ボタンをレンダリングします。各 `igc-tab` は自身のヘッダーとコンテンツをレンダリングし、Tabs コンポーネントはすべてのタブのコンテンツをヘッダー ストリップの下に配置します: +`igc-tabs` 要素は、ヘッダー ストリップとスクロール ボタンをレンダリングします。各 `igc-tab` は自身のヘッダーとコンテンツをレンダリングし、Tabs コンポーネントはすべてのタブのコンテンツをヘッダー ストリップの下、またはタブ ヘッダーが列になる場合はその横に配置します: ```text igc-tabs[role="tablist"] @@ -108,7 +108,7 @@ igc-tabs[role="tablist"] │ └─ 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 + └─ span // follows the selected tab header ``` @@ -639,6 +639,97 @@ Tabs は、幅を調整して使用可能な水平方向のスペースを埋め +### ヘッダー位置 + + + +縦方向のタブにするには、{Platform} Tabs コンポーネントの を `start` または `end` に設定します。タブ ヘッダーは、テキストの方向でコンテンツの前または後ろに列として配置されます。既定の `top` では、コンテンツの上に行として配置されます。`headerPosition` 入力には、`igniteui-angular` 22.3.0 以降が必要です。`headerPosition` プロパティには、`igniteui-webcomponents` 7.5.0 以降が必要です。 + + + + + +```html + + +

Update your name, photo, and contact details.

+ + +

Change your password and sign-in options.

+ + +

Choose which updates you receive by email.

+ + +``` + +```ts +import type { TabsHeaderPosition } from 'igniteui-webcomponents'; + +const tabs = document.querySelector('igc-tabs')!; +const position: TabsHeaderPosition = 'end'; +tabs.headerPosition = position; +``` + + + + + +```html + + + Profile + Update your name, photo, and contact details. + + + Security + Change your password and sign-in options. + + + Notifications + Choose which updates you receive by email. + + +``` + +`strictTemplates` では、`string` 型のバインドされた値はコンパイルされません。`IgxTabsHeaderPosition` として型指定します: + +```ts +import { IgxTabsHeaderPosition } from 'igniteui-angular/tabs'; + +public position: IgxTabsHeaderPosition = IgxTabsHeaderPosition.end; +``` + +```html +... +``` + + + + + +高さを指定しない場合、{Platform} Tabs コンポーネントは、タブ ヘッダーの列または選択されているタブのコンテンツのうち、高いほうに合わせて伸びます。制限するには、コンポーネントに `height` または `max-height` を設定します。すると、高いタブのコンテンツはコンポーネント内でスクロールします。コンテナーの `max-height` では、コンポーネントを制限できません。列では、各タブ ヘッダーが列の幅いっぱいになり、`tabAlignment``alignment` は高さ方向に適用されます。マウス ホイールとタッチでは列のタブ ヘッダーをスクロールできませんが、スクロール ボタンとキーボードではスクロールできます。 + + + + + +タブ ヘッダーの列の横にルーティングされたビューを表示するには、Angular Tabs コンポーネントと `router-outlet` を保持する要素を `display: flex` のコンテナーに配置し、その要素に `flex: 1` と `min-width: 0` を指定します。 + + + + + + + + + + + + + + + ### 選択 @@ -855,7 +946,8 @@ Tabs は情報を整理するのに適しており、チェックアウト プ | 名前 | 型 | 既定値 | 説明 | | --- | --- | --- | --- | | | `'start' \| 'end' \| 'center' \| 'justify'` | `'start'` | タブ ヘッダーをヘッダー ストリップ内に配置する方法。 | -| | `'auto' \| 'manual'` | `'auto'` | キーボードでタブ ヘッダーにフォーカスを移動したときに、そのタブも選択するかどうか。 | +| | `'top' \| 'start' \| 'end'` | `'top'` | タブ ヘッダーを配置する位置。コンテンツの上の行、またはコンテンツの前後の列。対応する属性は `header-position` です。 | +| | `'auto' \| 'manual'` | `'auto'` | キーボードでタブ ヘッダーにフォーカスを移動したときに、そのタブも選択するかどうか。 | | | `IgcTabComponent \| null``IgrTab \| null` | `null` | 読み取り専用。選択されているタブ。 | | | `string` | `''` | 読み取り専用。選択されているタブの `label`。タブに `label` がない場合は `id`。 | | | `IgcTabComponent[]``IgrTab[]` | — | 読み取り専用。Tabs の直接の子であるタブ。 | @@ -883,6 +975,7 @@ Tabs は情報を整理するのに適しており、チェックアウト プ | --- | --- | --- | --- | | | `number` | `-1` | 選択されているタブ項目のインデックス。タブ項目が選択されておらず、タブ項目にコンテンツがある場合、Tabs コンポーネントは最初のタブ項目を選択します。双方向バインディングをサポートします。 | | | `'start' \| 'end' \| 'center' \| 'justify'` | `'start'` | タブ ヘッダーをヘッダー ストリップ内に配置する方法。 | +| | `'top' \| 'start' \| 'end'` | `'top'` | タブ ヘッダーを配置する位置。コンテンツの上の行、またはコンテンツの前後の列。 | | | `'auto' \| 'manual'` | `'auto'` | キーボードでタブ ヘッダーにフォーカスを移動したときに、そのタブも選択するかどうか。 | | | `boolean` | `false` | 選択変更時のコンテンツ アニメーションをオフにするかどうか。 | | | `IgxTabItemDirective` | — | 読み取り専用。選択されているタブ項目。 | @@ -958,7 +1051,7 @@ Tabs は情報を整理するのに適しており、チェックアウト プ | `--ig-tabs-item-active-icon-color` | 選択されたタブ ヘッダーのアイコンの色。 | | `--ig-tabs-item-disabled-color` | 無効なタブ ヘッダーのテキストの色。 | | `--ig-tabs-item-disabled-icon-color` | 無効なタブ ヘッダーのアイコンの色。 | -| `--ig-tabs-indicator-color` | 選択されたタブ ヘッダーの下にあるインジケーターの色。 | +| `--ig-tabs-indicator-color` | 選択されたタブ ヘッダーのインジケーターの色。 | | `--ig-tabs-button-background` | スクロール ボタンの背景。 | | `--ig-tabs-button-color` | スクロール ボタンのアイコンの色。 | | `--ig-tabs-button-hover-background` | ホバーされたスクロール ボタンの背景。 | @@ -973,7 +1066,7 @@ Tabs は情報を整理するのに適しており、チェックアウト プ | --- | --- | | `start-scroll-button` | 開始スクロール ボタン。 | | `end-scroll-button` | 終了スクロール ボタン。 | -| `selected-indicator` | 選択されたタブ ヘッダーの下にあるインジケーター。 | +| `selected-indicator` | 選択されたタブ ヘッダーのインジケーター。 | `igc-tab` 要素は、次の CSS パーツを公開します: @@ -1152,15 +1245,17 @@ Tailwind の任意のプロパティで `--ig-tabs-*` CSS 変数を設定しま | キー | 動作 | | --- | --- | | Tab / Shift + Tab | フォーカスをヘッダー ストリップの外へ、選択されているタブのコンテンツまたは前のフォーカス可能な要素に移動します。Tabs コンポーネントはこれらのキーを処理しません。 | -| Arrow Right | フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。右から左へのレイアウトでは、前のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | -| Arrow Left | フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。右から左へのレイアウトでは、次のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | -| Home | フォーカスを最初の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Arrow Right | フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。右から左へのレイアウトでは、前のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。タブ ヘッダーの列では、Tabs コンポーネントはこのキーを処理しません。 | +| Arrow Left | フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。右から左へのレイアウトでは、次のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。タブ ヘッダーの列では、Tabs コンポーネントはこのキーを処理しません。 | +| Arrow Down | タブ ヘッダーの列では、フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Arrow Up | タブ ヘッダーの列では、フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Home | フォーカスを最初の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | | End | フォーカスを最後の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | | Enter / Space | フォーカスされたタブを選択します。 | {Platform} Tabs コンポーネントは、`keydown` でこれらのキーを次のように処理します: -- 既定の動作を抑止するため、矢印キー、Home、End、Space でページはスクロールしません。 +- 既定の動作を抑止するため、フォーカスを移動する矢印キー、Home、End、Space でページはスクロールしません。 - 押し続けたキーは、動作を繰り返しません。 - Shift、Ctrl、Alt、Meta キーと同時に押したキーは、何も行いません。 - Tabs コンポーネントは、フォーカスを受け取ったヘッダーが表示されるようにスクロールします。 @@ -1176,8 +1271,10 @@ Angular Tabs コンポーネントでは、選択されているタブ ヘッダ | キー | 動作 | | --- | --- | | Tab / Shift + Tab | フォーカスをヘッダー ストリップの外へ、選択されているタブのコンテンツまたは前のフォーカス可能な要素に移動します。Tabs コンポーネントはこれらのキーを処理しません。 | -| Arrow Right | フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。右から左へのレイアウトでは、前のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | -| Arrow Left | フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。右から左へのレイアウトでは、次のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Arrow Right | フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。右から左へのレイアウトでは、前のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。タブ ヘッダーの列では、Tabs コンポーネントはこのキーを処理しません。 | +| Arrow Left | フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。右から左へのレイアウトでは、次のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。タブ ヘッダーの列では、Tabs コンポーネントはこのキーを処理しません。 | +| Arrow Down | タブ ヘッダーの列では、フォーカスを次の有効なタブ ヘッダーに移動し、最後のヘッダーからは最初のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | +| Arrow Up | タブ ヘッダーの列では、フォーカスを前の有効なタブ ヘッダーに移動し、最初のヘッダーからは最後のヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | | Home | フォーカスを最初の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | | End | フォーカスを最後の有効なタブ ヘッダーに移動します。`auto` アクティブ化では、そのタブも選択します。 | | Enter / Space | `manual` アクティブ化では、フォーカスされたタブのヘッダーをクリックして、そのタブを選択します。 | @@ -1194,7 +1291,7 @@ Angular Tabs コンポーネントでは、選択されているタブ ヘッダ | 要素 | ロール | 属性 | | --- | --- | --- | -| `igc-tabs` | `tablist` | `aria-orientation="horizontal"`。要素の内部機能を通じて設定されます | +| `igc-tabs` | `tablist` | `aria-orientation="horizontal"`。タブ ヘッダーの列では `aria-orientation="vertical"`。要素の内部機能を通じて設定されます | | 各タブの `tab-header` パーツ | `tab` | `aria-selected`、`aria-disabled`、タブのコンテンツを指す `aria-controls`、`aria-posinset`、`aria-setsize` | | 各タブの `tab-body` パーツ | `tabpanel` | タブのヘッダーを指す `aria-labelledby` | @@ -1213,7 +1310,7 @@ Angular Tabs コンポーネントは、次のロールと属性をレンダリ | 要素 | ロール | 属性 | | --- | --- | --- | -| ヘッダー内の `div.igx-tabs-header__wrapper` 要素 | `tablist` | — | +| ヘッダー内の `div.igx-tabs-header__wrapper` 要素 | `tablist` | `aria-orientation="horizontal"`。タブ ヘッダーの列では `aria-orientation="vertical"` | | `igx-tab-header` | `tab` | `aria-selected`、`aria-disabled`、およびタブ項目にコンテンツがある場合は `id` とコンテンツを指す `aria-controls` | | `igx-tab-content` | `tabpanel` | タブ項目のヘッダーを指す `aria-labelledby` | @@ -1233,7 +1330,7 @@ Infragistics は、Section 508 と WCAG 2.1 ガイドラインの各領域に対 | 基準 | コンポーネントの準拠方法 | | --- | --- | | [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 テーマでは、選択されたタブ ヘッダーの下にインジケーター ラインが表示されるため、選択状態が色だけに依存しません。 | +| [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) | ヘッダー ストリップは単一のタブ ストップで、その次が選択されているタブのコンテンツです。 | @@ -1254,13 +1351,16 @@ Infragistics は、Section 508 と WCAG 2.1 ガイドラインの各領域に対 - -- +- +- - +- +- - - - @@ -1325,4 +1425,7 @@ Angular Tabs のスクロール ボタンは Icon Button と Icon を使用し いいえ。{Platform} Tabs コンポーネントは、ユーザーが任意の順序で開くことができる関連情報を整理するものであり、ステップの順序を伝えません。チェックアウトや構成ウィザードなどの順次プロセスには、{Platform} Stepper を使用します。 + + {Platform} Tabs の `headerPosition` プロパティ (HTML では `header-position` 属性)を `start` または `end` に設定すると、タブ ヘッダーがコンテンツの前または後ろに列として表示されます。{Platform} Tabs のサイズを固定するには、高さを指定します。 + From ae85a44a602a34aa61236f1a27552d7957341530 Mon Sep 17 00:00:00 2001 From: mkamiishi Date: Fri, 13 Nov 2026 11:51:37 +0900 Subject: [PATCH 2/2] review: apply native check fixes to the Tabs headerPosition topic - Move the Header Position heading inside the Angular,WebComponents PlatformBlock, as in the English source, so the React and Blazor pages no longer show an empty heading - Make the text-direction and scrolling sentences read naturally - Add a half-width space after the closing parenthesis in the vertical tabs FAQ answer for Web Components Co-Authored-By: Claude Opus 5.5 --- docs/xplat/src/content/jp/components/layouts/tabs.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index 0b6619c984..8f2665764e 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -639,11 +639,11 @@ Tabs は、幅を調整して使用可能な水平方向のスペースを埋め -### ヘッダー位置 - -縦方向のタブにするには、{Platform} Tabs コンポーネントの を `start` または `end` に設定します。タブ ヘッダーは、テキストの方向でコンテンツの前または後ろに列として配置されます。既定の `top` では、コンテンツの上に行として配置されます。`headerPosition` 入力には、`igniteui-angular` 22.3.0 以降が必要です。`headerPosition` プロパティには、`igniteui-webcomponents` 7.5.0 以降が必要です。 +### ヘッダー位置 + +縦方向のタブにするには、{Platform} Tabs コンポーネントの を `start` または `end` に設定します。タブ ヘッダーは、テキストの方向に沿って、コンテンツの前または後ろに列として配置されます。既定の `top` では、コンテンツの上に行として配置されます。`headerPosition` 入力には、`igniteui-angular` 22.3.0 以降が必要です。`headerPosition` プロパティには、`igniteui-webcomponents` 7.5.0 以降が必要です。 @@ -708,7 +708,7 @@ public position: IgxTabsHeaderPosition = IgxTabsHeaderPosition.end; -高さを指定しない場合、{Platform} Tabs コンポーネントは、タブ ヘッダーの列または選択されているタブのコンテンツのうち、高いほうに合わせて伸びます。制限するには、コンポーネントに `height` または `max-height` を設定します。すると、高いタブのコンテンツはコンポーネント内でスクロールします。コンテナーの `max-height` では、コンポーネントを制限できません。列では、各タブ ヘッダーが列の幅いっぱいになり、`tabAlignment``alignment` は高さ方向に適用されます。マウス ホイールとタッチでは列のタブ ヘッダーをスクロールできませんが、スクロール ボタンとキーボードではスクロールできます。 +高さを指定しない場合、{Platform} Tabs コンポーネントは、タブ ヘッダーの列または選択されているタブのコンテンツのうち、高いほうに合わせて伸びます。制限するには、コンポーネントに `height` または `max-height` を設定します。その場合、コンポーネントより高いタブのコンテンツは、コンポーネント内でスクロールします。コンテナーの `max-height` では、コンポーネントを制限できません。列では、各タブ ヘッダーが列の幅いっぱいになり、`tabAlignment``alignment` は高さ方向に適用されます。マウス ホイールとタッチでは列のタブ ヘッダーをスクロールできませんが、スクロール ボタンとキーボードではスクロールできます。 @@ -1426,6 +1426,6 @@ Angular Tabs のスクロール ボタンは Icon Button と Icon を使用し いいえ。{Platform} Tabs コンポーネントは、ユーザーが任意の順序で開くことができる関連情報を整理するものであり、ステップの順序を伝えません。チェックアウトや構成ウィザードなどの順次プロセスには、{Platform} Stepper を使用します。 - {Platform} Tabs の `headerPosition` プロパティ (HTML では `header-position` 属性)を `start` または `end` に設定すると、タブ ヘッダーがコンテンツの前または後ろに列として表示されます。{Platform} Tabs のサイズを固定するには、高さを指定します。 + {Platform} Tabs の `headerPosition` プロパティ (HTML では `header-position` 属性) を `start` または `end` に設定すると、タブ ヘッダーがコンテンツの前または後ろに列として表示されます。{Platform} Tabs のサイズを固定するには、高さを指定します。