diff --git a/docs/angular/src/content/jp/components/chip.mdx b/docs/angular/src/content/jp/components/chip.mdx index a7c7859d5f..1c827a777c 100644 --- a/docs/angular/src/content/jp/components/chip.mdx +++ b/docs/angular/src/content/jp/components/chip.mdx @@ -103,7 +103,7 @@ Ignite UI for Angular Chips モジュールまたはディレクティブをイ ## バリアント -Angular チップは、いくつかの定義済みスタイル バリアントをサポートしています。 入力プロパティにサポートされている値のいずれか (`primary`、`info`、`success`、`warning`、または `danger`) を割り当てることで、バリアントを変更できます。 +Angular Chip は、いくつかの定義済みスタイル バリアントをサポートしています。 入力プロパティにサポートされている値のいずれか (`primary`、`info`、`success`、`warning`、または `danger`) を割り当てることで、バリアントを変更できます。 ```html Success @@ -111,6 +111,16 @@ Angular チップは、いくつかの定義済みスタイル バリアント +### アウトライン + +Angular Chip は、 プロパティを設定することで、アウトライン スタイルでレンダリングし、周囲にボーダーを表示することもできます。 + +```html +Outlined +``` + + + ### 選択 Selecting Default diff --git a/docs/angular/src/content/jp/components/list.mdx b/docs/angular/src/content/jp/components/list.mdx index 2431442d8f..6ef11bdef9 100644 --- a/docs/angular/src/content/jp/components/list.mdx +++ b/docs/angular/src/content/jp/components/list.mdx @@ -295,7 +295,7 @@ toggleFavorite(item: IgxListItem) { } ``` -また、`--ig-size` カスタム CSS プロパティを使用して、ユーザーがリストのサイズを選択できるようにすることができます。これには、`IgxButtonGroupModule` をインポートし、[**IgxButtonGroup**](/button-group) を使用してすべてのサイズ値を表示します。このようにして、選択されるたびに、リストの**サイズ**が更新されます。 +また、`--ig-size` カスタム CSS プロパティを使用して、ユーザーがリストのサイズを選択できるようにすることができます。これには、`IgxButtonGroupModule` をインポートし、[**IgxButtonGroup**](./inputs/button-group.mdx) を使用してすべてのサイズ値を表示します。このようにして、選択されるたびに、リストの**サイズ**が更新されます。 ```typescript // app.module.ts diff --git a/docs/angular/src/content/jp/components/themes/roundness.mdx b/docs/angular/src/content/jp/components/themes/roundness.mdx index 86dd22a1e7..98b8d2cf50 100644 --- a/docs/angular/src/content/jp/components/themes/roundness.mdx +++ b/docs/angular/src/content/jp/components/themes/roundness.mdx @@ -22,7 +22,7 @@ Ignite UI for Angular では、丸みを 0 から 1 の間の値で調整する `--ig-radius-factor` を 0 に設定すると、コンポーネントは最小の border-radius を使用し、角がシャープなブロック状に表示されます。1 に設定すると、最大の border-radius が適用され、より丸みを帯びた外観になります。 以下は、定義済みの最小および最大の境界半径値を持ち、`--ig-radius-factor` 変数を使用して変更できるコンポーネントのリストです。
-• [Action Strip](../action-strip.mdx) • [Button](../button.mdx) • [Button Group](../button-group.mdx) • [Calendar](../calendar.mdx) • [Card](../card.mdx) • [Carousel](../carousel.mdx) • [Checkbox](../checkbox.mdx) • [Chip](../chip.mdx) • [Combo](../combo.mdx) • [Date Picker](../date-picker.mdx) • [Date Range Picker](../date-range-picker.mdx) • [Grid](../grid/grid.mdx) • [Input Group](../input-group.mdx) • [Linear Progress](../linear-progress.mdx) • [List](../list.mdx) • [Month Picker](../month-picker.mdx) • [Navigation Drawer](../navdrawer.mdx) • [Radio](../radio-button.mdx) • [Ripple](../ripple.mdx) • [Snackbar](../snackbar.mdx) • [Switch](../switch.mdx) • [Toast](../toast.mdx) +• [Action Strip](../action-strip.mdx) • [Button](../button.mdx) • [Button Group](../inputs/button-group.mdx) • [Calendar](../calendar.mdx) • [Card](../card.mdx) • [Carousel](../carousel.mdx) • [Checkbox](../checkbox.mdx) • [Chip](../chip.mdx) • [Combo](../combo.mdx) • [Date Picker](../date-picker.mdx) • [Date Range Picker](../date-range-picker.mdx) • [Grid](../grid/grid.mdx) • [Input Group](../input-group.mdx) • [Linear Progress](../linear-progress.mdx) • [List](../list.mdx) • [Month Picker](../month-picker.mdx) • [Navigation Drawer](../navdrawer.mdx) • [Radio](../radio-button.mdx) • [Ripple](../ripple.mdx) • [Snackbar](../snackbar.mdx) • [Switch](../switch.mdx) • [Toast](../toast.mdx) ## 使用方法 diff --git a/docs/angular/src/content/jp/components/toc.json b/docs/angular/src/content/jp/components/toc.json index a99226fdfb..4824dd0c4b 100644 --- a/docs/angular/src/content/jp/components/toc.json +++ b/docs/angular/src/content/jp/components/toc.json @@ -1957,7 +1957,7 @@ }, { "name": "Button Group", - "href": "button-group.mdx" + "href": "inputs/button-group.mdx" }, { "name": "Icon Button", diff --git a/docs/angular/src/content/jp/images/anatomy-content-light/button-group-lt-a.png b/docs/angular/src/content/jp/images/anatomy-content-light/button-group-lt-a.png new file mode 100644 index 0000000000..d4990ae354 Binary files /dev/null and b/docs/angular/src/content/jp/images/anatomy-content-light/button-group-lt-a.png differ diff --git a/docs/angular/src/content/jp/images/button-group/button-group-do-1.png b/docs/angular/src/content/jp/images/button-group/button-group-do-1.png new file mode 100644 index 0000000000..4acaf050a9 Binary files /dev/null and b/docs/angular/src/content/jp/images/button-group/button-group-do-1.png differ diff --git a/docs/angular/src/content/jp/images/button-group/button-group-do-2.png b/docs/angular/src/content/jp/images/button-group/button-group-do-2.png new file mode 100644 index 0000000000..d9c79b1461 Binary files /dev/null and b/docs/angular/src/content/jp/images/button-group/button-group-do-2.png differ diff --git a/docs/angular/src/content/jp/images/button-group/button-group-do-3.png b/docs/angular/src/content/jp/images/button-group/button-group-do-3.png new file mode 100644 index 0000000000..2f016de185 Binary files /dev/null and b/docs/angular/src/content/jp/images/button-group/button-group-do-3.png differ diff --git a/docs/angular/src/content/jp/images/button-group/button-group-do-not-1.png b/docs/angular/src/content/jp/images/button-group/button-group-do-not-1.png new file mode 100644 index 0000000000..4634972692 Binary files /dev/null and b/docs/angular/src/content/jp/images/button-group/button-group-do-not-1.png differ diff --git a/docs/angular/src/content/jp/images/button-group/button-group-do-not-2.png b/docs/angular/src/content/jp/images/button-group/button-group-do-not-2.png new file mode 100644 index 0000000000..585f7ff91c Binary files /dev/null and b/docs/angular/src/content/jp/images/button-group/button-group-do-not-2.png differ diff --git a/docs/angular/src/content/jp/images/button-group/button-group-do-not-3.png b/docs/angular/src/content/jp/images/button-group/button-group-do-not-3.png new file mode 100644 index 0000000000..68d4a04dc5 Binary files /dev/null and b/docs/angular/src/content/jp/images/button-group/button-group-do-not-3.png differ diff --git a/docs/xplat/src/content/jp/components/inputs/badge.mdx b/docs/xplat/src/content/jp/components/inputs/badge.mdx index 27011abc50..a44f04c4d2 100644 --- a/docs/xplat/src/content/jp/components/inputs/badge.mdx +++ b/docs/xplat/src/content/jp/components/inputs/badge.mdx @@ -898,19 +898,49 @@ igc-badge::part(base) { ## アクセシビリティ -{Platform} Badge は視覚的なステータスを伝えるものであり、そのステータスが重要な場合は、意味のあるテキストまたは周囲のアクセシブルなコンテキストを持つ必要があります。 +{Platform} Badge は、短いカウント、状態、または通知を伝える非インタラクティブなステータス表示です。 ### キーボード インタラクション -バッジは視覚的なステータス インジケーターであり、インタラクティブなキーボード操作は提供しません。バッジが装飾する要素のフォーカス動作に従ってアクセスされます。 +バッジはフォーカスを受け取らず、キーボード入力を処理せず、コンポーネントのインタラクション イベントを公開しません。 + +| キー | アクション | +| -- | -- | +| n/a | バッジはキーボードによるインタラクティブ操作に対応していません。 | ### スクリーン リーダー / ARIA -バッジが支援技術では他に得られない情報を伝える場合は、周囲のコンポーネントに意味のある表示コンテンツまたはアクセシブルなラベルを提供してください。特定の周囲のコントロールについて、実際のアナウンス内容を確認してください。 +バッジ ホストは `role="status"` を使用して、コンテンツをステータス情報として公開します。 + + + +- コンポーネントは `aria-roledescription` を設定して、バッジとその現在の `variant` を識別します。 +- テキストのないバッジ (`dot` バッジを含む) が支援技術では他に得られないステータスを伝える場合は、`aria-label` を追加してください。 +- バッジのコンテンツまたはアクセシブルなラベルは、装飾されるアイテムに固有のものにしてください。例えば、単に `3` ではなく `3 件の未読メッセージ` のように記述してください。 + + + + + +- コンポーネントは `role="status"` と `aria-label="badge"` で初期化されます。 +- Angular はバッジの種類とそのアイコンまたは値から `aria-roledescription` を導出します。`badge` が意味のあるアクセシブル名でない場合は、`label` 入力を設定してください。 +- テキストのないバッジや `dot` バッジのステータスが支援技術では他に得られない場合は、意味のある `label` を追加してください。 + + ### アクセシビリティ準拠 -このコンポーネントのアクセシビリティ準拠は、製品の公式アクセシビリティ ステートメントおよびレンダリングされる使用状況のコンテキストに対して検証する必要があります。 +インフラジスティックスは、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) トピックで、Section 508 および WCAG 2.1 ガイドライン領域における {ProductName} のアクセシビリティ サポートを文書化しています。 + +| 基準 | コンポーネントの準拠方法 | +| -- | -- | +| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | バッジはセマンティックな `status` ロールを公開します。xplat 実装は現在のバリアントに基づくロールの説明も公開します。Angular はバッジの種類とコンテンツに基づいてアクセシブルなラベルとロールの説明を公開します。 | + +ユーザー側の責任: + +- バッジに意味のあるテキストがない場合、特に `dot` バッジの場合は、ステータスを説明するアクセシブルな名前を提供してください。 +- バッジの色のみをステータスの表示手段として使用しないでください。テキスト、アイコン、または他のアクセシブルな手掛かりと組み合わせてください。 +- テーマ スタイルをオーバーライドする際は、バッジの前景色と背景色のコントラストを十分に確保してください。 ## トラブルシューティング diff --git a/docs/xplat/src/content/jp/components/inputs/button-group.mdx b/docs/xplat/src/content/jp/components/inputs/button-group.mdx index 8ff501f24e..59a1da73fd 100644 --- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx @@ -1,42 +1,111 @@ --- -title: "{Platform} ボタン グループ コンポーネント | {ProductName}" -description: "{Platform} ボタン グループ コンポーネント - {Platform} 一連のトグル ボタンを使用して、レイアウトや選択などの機能を公開します。" -keywords: "{Platform}, UI controls, web widgets, UI widgets, {Platform} Button Group Components, Infragistics, UI コントロール, web ウィジェット, UI ウィジェット, {Platform} ボタン グループ コンポーネント, インフラジスティックス" -license: MIT +title: "ボタン グループ" +description: "{ProductName} ボタン グループ コンポーネントは、関連するトグル ボタンを整理し、水平または垂直配置、単一または複数選択、切り替えをサポートします。" +keywords: "{Platform}, UI controls, web widgets, UI widgets, {Platform} Button Group Components, Infragistics" mentionedTypes: ["ToggleButton", "ButtonGroup"] +relatedComponents: [ToggleButton] +license: MIT +last_updated: "2026-07-28" _language: ja llms: - description: "{Platform} Button Group コンポーネントは、ToggleButton を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。" + description: "{ProductName} ボタン グループは、関連するトグル ボタンを水平または垂直配置、単一または複数選択、切り替えを備えたグループに整理します。" --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; 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 Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import buttonGroupAnatomy from '@xplat-images/anatomy-content-light/button-group-lt-a.png'; +import buttonGroupDo1 from '@xplat-images/button-group/button-group-do-1.png'; +import buttonGroupDo2 from '@xplat-images/button-group/button-group-do-2.png'; +import buttonGroupDo3 from '@xplat-images/button-group/button-group-do-3.png'; +import buttonGroupDoNot1 from '@xplat-images/button-group/button-group-do-not-1.png'; +import buttonGroupDoNot2 from '@xplat-images/button-group/button-group-do-not-2.png'; +import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3.png'; +# ボタン グループ コンポーネント +{Platform} ボタン グループ コンポーネントは、 を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。 -# {Platform} Button Group (ボタン グループ) の概要 +## ライブ デモ -{Platform} Button Group コンポーネントは、 を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。 + -## {Platform} ボタンの例 + - + + -## 使用方法 + + - +## 構造 + +{Platform} ボタン グループは、関連するトグル ボタンを共有コンテナーと個々のボタン アイテムを持つ単一グループに整理します。 + + + + + +1. コンテナー: ボタンのコンテンツをラップします。
+2. アイコン: ボタンにコンテキストを追加します。左、右、左右、またはアイコンのみを設定できます。
+3. ラベル: ボタンのアクションをユーザーに説明するテキスト コンテンツです。 + +{Platform} ボタン グループはトグル ボタンを含み、各ボタンにはアイコンとラベルを含めることができます。 + +```text +Button Group +└── Toggle Button + ├── Icon + └── Label +``` + +## 作業の開始 + + + +{Platform} ボタン グループを使用するには、基本的なプロジェクト設定について [{ProductName} の作業の開始](/general/getting-started) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。 + + + + + +{Platform} ボタン グループを使用するには、基本的なプロジェクト設定について [{ProductName} の作業の開始](../general-getting-started.mdx) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。 + + +### 前提条件とバージョン互換性 -まず、次のコマンドを実行して {ProductName} をインストールする必要があります: +ターゲット フレームワークでサポートされているバージョンの {ProductName} パッケージを使用してください。フレームワーク パッケージ、ボタン グループ パッケージ、テーマ パッケージを同じリリース バージョンに保ってください。 + + + +**{PackageWebComponents}** パッケージを使用する Web Components の場合は、パッケージをインストールします。 ```cmd npm install {PackageWebComponents} ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、 とそのテーマ CSS をインポートし、コンポーネントを登録します。 ```ts import { defineComponents, IgcButtonGroupComponent } from "igniteui-webcomponents"; @@ -47,18 +116,15 @@ defineComponents(IgcButtonGroupComponent); - - - -まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: +**igniteui-react** パッケージを使用する React の場合は、パッケージをインストールします。 ```cmd npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、ボタン グループ ラッパーとそのテーマ CSS をインポートします。 ```tsx import { IgrButtonGroup } from 'igniteui-react'; @@ -67,12 +133,9 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - - - - を使用する前に、次のように登録する必要があります: +**IgniteUI.Blazor** パッケージを使用する Blazor の場合は、次のようにボタン グループ モジュールを登録します。 ```csharp // in Program.cs file @@ -80,7 +143,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); ``` -また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +次に、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに追加の CSS ファイルをリンクします。 ```razor @@ -88,12 +151,80 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); + -{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。 +**igniteui-angular** パッケージを使用する Angular の場合は、パッケージをインストールします。 -{ProductName} ボタン グループがインポートされたので、 とそのボタンの基本構成を開始できます。 +```cmd +ng add igniteui-angular +``` - セレクターを使用して、 をラップし、ボタン グループに表示します。デフォルトでボタンを選択したい場合、 属性を使用します。 +次に、NgModule アプリケーションでは `IgxButtonGroupModule` をインポートするか、コンポーネントの `imports` コレクションに `IGX_BUTTON_GROUP_DIRECTIVES` と必要なスタンドアロン コンポーネントをインポートします。 + +```ts +import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +Ignite UI for Angular の完全な紹介については、[**作業の開始**](/general/getting-started) トピックをお読みください。 + + + + を使用する最もシンプルな方法は次のとおりです。 + + + +```html + +``` + + + + + +```tsx + +``` + + + + + +```razor + +``` + + + + + +```html + +``` + + + +## 使用方法 + + を使用して コンポーネントをラップします。デフォルトでボタンを選択するには、 属性を使用します。 + + + +```html + + + + + +``` + + @@ -173,25 +304,71 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); -## コード例 - ### 配置 - プロパティを使用して、ボタン グループ内のボタンの方向を設定します。 - +ボタン グループは水平および垂直レイアウトをサポートします。 プロパティを使用して、グループ内のボタンの方向を設定します。 + + + +Angular の場合は、`ButtonGroupAlignment` 列挙型で `alignment` 入力を設定します。 + +```ts +import { ButtonGroupAlignment } from 'igniteui-angular/button-group'; + +public alignment = ButtonGroupAlignment.vertical; +``` + +```html + + + + + + +``` + + + + + + + + + ### 選択 -{ProductName} の選択を構成するには、その プロパティを使用できます。このプロパティは、次の 3 つのモードを受け入れます: + +{ProductName} の選択を構成するには、プラットフォーム固有の選択プロパティを使用します。Angular の場合は 、React、Web Components、Blazor の場合は を使用します。使用可能なモードは次のとおりです。 - **single** - ボタン グループのデフォルトの選択モードです。ユーザーは単一のボタンを選択/選択解除できます。 -- **single-required** - ラジオ グループの動作を模倣します。選択できるボタンは 1 つだけであり、最初に選択すると、ユーザーの操作を通じて選択を解除することはできません。 +- **single-required** - ラジオ グループの動作を模倣します。選択できるボタンは 1 つだけで、最初に選択すると、ユーザーの操作によって選択解除することはできません。 - **multiple** - グループ内の複数のボタンを選択または選択解除できます。 以下のサンプルは、公開された 選択モードを示しています。 - + + +Angular の選択モードは `single`、`singleRequired`、`multi` です。 + +`selectionMode` 入力を設定して選択の動作を構成します。 + +```html + + + + + +``` + + + + + + + + は、 属性または の 属性を通じて選択済みとしてマークできます。 @@ -260,20 +437,466 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); - - の プロパティを使用するには、 属性の設定が必須です。 + + + の プロパティを使用するには、 の 属性の設定が必須です。 +### 状態 + +グループ内の各ボタンは、有効および無効のバリアントをサポートし、選択済みまたは未選択の状態にできます。含まれる コンポーネントが提供する状態動作を使用します。 + + + + + + + + + + + + + +### インタラクション状態 + +グループ内の有効なボタンは、アイドル、ホバー、フォーカスのインタラクション状態をサポートします。含まれる コンポーネントが提供する状態動作を使用します。 + + + + + + + + + + + + + +### レイアウト テンプレート + +各ボタンにはテキスト、アイコン、またはその両方を使用できます。グループ全体でコンテンツ スタイルを統一し、ボタン コンテンツ API を使用して各ボタンに表示するアイコンとラベルを制御します。 + + + + + + + + + + + + + +### カスタム トグル ボタン + + + +Angular の場合は、`values` 入力を使用してカスタマイズされたボタンの配列を指定します。各アイテムには `label`、`icon`、`selected`、`disabled`、`togglable` などのプロパティを定義できます。 + +コンポーネント クラスでボタンの値を定義します。 + +```ts +interface IButton { + label?: string; + icon?: string; + disabled?: boolean; + togglable?: boolean; + selected?: boolean; + color?: string; +} + +public bordersButtons: IButton[] = [ + { icon: 'border_top', selected: true }, + { icon: 'border_right' }, + { icon: 'border_bottom' }, + { icon: 'border_left' } +]; +``` + +```html + +``` + +完全な `values` モデルと構成については、Angular ボタン グループのサンプルを参照してください。 + + + + + + + +Web Components の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 + +ボタン グループとトグル ボタン コンポーネントを登録します。 + +```ts +import { defineComponents, IgcButtonGroupComponent, IgcToggleButtonComponent, IgcIconComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcButtonGroupComponent, IgcToggleButtonComponent, IgcIconComponent); +``` + +次に、マークアップでカスタム ボタンを定義します。 + +```html + + + + + + + + + + + +``` + + + + + + + +React の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 + +ボタン グループ、トグル ボタン、アイコン コンポーネントをインポートします。 + +```tsx +import { IgrButtonGroup, IgrToggleButton, IgrIcon } from 'igniteui-react'; +``` + +次に、JSX でカスタム ボタンを定義します。 + +```tsx + + + + + + + + + + + +``` + + + + + + + +Blazor の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 + +`Program.cs` でボタン グループ モジュールを登録します。 + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); +``` + +次に、Razor マークアップでカスタム ボタンを定義します。 + +```razor + + + + + + + + + + + +``` + + + + + ### サイズ `--ig-size` CSS カスタム プロパティを使用して、ボタン グループのサイズを制御できます。 - + +```scss +igx-buttongroup { + --ig-size: var(--ig-size-small); +} +``` + +```html + +``` + + + + + + + +```tsx + + +``` + + + + + +```html + +``` + + + + + +```razor + +``` + + + + + + + + + +### 使用すべき場合と使用すべきでない場合 + +**使用する場合:** ユーザーが 1 つまたは複数のオプションを選択できる関連するトグル アクションを整理するためにボタン グループを使用します。 + +**使用しない場合:** 関連のないアクションや単一のトグル アクションにはボタン グループを使用しないでください。代わりにスタンドアロンの を使用します。 + +
+ + + + + + + + + + + + + + + + + + + + + +
DoDon't
ボタン グループの Do 例 1ボタン グループの Don't 例 1
ボタン グループの Do 例 2ボタン グループの Don't 例 2
ボタン グループの Do 例 3ボタン グループの Don't 例 3
+
+ +## プロパティ + +ボタン グループのプロパティはコンポーネント API リファレンスから生成されます。 + +プロパティの行は、ドキュメントのビルド時に型付き API ソースから注入されます。 + +| 名前 | タイプ | デフォルト | 説明 | +| --- | --- | --- | --- | +| | `ButtonGroupAlignment` | `horizontal` | グループ内のボタンの方向を設定します。 | +| | `ButtonGroupSelection` | `single` | グループ内のボタンの選択モードを設定します。 | +| | `string[]` | `[]` | 選択されているボタンの値を取得または設定します。各トグル ボタンには一意の `value` が必要です。 | ## スタイル設定 - コンポーネントは、ボタン グループ コンテナーのスタイルを設定できる `group` CSS パーツを公開します。 -また、 は、ボタン要素のスタイルを設定するために使用できる `toggle` CSS パーツを提供します。 + + +Angular ボタン グループ テーマは、グループ アイテムとそのインタラクション状態の Sass パラメーターを公開します。プライマリ テーマ プロパティを変更すると、関連する状態プロパティが更新され、コンポーネントの視覚的な一貫性が保たれます。 + +### Sass テーマ + +Angular テーマ システムを使用して、アプリケーションの他の部分と一貫したスタイルでボタン グループをカスタマイズします。 + +カスタム ボタン グループ テーマを作成する前に Angular テーマ関数をインポートします。 + +```scss +@use "igniteui-angular/theming" as *; +``` + +`button-group-theme` でテーマを作成し、コンポーネント スコープに含めます。 + +```scss +$custom-button-group: button-group-theme( + $item-background: #57a5cd, +); + +:host { + @include tokens($custom-button-group); +} +``` + +### CSS 変数 + +Angular テーマ トークンを使用して、ボタン グループ アイテムの色とインタラクション状態をカスタマイズします。以下のプライマリ Sass パラメーターは関連する状態トークンを更新します。 + +| プライマリ プロパティ | 依存プロパティ | 説明 | +| --- | --- | --- | +| `$item-background` | `$item-hover-background` | アイテムのホバー背景。 | +| | `$item-selected-background` | 選択済みアイテムの背景。 | +| | `$item-focused-background` | フォーカスされたアイテムの背景。 | +| | `$disabled-background-color` | 無効なアイテムの背景。 | +| | `$item-border-color` | デフォルトのアイテム境界線の色。 | +| | `$item-text-color` | デフォルトのアイテム テキスト色。 | +| | `$idle-shadow-color` | アイドル アイテムのシャドウ色。 | +| `$item-hover-background` | `$item-selected-hover-background` | 選択済みアイテムのホバー背景。 | +| | `$item-focused-hover-background` | フォーカスされたホバー背景。 | +| | `$item-hover-text-color` | ホバーされたアイテムのテキスト色。 | +| | `$item-hover-icon-color` | ホバーされたアイテムのアイコン色。 | +| `$item-selected-background` | `$item-selected-focus-background` | 選択済みアイテムのフォーカス背景。 | +| | `$disabled-selected-background` | 無効な選択済みの背景。 | +| | `$item-selected-text-color` | 選択済みアイテムのテキスト色。 | +| | `$item-selected-icon-color` | 選択済みアイテムのアイコン色。 | +| | `$item-selected-hover-text-color` | 選択済みホバー アイテムのテキスト色。 | +| | `$item-selected-hover-icon-color` | 選択済みホバー アイテムのアイコン色。 | +| `$item-border-color` | `$item-hover-border-color` | ホバーされたアイテムの境界線の色。 | +| | `$item-focused-border-color` | フォーカスされたアイテムの境界線の色。 | +| | `$item-selected-border-color` | 選択済みアイテムの境界線の色。 | +| | `$item-selected-hover-border-color` | 選択済みホバー アイテムの境界線の色。 | +| | `$item-disabled-border` | 無効なアイテムの境界線の色。 | +| | `$disabled-selected-border-color` | 無効な選択済みの境界線の色。 | + +### スタイル パーツ + +ボタン グループとそれに含まれるトグル ボタンをターゲットにするには、次の CSS パーツを使用します。 + +| パーツ | コンポーネント | スタイルの対象 | +| --- | --- | --- | +| `group` | | ボタン グループ コンテナー。 | +| `toggle` | | 個々のトグル ボタン。 | + +### カスタム スタイル設定 + +次の例では、グループの背景とパディングを変更し、含まれるトグル ボタンのテキスト色を変更します。 + +| セレクター | 宣言 | 効果 | +| --- | --- | --- | +| `igx-button-group::part(group)` | `background-color`、`padding` | ボタン グループ コンテナーの背景とスペースを変更します。 | +| `igx-toggle-button::part(toggle)` | `color` | 個々のトグル ボタンのテキスト色を変更します。 | + +```css +igx-button-group::part(group) { + background-color: var(--ig-primary-500); + padding: 8px; +} + +igx-toggle-button::part(toggle) { + color: var(--ig-secondary-300); +} +``` + + + +### Tailwind によるスタイル設定 + +Ignite UI の Tailwind ユーティリティ クラスを使用して Angular ボタン グループをスタイル設定できます。最初に [Tailwind を設定](/themes/misc/tailwind-classes) してから、グローバル スタイルシートにユーティリティ ファイルをインポートします。 + +```scss +@import "tailwindcss"; +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +対応するテーマに `light-button-group` または `dark-button-group` を使用し、任意のプロパティで生成された CSS 変数をオーバーライドします。 + +```html + + +``` + +感嘆符 (`!`) はユーティリティ クラスを important にし、コンポーネント テーマより優先させます。 + + + + + + + +{Platform} ボタン グループは CSS パーツを使用して、グループ コンテナーと個々のトグル ボタンをスタイル設定します。ボタン グループの `group` パーツとトグル ボタンの `toggle` パーツを使用して外観をカスタマイズします。 + +### Sass テーマ + +{ProductName} テーマ システムを使用して、アプリケーションの他の部分と一貫したスタイルでボタン グループをカスタマイズします。 + +カスタム ボタン グループ テーマを作成する前にテーマ関数をインポートします。 + +```scss +@use "igniteui-theming" as *; +``` + +`button-group-theme` でテーマを作成し、グローバル スタイルシートに含めます。`$item-background` パラメーターは関連するインタラクション状態の色のベースとして使用されます。ボタン グループの外観をより細かく制御する必要がある場合は、追加のパラメーターをオーバーライドします。 + +```scss +$custom-button-group: button-group-theme( + $item-background: #57a5cd, +); + +igc-button-group { + @include button-group($custom-button-group); +} +``` + +同じテーマは Web Components に直接適用され、React および Blazor ラッパーによってレンダリングされる基となる `igc-button-group` 要素にも適用されます。 + +### CSS 変数 + +次の CSS 変数を使用して、ボタン グループ アイテムの色とインタラクション状態をカスタマイズします。ボタン グループ要素に設定すると、含まれるトグル ボタンにスタイルが適用されます。 + +| プライマリ プロパティ | 依存プロパティ | 説明 | +| --- | --- | --- | +| `$item-background` | `$item-hover-background` | アイテムのホバー背景。 | +| | `$item-selected-background` | 選択済みアイテムの背景。 | +| | `$item-focused-background` | フォーカスされたアイテムの背景。 | +| | `$disabled-background-color` | 無効なアイテムの背景。 | +| | `$item-border-color` | デフォルトのアイテム境界線の色。 | +| | `$item-text-color` | デフォルトのアイテム テキスト色。 | +| | `$idle-shadow-color` | アイドル アイテムのシャドウ色。 | +| `$item-hover-background` | `$item-selected-hover-background` | 選択済みアイテムのホバー背景。 | +| | `$item-focused-hover-background` | フォーカスされたホバー背景。 | +| | `$item-hover-text-color` | ホバーされたアイテムのテキスト色。 | +| | `$item-hover-icon-color` | ホバーされたアイテムのアイコン色。 | +| `$item-selected-background` | `$item-selected-focus-background` | 選択済みアイテムのフォーカス背景。 | +| | `$disabled-selected-background` | 無効な選択済みの背景。 | +| | `$item-selected-text-color` | 選択済みアイテムのテキスト色。 | +| | `$item-selected-icon-color` | 選択済みアイテムのアイコン色。 | +| | `$item-selected-hover-text-color` | 選択済みホバー アイテムのテキスト色。 | +| | `$item-selected-hover-icon-color` | 選択済みホバー アイテムのアイコン色。 | +| `$item-border-color` | `$item-hover-border-color` | ホバーされたアイテムの境界線の色。 | +| | `$item-focused-border-color` | フォーカスされたアイテムの境界線の色。 | +| | `$item-selected-border-color` | 選択済みアイテムの境界線の色。 | +| | `$item-selected-hover-border-color` | 選択済みホバー アイテムの境界線の色。 | +| | `$item-disabled-border` | 無効なアイテムの境界線の色。 | +| | `$disabled-selected-border-color` | 無効な選択済みの境界線の色。 | + +### スタイル パーツ + +ボタン グループとそれに含まれるトグル ボタンをターゲットにするには、次の CSS パーツを使用します。 + +| パーツ | コンポーネント | スタイルの対象 | +| --- | --- | --- | +| `group` | | ボタン グループ コンテナー。 | +| `toggle` | | 個々のトグル ボタン。 | + +### カスタム スタイル設定 + +次の例では、グループの背景とパディングを変更し、含まれるトグル ボタンのテキスト色を変更します。 + +| セレクター | 宣言 | 効果 | +| --- | --- | --- | +| `igc-button-group::part(group)` | `background-color`、`padding` | ボタン グループ コンテナーの背景とスペースを変更します。 | +| `igc-toggle-button::part(toggle)` | `color` | 個々のトグル ボタンのテキスト色を変更します。 | ```css igc-button-group::part(group) { @@ -286,19 +909,158 @@ igc-toggle-button::part(toggle) { } ``` - + + +### Tailwind によるスタイル設定 + +`igniteui-theming` のカスタム Tailwind ユーティリティ クラスを使用して {Platform} ボタン グループをスタイル設定できます。最初に [Tailwind を設定](/themes/tailwind) してから、グローバル スタイルシートに Ignite UI ユーティリティをインポートします。 + +```css +@import "tailwindcss"; +@import "igniteui-theming/tailwind/utilities/material.css"; +``` + + + +```jsx + +``` + + + + + +```html + +``` + + + + + +```razor + +``` + + + +感嘆符 (`!`) は Tailwind ユーティリティをボタン グループのデフォルト テーマ スタイルより優先させます。 + + + + + +## アクセシビリティ + +{Platform} Button Group は、関連するトグル ボタンを整理しながら、各ボタンの選択状態と無効状態を公開します。 + +### キーボード インタラクション + +ボタン グループは、内包するトグル ボタンにキーボード インタラクションを委譲します。各トグル ボタンはネイティブ ボタンをレンダリングするため、標準のボタン キーボード動作によってフォーカスされたアイテムがアクティブ化され、設定された選択モードに従って選択状態が更新されます。 + +| キー | アクション | +| --- | --- | +| Tab / Shift+Tab | グループ内の次または前の有効なトグル ボタンにフォーカスを移動します。 | +| Enter / Space | フォーカスされたトグル ボタンをアクティブ化し、設定された選択モードに従って選択または選択解除します。 | + +ボタン グループが無効の場合、内包するトグル ボタンも無効になり、キーボードによるインタラクティブ操作に対応しなくなります。 + +### スクリーン リーダー / ARIA + +ボタン グループはグループの関係を公開し、各トグル ボタンはネイティブ ボタン セマンティクスを通じてその状態を公開します。 + + + +- グループ コンテナーは `role="group"` を使用し、`aria-disabled` を通じてグループの無効状態を反映します。 +- 各トグル ボタンは、選択状態に `aria-pressed`、無効状態に `aria-disabled` を持つネイティブ `button` をレンダリングします。 +- グループはユーザーの操作によりトグル ボタンの選択状態が変化した後、`igcSelect` および `igcDeselect` を発行します。イベントの詳細はトグル ボタンの `value` です。 +- すべてのトグル ボタンに表示テキストまたは `aria-label` を提供してください。特にアイコンのみのコントロールでは重要です。 + + + + + +- グループ コンテナーは `role="group"` を使用します。 +- Angular は選択状態が変化すると各内包ボタンの `aria-pressed` 値を更新し、グループが無効の場合は子ボタンを無効にします。 +- グループはユーザーが選択を変更すると `selected` および `deselected` を発行します。各イベントには選択されたトグル ボタンとそのインデックスが含まれます。 +- すべてのアイコンのみのボタンに表示テキスト、`igxLabel`、または他のアクセシブルな名前を提供してください。 + + + +### アクセシビリティ準拠 + +インフラジスティックスは、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) トピックで、Section 508 および WCAG 2.1 ガイドライン領域における {ProductName} のアクセシビリティ サポートを文書化しています。 +| 基準 | コンポーネントの準拠方法 | +| -- | -- | +| [2.1.1 キーボード](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | 各トグル ボタンはネイティブ ボタンを使用するため、グループの選択動作は標準のボタン キーボード アクティベーションを通じて利用できます。 | +| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | グループは `role="group"` を公開します。トグル ボタンはネイティブ ボタン セマンティクスを公開し、選択状態が変化すると `aria-pressed` を更新します。xplat トグル ボタンは `aria-disabled` も公開します。 | + +ユーザー側の責任: + +- 各トグル ボタンに明確な表示ラベルまたはアクセシブルな名前を付けてください。特にアイコンのみのボタンでは重要です。 +- グループの選択モードをコントロールの目的に合わせて設定し、ユーザーが 1 つまたは複数のオプションを選択できるかどうかを理解できるようにしてください。 +- グループまたはその選択状態をカスタマイズする際は、論理的なボタンの順序と十分な色のコントラストを維持してください。 + +## トラブルシューティング + +{Platform} ボタン グループのトラブルシューティング ガイダンスは、一般的な選択の問題に対して問題、原因、修正のフォーマットで提供されます。 + +### selectedItems でボタンが選択されないのはなぜですか? + +すべてのトグル ボタンに一意の `value` 属性があることを確認してください。`selectedItems` プロパティはこれらの値に依存します。 + +### 既知の制限 + +{Platform} ボタン グループはトグル ボタンを調整しますが、個々のラベルやアクセシブルな名前を置き換えるものではありません。 + +- 選択動作は設定された `selection` モードに依存します。 +- `selectedItems` プロパティは、含まれるトグル ボタンの一意の `value` 属性に依存します。 +- ボタン グループはボタンのラベルやアイコンを提供しません。各トグル ボタンのコンテンツは個別に定義してください。 ## API リファレンス +{Platform} ボタン グループ API リファレンスは、コンポーネントと関連するトグル ボタン機能の完全な API サーフェスを提供します。 -
-
-
-
+ + + + +## 依存関係 + +{Platform} ボタン グループは、プラットフォーム パッケージとそのテーマ スタイルシートが必要です。サンプルではトグル ボタン、アイコン、リップル コンポーネントも使用します。 ## その他のリソース +API の詳細とプロジェクト サポートについては、次の {Platform} リソースを使用してください。 + - [{ProductName} **フォーラム (英語)**]({ForumsLink}) - [{ProductName} **GitHub (英語)**]({GithubLink}) + +## 関連コンポーネント + +{Platform} ボタン グループは選択可能なトグル ボタンで構成されています。グループではなく個別のトグル アクションが必要な場合は、次の関連コンポーネントを使用してください。 + +- + +## FAQ + +これらのよくある質問は、{Platform} ボタン グループの選択、コンテンツ、設定に関する一般的なシナリオをカバーします。 + + + + +ボタン グループは `single`、`single-required`、`multiple` の選択モードをサポートします。必要なインタラクションに合ったモードを選択するには `selection` プロパティを使用します。 + + + +すべての に一意の `value` を割り当て、ボタン グループの `selectedItems` プロパティを通じて対応する値を設定します。 + + + +はい。各 にアイコンを追加し、グループ全体でボタン コンテンツを統一してください。 + + + + diff --git a/docs/xplat/src/content/jp/components/inputs/chip.mdx b/docs/xplat/src/content/jp/components/inputs/chip.mdx index 17e0200e39..a1696527e0 100644 --- a/docs/xplat/src/content/jp/components/inputs/chip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/chip.mdx @@ -216,8 +216,35 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)); +### アウトライン +{ProductName} Chip は、 プロパティを設定することで、アウトライン スタイルでレンダリングしてボーダーを追加することができます。 + + +```tsx + +``` + + + + + +```html + +``` + + + + + +```razor + +``` + + + + ### 無効 diff --git a/docs/xplat/src/content/jp/components/layouts/avatar.mdx b/docs/xplat/src/content/jp/components/layouts/avatar.mdx index 1f9b240f93..6024e4da29 100644 --- a/docs/xplat/src/content/jp/components/layouts/avatar.mdx +++ b/docs/xplat/src/content/jp/components/layouts/avatar.mdx @@ -569,8 +569,8 @@ Ignite UI コンポーネント トークンと共にユーティリティ フ | 基準 | コンポーネントの準拠方法 | | -- | -- | -| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | アバターにはアクセシブルなラベルがあり、画像アバターは `alt` を通じて特定の代替テキストを受け取ることができます。 | -| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | コンポーネントは画像セマンティクスで初期化され、コンテンツ関連の ARIA 情報を公開します。 | +| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | アバターにはアクセシブルなラベルがあり、画像アバターは `alt` を通じて特定の代替テキストを受け取ることができます。 | +| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | コンポーネントは画像セマンティクスで初期化され、コンテンツ関連の ARIA 情報を公開します。 | @@ -578,8 +578,8 @@ Ignite UI コンポーネント トークンと共にユーティリティ フ | 基準 | コンポーネントの準拠方法 | | -- | -- | -| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | アバターにはアクセシブル ラベルがあり、表現されるエンティティを識別する周囲のテキストと組み合わせることができます。 | -| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | コンポーネントは `role="img"` とデフォルトのアクセシブル ラベルで初期化されます。 | +| [1.1.1 非テキスト コンテンツ](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | アバターにはアクセシブル ラベルがあり、表現されるエンティティを識別する周囲のテキストと組み合わせることができます。 | +| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | コンポーネントは `role="img"` とデフォルトのアクセシブル ラベルで初期化されます。 | diff --git a/docs/xplat/src/content/jp/toc.json b/docs/xplat/src/content/jp/toc.json index 9c26c7e51e..ffb8e7231c 100644 --- a/docs/xplat/src/content/jp/toc.json +++ b/docs/xplat/src/content/jp/toc.json @@ -2433,7 +2433,8 @@ }, { "name": "バッジ", - "href": "inputs/badge.mdx" + "href": "inputs/badge.mdx", + "updated": true }, { "exclude": [ @@ -2443,11 +2444,9 @@ "href": "inputs/button.mdx" }, { - "exclude": [ - "Angular" - ], "name": "ボタン グループ", - "href": "inputs/button-group.mdx" + "href": "inputs/button-group.mdx", + "updated": true }, { "exclude": [