From acfb4cf6522444fdc174d7deaa8250d55f5c4b80 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Wed, 9 Sep 2026 12:25:52 +0300 Subject: [PATCH 1/6] docs(jp): sync Angular JP docs with EN PRs #522, #438, #535, #491 Manual replay of the four failed "Sync Japanese Documentation (Angular)" runs (33877005832, 34238718782, 34250163709, 34329511530). Each died in the Copilot CLI step with transient_bad_request before doing any work; the workflows have since been recompiled with gh-aw v0.88.7 in #555. - chat: translate the `messages` row and the new bidirectional messages collection section (#438) - theming-mcp: add the WCAG contrast note linking to the new Accessibility topic (#522) - palettes: hsla() contrast variables in the CSS excerpt (#522) - toc: add Themes > Accessibility; Button now points at inputs/button.mdx (#522, #491) - retarget IgxButton links in dialog, time-picker, tooltip, roundness, material/bootstrap theming and the row-editing/search grid templates to the xplat-generated inputs/button page (#491, #535) - remove the hand-authored button.mdx and layouts/avatar.mdx, superseded by the xplat-generated pages exactly as EN did (#491, #522) - xplat jp toc: lift the Angular exclude on Button, Icon, Icon Button and Avatar and add Themes > Accessibility, mirroring the EN xplat toc so the Angular JP site gains the generated pages the Angular toc now references - add the jp xplat themes/accessibility.mdx translation (target of the new toc entry and of the theming-mcp note) - mirror the new button anatomy / do-don't images into jp/images, which the Angular build resolves per language via @xplat-images Co-Authored-By: Claude Fable 5.1 --- .../content/jp/components/ai/theming-mcp.mdx | 4 + .../src/content/jp/components/button.mdx | 784 ------------------ .../src/content/jp/components/chat.mdx | 16 +- .../src/content/jp/components/dialog.mdx | 2 +- .../content/jp/components/layouts/avatar.mdx | 297 ------- .../themes/misc/angular-material-theming.mdx | 2 +- .../themes/misc/bootstrap-theming.mdx | 2 +- .../content/jp/components/themes/palettes.mdx | 10 +- .../jp/components/themes/roundness.mdx | 2 +- .../src/content/jp/components/time-picker.mdx | 2 +- .../src/content/jp/components/toc.json | 7 +- .../src/content/jp/components/tooltip.mdx | 2 +- .../jp/grids_templates/row-editing.mdx | 4 +- .../src/content/jp/grids_templates/search.mdx | 2 +- .../anatomy-content-light/button-lt-a.png | Bin 0 -> 80085 bytes .../content/jp/images/button/button-do-1.png | Bin 0 -> 2997 bytes .../content/jp/images/button/button-do-2.png | Bin 0 -> 3425 bytes .../content/jp/images/button/button-do-3.png | Bin 0 -> 3425 bytes .../jp/images/button/button-do-not-1.png | Bin 0 -> 3001 bytes .../jp/images/button/button-do-not-2.png | Bin 0 -> 3508 bytes .../jp/images/button/button-do-not-3.png | Bin 0 -> 6667 bytes .../jp/components/themes/accessibility.mdx | 290 +++++++ docs/xplat/src/content/jp/toc.json | 23 +- 23 files changed, 338 insertions(+), 1111 deletions(-) delete mode 100644 docs/angular/src/content/jp/components/button.mdx delete mode 100644 docs/angular/src/content/jp/components/layouts/avatar.mdx create mode 100644 docs/angular/src/content/jp/images/anatomy-content-light/button-lt-a.png create mode 100644 docs/angular/src/content/jp/images/button/button-do-1.png create mode 100644 docs/angular/src/content/jp/images/button/button-do-2.png create mode 100644 docs/angular/src/content/jp/images/button/button-do-3.png create mode 100644 docs/angular/src/content/jp/images/button/button-do-not-1.png create mode 100644 docs/angular/src/content/jp/images/button/button-do-not-2.png create mode 100644 docs/angular/src/content/jp/images/button/button-do-not-3.png create mode 100644 docs/xplat/src/content/jp/components/themes/accessibility.mdx diff --git a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx index 674661c15f..4eebec06dd 100644 --- a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx +++ b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx @@ -255,6 +255,10 @@ MCP サーバーは、プロンプトに基づいて AI が自動的に使用す 各ツールの簡単な概要を以下に示します。 + +パレットを生成する際、サーバーはサーフェス カラーとグレー カラーのコントラスト比を WCAG のしきい値と照合し、組み合わせが基準を満たさない場合は警告します。テーマ設定エンジン自体に組み込まれているコントラストの動作については、[アクセシビリティ](../themes/accessibility.mdx) を参照してください。 + + | ツール | 説明 | |------|-------------| | `detect_platform` | `package.json` を読み取り、プロジェクトが Ignite UI for Angular、Web Components、React、Blazor のいずれを使用しているかを識別します。以降のすべてのツールに対して正しいインポート パスとコンポーネント セレクターを選択します。 | diff --git a/docs/angular/src/content/jp/components/button.mdx b/docs/angular/src/content/jp/components/button.mdx deleted file mode 100644 index a3a5cfe00d..0000000000 --- a/docs/angular/src/content/jp/components/button.mdx +++ /dev/null @@ -1,784 +0,0 @@ ---- -title: Angular Button コンポーネント – Ignite UI for Angular - MITライセンス -description: Ignite UI for Angular Button コンポーネントで規格のボタンに定義済みテキスト、画像、およびその他の機能を追加します。今すぐお試しください。 -keywords: Angular Button コンポーネント, Angular Button コントロール, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, Angular UI コンポーネント -license: MIT -_language: ja -llms: - description: "Angular Button ディレクティブは、アクション可能なボタンを作成して Web ページ/アプリケーションに追加するために使用されます。" ---- - -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# Angular Button (ボタン) の概要 - -Angular Button ディレクティブは、アクション可能なボタンを作成して Web ページ/アプリケーションに追加するために使用されます。簡単にカスタマイズでき、いくつかの組み込み機能を含むさまざまな Angular Button タイプがあります。デフォルトでは、AngularMaterial はネイティブの `', - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IgxButtonDirective] -}) -export class HomeComponent {} -``` - -Ignite UI for Angular Button モジュールまたはディレクティブをインポートしたので、要素で `igxButton` ディレクティブの使用を開始できます。 - -## Angular ボタン タイプ - -### Flat ボタン - - ディレクティブを使用して、シンプルなフラット ボタンをコンポーネント テンプレートに追加します。タイプを選択しない場合、デフォルト値は `flat` です。 - -```html - -``` - - - -このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `` - - - - -### Contained ボタン - -Contained ボタンを作成するには、`igxButton` プロパティの値を変更するだけです。 - -```html - -``` - - - -### Outlined ボタン - -同様に、アウトライン タイプに切り替えることができます。 - -```html - -``` - - - -### Icon ボタン - -バージョン `17.1.0` 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい `igxIconButton` ディレクティブを公開します。_Icon Button_ の詳細については[こちら](/icon-button)を参照してください。 - -```html - -``` - - - -### FAB (フローティング アクション ボタン) - -アイコンを使用して、フローティング アクション ボタンを作成します。 - -```html - -``` - -拡張 FAB を作成するには、`igx-icon` の前に任意の要素を追加できます。 - -```html - -``` - - -拡張 FAB テキストを適切にスタイルするには、`` または `
` タグを使用します。 - - - - -## 例 - -### Angular ボタンの無効化 - -ボタンを無効にするには、`disabled` プロパティを使用します。 - -```html - -``` - - - -### Ripple - - ディレクティブは、ボタンまたはその他の指定した要素にリップル効果を追加します。`以下のプロパティを使用して、デフォルトのリップル色、位置、および期間を簡単に変更できます。 - -```html - -``` - - - -### Span - -`span` や `div` などの要素を Ignite UI for Angular スタイルのボタンに変更するために `igxButton` ディレクティブを使用できます。デフォルトの色は `igxButtonColor` と `igxButtonBackground` プロパティでカスタマイズできます。 - -```html - - Span - -``` - - - -## サイズ - -`--ig-size` カスタム CSS プロパティを使用して、ユーザーが `igxButton` のサイズを選択できるようにすることができます。これを行うには、まず `IgxButtonGroupModule` をインポートし、 コンポーネントによってサイズ値を表示する必要があります。このようにして、選択されるたびに **--ig-size** CSS プロパティを更新します。 - -```typescript -// app.module.ts -... -import { IgxButtonGroupModule } from 'igniteui-angular/button-group'; -// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package -@NgModule({ - imports: [ - ... - IgxButtonGroupModule - ... - ] -}) -``` - -```html - - -... - -``` - -```typescript -// buttons-density.component.ts -public size = "large"; -public sizes; -public ngOnInit() { - this.sizes = [ - { label: 'large', selected: this.size === 'large', togglable: true }, - { label: 'medium', selected: this.size === 'medium', togglable: true }, - { label: 'small', selected: this.size === 'small', togglable: true } - ]; -} - -public selectSize(event: any) { - this.size = this.sizes[event.index].label; -} - -@HostBinding('style.--ig-size') -protected get sizeStyle() { - return `var(--ig-size-${this.size})`; -} -``` - -以下は結果です。 - - - -
- -## スタイル設定 - -### Button テーマのプロパティ マップ - -プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 - -
- - - - - - - - - -
- -
- -### Material Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-background | Focus background color | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $active-background | Active background color | -| | $active-foreground | Active foreground color | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $border-color | The border color for outlined buttons. | -| | $hover-border-color | The border color for hovered outlined buttons. | -| | $focus-border-color | The border color for focused outlined buttons. | -| | $focus-visible-border-color | The border color for outlined buttons when focus is visible. | -| | $active-border-color | The border color for active outlined buttons. | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-background | Focus background color | -| | $focus-foreground | Foreground on focus | -| | $active-background | Active background color | -| | $active-foreground | Active foreground color | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | - -
- -
- -### Fluent Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $active-foreground | Active foreground color | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered outlined button. | -| | $focus-background | Background color for focused outlined button. | -| | $focus-hover-background | Background color for outlined button on focus + hover. | -| | $active-background | Background color for active outlined button. | -| | $hover-foreground | Foreground color for hovered outlined button. | -| | $icon-color-hover | Icon color for hovered outlined button. | -| | $focus-foreground | Foreground color for focused outlined button. | -| | $focus-hover-foreground | Foreground color for outlined button on focus + hover. | -| | $active-foreground | Foreground color for active outlined button. | -| | $focus-visible-foreground | Foreground color for outlined button when focus is visible. | -| | $focus-visible-border-color | Border color for outlined button when focus is visible. | -| | $border-color | Border color for outlined button. | -| | $hover-border-color | Border color for hovered outlined button. | -| | $focus-border-color | Border color for focused outlined button. | -| | $active-border-color | Border color for active outlined button. | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $active-background | Active background color | -| | $active-foreground | Active foreground color | -| | $focus-background | Focus background color | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | - -
- -
- -### Bootstrap Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | -| | $disabled-foreground | Foreground color for disabled button | -| | $disabled-icon-color | Icon color for disabled button | -| | $shadow-color | Shadow color | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-background | Disabled background color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | -| | $disabled-foreground | Foreground color for disabled button | -| | $disabled-icon-color | Icon color for disabled button | -| | $disabled-border-color | Border color for disabled button | -| | $hover-border-color | Hover border color | -| | $focus-border-color | Focus border color | -| | $active-border-color | Active border color | -| | $shadow-color | Shadow color | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $disabled-background | Disabled background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -
-ボタンにスタイルを設定する別の方法は、**Sass** とタイプ別テーマ関数を使用することです。、、、および 。 - -それぞれは、特定のタイプのボタンのみをターゲットにします。 -
- -### Indigo Theme - -#### Flat Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | -| | $shadow-color | Shadow color | - -#### Contained Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-background | Disabled background color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -#### Outlined Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$foreground** | $hover-background | Background color for hovered button | -| | $focus-background | Background color for focused button | -| | $focus-hover-background | Background color for button on focus + hover | -| | $active-background | Background color for active button | -| | $hover-foreground | Foreground color for hovered button | -| | $icon-color-hover | Icon color for hovered button | -| | $focus-foreground | Foreground color for focused button | -| | $focus-hover-foreground | Foreground color for button on focus + hover | -| | $active-foreground | Foreground color for active button | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $focus-visible-border-color | Border color when focus is visible | -| | $border-color | Border color | -| | $hover-border-color | Hover border color | -| | $focus-border-color | Focus border color | -| | $active-border-color | Active border color | -| | $shadow-color | Shadow color | - -#### FAB Button - -| Primary Property | Dependent Property | Description | -|:--|:--|:--| -| **$background** | $foreground | Foreground based on background | -| | $icon-color | Icon color based on background | -| | $hover-background | Hover background color | -| | $focus-background | Focus background color | -| | $active-background | Active background color | -| | $disabled-background | Disabled background color | -| | $hover-foreground | Foreground on hover | -| | $icon-color-hover | Icon color on hover | -| | $focus-foreground | Foreground on focus | -| | $focus-hover-background | Focus + hover background | -| | $focus-hover-foreground | Foreground on focus + hover | -| | $focus-visible-background | Background when focus is visible | -| | $focus-visible-foreground | Foreground when focus is visible | -| | $active-foreground | Active foreground color | -| | $shadow-color | Shadow color | -| | $disabled-foreground | Disabled foreground color | -| | $disabled-icon-color | Disabled icon color | - -
- -
- -
- - -> **注:** 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。 - -ボタンのスタイルを設定するには、タイプ固有のテーマ関数を使用できます: 、、、および 。 - -各関数は、特定のタイプのボタンのみをターゲットにします。 - -まず、すべてのテーマ関数とコンポーネント ミックスインを含む themes モジュールをインポートします。 - -```scss -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; -``` - -次に、スタイル設定するボタンのタイプ固有のテーマ機能を拡張する新しいテーマを作成します。この例では、 関数を使用し、`$foreground` および `$background` パラメーターに、それぞれの hover および active パラメーターとともに値を渡します。 - -次のマークアップを前提として: - -```html -
- -
-``` - -次のテーマを作成する必要があります: - -```scss -$custom-contained-theme: contained-button-theme( - $background: #f9f0ff, - $foreground: #722ed1, - $hover-background: #efdbff, - $hover-foreground: #9254de, - $active-foreground: #531dab, - $active-background: #dfc2fa, -); -``` - -contained タイプのボタンのスタイル設定に使用できるパラメーターの完全なリストについては、 セクションを参照してください。 - -最後に、カスタム テーマをアプリケーションに**含めます**。 - -```scss -.my-contained-btn { - @include tokens($custom-contained-theme); -} -``` - -タイプ別テーマ関数により、ボタンのスタイリングがより簡単になりました。 - - 関数と 関数の場合、`$background` パラメーターに色の値を指定するだけで済みます。他のすべてのボタンの状態とテキストの色 (指定されていない場合) は、その値に基づいて自動的に生成され、適用されます。 - -テキストの色は、新しく追加された 関数によって、指定された背景に対して黒か白のどちらがより良いコントラストを持つかを計算して決定されます。 - - および では、状態用の色も自動的に生成されますが、これらは `$background` ではなく `$foreground` パラメーターに基づいて計算されます。 - -以下のサンプルでは、カスタマイズした CSS 変数を使用したボタン コンポーネントが、[`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) デザイン システムのボタンに視覚的に似たデザインを実現している様子を確認できます。 - - - - -サンプルでは、[Bootstrap Light](/themes/sass/schemas#predefined-schemas) スキーマを使用します。 - - -### Tailwind によるスタイル設定 - -カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。 - -グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: - -```scss -@import "tailwindcss"; -... -@use 'igniteui-theming/tailwind/utilities/material.css'; -``` - -ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 - -- `light-*` クラスはライト テーマ用です。 -- `dark-*` クラスはダーク テーマ用です。 -- プレフィックスの後にコンポーネント名を追加します。 ボタンにはタイプがあるため、クラスは次のように使用されます: `light-contained-button`、`light-flat-button`、`dark-outlined-button`、`dark-fab-button`。 - -これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 - -プロパティの完全なリストは で確認できます。これはさまざまなバリエーションで異なって反映されます。`flat` ボタンと `outlined` ボタンの主なプロパティは `$foreground` で、`contained` ボタンと `fab` ボタンの主なプロパティは `$background` です。構文は次のとおりです: - -```html -
-
- -
-
- -
-
- -
-
- -
-
-``` - - -ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 - - -最終的に、button は次のようになります: - - - -### カスタム サイズ変更 - -ボタンの高さは、`--size` 変数を使用して、`button` を直接ターゲットにして変更できます。 - -```scss -button { - --size: 50px; -} -``` - -または、ユニバーサル変数 `--ig-button-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 - -```html -
- -
-``` - -```scss -.my-app { - --ig-button-size: 50px; -} -``` - -事前定義されたサイズの 1 つを使用して、それを `--ig-size` 変数に割り当てることもできます。`--ig-size` に使用可能な値は、`--ig-size-small`、`--ig-size-medium`、`--ig-size-large` です。 - -```scss -button { - --ig-size: var(--ig-size-large); -} -``` - -詳細については、[サイズ](/display-density)の記事をご覧ください。 - -
- -## API リファレンス - -
- -- -- -- -- -- - -## その他のリソース - -
- -コミュニティに参加して新しいアイデアをご提案ください。 - -- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/jp/components/chat.mdx b/docs/angular/src/content/jp/components/chat.mdx index 49c10daabf..8c7e73e56e 100644 --- a/docs/angular/src/content/jp/components/chat.mdx +++ b/docs/angular/src/content/jp/components/chat.mdx @@ -86,13 +86,27 @@ Chat コンポーネントは、その状態と構成を制御できるいくつ | 名前 | 説明 | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `messages` | チャットに表示されるメッセージ (`IgcChatMessage[]`) の配列。表示するメッセージを制御するためにバインド可能。 | +| `messages` | チャットに表示される双方向のメッセージ (`IgcChatMessage[]`) の配列。ユーザーがメッセージを送信すると、Chat は渡されたコレクションを更新します。 | | `draftMessage` | 未送信メッセージ。`text` とオプションの `attachments` を含むオブジェクト。メッセージ下書きの保存や復元に便利。 | | `options` | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 ()。 | | `templates` | メッセージ コンテンツ、入力、添付ファイル、その他のチャット UI 部分に対して、カスタム Angular テンプレート()。 | 上記のプロパティを使用することで、Chat の UI をアプリケーションの状態やバックエンドと簡単に同期させることができます。 +#### 双方向のメッセージ コレクション + +`messages` コレクションは双方向です。アプリケーションが表示するメッセージを提供し、会話が進むにつれて Chat が元のコレクションを更新します。ユーザーがメッセージを送信すると、そのコレクションへの参照を保持しているコードから、新しく作成されたメッセージにアクセスできます。これは、Angular の `[(messages)]` による双方向バインディングではなく、コレクションのインプレース更新です。 + +`messageCreated` イベントは、永続化やその他の副作用のための通知です。作成されたメッセージをコレクションに再度追加しないでください。 + +元のコレクションを変更せずに残す必要がある場合は、シャロー コピーを Chat に渡します。 + +```ts +public messages = [...this.originalMessages]; +``` + +既存のメッセージ オブジェクトは引き続き共有されます。これらのオブジェクトも独立させる必要がある場合は、コピーしたコレクションを構築する際に、各メッセージの新しいインスタンスを作成してください。 + ### 添付 モダンな会話ではテキストだけに限られません。Chat コンポーネントはファイル添付機能のサポートが組み込まれており、ユーザーは画像、ドキュメント、その他のファイルを共有できます。 デフォルトでは入力領域に添付ボタンが表示されます。`acceptedFiles` プロパティで許可されるファイル タイプを制御可能です。 diff --git a/docs/angular/src/content/jp/components/dialog.mdx b/docs/angular/src/content/jp/components/dialog.mdx index aee2c5d934..127c67742e 100644 --- a/docs/angular/src/content/jp/components/dialog.mdx +++ b/docs/angular/src/content/jp/components/dialog.mdx @@ -288,7 +288,7 @@ $my-dialog-theme: dialog-theme( ``` -ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](/button) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 +ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](./inputs/button.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 ```scss diff --git a/docs/angular/src/content/jp/components/layouts/avatar.mdx b/docs/angular/src/content/jp/components/layouts/avatar.mdx deleted file mode 100644 index 86868c15a1..0000000000 --- a/docs/angular/src/content/jp/components/layouts/avatar.mdx +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: "Angular Avatar コンポーネント | レイアウト | インフラジスティックス" -description: "Angular Avatar コンポーネントを使用して、ユーザー、エンティティ、またはオブジェクトを画像、イニシャル、アイコン、またはカスタム コンテンツで表します。" -keywords: "Angular Avatar, アバター コンポーネント, プロフィール画像, イニシャル, Ignite UI for Angular, Infragistics" -last_updated: "2026-07-29" -license: MIT -mentionedTypes: ["Avatar", "Badge", "Icon"] -relatedComponents: ["Badge"] -_language: ja -llms: - description: "Ignite UI for Angular Avatar トピックでは、画像、イニシャル、アイコン、カスタム コンテンツ、形状、サイズ、スタイル設定、アクセシビリティ ガイダンスを使用してユーザー、エンティティ、またはオブジェクトのアイデンティティをレンダリングする方法を示します。" ---- -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 avatarAnatomy from '@xplat-images/anatomy-content-light/avatar-lt-a.png'; -import avatarDo from '@xplat-images/avatar/avatar_do1.png'; -import avatarDo2x from '@xplat-images/avatar/avatar_do1@2x.png'; -import avatarDoNot from '@xplat-images/avatar/avatar_do_not1.png'; -import avatarDoNot2x from '@xplat-images/avatar/avatar_dont1@2x.png'; - -# Avatar (アバター) コンポーネント - -Ignite UI for Angular Avatar は、画像、イニシャル、またはカスタム コンテンツを使用してユーザー、エンティティ、またはオブジェクトを表します。 - -アバターを使用して、リスト、カード、プロフィール メニュー、アクティビティ フィードでコンパクトな視覚的アイデンティティを提供します。 - -## ライブ デモ - - - -## 構造 - -アバターは、画像のセマンティクスを適用し、サポートされているコンテンツ パターンのいずれかをレンダリングする単一のホスト要素です。 - - - - - -1. 画像コンテナー: 画像コンテンツ タイプを表示します。
-2. アイコン コンテナー: アイコン コンテンツ タイプを表示します。
-3. イニシャル コンテナー: テキスト コンテンツ タイプを表示します。 - -```text -igx-avatar[role="img"] // ホスト - アバターを公開 -└─ 優先順位順に以下のいずれか: - ├─ div.igx-avatar__image // `src` が設定されている場合 - 背景として画像をレンダリング - ├─ igx-icon // `icon` が設定されている場合 - ├─ span // `initials` が設定されている場合 - 最初の 2 文字 - └─ ng-content // カスタム プロジェクション コンテンツ -``` - -## 作業の開始 - -`` をレンダリングする前に Angular アバター コンポーネントをインポートします。Ignite UI for Angular をまだセットアップしていない場合は、最初に共有 [作業の開始](../general/getting-started.mdx) トピックを完了してください。 - -```ts -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -``` - -## 使用方法 - -デフォルト スロットに画像ソース、イニシャル、またはカスタム コンテンツを使用してアバターをレンダリングします。 - -### バリアント - -表示するコンテンツ ソースのみを設定します。Angular アバターは、最初に `src` をレンダリングし、次に `icon`、次に `initials` をレンダリングし、これらのいずれの入力も設定されていない場合はプロジェクションされたカスタム コンテンツにフォールバックします。 - -```html - - - - - -``` - - - -### 形状 - - を `square`、`rounded`、または `circle` に設定します。 - -```html - -``` - - - -### サイズ - -プリセット アバター サイズが必要な場合は、`--ig-size` を共有サイズ トークンのいずれかに設定します。 - -```html - -``` - - - -### 使用すべき場合と使用すべきでない場合 - -**使用すべき場合:** プロフィール画像、イニシャル、アイコンなど、UI が人物、組織、オブジェクト、またはアカウントの小さな表現を必要とする場合にアバターを使用します。繰り返し表示されるアイデンティティを簡単に識別できるように、同じ UI 領域内で一貫したアバター戦略を維持します。 - -**使用すべきでない場合:** エンティティを表す代わりにカウント、ステータス、または通知インジケーターを表示する必要がある場合は、[Badge](../inputs/badge.mdx) コンポーネントを使用します。アイデンティティとステータスの両方を一緒に表示する必要がある場合、バッジはアバターを装飾することもできます。 - -
- - - - - - - - - - - - - -
使用すべき使用すべきでない
Angular Avatar の使用ガイダンスAngular Avatar の不使用ガイダンス
-
- -## プロパティ - -アバターは、コンテンツと形状のための小さな入力セットを公開します。 - -| 名前 | 型 | デフォルト | 説明 | -| -- | -- | -- | -- | -| | `string` | n/a | アバターがレンダリングするアイコンを設定します。 | -| | `string` | n/a | アバターがレンダリングするテキスト イニシャルを設定します。 | -| | `"square" \| "rounded" \| "circle"` | `"square"` | アバターの形状を設定します。 | -| | `"small" \| "medium" \| "large"` | `"small"` | アバターのサイズを設定します。 | -| | `string` | n/a | 画像ソース URL を設定します。 | - -## スタイル設定 - - - -アバターの外観はテーマ変数とプラットフォーム固有のスタイル設定フックを通じて制御されます。 - -トークン レベルの変更にはアバター CSS 変数を使用し、特定のレンダリング タイプや形状をターゲットにする必要がある場合は Angular ホスト クラスを使用します。 - -| 変数 | 変更内容 | -| -- | -- | -| `--ig-avatar-background` | アバターの背景色。 | -| `--ig-avatar-color` | テキストとイニシャルの色。 | -| `--ig-avatar-icon-color` | アイコンの色。 | -| `--ig-avatar-border-radius` | 丸みのあるアバターで使用される境界線の半径。 | -| `--ig-avatar-size` | アバターの幅と高さ。 | -| `--ig-size` | プリセット アバター サイズを導出するために使用する共有コンポーネント サイズ トークン。 | - -| セレクター | 説明 | -| -- | -- | -| `igx-avatar` | アバターのホスト要素。 | -| `.igx-avatar--rounded` | `shape` が `rounded` の場合に適用されます。 | -| `.igx-avatar--circle` | `shape` が `circle` の場合に適用されます。 | -| `.igx-avatar--image` | アバターが画像をレンダリングするときに適用されます。 | -| `.igx-avatar--icon` | アバターがアイコンをレンダリングするときに適用されます。 | -| `.igx-avatar--initials` | アバターがイニシャルをレンダリングするときに適用されます。 | -| `.igx-avatar__image` | 画像アバター要素。 | - -### Sass テーマ - -アプリケーションが Sass を通じて Ignite UI テーマをカスタマイズする場合は、 関数を使用します。 - -```scss -@use "igniteui-theming/sass/themes" as *; - -$custom-avatar-theme: avatar-theme( - $background: #72da67, - $border-radius: 16px, - $size: 3rem -); - -:root { - @include tokens($custom-avatar-theme); -} -``` - -### CSS 変数 - -Sass ビルド ステップなしでローカルでのスタイル設定が必要な場合は、コンポーネント CSS 変数を直接設定します。 - -```css -igx-avatar { - --ig-avatar-background: var(--ig-success-500); - --ig-avatar-color: var(--ig-success-500-contrast); - --ig-avatar-border-radius: 20px; -} -``` - -### Tailwind によるスタイル設定 - -アプリケーションが Tailwind クラスを通じて Ignite UI コンポーネントのスタイルを設定する場合は、Angular Tailwind ユーティリティ構文を使用します。 - - - -## アクセシビリティ - -アバターは、アクセシブルな画像セマンティクスを持つ非インタラクティブなアイデンティティ表示要素です。 - -### キーボード インタラクション - -アバターはフォーカスを受け取らず、キーボード インタラクションはありません。 - -| キー | アクション | -| -- | -- | -| n/a | アバターはキーボードによるインタラクティブ操作に対応していません。 | - -### スクリーン リーダー / ARIA - -アバターは画像のセマンティクスと `avatar` のデフォルトのアクセシブル ラベルで初期化されます。 - -- 画像アバターがアイデンティティを伝える場合、周囲のテキストを使用して表現される人物、エンティティ、またはオブジェクトを識別します。 -- 隣接するテキストがすでに同じエンティティを識別している場合、装飾的なアバターを冗長として扱います。 - -### アクセシビリティ準拠 - -Infragistics は、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) トピックで、Section 508 および WCAG 2.1 ガイドライン領域における Ignite UI for Angular のアクセシビリティ サポートを文書化しています。 - -| 基準 | コンポーネントの準拠方法 | -| -- | -- | -| [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"` とデフォルトのアクセシブル ラベルで初期化されます。 | - -ユーザー側の責任: - -- スタイルをオーバーライドするときに、アバターの背景とテキストまたはアイコンの色のコントラストを十分に保ちます。 -- 隣接するテキストがすでに人物またはエンティティの名前を示している場合、同じアイデンティティのアナウンスを重複させないようにします。 - -- アバター画像がアイデンティティを伝える場合、近くのテキストが表現されるエンティティを識別していることを確認します。 - -## トラブルシューティング - -Avatar をインタラクティブまたはステータス コンポーネントとして扱う前に、このセクションを使用して境界と一般的な決定を確認してください。 - -### 既知の制限 - -アバターは視覚的なアイデンティティのプリミティブであり、それ自体ではインタラクション、ステータス、または通知動作を追加しません。 - -- 表現されるエンティティがクリック可能でなければならない場合は、ボタンやリスト アイテムなどのインタラクティブなコンテナーを使用します。 -- ステータス、カウント、または通知インジケーターを表示する必要がある場合は、アバターにバッジを使用します。 - -## API リファレンス - -完全なアバター API サーフェスについては、これらの API リファレンスを使用してください。 - - - -## 依存関係 - -Sass スタイル設定ワークフローは、 および API を使用します。 - -## その他のリソース - -サポートおよび関連する Ignite UI ドキュメントについては、これらのリソースを使用してください。 - -- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) - -## 関連コンポーネント - -アイデンティティをステータス、アクション、またはより豊富なレイアウトと組み合わせる必要がある場合は、これらの関連コンポーネントを使用してください。 - -- [Badge](../inputs/badge.mdx) - カウント、ステータス、または通知インジケーターを表示するには Badge を使用します。UI にアイデンティティとステータスの両方が必要な場合、Badge は Avatar を装飾できます。 - -## FAQ - - - - UI が人物、アカウント、組織、またはオブジェクトを表す必要がある場合に Avatar を使用します。UI がカウント、ステータス、または通知インジケーターを表示する必要がある場合は Badge を使用します。 - - - - いいえ。Avatar は非インタラクティブであり、それ自体ではフォーカスを受け取りません。表現されるエンティティがアクションを必要とする場合は、インタラクティブなコンポーネント内に配置してください。 - - - - アバター画像が特定のエンティティを識別する場合は、意味のある代替テキストを提供します。隣接するテキストがすでにそのエンティティの名前を示している場合、同じアイデンティティのアナウンスを繰り返さないようにします。 - - diff --git a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx index 915b65552d..7838fc8b6d 100644 --- a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx +++ b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx @@ -418,7 +418,7 @@ $custom-mat-light-theme: mat.define-light-theme(( - [コンポーネント テーマ](../sass/component-themes.mdx) - [タイポグラフィ](../sass/typography.mdx) - [Avatar コンポーネント](../../layouts/avatar.mdx) -- [Button コンポーネント](../../button.mdx) +- [Button コンポーネント](../../inputs/button.mdx) - [Dialog コンポーネント](../../dialog.mdx) - [Icon コンポーネント](../../icon.mdx) - [Expansion Panel コンポーネント](../../expansion-panel.mdx) diff --git a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx index 92b63f123f..e3ef3c4d7f 100644 --- a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx +++ b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx @@ -368,7 +368,7 @@ Ignite UI for Angular は、テーマごとに 4 つのデフォルト タイプ - [コンポーネント テーマ](../sass/component-themes.mdx) - [タイポグラフィ](../sass/typography.mdx) - [Avatar コンポーネント](../../layouts/avatar.mdx) -- [Button コンポーネント](../../button.mdx) +- [Button コンポーネント](../../inputs/button.mdx) - [Dialog コンポーネント](../../dialog.mdx) - [Icon コンポーネント](../../icon.mdx) - [List コンポーネント](../../list.mdx) diff --git a/docs/angular/src/content/jp/components/themes/palettes.mdx b/docs/angular/src/content/jp/components/themes/palettes.mdx index c34c330171..08967f2fee 100644 --- a/docs/angular/src/content/jp/components/themes/palettes.mdx +++ b/docs/angular/src/content/jp/components/themes/palettes.mdx @@ -61,17 +61,17 @@ Ignite UI for Angular は、`primary`、`secondary`、`surface`、`gray`、`info :root { //... --ig-primary-500: #09f; - --ig-primary-500-contrast: hsl(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l); + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l / 1); --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-primary-600-contrast: hsl(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l); + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l / 1); --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81)); //... --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-secondary-400-contrast: hsl(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l); + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l / 1); --ig-secondary-500: #df1b74; - --ig-secondary-500-contrast: hsl(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l); + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l / 1); --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-secondary-600-contrast: hsl(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l); + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l / 1); //... --ig-wcag-a: 0.31; --ig-wcag-aa: 0.185; diff --git a/docs/angular/src/content/jp/components/themes/roundness.mdx b/docs/angular/src/content/jp/components/themes/roundness.mdx index 98b8d2cf50..09fed4eb15 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](../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) +• [Action Strip](../action-strip.mdx) • [Button](../inputs/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/time-picker.mdx b/docs/angular/src/content/jp/components/time-picker.mdx index c0954cf9b9..6f99ff17ef 100644 --- a/docs/angular/src/content/jp/components/time-picker.mdx +++ b/docs/angular/src/content/jp/components/time-picker.mdx @@ -407,7 +407,7 @@ $my-time-picker-theme: time-picker-theme( ``` -Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](/button) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 +Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](./inputs/button.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 Time Picker ウィンドウは [`IgxOverlayService`](/overlay) を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。 diff --git a/docs/angular/src/content/jp/components/toc.json b/docs/angular/src/content/jp/components/toc.json index f1398e3929..6aa6674986 100644 --- a/docs/angular/src/content/jp/components/toc.json +++ b/docs/angular/src/content/jp/components/toc.json @@ -1833,6 +1833,11 @@ "href": "themes/spacing.mdx", "new": false }, + { + "name": "アクセシビリティ", + "href": "themes/accessibility.mdx", + "new": true + }, { "name": "Sass", "new": false, @@ -1977,7 +1982,7 @@ }, { "name": "Button", - "href": "button.mdx" + "href": "inputs/button.mdx" }, { "name": "Button Group", diff --git a/docs/angular/src/content/jp/components/tooltip.mdx b/docs/angular/src/content/jp/components/tooltip.mdx index 4f3990798e..7cb762afa4 100644 --- a/docs/angular/src/content/jp/components/tooltip.mdx +++ b/docs/angular/src/content/jp/components/tooltip.mdx @@ -466,7 +466,7 @@ $dark-tooltip: tooltip-theme( ``` -ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](/button)、[`IgxSwitch`](/switch) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 +ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](./inputs/button.mdx)、[`IgxSwitch`](/switch) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 ツールチップは [`IgxOverlayService`](/overlay) を使用するため、スタイル設定するツールチップにカスタム テーマが適用されるよう、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。 diff --git a/docs/angular/src/content/jp/grids_templates/row-editing.mdx b/docs/angular/src/content/jp/grids_templates/row-editing.mdx index 21f2e5d773..75b827a571 100644 --- a/docs/angular/src/content/jp/grids_templates/row-editing.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-editing.mdx @@ -324,9 +324,9 @@ export class HGridRowEditingSampleComponent implements OnInit { [Ignite UI for Angular テーマ ライブラリ](/themes)を使用して、行編集オーバーレイを大幅に変更できます。 行編集オーバーレイは複合要素です。UI は、他の 2 つのコンポーネントで構成されています。 - コンテンツをレンダリングするための [`igx-banner`](/banner) - - [`igx-button`](/button) はデフォルトのテンプレートでレンダリングされます (`[完了]` ボタンと `[キャンセル]` ボタンの場合)。 + - [`igx-button`](inputs/button) はデフォルトのテンプレートでレンダリングされます (`[完了]` ボタンと `[キャンセル]` ボタンの場合)。 -以下の例では、これら 2 つのコンポーネントのスタイル設定オプション ([`ボタンのスタイル設定`](/button#スタイル設定) & [`バナーのスタイル設定`](/banner#スタイル設定)) を使用して、{ComponentName} の行編集のエクスペリエンスをカスタマイズします。 +以下の例では、これら 2 つのコンポーネントのスタイル設定オプション ([`ボタンのスタイル設定`](inputs/button#スタイル設定) & [`バナーのスタイル設定`](/banner#スタイル設定)) を使用して、{ComponentName} の行編集のエクスペリエンスをカスタマイズします。 次に、現在のセルのエディターと背景をより明確にするためにスタイルを設定します。セル スタイリングの詳細については、[こちら](/{igPath}/cell-editing#スタイル設定)をご覧ください。 ### テーマのインポート diff --git a/docs/angular/src/content/jp/grids_templates/search.mdx b/docs/angular/src/content/jp/grids_templates/search.mdx index 960f7f1d8e..a9270a90c2 100644 --- a/docs/angular/src/content/jp/grids_templates/search.mdx +++ b/docs/angular/src/content/jp/grids_templates/search.mdx @@ -253,7 +253,7 @@ public updateExactSearch() { ### アイコンの追加 その他のコンポーネントを使用するためにユーザー インターフェイスを作成し、検索バー全体のデザインを向上します。検索入力の左側に検索または削除アイコン、検索オプションのチップ、右側にはマテリアル デザイン アイコンと Ripple スタイルのボタンを組み合わせたナビゲーションを表示できます。入力グループ内のコンポーネントをラップしてより洗練されたデザインにすることができます。 -[**IgxInputGroup**](/input-group)、[**IgxIcon**](/icon)、[**IgxRipple**](/ripple)、[**IgxButton**](/button)、[**IgxChip**](/chip) のモジュールを使用します。 +[**IgxInputGroup**](/input-group)、[**IgxIcon**](/icon)、[**IgxRipple**](/ripple)、[**IgxButton**](inputs/button)、[**IgxChip**](/chip) のモジュールを使用します。 ```typescript // app.module.ts diff --git a/docs/angular/src/content/jp/images/anatomy-content-light/button-lt-a.png b/docs/angular/src/content/jp/images/anatomy-content-light/button-lt-a.png new file mode 100644 index 0000000000000000000000000000000000000000..05656c6c3e148d3c1004f51829cfac5cd38d1c4a GIT binary patch literal 80085 zcmeFZXIN9)7B(70L=nYGQ2`aDi4;*lI$Hr10qMO+?Vf-!(a#FVX$36d-s69yqx>t3V!Uncf%?W29wf*{<9UTrM&}xWD7Lb{R39ndx`{p z+3l{SuLXnEB<-i)|5o};3YW$gcip^=kLtQt zjV;crz|&P=5*Cx$udn|~#WmS#i-r=DZSQvPUON+Dkb2MT{J4A5x$@l~ce}o=4u7-v z<)NlyANlTu6#M7=+^h|et=li<7ToNP#FVyw4cZFQV60!Js2XlzSXMyjKQGPH+Xnid z#~!_V8Yx*Diu^@!aT#;*?!EqN?7BDgbGM93;0r?Fi%uVJ`vru;L^umIyq+oMFr?XG2b2qhxlKTv;zP@K>KPz8#x!mD4z5dk)dTra& z!?KV8cCNM#Z}-F5czk$>!-BuRPdVw!bPfN+rHi4*z|+x2XB?rQJ6Ci<9itL;nDStB z`*fcWS)`9YLdsq>_#E_PUdQhEU4Om|29veaR_K!widPjah^>9)%ZL!SSB_HJdD-KC zzD!AF`Ic5brwI933HyTr==s5vXrsSZfl>Wwb`c_2;R+v}zWTkVAUo%|{p0=LG?Gn@ z-VgrS_cYQW{-M;t&e61M_ru*3pat^&-SHoBVAP+ekmb0*RnzP0#|xY#$+PGW^Qfwh zlQKQKq1T%Jb5m*kZb{`R2J2MV=Dmf1<8tAm)<_ADptDmE*xdH-q{f|9B}MCXJCmdCe3h@fbQFfX-nU||c-C$xXAtEMTPgH4b1Bx4PmbCCqS(?rD-Q=& zV8&FZBND#2HzZ)L)CCfIo1m5WPtOPd^A-g#mJJ)I@=u)QvCc^P_O`QD;an~|tZnWa zn)8FwE*-Y$?i+&5BePYbBlE3@61Y*t#yDQ=Tf+%;`LMK}&(qV%HquzP(6EDXDT^GaKZxE@!xQzR=o4fHpYRTOM|StqTyuJUn#D| z5b=X%M#|w}<7$!sE}Bh`Ex$@;InE=hWW&<|@6XkBcJi&pQLC9QkNBR?q>M2b%#q>u zIy1hVQY;xE?+^dlzMZBvp35je9)!UPuF-@Xe?v-UhcC+H;6a~>)IOT#skp)pvwgeyNqshnix;K&&LMaxO|5py;RFL9 zEWhCR7VPAX@(&doWM_u@u6CPuO5^zoPGb-H3wR4P2NLz`Al=2En-P%JoLCt@`9k<< z0?(19Ga5${YC5OeoppD?qU(L}49YNuhl5W#?#WEyOzuAEOy*Vau7gVv(FtMzLgrfh zHE0D002!Ch<~}u=CTW62WozTz+hE7WuGfWD*BWvg5^sEd6H40t3H00|*s|3)9+^!3@n7?$1M}s{5d+7A6NsvUa^+mH=bj$OP391K3=0zzqHAjep=&*J9BzQ%kV!w{n!xr^u4Y` zrjmxmKA7M))FcR@v<*Z&L16v}`e zbcK@kAf8X2bVthzzSd>gvQF&;T@`}I^qL3^CjBwQ0KMJSULF=S0AGHoDms8JR^AJ( zuJGsTQxQb8Qp-IrmxtQPDcarus)C>IhPBPYPtPSu@r6!2Vm3j>0xo7x6Dm2#Rsd^j z7KFTb^lR1==VU$j?~0?v!cfA!Ebl`(Cx80HOl6T<*eeT1zTBIh&`va&gfRZj)eiY)`J9i`dk7r$4A%>ad>V0HB&bxr-R&) zGbtRpavLlQOLbIr_U(}W;5f3vbXnk<`8oQPJSwcA&a?#1FFB^oDdt*C=Sxc_B4(M9dDZC9lPenMfb3^z_4qqKSWdo2+Svy!5M8?%{?V&{dOY zt)OHmt;ILPU^=*skd?S{%Jspv7|bSi^;;DqCTC59$-|s@Md^K3lCwCaw3ba8by>&B zyn^l}wHSf?2-NfD5J>yB&rOOA^jjM~Y?Sm)a&$XwsyX{Fk2M7nZJ`^wc2{-gEU>|q zhuSTNE_1=+^Oi!?4!>B5%wm-=|)^&U~tWokc%O0$z0I?)VnpO`yJAkoq#w zj7j2FqrDK9wDH;-2w-kG+yOKp+Q?Pa85QsT?QZ9wsmpz(Iq9LE#7Pr2;Do%yEgkJb zSl==6@ZX9^5z)#h!@;RB3Zv%cTy9l5q^zL=1jZhS-*E&et9(Ag1ZSutvgVSt;dNO^ z4L(0u6s{}~4z}2{vxQew&HdBlSKPzi)Af%kk|3z5z6&&TX-42W zL=C6uCcTCG$p&_X%IvU`vQ2hbGRo*oa^qxwuOt=N{#JY*D(elS1R2!@fmsRn5>2lN z!Q;aZRHSK$XD+YNL~vW2>0bC6Ok|WlSRTgiu3F$9@9q=qPMqAnFK29rQeWwshiM{u zWDK<1Z%>5>()?Xe=npbFub5%@o$w7B-$E3CRrf-x`X_unV1Rh(o>9CDB!@N~*_=Mb z4ta$d2(+09@efL2WxZ1oTQ~6QJh1p`oi%jHiwtM6=?BPl!~CgIzPA$=R3ZY(Yi-{= z@mmR-YSo9K)MkfTyL?(;H?_zt9j|eFBodfDCH+c zKo?CHcD`(;QMaI7rp2On%3zM*a#W8SA{ldJ2P!>=n3E(q0JxjurzWO?EbzqB37jy^ zu0}(2wG27(lH~l46}o-v>a0zfbRc2)!t@V!q==+MQkOH5LZ50u&KE&77>w#PIwO!v zo5Ux{%i!9>eKCIdYB~35m0cg4M|wYOq-EtB10OrM;=-5BO%)j;Y^n&y%Hvc|!C+?T z?#V9*Mpq#Gp!vUb9YQH!gv`+RyuF7Qvo-F+t;EwCJsQ*(YD-bn&4tQ@?r)H=><7va z$oE5Ttp1}8i5udTO_Sl+gr#7{QU#{FAI-Vv21vNy&ahleO`D_F82cmhiO+^>LrmWn zr0de2=?y?MX1(iPr@V3XTt>RXvkggfmY=o0UkjmVyFHgRw%PN}?5?V_$?ufkXzx=` zyWV}0Q>kM<4S+=_Ja4DP{N!(X(qOt06?5zy^_Q>)+=#ImgwdkvF?GuPnIRg%{;s=p zH$eQ2Dt+?A7jw3jZ#COcGAEK(O;w^VPwLqgDjs?}%bHs3e4uk%PD0 zm!>3-GaB`Ao4K?wQdr5QriS*@SF4*k1b!%IUgtfE}(pRr^i~#L#F<%#A|TUlNnW&xhC6wZB)%Izsu8`+JEkQjhU)u!z-z zq{>Wh$<+AEo(6W;+zTp?v>sgNR7thFVXyt~+T+cZ14D+q4a+=#%Q0gdNhm`e!O$Mb z=$P^2_&sam4&LJB*#pxYa;3P)N{IwI-%F(uNm{ohzSMm=68^4Ve^%o6Wmn0HT~LJV z@jX_BInEPvlkrHh4_HYHSm}4A6wSqSu&!eNRlYTs+!REC10QnFnYa%!VAE(li=V6U zQ8#8z8ZuXrv68Yma`}~*2nV~`IQ4CB%&B5Dg|$h~YFyVP%ys7np7x zC*|^GXmh@}D!zd$J9N1eivPBRxsAqr%~ zKVMmS=GE-8s7>L68}_?*%vm@;f>+@rLA4)*tem|b{Qe2#wKp}>s@|%h9OkU-;HtP$ zGapZB81keTAj`(0Ca=?G$rCEeXFf!c>R;vTG937n9ey+8HikT;L83;NB;-TB05hXf zCv-Jx-FsYf)WRgu>z~stP@8Gv8}BAr&yrXb{0d7Ed3aE@e|t$V8td&)wCIw~%%L|~ zYtH4C-`DbZMb;^3P^+iwX1fwvZ&dvmr}Vy>P35a}SI? zx}a0!d;myx@*N}@oG@IWMg$WlI9KiJM4)}QG_@~j@!7@=9)IhL-_|*C*@<_d zo;ZSv8?;G#7zFCI==ls^Mw1*|oNQ6B{P??up_O{XMsf0xkUHWF zvk#b6e&Sp8iWZbx^Hy{gsWv}1%`vCz@e%b)NkS2`FKGwUZvmmjAjap?7m76fR;RX0 zbARJXrfpR2LtPArofheIGB?Op%@c^qii7- z`6M?^OM&Qcbn-gugeJ4GLAhV0Y;KV!C+@}b-s~>(NnG!j9~>}KJt4d|yq5oQIa5IA z$s~yHeEXj8x;S3rw7$~6G)tn|ST*+s+m!j@FUa*+Gh!3+5IpP2pnyMZ2YdaL>sH2< z@FwRG7az>>I05%gK0Rl7piDkwee~I_J@GmU3NN$0ft36oViVnisP`9k1vWl$D&({+ zA+vdCQ*MQ-J_Pnc2Z7DJYd$8(XB=C*r_Nk_+ftLL&0jESjP8mw<+B_cN zs!0e2pDHI?&Fxd5toLg(_k{OD| zj}w+g>>{St*Vl7Z%$qXEb2Ueew3I`^_SMn_l$1#jGVLsC3r0BCo1unE{QCCf=TMzV z*HxyYQvbjh8?4mL&#iJu=k);vb6$D5iBj5lGKc%qK@eAnB80~Ed7-(JkZ%)ShlN!l z0$pSxmeF;@R=*70{hryWp&kY=iI#E1?;!J#Dr3VRs_5EuK!&Qn57KN7(v#`cA5(AK zV5C*BZkA@a=hInBK3GYSj%eup0@njt&4_z|bBFh?X?g;x|GOj0e@~m6oDd9ld@Z$# zc@r1bI2kZds%Y#7_;&r*gjEL7AS4?Jd>dl1O^_&~dxaTaOaWPNu!Ls_t8PU`lAg&l z*2M-VKh#08;tW6gM^P=} zHWx(486Vd(_r`mSLF&^N*3Rkj2b+2Sy==?;2D_Yvw`;@SI)5!jSt7_3zE< zilAKA6uz8wtJ_bbkGn~m^=<8rql zin~5hVvmdyq**ICa|OAYG`s;T5@T&^ zR45}yt)410M<=qKr6%_(J`h!_W6wpE|L#amLE+Ct0SPVna)Dor#~t-)XYw0PCD- zk_^K7y&{dsX?$n)KOpL+iBA~aXsn9dFdT_I^cBw-MHz7bLui2N zx|($5Y;Kp0MbTr@SaPvB;vr6kNyl}FsWTgAoFd=BKZ?OOn{V>{%iw)OSm$$@A8(s? z3b1@ok`~~hD$p7p`Ktl&WT+n6MfQ_-ql+_vU49id0X1=9yqu=X9lMuqRNBjzZy0K{`rZD2AiCbS#?r$$< zhwf(in8v6$B=ZiLyGxJFsCg79ciX{6WQO=;1uZWKT=QjgQ(sN%Mm_-lId~rAci!QYp4N&SJ^1PqY z-_1y_jY9{~@5R3=UB~TI{PB5Z8x>HvLx}6}-k-~G>*!mlH;q#PCiHEB#W-SpeR4mj zTUH8}4rD=Sz%YNZ;BUC~0l%Fve5Env_Uu@4-BJU~+PDP`Ie`asYP zBaIDnly>pI9MoDk5AXJK&~uWxs|PW<$QBIe${$5(S|`l42e$c7_)6%bpM%02K{ z1n0&M%RAV63OV{on(A>KP$s~a40#F+6cIfA2;r6xJD%2M#hoI~RUY&McpgBNNWLT# zqEPO7@7m+zk)2SV^S#OX8_^nY5@P8ZV1lBL-Q*N{^ee#DvU@+B!j0Y_J=}mCx8Mk% zAy0emFPkQVnDRP@6WU94JqPVO2=;wzpjBYuhdN8W$PqUMa?#UUJ6#-29SYTEUW`6m zjNEv+tS7V=7zhU$$T!ZWQt8Mw@?zIm&RYLbO&J2|HOc9l7vIAidl5_cbKWd{#U~Ja zpXZ+q?a;Z&SB|WM|7@0oWO#JH^S))ny9ijGPH&{U^4XJ=sF60;`=KdyaiV4mxybEh zm6;#zth*2)oO=?4)9ThV&2a475$K-I26aM(@h|*`w-GNnwE+uJgjm5uPWDJ|y?v2$ zOd)qJM81i173w!Ro28qYkek0&3X^>77>@gEI8^QT=>%?cFMwqqjh{-B&y}B+i!ZpS zI-7p&`KrxZ_pzhfNz~1K7SuEbyd5TKM!v5$ZY?d>w7=+;&NQt-<_H-unph-^w>t+a zrL7OM3R+)T-51gx?DUHt2ox^(lTJ*4_$xs4EDhvR3(;z(ML1wM^hq9A^!c#Q$yT4I zMm6!On_o-UX!rYEag!k(7HDd*8nHNUNJWAAOe+kUNx)#~KKwHRj5KNUV$6hJlN{iu zMVm_6$8-IBRGmLxt`h_Ec5a22V*g@?Z6pgR1TZFft`A3^wM@DOr2(H^W=pxn<$0Lx zHH{Ip%nwo(Qr_V8Yr8cSiP6iGWzW$TZ=NWj^q?L$TiMJ;BYC4?p{gaA5^i&TV%-(= zn_w<%uUI$a~e2D_s>g5Rj-OtgI~g*<0ZjeFvhTw=na18kj6P{hZ|%V7GW z^o@(&1c`(R`iYM~{ljmz$O$E=+4%)HyVOM8+IW*ci$EfkgqbInVzYY0w!Vk0`RphO zG@LsC&OV$4;2(INydnNr1r9eOpMgYS?z5C2%W z1>JbU59&k*n6vLGJPd=KxBB(u;e&3c#e2}Q2xnF2-@sk-nlhS(Ut}Lt=ni_VE(i64 zQ^%8>GNMFZ+x6 z&6q~~J?Q*JG+Hi4&Jt+Pis@13nEJ@bI(4b*tjKC8QI3MiOiUqy zhx;XAD)aYJ@$oBk7s zY0Rn22*iN?>gS%G_q`cD%KX*zuAa=hTrhqk89|Nj)Gc|fV%+DX33%N*5~vp-WdD?h z(BKCK%Y$-JZyf~SVN&4%`nh2zAa2f`xElXaHm62HsUv2XUj;OT3TD5qKDqYIW6V8m z-eq6_QSc7E1cCwim{4rxLv4Uw>XWp+_o-(}h~s8&7@;)nW1DMz51Y&+#849)`(|gA*_xhQdY%qV9AQCHK^C*;RW03-1i~ z+p58UA_*FTK<7ZrHjw=MW^N*~LV=O-))? zNx5E5=i+qaz(6!~^Xvk+50{}4NK-}-T4|P1Y`_-XBf??O>pylhOo2MKP)C39VSYpH zp*9#|MtSaxnT~)l6Lk0I09dw_ZZ5V4OV|FsoCWVbtMQ)Ln+0+aC`4qz5HkU2bspGd z!s_K*Qb=u_&_PgBoKt)Hs}mnqGAVqrtHD))FJZQGrVtY-8pP#!*lead)L3R-Az^8`~|7HJR8!L3ao!9>{Ll zAe&PgPZcb;;1cJzNdbH0Jr{Zl&X;6w>_6qZC89AP9YOmjY0Je}+Ye!a<`CFI32b3m z3z{u^buqN*LCay)6YK9^DQ+%O+9KR{jzNHKq&FCPbB*9pGPScuKep>VI8+GaGp)-D#<@KnAs^(v$XN)QtW0flQOrmG@P&q-s2 zzcm59M0?5Q)a;oN2%@gmh`ex5+RZ116+SG*1*?91cE)3BJG6`qeoj&(%a1WhGtlXq z;n~kC$jw;0vg3{-<6GVU9UtF#3=YfKp*PYs!o}k{h%v5VpWW5hO%$QNE==>h08S}) zl{-B1Rp!%+Yq}S*DDS+CMN7-<@gmhASDc;P@%g0$RhmoLlUhXuQ?4UDxheWVGo;*H zLkNYN`_US?(D)u|h`FMddpZyxhojEbQ7{QVT+=UCW za{8|cJR%C|GFDKN;Ywi_{th4b3ATfIeGJv%$Nl*C(x}?;uu})Zu}+4qL6M>W4Xe7k zo+-8XmI^9m5|UpiP6?CliY{$|Gk@WoG5WPl!>!=ovAxPCt=1wcw(2TK@-<6~@vy%6 zJ`ElS({vthB7pOzLT6zpz(Rqowgj=PL%JQWVdjp5}~kwj_iQDIssbX_nsMZ7B{`Z zXA$L2W?dg2X@4{;l&u2pszhu?;ND?-FV5>xqI2s4AM*hx-2sK2b5N!+P$e$237sAb z#1bON<&+!oAEf-%`@fTCbKZj_1niKu%Kc%ld!ojvhdNmGI#V%-)0G?y74f3rejY$) z6l+HZs96d6Vp-lREsjP20r(+h?;Ml*^poTTYttNJkTk=D>Jp@oKbCWwJwY1~7Onp= zbdPQH$(2{}?KQ<`h3ktSZav@S(#gA$FdznSF#6}qyFmjG*W9_g>igVjY_OC0QGzHR z=_LBMCsFeqI~j5`CEmU5glLhdlh02_7fOs=cP#|F2{CdiDtsW_jLM7={(s~ zYx^Mp(t?8NkV-gdpJoMbzevxjBG1ZL)4%~oNTyY8OKjpK7?cR{qkIa+Y%lW)Kjq84 z3Y2I11grybw7=Hj2kShZo)B{w9SNtnlpKRoTt&&j=>h zCIs2P!T+ zGYqFf741DaaFderIlh>cTGPem$FI^_@I?I2+Ra4`Xn&PRNT-DYL$}f_~@qRVH9scYJs0kpB2v zsJ22m%RMmD;XadM(T+clR~`=wyyP8^(jZ6XBa*Gs^xud39KC>f(NjN*BUmY0B&dI{<2~-SGh+XZ>{! z(Dqb}D|j`y+8phWTj(!jL!Do={3ErbVT~t$-Ea6`2XNIOeeGNd9SI?~JEljczSJF4 zZT=6UflM$90St&^!#&tPUmBf|{!o|Lcw4)mNrt?5?J%Sn-nu1NAAi=fGJBP?H;%y^ zuS0`fAaV}mYdhB`#j95jyEp3Bv+LGHULtqUY)r(a!gBTB7a5k*|4mN5yDOiOr$T2E+`>_dwOHPPh2aVtzN!z?v9n1? z`iz^mT^y3QLeFj=re?8K?{oc&2i!562q9ij&%L^QLJZdCR)hd-<&KJk()#b8pVIB% zLuNDnXv*xUYr36+{q9ExZx!@?!Gm2N9lIUA{Jn{y7O^R%%G{obW0Rf!50@G`e;RPB zOH0?lV>kF*2l6*3vYJ4~%HYZKWmWdW7fj}KA{Htdc^myEo2x&3*xr<3k!5h$Ke*!0 z{!I=w;roCjdADhRO69#Yem;j`jgq)!_Wk?!ul2aCeK%yS8{)9)T=85n zuCn=LRh%_>8WFCat5VFjGD5W{(w(NflrbY$t47}26ToN0NGc@6uvH>?vpKb5qPb;g zsGqhTZr`Mbm%$|!a`aBv2U%9wt1Og{L{$WT?_SXxs12~fTfL1?3rd4~GW+xG7OLuU zVyRz-t+%XcQx);;t1=BXgOq;d^hT65!fwvL#aV5ss?dwE$3A@(@Y_UUyRgp3s&g|PA5z{Z&wnnKvBG=3&eS1{ zM6;R_d0s|G%SXGX;waX5iDA3&1fdC;`SVFnL1m7`%8Xca2FEH(A!TGZhl1!uwRE~> zrB4OyZKSKF4KYe)#o<0(Z^EIbC*Y9j@L|*8CS=+1;*#|Ioc{3GOT5?=WR-T*p#nqHC1%>)V@aR!OG|=U$l~d@nJgE2WQXzUYurc1rxH zU82?MMn4liY?d+{VK3N8>6B>ZV5Cg(O-PP(kyjc|of^C^wboC?vUyBymW?ttFOl9| zU16@LEx2oYb<8zFQ_yrs7gZ{{MXb+)~Eyh`HLJNk(WF)C>>!QBtc1Q+JGk6GI{ z)b}21O}@x+yS_NR;b@`j1XhZJ=Awt!`>26^a8++YnyHd`e4(qChk0wE>z06fbwQuD>ZHv1VyG{QI~zS z5$RYn>g!bOh}BBrC4x2zK8Pc0$#5P#4mTa2CHvP!E~XEsABS6%c9K~$7A{Yv{EJHl z@~7h9DZQ-Y#G6D)Zj^s7l86DZ?;uT+)S=KF)Sqf!jZ-i;=TerQ7spw+{QDy3%d{BB zy19Hy_hAudiN75kwr<09jBx=;sIpxf_pY*&=Nh{%W12%uFGd*9a^_FNyxJ1lWp|Oy zF5QOrVsSX*5%2I-h9%eQFDBL3xh`9C9l81O=!HvR7xitTa^Dit(HN)jurV^xDO+t; zyJ{oIrf6g{yrQMme{wxD=j_{9#A1Cy@5Z{MbEEHOX`LT-!#ZRYJ=$ry7^FHvHK_8P zM6wuTGf5gb4s%hq9$_lP^v3k5l_`|UNmAmCJAdyRj&2dUg%Bjuf@^^uU2hW1YfWqDkx)+)!3^e-uQ^2j~|6FgqU7d<-&^j z3aUH!UIN}QO!yPUL28E11Ca7QY4!(44y!P*{1wWHB4v}2(O{DoxH{SE*l*AF#ww}& zEl`|nKto9Uf$V?gwd%XE@%dR2H-fG}*`q@FDs6ivNoJ3xwt!U3i3Q%%-_Bd+Su|7~ z|Cp1lm0y_mn80nTefs)gDbvU+Q~T7tkT=-GNLM&EPeqEImT=(ugY-R^)=~j)_v+t@ zb?sM88(r8Q=;-#3w+b2H=`syVq!&Qy*%s^|zKE%X^+GUoN=#@@K`VP@~=EZ(*^5D#5=9 znsH9!{Q+3lv6c{j8r+lOQ|~!2FyM(G>f40d9bU{#v*G&nlw3>LNH6p~j^$hMMoCvy zZTq>K@eP?vTM%hZsCJs)f)v_B(mjHv9j1&OvziS+1VVKu#%F?1Ule;L$@YNB03%e3ORCfhek_Su~ktt`@&RGHMeZ9htcc3ATe zg6JJKIoWMLWe_H?6ZR`~;ng(_2d+zY>a6t5Ciiciwa1>@yswFc;pVvaCZzIgh`Wo} z9X>Xm0XI#9dO13o|IqdPPM!k?t4RtGERc*{+9KYu&2PC1F+?jW~DEH@Q1 zuA+EjafA`4F+XLD!|e%FL`X1wd$sk|h}C0&6^!hOWhwu#rhp9d3!jc#*uF?lmq;&Y z^{GJ{|L!BdZ=4D*L*)#0XQthxO_Z{Zl_$e5csH(uEISj`Q%4-e(+O>3V{&u#Wf7Kw{OSTVvRNRFA+HlxPQPZEX|SB@1JyXnrH5`#3EZ*XU0pP? z-jt$sC9O7PmJq+(?tPWr^UYu{Hhs!H+e*7dACQdb7pG7Er#?U{hyHe)abRMRO&gis zm18H$v;MY$^?Apjs{^L1O?!{oQCsQg=e5sx*@U%u`!1tiOI+r_r(gyI4yEi;2wobm zSH)~x^+xm#cuV@p$slrGzqYmai;Ps2G0e)&P9W2Jag%5h`-V}s)$yjOVegUJx1@?K ztD0rg+3B@^|N9T~NX+&rwUmaV1Ya4engr7hC%g7b*#q4RlABd)D(9Cr(zl8O)krkY z@qYFCbP1V>CSjn9w8B^BKK`UKDOzewhTbCGO$7WcBn_$>WQI+O*D%|*)|K1Y*F9C*n_i^LrxbBFw1*r2_Q=eA zcrEV7(AntA`WJ-gHG{9baWdoKMqHB1FYl`F2D43&7XKRu-xRm-NY?1HqhginA2sAb461O~fq-RS1;H)@Fv>|oM%kJ@cY&=AGZV@5r@pFCR=lr+>NkS? z_t$z98`JdxSUZ#}qC~SN#L*Th1%dV{52a%X{mtDIlIe=5hS@^0juF#zlN^kt*+{!L zMQTr`IAGy-e2|{j5n1g4?U%F#Vi6J`iYiBQFISD4d*W4!8yA`_-QRt0S8rUXoj|AK zWhyjcsTb30#2xN`?e466zZe@nuXNBZDa4%tPkT4f+}&9kx!5w~9ER`SsC{42YWvs^ z(@1VmMqbD!$jtH)B&+IX_*0YgQ;_M|m}mBci<=de?n(GRno5Wa-fm2f-@<$Y{*x*z zy*pz{nFRuar60^pC$>{@tm7D(d6q{zRfWAiy*5wh1>2RT>DUY7D|%MC>BPeF0?)C4 zhCX)AgO>{i{V%v4(idL4B6JR#WE5y=f=Ac!C*TpWirzx`FEsd0R7&9sx(oHTP8azU zXwZN1;JKsE{1%3nWSqV8UhiI8Y`l9Rw`u#$+EgdyDM%owU>)e{*v`f}>5h($am>3p zBb+P2c{ofcXpeO8azstGpR46U$UGD%7j%gR8j<8>z*%OWa4o1%}SBWpf zN9;xpwuUuAQFwMJZwmDN2hM()j)UpNt(g``4VTaw*Z}E3( z4Ev07N%bX9dY6hQdYu{z^(<8HBfritPix7*CjO;>!dhu*X@!3Juz#r)y(kuOn=nVu zPTgw4)+CVcORcyYDg4EU@bN_C;pZ6-pTunxBhz*n$8i@K9Xx%pHpxDULZBG)ZbgEs z;=-odkY_l8zS@~ymmn$;8q{Q*{_sZn_ydYc^3;Jt7hR!m`G}?-{m;;?tr;p%oW%@Y zf1rME3UvP1h5{Y4IE^)VjkV-XVPvEnOyTLrOC>LQPqMJNCe>}mzvp7tn)e>lk9GWZ zR>>1!o1RsLah}HuqstuNb1je4bfh?hrCfRR2aIKJ3?EK;ah&af42B*Mff})o@TCPF zc3kVeQ1$uq=j#fJihOztJ~GKgd|1&!0(tsMkKw`%ye|re#Y$Ba2yz>j%lIl>w5W{n zn~1$wwK8&w?LPlTjT%G^! z)+DWrJW2?cZm{_(6U9fEF_G3a>LB~KD(z_xj)eye8Yv^kKiU-fUT<6p5}N5nkm%V} zoA|iiW|C@We&%8Fxntwdb?P;bkpCt$jEOf}Os zc+9oOJfiHCgUbnD41g-_qQ2oa+qXV%NrVTM8 zrXQ0E2ZYlbbQn&2d@LX=?7uvPqM2zGwCRBP^c9nXQxZiNIk=9kSwyM>#z4Eq#p`=T z)(LWthuWCc1b>&7;3Y3Zl`yhPc+b=pdaIpIkDPhLXa6O5akOvB?M06i$MvAyx87qS zdajJPRH3O};R);GB&Z=Ny=53hP7XGTBas3ZuA~(e!+!z52_r-o7H%}MpY7j#IsBgR z^=|w7fP0<&m)e!r3YVk|^>X8u_*|{Rd*UdMrfKcX{o%@uLjo>l>QU{%-2}VLse^Z{ z##!a!x<)#Hi~zxd&9akcRFy`NCpcx^C=E>kTz-J z_Ov6_(unu{ zdec<~pakCC7ER$%8@$ojmYNuy7JOYBsPHhyxPE2zov? zHWpm%(VA>@nU{}mV!$M(`t|wud&gg8WqBX_cutU@Toqr1+O+OY8;a8Jr}?d^;J3Qt z&B}|*1G6WCqN>DAC@qBAB5sF@5ub{UV%PrKY`g>29(@^u(yKAmXb(Vb%IRxFZ2H(U z?Hk*Y{NUpSITH(W^^uf7qoQ7f#E1=Xt64A^^uIQ^Osy)D$y?nEx9}I2SYdGE$STW9 zI>QfcJ#H{XH7K}@)J6qOVEiz+-tfimEYr$DU#TigYh~{WAI&G-|yrW|t>o$QVA zrWI6TNSGRdvBG`ZKlNfPJ`{B829{o3g%|{&){W%Bb$Sw+g7@MhX#e&s>lyT^Pc;_( z-g-(CbiieZD#42$$f;UaJ$Y1-R^ICB>ZSuVlKiXdnAEtG{{=+xm&=*sq3xfvZm|^* zJTHtp{TXfhs0A=sil;D$IolMwmS8(|b#=6U_1wKe8V4UQZ*Puj7}*xa{hT#=?Erk= zZV&e?<)FDcBCff&28^G3bpMgMIN8!Dr=}*Tmr-hb+QV8D zpwo2M3aT3RL}UV+BU&l|hNdSaB-FECa|r$UX!h4H7j+etEcIEaXbS*eH*rg!?X84O zB=z+!-MCHr)|008QaLj9`#F>CF5d@!m^J#YE9Rⅈ5m*Eg{iY$}bI3F~40FSRF^% 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
+
+ A - Contained ボタン + 1. アイコン (オプション) + 2. ラベル + 3. コンテナー +
+
+ B - Outlined ボタン + 4. アイコン (オプション) + 5. ラベル + 6. コンテナー +
+
+ C - Flat ボタン + 7. アイコン (オプション) + 8. ラベル +
+
+ D - Fab アイコン ボタン + 9. アイコン + 10. コンテナー +
+
+ +Button は、そのコンテンツを `base` CSS パーツ内にレンダリングします。ラベルにはデフォルト スロットを使用し、ラベルの前後のオプションのコンテンツには `prefix` スロットと `suffix` スロットを使用します。 + +```text + +├── ::part(base) +├── prefix slot +├── default slot content +└── suffix slot + +``` + +## 作業の開始 + + + +{Platform} Button を使用するには、基本的なプロジェクトのセットアップについて [{ProductName} の作業の開始](../general/getting-started.mdx) トピックに従い、その後ターゲット プラットフォーム用にコンポーネントを登録します。 + + + + + +{Platform} Button を使用するには、基本的なプロジェクトのセットアップについて [{ProductName} の作業の開始](../general-getting-started.mdx) トピックに従い、その後ターゲット プラットフォーム用にコンポーネントを登録します。 + + + + + +**igniteui-angular** パッケージを使用する Angular の場合は、パッケージをインストールします: + +```cmd +npm install igniteui-angular +``` + +次に、`IgxButtonDirective` をインポートし、コンポーネントの `imports` コレクションに追加します。 + +```ts +import { Component } from '@angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; + +@Component({ + selector: 'app-button', + imports: [IgxButtonDirective], + template: '' +}) +export class ButtonComponent {} +``` + + -まず、次のコマンドを実行して {ProductName} をインストールする必要があります。 + + +**{PackageCommon}** パッケージを使用する {Platform} の場合は、パッケージをインストールします: ```cmd -npm install {PackageWebComponents} +npm install {PackageCommon} ``` + + + + 次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```ts @@ -49,18 +194,10 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; defineComponents(IgcButtonComponent); ``` -{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。 - -まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: - -```cmd -npm install igniteui-react -``` - 次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx @@ -72,7 +209,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります。 +**IgniteUI.Blazor** パッケージを使用する Blazor の場合は、次のように Button モジュールを登録します: ```csharp // in Program.cs file @@ -86,15 +223,22 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); ``` - の使用を開始する最も簡単な方法は次のとおりです: + + +```html + +``` + + + ```html -Click me + ``` @@ -115,15 +259,66 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); -## Prefix / Suffix +## 使用方法 + +{Platform} Button は、アクションのトリガー、フォーム データの送信、または別のページへの移動に使用します。アクションに適したボタンのタイプとバリアントを選択し、必要に応じてアイコンなどのオプションのコンテンツを追加します。 + +Button のコンテンツは、そのデフォルト スロットに配置されます。アクションの目的がすべてのユーザーに明確になるように、アクションのラベルをボタンのコンテンツとして追加してください。 + + + +```html + +``` + + + + + +```tsx +Save changes +``` + + + + + +```html +Save changes +``` + + + + + +```razor +Save changes +``` + + コンポーネントの `prefix` スロットと `suffix` スロットを使用すると、ボタンのメイン コンテンツの前後に異なるコンテンツを追加できます。 +`prefix` スロットと `suffix` スロットにシンプルなテキスト、記号、絵文字を追加する場合は `` 要素を、アイコンを追加する場合は コンポーネントを使用することをお勧めします。 + + + +```html + +``` + + + ```tsx - +Click me- + Download + ``` @@ -133,7 +328,8 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); ```html - +Click me- + Download + ``` @@ -143,13 +339,14 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); ```razor - +Click me- + Download + ``` -## タイプ +### タイプ 属性が設定されている場合、ボタン コンポーネントはその内部構造を [` +``` + + + + + + + +```tsx +Disabled ``` @@ -296,71 +543,87 @@ defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent); ```html - - Small - Medium - Large - +Disabled ``` - + -```ts -this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent; -this.outlinedButton = document.getElementById('outlined-btn') as IgcButtonComponent; -this.flatButton = document.getElementById('flat-btn') as IgcButtonComponent; -this.containedButton = document.getElementById('contained-btn') as IgcButtonComponent; -this.fabButton = document.getElementById('fab-btn') as IgcButtonComponent; +```razor +Disabled +``` + + + + + + + + + +### インタラクション状態 -this.radioGroup.addEventListener('click', (radio: any) => { - this.outlinedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); - this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); - this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); - this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`); -}); +Figma では、有効なボタンは **Idle**、**Hover**、**Focused**、**Focused & Hover** の状態をサポートしており、`State` プロパティを変更することで切り替えることができます。コードでは、これらのインタラクション状態はプラットフォームの Button コンポーネントによって提供され、キーボード ユーザーのために可視のフォーカス インジケーターを維持する必要があります。 + + + +```html + +``` + + + + + + + +```html +Ripple and focus states ``` + + + + +### レイアウト テンプレート + +Contained、Outlined、Flat、および Floating Action ボタンは、柔軟なアイコンとラベルのテンプレートをサポートします。Figma では、アイコンの表示 / 非表示を `Left Icon` および `Right Icon` のブール型プロパティで切り替えることができます。Icon Button にする場合は、`Content` プロパティを `Icon` に設定します。 + + + +```html + + Span button + +``` + + + ```tsx -import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; - -const [size, setSize] = useState("small"); - -const onRadioChange = (e: IgrRadioChangeEventArgs) => { - setSize(e.detail.value); -}; - - - - Small - - - Medium - - - Large - - - -
- - Flat - - - Contained - - - Outlined - - - Like - -
+ + ★ + Save changes + → + +``` + + + + + +```html + + ★ + Save changes + → + ``` @@ -368,45 +631,100 @@ const onRadioChange = (e: IgrRadioChangeEventArgs) => { ```razor - - Small - Medium - Large - + + ★ + Save changes + → + +``` -@code { - private SizableComponentSize SizableComponentSize = SizableComponentSize.Large; + - protected override void OnInitialized() - { - } + - public void OnSmallClick(EventArgs e) - { - SizableComponentSize = SizableComponentSize.Small; - } + - public void OnMediumClick(EventArgs e) - { - SizableComponentSize = SizableComponentSize.Medium; - } + - public void OnLargeClick(EventArgs e) - { - SizableComponentSize = SizableComponentSize.Large; - } -} +### サイズ + +ユーザーは、CSS 変数 `--ig-size` を使用して のサイズを変更できます。 + + + +```html + + Small + +``` + + + + + +```tsx + + Small + ``` + + +```razor + + Small + +``` + + + +```css +.button-size-small { + --ig-size: var(--ig-size-small); +} +``` + 上記のコードを実装した結果は、次のようになります: - + + + + + + + + + + + + ### ダウンロード - プロパティを設定すると、リンクされた URL に移動する代わりに、保存するように求められます。 + + Button 属性を設定すると、リンクされた URL に移動する代わりに、保存するように求められます。 + + + + 属性を設定すると、リンクされた URL に移動する代わりに、保存するように求められます。 + プロパティを設定すると、リンクされた URL に移動する代わりに、保存するように求められます。 + + + + +```html + +``` + + @@ -416,7 +734,7 @@ const onRadioChange = (e: IgrRadioChangeEventArgs) => { variant="contained" download="url" target="_blank" > - Download + Download ``` @@ -446,11 +764,127 @@ const onRadioChange = (e: IgrRadioChangeEventArgs) => { - + + + + + + + + + + + + +### 使用すべき場合と使用すべきでない場合 + +**使用する場合:** 状態を変更する、データを送信する、またはアプリケーションのコマンドをトリガーするアクションには Button を使用します。 + +**使用しない場合:** アクションがアイコンのみで表され、テキスト ラベルを必要としない場合は、[Icon Button](./icon-button.mdx) を使用します。 + +
+ + + + + + + + + + + + + + + + + + + + + +
DoDon't
Button の Do 例 1Button の Don't 例 1
Button の Do 例 2Button の Don't 例 2
Button の Do 例 3Button の Don't 例 3
+
+ + +## プロパティ + +{Platform} Button は、そのコンテンツ、外観、動作を制御するためのプラットフォーム固有のプロパティを公開します。 + + + +Angular Button はディレクティブとして提供され、次のプロパティを公開します。完全な型定義については API リファレンスを参照してください。 + +| 名前 | 型 | デフォルト | 説明 | +| --- | --- | --- | --- | +| | string | `flat` | Button の視覚的なバリアントを設定します。 | +| | string | `button` | ネイティブ ボタンのタイプを設定します。 | + + + + + +{Platform} Button は、次のプロパティを公開します。 + +| 名前 | 型 | デフォルト | 説明 | +|--|--|--|--| +| | ButtonVariant | `contained` | Button の視覚的なバリアントを選択します。 | +| | string | `button` | コンポーネントがボタンとしてレンダリングされる場合に、ネイティブ ボタンのタイプを設定します。 | +| | string | — | リンク先を設定し、Button をナビゲーションに使用します。 | +| | string | — | 現在のドキュメントとリンク先との関係を設定します。 | +| | string | — | `href` が設定されている場合に、リンク先を開く場所を設定します。 | +| | string | — | `href` が設定されている場合に、リンクされたリソースのダウンロードをユーザーに求めます。 | + + + + + +{Platform} Button は、次のプロパティを公開します。 + +| 名前 | 型 | デフォルト | 説明 | +| --- | --- | --- | --- | +| | ButtonVariant | `contained` | Button の視覚的なバリアントを選択します。 | +| | string | `button` | ネイティブ ボタンのタイプを設定します。 | +| | string | — | ナビゲーションのリンク先を設定します。 | + + + + + +Blazor Button は、次のプロパティを公開します。 + +| 名前 | 型 | デフォルト | 説明 | +| --- | --- | --- | --- | +| | ButtonVariant | `contained` | Button の視覚的なバリアントを選択します。 | +| | string | `button` | ネイティブ ボタンのタイプを設定します。 | +| | string | — | ナビゲーションのリンク先を設定します。 | + + ## スタイル設定 - は、スタイル設定に使用できる 3 つの CSS パーツを公開します。 +テーマ設定、CSS 変数、または CSS パーツを使用して、アプリケーションのビジュアル言語に合わせて Button をカスタマイズします。 + +### Sass テーマ + +標準の {ProductName} テーマ ワークフローを使用して、アプリケーションの他の部分と一貫性のあるスタイルで Button をカスタマイズします。 + +### CSS 変数 + +Button 要素で生成された CSS 変数を使用して、特定のインスタンスのテーマ値をオーバーライドします。バリアント固有のテーマ関数は、プライマリ テーマ パラメーターから関連するインタラクション状態の値を導出します。 + +| プライマリ プロパティ | 依存プロパティ | 説明 | +| --- | --- | --- | +| `$background` | `$hover-background`、`$focus-background`、`$active-background` | インタラクション状態ごとの Button の背景色。 | +| `$foreground` | `$hover-foreground`、`$focus-foreground`、`$active-foreground` | インタラクション状態ごとの Button のテキスト色。 | +| `$border-color` | `$hover-border-color`、`$focus-border-color`、`$active-border-color` | インタラクション状態ごとの Button のボーダー カラー。 | +| `$shadow-color` | `$resting-shadow`、`$hover-shadow`、`$focus-shadow`、`$active-shadow` | Button のシャドウの色とエレベーション。 | +| `$disabled-background` | `$disabled-foreground`、`$disabled-icon-color`、`$disabled-border-color` | 無効時の Button の色。 | + +### スタイル パーツ + + は、スタイル設定に使用できる 3 つの CSS パーツを公開します: |名前|説明| |--|--| @@ -468,15 +902,202 @@ igc-button::part(base) { } ``` - + + + + + + + + + + + + +### Tailwind によるスタイル設定 + + + +カスタム Tailwind ユーティリティ クラスを使用して Button をスタイル設定できます。最初に [Tailwind を設定](/themes/tailwind) してください。 + +グローバル スタイルシートの Tailwind インポートと併せて、ユーティリティ ファイルを含めます: + +```scss +@import "tailwindcss"; +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +`light-flat-button`、`light-contained-button`、`light-outlined-button`、`light-fab-button` などのバリアント固有のクラスを使用します: + +```html + +``` + +感嘆符 (`!`) は、ユーティリティ クラスが Button のデフォルト テーマより優先されるようにします。 + + + + + + + +`igniteui-theming` のカスタム Tailwind ユーティリティ クラスを使用して Button をスタイル設定できます。最初に [Tailwind を設定](/themes/tailwind) してから、グローバル スタイルシートに Ignite UI ユーティリティをインポートします: + +```css +@import "tailwindcss"; +@import "igniteui-theming/tailwind/utilities/material.css"; +``` + + + +```jsx +Contained Button +``` + + + + + +```html +Contained Button +``` + + + + + +```razor +Contained Button +``` + + + +感嘆符 (`!`) は、Tailwind ユーティリティを Button のデフォルト テーマ スタイルより優先させます。 + + + + + +## アクセシビリティ + +{Platform} Button は、アクションのための、また `href` が設定されている場合はナビゲーションのためのインタラクティブなコントロールです。 +コマンドにはネイティブのボタン動作を使用し、ナビゲーションにはリンクの動作を維持してください。 + +### キーボード インタラクション + +Button は、レンダリングされるネイティブ コントロールのキーボード動作を使用します。無効な Button はインタラクティブではなく、`href` を持つ Button はコマンド ボタンではなくリンクとしてレンダリングされます。 + +| キー | アクション | +| -- | -- | +| Tab / Shift+Tab | Button がキーボードでフォーカス可能な場合、Button にフォーカスを移動する、または Button からフォーカスを外します。 | +| Enter / Space | フォーカスされたコマンド Button をアクティブ化します。リンクとして使用される Button は Enter でアクティブ化されます。 | + +### スクリーン リーダー / ARIA + +Button は、コマンド アクションの場合はネイティブの `button` を、`href` が設定されている場合は `a` 要素をレンダリングします。 +ネイティブ要素が適切なロールとキーボード セマンティクスを提供します。 + + + +- Button に意味のあるテキストが含まれている場合、その表示コンテンツがアクセシブル名として使用されます。 +- アイコンのみの Button には、`aria-label` または他のアクセシブルな名前付けの仕組みを提供してください。 +- 無効な Button は、レンダリングされたネイティブ コントロールを通じて無効状態を公開します。 +- Button のクリック イベント ハンドラーはアプリケーションのアクションを実行するものであり、Button のアクセシブル名、ロール、状態を置き換えるものではありません。 + + + + + +- Button はネイティブの `button` または `a` 要素を使用するため、支援技術は対応するネイティブのロールとキーボード セマンティクスを受け取ります。 +- アイコンのみの Button には、`aria-label` または他のアクセシブルな名前付けの仕組みを提供してください。 +- 無効な Button はキーボードでのインタラクティブ操作に対応しません。 +- クリック イベント ハンドラーはアプリケーションのアクションを実行します。アクションが表示コンテンツやネイティブ属性から伝わらない場合は、アクセシブル名と状態を別途追加してください。 + + + +### アクセシビリティ準拠 + +このトピックは、製品レベルの WCAG、Section 508、または EN 301 549 への適合を主張するものではありません。レンダリングされた Button とその周囲のアプリケーションを、対象プロジェクトに適用されるアクセシビリティ要件に照らして検証してください。 + +| 基準 | コンポーネントの準拠方法 | +| -- | -- | +| [2.1.1 キーボード](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | ネイティブのコマンド ボタンはキーボードによるアクティブ化をサポートし、`href` を持つ Button はネイティブのリンクのアクティブ化を使用します。 | +| [4.1.2 名前、役割、値](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | レンダリングされたネイティブ要素がロールと状態のセマンティクスを提供します。Button の表示コンテンツが意味のあるものである場合、それがアクセシブル名になります。 | +| [2.4.4 リンクの目的](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) | `href` が設定されている場合、Button はナビゲーション リンクになります。リンク先または目的を識別できる名前を提供してください。 | + +ユーザー側の責任: + +- すべての Button、特にアイコンのみの Button に、意味のあるアクセシブル名を付けてください。 +- アクションにはコマンド Button を、ナビゲーションには `href` を使用してください。一方をもう一方で模倣しないでください。 +- アクションや状態を伝える手段として、色、ホバー、フォーカスのスタイルのみに頼らないでください。 +- Button のテーマをカスタマイズする際は、十分なコントラストと可視のフォーカス インジケーターを維持してください。 + +## トラブルシューティング + +このセクションを使用して、Button をコマンド、ナビゲーション リンク、またはフォーム コントロールとして扱う前に、境界と一般的な判断を確認してください。 + +### Button がリンクのように動作するのはなぜですか? + +`href` が設定されている場合、Button はコマンド アクションではなくナビゲーションに使用されます。コントロールが URL への移動ではなくアプリケーション ロジックをトリガーする必要がある場合は、`href` を削除してください。 + +### Button がキーボードでフォーカスできないのはなぜですか? + +Button が無効になっていないか、または周囲のアプリケーションがフォーカス動作を変更していないかを確認してください。キーボード ナビゲーションで利用できる必要があるアクションには、フォーカス可能な Button を使用してください。 + +### 既知の制限 + +Button には、プラットフォームに依存しない次の境界があります: + +- すべてのアクションには、テキスト ラベルまたは他のアクセシブルな名前付けの仕組みを使用してください。ラベルのないアイコンのみの Button は、それ自体ではその目的を伝えません。 +- `href` を設定すると、Button はアクション コントロールからナビゲーション コントロールに変わります。アイコンのみのアクションには [Icon Button](./icon-button.mdx) を使用し、そのアクセシブル名を別途検証してください。 +- Button の視覚的な外観は、周囲のアプリケーションのアクションが利用可能または有効かどうかを決定するものではありません。その状態とフィードバックはアプリケーション ロジックが提供する必要があります。 ## API リファレンス -
-
-
+{Platform} Button API リファレンスには、対象プラットフォーム向けの検証済みの完全な API サーフェスが記載されています。 + + + + + + + + +## 依存関係 + + +{Platform} Button には、対応する {Platform} パッケージとテーマ スタイルシートが必要です。サイズ設定の例では、 および コンポーネントも使用しています。 + + + +{Platform} Button には、対応する {Platform} パッケージとテーマ スタイルシートが必要です。サイズ設定の例では、 および コンポーネントも使用しています。 + ## その他のリソース +次のリソースでは、{Platform} Button に関する追加のガイダンスとプロジェクトのサポートを提供します。 + - [{ProductName} **フォーラム (英語)**]({ForumsLink}) - [{ProductName} **GitHub (英語)**]({GithubLink}) + +## 関連コンポーネント + +{Platform} Button は、アクションに特別な表現が必要な場合に、関連コンポーネントと組み合わせて使用されることが一般的です。 + +- [Icon Button](./icon-button.mdx) は、アイコンのみのアクションを対象としています。 + +## FAQ + + + + [Icon Button](./icon-button.mdx) コンポーネントを使用し、アクションのアクセシブル名を提供してください。 + + + 検証済みの `disabled` プロパティを設定して、Button を利用不可にし、アクティブ化されないようにします。 + + + プラットフォームでサポートされているサイズ設定オプション、または `--ig-size` CSS 変数を使用して、Button の密度をカスタマイズします。 + + 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 aba8f96344..77ad691b68 100644 --- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -1,200 +1,253 @@ --- -title: Ignite UI for {Platform} アクセシビリティの遵守 | Ignite UI for {Platform} | インフラジスティックス -description: Ignite UI for {Platform} のアクセシビリティ準拠 - 第 508 条の遵守、WCAG および ARIA。 -keywords: accessibility, {Platform}, ignite ui for {Platform}, infragistics, アクセシビリティ準拠, インフラジスティックス +title: "{Platform} アクセシビリティ準拠 | {ProductName} | インフラジスティックス" +description: "{ProductName} のアクセシビリティ サポート - 対象とする標準、コンポーネントごとのキーボードおよびスクリーン リーダーの対応状況、およびアクセシビリティの問題の報告方法。" +keywords: "{ProductName}, Infragistics, Accessibility, WCAG, Section 508, EN 301 549, ARIA, Keyboard, インフラジスティックス, アクセシビリティ, アクセシビリティ準拠, キーボード" license: MIT +last_updated: "2026-08-27" mentionedTypes: [] _language: ja llms: - description: "開発者向けの UI および UX ツールのグローバル プロバイダーとして、Infragistics の {Platform} チームは、可能な限り最高のユーザー エクスペリエンスを簡単に作成できるコンポーネントとツールを提供します。" + description: "{ProductName} のアクセシビリティ サポート: 対象とする適合標準、コンポーネントごとのキーボードおよびスクリーン リーダーのドキュメント索引、必要な構成、およびアクセシビリティの問題を報告するためのチャネル。" --- + import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; - +このページには、{ProductName} が対象とするアクセシビリティ標準、各コンポーネントのドキュメントが現在カバーしている内容、およびアクセシビリティの問題を報告する方法を記載しています。 -# アクセシビリティ準拠 +アクセシビリティ サポートは、コンポーネント自体と、それらをスタイル設定するテーマ設定エンジンの 2 つのレイヤーによって提供されます。特定のコンポーネントの対応状況を確認するにはこのページを、コントラスト、テキストのスケーリング、チャートの色の動作については[テーマ設定のアクセシビリティ](../themes/accessibility.mdx)を使用してください。 + + +**このページの範囲。** 以下の情報は、**デフォルト テーマ**と、各コンポーネントの現在ドキュメント化されている動作を反映しています。これはサポートの概要であり、正式な適合宣言ではありません。カスタム テーマ、タイポグラフィの変更、アニメーションや色のオーバーライドによって結果が変わる可能性があります。 + -開発者向けの UI および UX ツールのグローバル プロバイダーとして、Infragistics の {Platform} チームは、可能な限り最高のユーザー エクスペリエンスを簡単に作成できるコンポーネントとツールを提供します。私たちの目標は、ユーザーにとって最高のアプリケーションとユーザー エクスペリエンスの作成に集中できるようにすることです。 - -ここでは、Ignite UI for {Platform} 内の {Platform} グリッド、チャート、UI コンポーネントおよびコントロールのアクセシビリティ サポートと準拠に関する特定の情報を見つけることができます。 - -## 第 508 条の遵守 - -リハビリテーション法[第 508 条](http://www.section508.gov/)は、連邦議会によって 1998 年に改正され、すべての連邦政府機関は障害を持つ人が電子情報技術にアクセスできるようにすることを義務付けました。それ以降、第 508 条の準拠は連邦政府機関の要件であるだけでなく、ソフトウェア ソリューションを提供し、Web ページを設計する際にも重要となります。 - -第 508 条の第 1194 部 22 条は、特に Web ベースのイントラネットおよびインターネット情報およびシステムを対象としており、遵守すべき 16 の規則が含まれています。お客様の最小限の努力でお客様の Web アプリケーションおよび Web サイトがこれらの規則に整合できるようにするために、インフラジスティックスは、Ignite UI for {Platform} のコントロールおよびコンポーネントが該当するアクセシビリティ規則に準拠することを保証するための取り組みを続けてきました。 - -以下のマトリックスで、弊社の視覚的コントロール (および関連コンポーネント) によって提供されるアクセシビリティのサポートの高レベルな概要を提供します。個々のコントロール/コンポーネントのアクセシビリティの遵守の詳細は、コントロール/コンポーネント名をクリックしてください。 - -### 第 508 条との Ignite UI for {Platform} 準拠 - -|**コンポーネント/原則**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| -|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|_グリッド_||||||||||||||||| -| - Grid||||||||||*||||||| -| - HierarchicalGrid||||||||||*||||||| -| - TreeGrid||||||||||*||||||| -|_その他_||||||||||*||||||| -| - Avatar||||||||||||||||| -| - Badge||||||||||||||||| -| - Bottom navigation||||||||||*||||||| -| - Button||||||||||*||||||| -| - Button group||||||||||*||||||| -| - Calendar||||||||||*||||||| -| - Card||||||||||||||||| -| - Carousel||||||||||*||||||| -| - Checkbox||||||||||||||||| -| - Chip||||||||||*||||||| -| - Circular progress||||||||||*||||||| -| - Combo||||||||||*||||||| -| - Date time input||||||||||*||||||| -| - Date picker||||||||||*||||||| -| - Divider||||||||||||||||| -| - Dialog||||||||||*||||||| -| - Drop down||||||||||*||||||| -| - Expansion panel||||||||||*||||||| -| - Icon||||||||||||||||| -| - Input||||||||||||||||| -| - Input group||||||||||*||||||| -| - Linear progress||||||||||*||||||| -| - List||||||||||||||||| -| - Navbar||||||||||*||||||| -| - Navigation drawer||||||||||*||||||| -| - Radio group||||||||||||||||| -| - Radio||||||||||||||||| -| - Select||||||||||*||||||| -| - Slider||||||||||*||||||| -| - Snackbar||||||||||*||||||| -| - Switch||||||||||*||||||| -| - Tabs||||||||||*||||||| -| - Time picker||||||||||*||||||| -| - Toast||||||||||*||||||| - - -**凡例** - -|||| +## 対象とする標準 + +| 標準 | 地域 | 要求事項 | |---|---|---| -||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| -|*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。| 例: **NoopAnimationsModule**ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| -||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| -|'空白'|この特定の規則はコントロールに適用されません。|| +| WCAG 2.1 Level AA | 国際 | 以下に示す達成基準。他の 2 つの標準が参照する基準となるものです。 | +| 第 508 条 (改訂版) | 米国 | 連邦政府の調達。改訂版第 508 条標準 (2017 年公開、2018 年 1 月適用開始) 以降は WCAG 2.0 Level AA を参照により組み込んでいるため、同じ対応で満たされます。 | +| EN 301 549 | 欧州 | ICT のアクセシビリティについて参照される、WCAG を基盤とした欧州標準。これを基盤とする欧州アクセシビリティ法は、2025 年 6 月 28 日から適用されます。 | - -上記のテーブルは、Ignite UI for {Platform} テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 + +第 508 条には、以前は §1194.22 に基づく独自の 16 の規則が定義されていました。これらは、WCAG を直接採用する改訂版標準に置き換えられました。したがって、WCAG 2.1 Level AA を対象とすることで、上記の 3 つのフレームワークすべてに対応できます。 -### 法令遵守情報 - -- **a** - あらゆる非テキスト要素に対してテキスト相当物を提供するものとします(つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。 -- **b** - マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。 -- **c** - 色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。 -- **d** - ドキュメントは、関連付けられたスタイル シートがなくても読めるように構成されます。 -- **e** - サーバー側の画像マップのアクティブな領域ごとに冗長なテキスト リンクが提供されます。 -- **f** - その領域を使用可能な幾何学的形状で定義できない場合を除いて、サーバー側の画像マップの代わりにクライアント側の画像マップが提供されます。 -- **g** - 行ヘッダーと列ヘッダーは、データ テーブル用に識別される必要があります。 -- **h** - マークアップは、行または列のヘッダーの 2 つ以上の論理レベルを有するデータ テーブル用にデータ セルとヘッダー セルを関連づけるために使用します。 -- **i** - フレームには、フレームの識別とナビゲーションを簡略化するテキストでタイトルが付けられます。 -- **j** - ページは、2 Hz より大きく、55 Hz を下回る周波数で画面がちらつかないように設計するものとします。 -- **k** - その他のいかなる方法でも規定に準拠できない時に、Web サイトがこの部分の規定に準拠するように、相当する情報または機能を含むテキストのみのページを提供するものとします。主要なページが変更するとテキストのみのページのコンテンツは必ず更新されるものとします。 -- **l** - ページがスクリプト言語を利用してコンテンツを表示、またはインターフェイス要素を作成する場合、スクリプトによって提供される情報は支援技術が読み取ることのできる関数テキストで識別されるものとします。 -- **m** - ページのコンテンツを解釈するためにアプレット、プラグインまたはその他のアプリケーションがクライアント システムに存在することを Web ページが必要とする時には、ページは §1194.21(a) から (l) に準拠するプラグインまたはアプレットへのリンクを提供する必要があります。 -- **n** - オンラインですべての項目に記入するように電子的フォームが設計されている場合には、そのフォームによって、補助技術を使用するユーザーは、すべての指示と手掛かりを含めた、フォームの完成と提出に必要な情報、フィールド要素、および機能にアクセスすることができます。 -- **o** - ユーザーが反復するナビゲーション リンクをスキップすることができる方法を提供します。 -- **p** - 一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。 - - -## WCAG の準拠 -[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) は、アクセシブルな Web コンテンツを開発する方法に関する正式なガイドラインのセットです。これらの規格は、508 規格に同一または非常に類似していますが、より高いレベルのアクセシビリティを表しています。WCAG は主に HTML のアクセシビリティに焦点を当てます。 - -|**コンポーネント/ガイドライン**|1.1
|1.2
|1.3
|1.4
|2.1
|2.2
|2.3
|2.4
|2.5
|3.1
|3.2
|3.3
|4.1
| -|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|_グリッド_|||||||||||||| -| - Grid|||||||*||||*||| -| - HierarchicalGrid|||||||*||||*||| -| - TreeGrid|||||||*||||*||| -|_その他_|||||||*||||||| -| - Avatar|||||||||||*||| -| - Badge|||||||||||*||| -| - Banner||||||*|*||||*||| -| - Bottom navigation|||||||*||||*||| -| - Button|||||||*||||*||| -| - Button group|||||||*||||*||| -| - Calendar||||||*|*||||*||| -| - Card|||||||||||*||| -| - Carousel||||||*|*||||*||| -| - Checkbox|||||||||||*||| -| - Chip|||||||*||||*||| -| - Circular progress||||||*|*||||*||| -| - Combo||||||*|*||||*||| -| - Date time editor||||||*|*||||*||| -| - Date picker||||||*|*||||*||| -| - Divider|||||||||||*||| -| - Dialog||||||*|*||||*||| -| - Drop down||||||*|*||||*||| -| - Expansion panel||||||*|*||||*||| -| - Icon|||||||||||*||| -| - Input|||||||||||*||| -| - Input group|||||||*||||*||| -| - Label|||||||||||*||| -| - Linear progress||||||*|*||||*||| -| - List|||||||||||*||| -| - Month picker||||||*|*||||*||| -| - Navbar|||||||*||||*||| -| - Navigation drawer||||||*|*||||*||| -| - Radio group|||||||||||*||| -| - Radio|||||||||||*||| -| - Select||||||*|*||||*||| -| - Slider|||||||*||||*||| -| - Snackbar||||||*|*||||*||| -| - Switch|||||||*||||*||| -| - Tabs|||||||*||||*||| -| - Time picker||||||*|*||||*||| -| - Toast||||||*|*||||*||| -| - Tooltip||||||*|*||||*||| - - -**凡例** - -|||| +### UI コンポーネントに適用される達成基準 + +WCAG への適合は、より広範なガイドラインに対してではなく、個々の**達成基準**に対して主張されます。UI コンポーネント ライブラリが影響を与えることができる基準は次のとおりです: + +| 基準 | レベル | コンポーネントにとっての意味 | +|---|:--:|---| +| 1.1.1 非テキスト コンテンツ | A | アイコンと画像にテキストによる代替を提供します。 | +| 1.3.1 情報及び関係性 | A | 視覚的に伝えられる構造がマークアップでも伝えられます。 | +| 1.3.2 意味のある順序 | A | 読み上げ順序が視覚的な順序と一致します。 | +| 1.4.3 コントラスト (最低限) | AA | テキストと背景のコントラスト比が 4.5:1 を満たします。 | +| 1.4.4 テキストのサイズ変更 | AA | コンテンツを失うことなくテキストを 200% まで拡大できます。 | +| 1.4.11 非テキストのコントラスト | AA | コントロールの境界と状態のコントラスト比が 3:1 を満たします。 | +| 1.4.13 ホバー又はフォーカスで表示されるコンテンツ | AA | ツールチップとポップオーバーは閉じることができ、表示が維持されます。 | +| 2.1.1 キーボード | A | すべての機能にキーボードで到達できます。 | +| 2.1.2 キーボード トラップなし | A | フォーカスを常に外に戻すことができます。 | +| 2.4.3 フォーカス順序 | A | タブ順序が意味のある順序に従います。 | +| 2.4.7 フォーカスの可視化 | AA | フォーカスされたコントロールが視覚的に示されます。 | +| 2.5.3 ラベルを含む名前 | A | アクセシブル名に表示ラベルが含まれます。 | +| 3.2.1 フォーカス時 | A | フォーカスだけではコンテキストの変化が発生しません。 | +| 3.2.2 入力時 | A | 値の変更だけではコンテキストの変化が発生しません。 | +| 3.3.2 ラベル又は説明 | A | 入力にラベルまたは説明が付いています。 | +| 4.1.2 名前、役割、値 | A | すべてのコントロールが名前、役割、および現在の状態を公開します。 | + +## アクセシビリティの提供方法 + +| レイヤー | 担当する範囲 | ドキュメントの場所 | |---|---|---| -||コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。|| -|*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。|例 1: ガイドライン 2.2. 特定のコンポーネントでは、追加のアクションと時間パラメーターを設定する必要があります。例 2: ガイドライン 2.3. **NoopAnimationsModule**ユーティリティ モジュールを使用してアニメーションの無効化を許可します。| -||コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。|| -|'空白'|この特定の規則はコントロールに適用されません。|| +| **コンポーネント ライブラリ** (Angular では `igniteui-angular`) | キーボード操作、フォーカスの移動、ARIA のロールと状態、スクリーン リーダーの読み上げ。 | 以下の索引、および各コンポーネントのトピック。 | +| **テーマ設定エンジン** (`igniteui-theming`) | カラー コントラスト、テキスト サイズ、チャートのカラー パレット、カスタム コントロール向けのスタイル設定ユーティリティ。 | [テーマ設定のアクセシビリティ](../themes/accessibility.mdx) | + +## コンポーネントのサポート状況 + +この索引には、各コンポーネントのドキュメントが現在カバーしている内容を記録しています。**未ドキュメント化**は、そのコンポーネント自身のドキュメントにこの動作の説明がないことを意味します。これはドキュメントについての記述であり、コンポーネントについての記述ではありません。 + +| ステータス | 意味 | +|---|---| +| **ドキュメント化済み** | 動作は、行内でリンクされているコンポーネント自身のドキュメントで説明されています。 | +| **構成が必要** | [必要な構成](#必要な構成)に記載されている設定を適用すると利用できます。 | +| **未ドキュメント化** | コンポーネントのドキュメントでは、この動作はまだ説明されていません。 | + + + +| コンポーネント | キーボード操作 | スクリーン リーダー / ARIA | リファレンス | +|---|---|---|---| +| [Grid](../grid/grid.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../grid/keyboard-navigation.mdx) | +| [Hierarchical Grid](../hierarchicalgrid/hierarchical-grid.mdx) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.mdx) | +| [Tree Grid](../treegrid/tree-grid.mdx) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../treegrid/keyboard-navigation.mdx) | +| [Avatar](../layouts/avatar.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/avatar.mdx#アクセシビリティ) | +| [Badge](../inputs/badge.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/badge.mdx#アクセシビリティ) | +| [Banner](../banner.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Bottom Navigation](../tabs.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Button](../inputs/button.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Button Group](../inputs/button-group.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Calendar](../calendar.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../calendar.mdx#キーボード-ナビゲーション) | +| [Card](../card.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Carousel](../carousel.mdx) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../carousel.mdx) | +| [Checkbox](../checkbox.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Chip](../chip.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../chip.mdx#キーボード-ナビゲーション) | +| [Circular Progress](../circular-progress.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Combo](../combo.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../combo.mdx#キーボード-ナビゲーション) | +| [Date Time Editor](../date-time-editor.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../date-time-editor.mdx#キーボード-ナビゲーション) | +| [Date Picker](../date-picker.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../date-picker.mdx#キーボード-ナビゲーション) | +| [Dialog](../dialog.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Divider](../divider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Drop Down](../drop-down.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Expansion Panel](../expansion-panel.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Icon](../icon.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Input Group](../input-group.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Label](../label-input.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Linear Progress](../linear-progress.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [List](../list.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Month Picker](../month-picker.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../month-picker.mdx#キーボード-ナビゲーション) | +| [Navbar](../navbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Navigation Drawer](../navdrawer.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Radio](../radio-button.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Select](../select.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../select.mdx#キーボード-ナビゲーション) | +| [Slider](../slider/slider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Snackbar](../snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Switch](../switch.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Tabs](../tabs.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Time Picker](../time-picker.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../time-picker.mdx#キーボード-ナビゲーション) | +| [Toast](../toast.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Tooltip](../tooltip.mdx) | ドキュメント化済み | 未ドキュメント化 | [アクセシビリティ](../tooltip.mdx) | + + + + + +| コンポーネント | キーボード操作 | スクリーン リーダー / ARIA | リファレンス | +|---|---|---|---| +| [Grid](../grids/data-grid.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../grids/data-grid.mdx#キーボード-ナビゲーション) | +| [Hierarchical Grid](../grids/hierarchical-grid/overview.mdx) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../grids/data-grid.mdx#キーボード-ナビゲーション) | +| [Tree Grid](../grids/tree-grid/overview.mdx) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../grids/data-grid.mdx#キーボード-ナビゲーション) | +| [Tree](../grids/tree.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../grids/tree.mdx#キーボード-ナビゲーション) | +| [List](../grids/list.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Avatar](../layouts/avatar.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/avatar.mdx#アクセシビリティ) | +| [Badge](../inputs/badge.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/badge.mdx#アクセシビリティ) | +| [Banner](../notifications/banner.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Button](../inputs/button.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Button Group](../inputs/button-group.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Calendar](../scheduling/calendar.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../scheduling/calendar.mdx#キーボード-ナビゲーション) | +| [Card](../layouts/card.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Carousel](../layouts/carousel.mdx) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/carousel.mdx) | +| [Checkbox](../inputs/checkbox.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Chip](../inputs/chip.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Circular Progress](../inputs/circular-progress.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Combo](../inputs/combo/overview.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../inputs/combo/overview.mdx#キーボード-ナビゲーション) | +| [Date Time Input](../inputs/date-time-input.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../inputs/date-time-input.mdx#キーボード-ナビゲーション) | +| [Date Picker](../scheduling/date-picker.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../scheduling/date-picker.mdx#キーボード-ナビゲーション) | +| [Dialog](../notifications/dialog.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Divider](../layouts/divider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Dock Manager](../layouts/dock-manager.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../layouts/dock-manager.mdx#キーボード-ナビゲーション) | +| [Dropdown](../inputs/dropdown.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Expansion Panel](../layouts/expansion-panel.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../layouts/expansion-panel.mdx#キーボード-ナビゲーション) | +| [File Input](../inputs/file-input.mdx#アクセシビリティと-aria-サポート) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/file-input.mdx#アクセシビリティと-aria-サポート) | +| [Icon](../layouts/icon.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Icon Button](../inputs/icon-button.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Input](../inputs/input.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Linear Progress](../inputs/linear-progress.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Navbar](../menus/navbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Navigation Drawer](../menus/navigation-drawer.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Radio](../inputs/radio.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Rating](../inputs/rating.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Select](../inputs/select.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../inputs/select.mdx#キーボード-ナビゲーション) | +| [Slider](../inputs/slider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Snackbar](../notifications/snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Stepper](../layouts/stepper.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../layouts/stepper.mdx#キーボード-ナビゲーション) | +| [Switch](../inputs/switch.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [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-サポート) | + + + + +**未ドキュメント化**とマークされている行は、このドキュメントのギャップであり、既知の欠陥ではありません。次のレビュー サイクルより前に特定のコンポーネントの適合に関する回答が必要な場合は、[Issue を作成](#アクセシビリティの問題の報告)してお問い合わせください。 + + +## 必要な構成 + +アクセシビリティの結果の一部は、コンポーネント単体ではなく、アプリケーションの構成方法に依存します。 + + + +| 懸念事項 | 基準 | 構成する内容 | +|---|---|---| +| アニメーションと動き | 2.3.1 3 回の閃光、又は閾値以下 | Angular のアニメーションをアプリケーション全体で無効にするには、`BrowserAnimationsModule` の代わりに `@angular/platform-browser/animations` の `NoopAnimationsModule` を提供します。 | + + + + + +| 懸念事項 | 基準 | 構成する内容 | +|---|---|---| +| アニメーションと動き | 2.3.1 3 回の閃光、又は閾値以下 | 構成は必要ありません。アニメーション プレーヤーはオペレーティング システムの `prefers-reduced-motion: reduce` 設定を読み取り、設定されている場合はアニメーションを継続時間 `0` で再生します。 | + + - -上記のテーブルは、Ignite UI for {Platform} テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。 +残りの項目は、すべてのプラットフォームに適用されます。 + +| 懸念事項 | 基準 | 構成する内容 | +|---|---|---| +| 一時的なメッセージの時間制限 | 2.2.1 タイミング調整可能 | Snackbar や Toast など、自動的に閉じるコンポーネントは表示時間の設定を公開しています。ユーザーがメッセージを読む時間を確保できるように、表示時間を延長するか、自動的に閉じる動作を無効にしてください。 | +| テーマ設定後のカラー コントラスト | 1.4.3 コントラスト (最低限) | 前景色は固定値ではなく、`contrast-color()` または `adaptive-contrast()` で設定してください。[テーマ設定のアクセシビリティ](../themes/accessibility.mdx)を参照してください。 | +| アイコンのみのコントロールのアクセシブル名 | 4.1.2 名前、役割、値 | 独自のマークアップでアクセシブル名を指定してください。アイコンのみを表示するコントロールには、名前を付けるまで名前がありません。 | + +## 正式な適合ドキュメント + +このページはドキュメントの索引であり、適合の主張ではありません。弊社のドキュメントがカバーしている内容を記録したものであり、いずれかの標準に対してコンポーネントを認証するものではありません。 + +調達、契約、または監査の目的で、追跡可能な基準ごとの適合宣言が必要な場合は、アカウント マネージャーまたはインフラジスティックスのサポートを通じて、最新のアクセシビリティ適合レポート (VPAT) をリクエストしてください。製品、バージョン、およびレポートが対象とすべき標準 (WCAG 2.1 Level AA、第 508 条、または EN 301 549) を明記してください。 + + +このページの以前の版には、コンポーネントごとの適合マトリックスが掲載されていました。それらの表は、追跡可能な基準ごとの評価に裏付けられていない適合レベルを主張していたため、書き直すのではなく削除されました。適合レポートがその情報の正式な情報源です。 -### 法令遵守情報 - -- **原則 1 - 知覚可能** - 情報およびユーザー インターフェイス コンポーネントは、ユーザーが知覚できるように提示されなければなりません。 - - ガイドライン 1.1 – **代替テキスト** - テキスト以外のコンテンツの代替テキストを提供して、大きな活字、点字、音声、記号、より単純な言語など、他の形式に変更できるようにします。 - - ガイドライン 1.2 – **時間ベースのメディア** - 時間ベースのメディアの代替物を提供します。 - - ガイドライン 1.3 – **適応可能** - 情報や構造を失うことなく、さまざまな方法 (たとえば、よりシンプルなレイアウト) で提示できるコンテンツを作成します。 - - ガイドライン 1.4 – **識別可能** - 前景を背景から分離するなど、ユーザーがコンテンツをより簡単に視聴できるようにします。 -- **原則 2 – 操作可能** - ユーザー インターフェイス コンポーネントとナビゲーションは操作可能でなければなりません。 - - ガイドライン 2.1 – **キーボードでアクセス可能** - すべての機能をキーボードで使用できるようにします。 - - ガイドライン 2.2 – **十分な時間** - ユーザーがコンテンツを読んで使用するのに十分な時間を提供します。 - - ガイドライン 2.3 – **発作と身体的な反応** - 発作または身体的な反応を引き起こすことが知られている方法でコンテンツをデザインしないでください。 - - ガイドライン 2.4 – **ナビゲート可能** - ユーザーがナビゲートし、コンテンツを見つけ、そしてどこにいるかを判別するのに役立つ方法を提供します。 - - ガイドライン 2.5 – **入力モダリティ** - ユーザーがキーボード以外のさまざまな入力を介して機能を簡単に操作できるようにします。 -- **原則 3 – 理解可能** - ユーザー インターフェイスの情報と操作は理解可能でなければなりません。 - - ガイドライン 3.1 – **可読** - テキスト コンテンツを読みやすく、理解しやすくします。 - - ガイドライン 3.2 – **予測可能** - Web ページを予測可能な方法で表示して動作させる。 - - ガイドライン 3.3 – **入力支援** - ユーザーが間違いを回避して修正できるようにします。 -- **原則 4 – 堅牢** - コンテンツは、支援技術を含むさまざまなユーザー エージェントが解釈できるほど堅牢でなければなりません。 - - ガイドライン 4.1 – **互換性** - 支援技術を含む現在および将来のユーザー エージェントとの互換性を最大化します。 - - -## WAI-ARIA サポート -2014 年に W3C は [WAI-ARIA 仕様](http://www.w3.org/TR/wai-aria/)を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するデザインを定義したものです。 +## アクセシビリティの問題の報告 + +コンポーネントにアクセシビリティの問題を見つけた場合は、{ProductName} の Issue トラッカーで報告してください。 + +コンポーネント、使用した支援技術とブラウザー、期待される動作、および影響を受けると思われる WCAG の達成基準を含めてください。アクセシビリティに関する報告は、上記の基準に照らしてトリアージされます。 + +## その他のリソース + +- [テーマ設定のアクセシビリティ](../themes/accessibility.mdx) — コントラスト、テキストのスケーリング、およびチャート パレット。 +- WCAG 2.1 クイック リファレンス — すべての達成基準と達成方法。 +- WAI-ARIA オーサリング プラクティス — インタラクション パターンごとに期待されるキーボードおよび ARIA の動作。 +- 第 508 条 — 米国連邦政府の調達要件。 +- [正式な適合ドキュメント](#正式な適合ドキュメント) — 調達用の適合レポート (VPAT) のリクエスト方法。 + +## FAQ + + + + 適合は、コンポーネント ライブラリ単体ではなく、完成したアプリケーションの特性です。{ProductName} は WCAG 2.1 Level AA を対象とし、コンポーネントごとの動作を上記の索引にドキュメント化していますが、結果を決定するのは、ユーザーが追加するマークアップ、コンテンツ、および構成です。上記の索引を使用して依存しているコンポーネントを確認し、ドキュメントどおりに動作しないものがあれば報告してください。 + + + + このステータスは、コンポーネント自身のドキュメントでその動作がまだ説明されていないことを意味します。コンポーネントが基準を満たしていないという記述ではありません。ドキュメント化されている動作とそうでない動作を区別できるように、ドキュメントがカバーしている内容を記録したものです。 + + + + いいえ。改訂版第 508 条標準 (2017 年公開、2018 年 1 月適用開始) は以前の §1194.22 の規則を置き換え、WCAG Level AA を参照により採用しているため、WCAG を満たすことで第 508 条にも対応できます。 + + + + 一部適用されます。キーボードと ARIA の動作はテーマ設定の影響を受けません。カラー コントラストは影響を受けます。色をオーバーライドすると、テキストが必要な比率を下回る可能性があります。テーマ設定のアクセシビリティで説明されているとおりに、カスタム パレットを検証してください。 + + + + 上記のリファレンス列からリンクされている、コンポーネント自身のトピックで確認できます。グリッド ファミリは専用のキーボード ナビゲーション トピックを共有しています。 + + diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx index 480c538d71..5a876cd492 100644 --- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx @@ -227,12 +227,12 @@ const ChatExample = () => { } ``` -その後、`messageCreated` イベントにフックして、作成されたメッセージをコレクションに追加することで、クライアントから送信されたメッセージを同期できます。 +`Messages` コレクションは、ユーザーがメッセージを送信すると自動的に更新されます。`MessageCreated` イベントを処理して、メッセージを永続化したり、その他の副作用を実行したりできます。イベントの詳細を `Messages` に再度追加しないでください: ```cs public void OnMessageCreated(IgbChatMessageEventArgs e) { - Messages = Messages.Append(e.Detail).ToArray(); + Console.WriteLine($"Message created: {e.Detail.Text}"); } ``` @@ -243,15 +243,57 @@ public void OnMessageCreated(IgbChatMessageEventArgs e) ### プロパティ コンポーネントは、その状態と構成を制御できるいくつかの重要なプロパティを公開します。 -| 名前 | 説明 | -| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `messages` | チャットに表示されるメッセージの配列 ([])。表示するメッセージを制御するためにバインド可能。 | -| `draftMessage` | 未送信メッセージ。`text` とオプションの `attachments` を含むオブジェクト。メッセージ下書きの保存や復元に便利。 | -| `options` | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 ()。 | -| `resourceStrings` | ラベル、ヘッダー、システム テキストのローカライズ文字列。多言語対応に使用。 | +| 名前 | 説明 | +| --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Messages``messages` | チャットに表示される双方向のメッセージの配列 ([])。ユーザーがメッセージを送信すると、Chat は渡されたコレクションを更新します。 | +| `DraftMessage``draftMessage` | 未送信メッセージ。`text` とオプションの `attachments` を含むオブジェクト。メッセージ下書きの保存や復元に便利。 | +| `Options``options` | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 ()。 | +| `ResourceStrings``resourceStrings` | ラベル、ヘッダー、システム テキストのローカライズ文字列。多言語対応に使用。 | 上記のプロパティを使用することで、Chat の UI をアプリケーションの状態やバックエンドと簡単に同期させることができます。 +#### 双方向のメッセージ コレクション + +`messages``Messages` コレクションは双方向です。アプリケーションが表示するメッセージを提供し、会話が進むにつれて Chat が元のコレクションを更新します。ユーザーがメッセージを送信すると、そのコレクションへの参照を保持しているコードから、新しく作成されたメッセージにアクセスできます。 + +`igcMessageCreated``onMessageCreated``MessageCreated` イベントは、永続化やその他の副作用のための通知です。作成されたメッセージをコレクションに再度追加しないでください。 + +元のコレクションを変更せずに残す必要がある場合は、シャロー コピーを Chat に渡します。既存のメッセージ オブジェクトは引き続き共有されます。これらのオブジェクトも独立させる必要がある場合は、コピーしたコレクションを構築する際に、各メッセージの新しいインスタンスを作成してください。 + + + + +```ts +const chatMessages = [...originalMessages]; +chat.messages = chatMessages; +``` + + + + + + +```tsx +const chatMessages = [...originalMessages]; + +return ; +``` + + + + + + +```cs +IgbChatMessage[] chatMessages = originalMessages.ToArray(); +``` + +```razor + +``` + + + ### 添付 diff --git a/docs/xplat/src/content/jp/components/themes/accessibility.mdx b/docs/xplat/src/content/jp/components/themes/accessibility.mdx index d1a625560b..9a22b02045 100644 --- a/docs/xplat/src/content/jp/components/themes/accessibility.mdx +++ b/docs/xplat/src/content/jp/components/themes/accessibility.mdx @@ -68,7 +68,7 @@ import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; テーマ設定エンジンは、このページで説明するアクセシビリティの動作のために、以下の Sass 関数とミックスインを公開しています。 -これらは Sass API です。[Sass を使用したテーマ設定](sass/index.mdx)[Sass によるカスタマイズ](overview.mdx) で説明されているように、ロード パスから `igniteui-theming` を解決できる Sass ビルドが必要です。代わりにビルド済みのテーマ CSS を使用する場合でも、計算されたコントラスト カラーは利用できます。各パレット カラーを対応する `-contrast` 変数 (例: `var(--ig-primary-500-contrast)`) と組み合わせ、`--ig-contrast-level` でしきい値を設定してください。チャート パレット、`hide-default()`、および `contrast()` と `luminance()` 関数には、CSS のみの同等機能はありません。 +これらは Sass API です。[Sass を使用したテーマ設定](sass/index.mdx)[Sass によるカスタマイズ](overview.mdx#sass-によるカスタマイズ) で説明されているように、ロード パスから `igniteui-theming` を解決できる Sass ビルドが必要です。代わりにビルド済みのテーマ CSS を使用する場合でも、計算されたコントラスト カラーは利用できます。各パレット カラーを対応する `-contrast` 変数 (例: `var(--ig-primary-500-contrast)`) と組み合わせ、`--ig-contrast-level` でしきい値を設定してください。チャート パレット、`hide-default()`、および `contrast()` と `luminance()` 関数には、CSS のみの同等機能はありません。 | ツール | シグネチャ | 機能 | diff --git a/docs/xplat/src/content/jp/components/themes/overview.mdx b/docs/xplat/src/content/jp/components/themes/overview.mdx index 835b80fbda..609335f810 100644 --- a/docs/xplat/src/content/jp/components/themes/overview.mdx +++ b/docs/xplat/src/content/jp/components/themes/overview.mdx @@ -74,13 +74,16 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc {ProductName} を使用すると、ライブラリによってエクスポートされた `ConfigureTheme` 関数を使用して、実行時にコンポーネントのテーマを切り替えることができます。 -それを呼び出して、4 つの有効なテーマ (`bootstrap`、`material`、`fluent`、または `indigo`) のいずれかを文字列として渡すと、読み込まれたコンポーネントのスタイルが変更されます。 +この関数は、最初の引数としてテーマ (`bootstrap`、`material`、`fluent`、または `indigo`) を、2 番目の引数としてオプションのバリアント (`light` または `dark`) を受け取ります。現在アクティブなバリアントを維持するには、バリアントを省略します。 ```ts import { configureTheme } from "igniteui-webcomponents"; // Sets material as the theme to be used by all components configureTheme("material"); + +// Sets material and switches to its dark variant +configureTheme("material", "dark"); ``` @@ -88,6 +91,25 @@ configureTheme("material"); +## Sass によるカスタマイズ + +上記のテーマ ファイルはビルド済みの CSS であり、このセクションのトピックでは CSS 変数をオーバーライドしてカスタマイズします。[パレット](palettes.mdx)、[タイポグラフィ](typography.mdx)、[エレベーション](elevations.mdx)、および[構成](configuration.mdx)を参照してください。この方法ではビルド構成は不要で、ほとんどのカスタマイズに対応できます。 + +一部の機能は、変数を通じてではなくコンパイル時に実行されるため、Sass からのみ利用できます。[アクセシビリティ](accessibility.mdx)トピックのコントラスト関数とチャート パレット関数が主な例です。これらを使用するには、`igniteui-theming` をインストールしてインポートします: + +```scss +@use 'igniteui-theming' as *; + +// Required for $material-type-scale, $indigo-type-scale, and similar preset variables +@use 'igniteui-theming/sass/typography/presets' as *; + +// Required for $material-elevations and $indigo-elevations +@use 'igniteui-theming/sass/elevations/presets' as *; +``` + + +`@use 'igniteui-theming' as *;` が解決されない場合は、Sass コンパイラーのロード パスに `node_modules` が含まれていません。Vite では `css.preprocessorOptions.scss.loadPaths` を、Next.js では `sassOptions.loadPaths` を設定してください。 + diff --git a/docs/xplat/src/content/jp/components/themes/palettes.mdx b/docs/xplat/src/content/jp/components/themes/palettes.mdx index 954d03b7fc..f65a20de95 100644 --- a/docs/xplat/src/content/jp/components/themes/palettes.mdx +++ b/docs/xplat/src/content/jp/components/themes/palettes.mdx @@ -60,34 +60,45 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' 上記のカラーに加えて、各カラー バリエーションに **Level AA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) 準拠の `contrast` カラーも含まれています。つまり、対応する `contrast` カラー バリエーションをベースカラー バリエーションの前景カラーとして安全に使用できます。 -コントラスト カラーはビルド時に生成されるため、CSS 変数をオーバーライドしても、対応するコントラスト カラーは更新されません。 +コントラスト カラーは、対応するシェード カラーから実行時に計算される CSS 相対カラーであるため、ベース カラー バリエーションをオーバーライドすると、そのコントラスト カラーも一緒に更新されます。 -以下は、Light Bootstrap パレットで宣言された `primary` カラーの抜粋です。 +以下は、Light Material パレットで宣言された `primary` カラーの抜粋です。 ```css :root { //... --ig-primary-500: #09f; - --ig-primary-500-contrast: black; + --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l / 1); + --ig-primary-seed: #09f; --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-primary-600-contrast: black; + --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l / 1); --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81)); //... --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08)); - --ig-secondary-400-contrast: black; + --ig-secondary-400-contrast: hsla(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l / 1); --ig-secondary-500: #df1b74; - --ig-secondary-500-contrast: white; + --ig-secondary-500-contrast: hsla(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l / 1); --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89)); - --ig-secondary-600-contrast: white; + --ig-secondary-600-contrast: hsla(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l / 1); //... + --ig-wcag-a: 0.31; + --ig-wcag-aa: 0.185; + --ig-wcag-aaa: 0.178; + --ig-contrast-level: var(--ig-wcag-aa); + --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1); + --y-contrast: xyz-d65 var(--y) var(--y) var(--y); } ``` すべてのプライマリ カラー バリエーションは、1 つの基本変数カラー バリエーション `--ig-primary-500` から派生します。他のカラー変数 (`--ig-secondary-500`、`--ig-surface-500` など) にも同様のことが当てはまります。他のバリエーションは、メイン変数カラー バリエーション `500` を受け取り、割り当てられた変数バリエーション (`600`、`700` など) に応じて `saturation` と `lightness` を変更する相対カラー関数 `hsl()` によって生成されます。`primary`、`secondary`、`surface`、またはその他のカラーのすべてのバリエーションを実行時に変更できるため、この方法を使用することにしました。 - -コントラスト カラーは他の部分のように CSS 実行時に生成されないため、メイン カラー バリエーション (`500`) を変更しても、コントラスト カラーは更新されません。手動で変更する必要があります。この動作は今後のリリースで改善され、コントラスト カラーも CSS 実行時に計算されるようになります。 +番号付きのバリエーションに加えて、各カラーは、パレットの生成元となったベース カラーを変更せずに保持する `seed` 変数を公開します。`primary`、`secondary`、およびその他の有彩色では、seed は `500` バリエーションと一致します。`gray` では一致しません。`--ig-gray-seed` はグレースケールの派生元となったカラー (サーフェス カラーの輝度から選択された黒または白) を記録し、`--ig-gray-500` は生成された中間トーンです。 + +コントラスト カラーは、ベース カラーの輝度と選択されたコントラスト レベルから CSS 実行時に計算され、黒と白のうち読みやすい方が選択されます。この計算はカスケードの一部であるため、メイン カラー バリエーション (`500`) を変更すると、そのコントラスト カラーも一緒に更新されます。手動での操作は必要ありません。 + + +しきい値は `--ig-contrast-level` に保持されており、デフォルトは `var(--ig-wcag-aa)` です。任意のスコープでオーバーライドして、`var(--ig-wcag-a)` または `var(--ig-wcag-aaa)` に切り替えることができます。ビルド済みの CSS を使用する代わりに Sass からテーマをコンパイルする場合、`palette` および `adaptive-contrast` ミックスインは `a`、`aa`、または `aaa` を直接受け取ります。[アクセシビリティ](accessibility.mdx)を参照してください。 ## パレットの定義 From 5907faec547f9eb3f4e64a4975e5e5e8ba442266 Mon Sep 17 00:00:00 2001 From: jsakamotoIGJP Date: Fri, 11 Sep 2026 17:25:17 +0900 Subject: [PATCH 3/6] review: apply native check fixes (fix wording inconsistencies) --- docs/xplat/src/content/jp/components/inputs/button.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx index 20c13e6a65..0538397664 100644 --- a/docs/xplat/src/content/jp/components/inputs/button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button.mdx @@ -45,7 +45,7 @@ import buttonDoNot3 from '@xplat-images/button/button-do-not-3.png'; ## 構造 -{Platform} Button は、ラベルとオプションのプレフィックス / サフィックス コンテンツをコンポーネントのシャドウ DOM 内にレンダリングします。 +{Platform} Button は、ラベルとオプションのプレフィックスおよびサフィックス コンテンツをコンポーネントのシャドウ DOM 内にレンダリングします。 From 2b8af91a8902008148781afdd0818e10c52ed212 Mon Sep 17 00:00:00 2001 From: jsakamotoIGJP Date: Fri, 11 Sep 2026 17:26:54 +0900 Subject: [PATCH 4/6] review: apply native check fixes (reword literal "boundaries" translation in troubleshooting intros and known-limitations lead-in) --- docs/xplat/src/content/jp/components/inputs/badge.mdx | 2 +- docs/xplat/src/content/jp/components/inputs/button-group.mdx | 2 +- docs/xplat/src/content/jp/components/inputs/button.mdx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/xplat/src/content/jp/components/inputs/badge.mdx b/docs/xplat/src/content/jp/components/inputs/badge.mdx index da5c4b344d..057c3c9056 100644 --- a/docs/xplat/src/content/jp/components/inputs/badge.mdx +++ b/docs/xplat/src/content/jp/components/inputs/badge.mdx @@ -943,7 +943,7 @@ igc-badge::part(base) { ## トラブルシューティング -このセクションを使用して、Badge をインタラクティブなコントロールとして扱ったり、ステータスの唯一の表示手段として扱ったりする前に、境界と一般的な判断を確認してください。 +Badge をインタラクティブなコントロールとして扱ったり、ステータスの唯一の表示手段として扱ったりする前に、このセクションで制約と一般的な判断のポイントを確認してください。 ### カスタムの背景色を設定してもバッジが変わらないのはなぜですか? 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 e85474506b..c956bb78b9 100644 --- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx @@ -1081,7 +1081,7 @@ igc-toggle-button::part(toggle) { ## トラブルシューティング -このセクションを使用して、ボタン グループを単一のトグル、フォーム フィールド、またはアクション グループとして扱う前に、境界と一般的な判断を確認してください。 +ボタン グループを単一のトグル、フォーム フィールド、またはアクション グループとして扱う前に、このセクションで制約と一般的な判断のポイントを確認してください。 ### selectedItems でボタンが選択されないのはなぜですか? diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx index 0538397664..8c58d342f6 100644 --- a/docs/xplat/src/content/jp/components/inputs/button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button.mdx @@ -1036,7 +1036,7 @@ Button は、コマンド アクションの場合はネイティブの `button` ## トラブルシューティング -このセクションを使用して、Button をコマンド、ナビゲーション リンク、またはフォーム コントロールとして扱う前に、境界と一般的な判断を確認してください。 +Button をコマンド、ナビゲーション リンク、またはフォーム コントロールとして扱う前に、このセクションで制約と一般的な判断のポイントを確認してください。 ### Button がリンクのように動作するのはなぜですか? @@ -1048,7 +1048,7 @@ Button が無効になっていないか、または周囲のアプリケーシ ### 既知の制限 -Button には、プラットフォームに依存しない次の境界があります: +Button には、プラットフォームに依存しない次の制限があります: - すべてのアクションには、テキスト ラベルまたは他のアクセシブルな名前付けの仕組みを使用してください。ラベルのないアイコンのみの Button は、それ自体ではその目的を伝えません。 - `href` を設定すると、Button はアクション コントロールからナビゲーション コントロールに変わります。アイコンのみのアクションには [Icon Button](./icon-button.mdx) を使用し、そのアクセシブル名を別途検証してください。 From 7d8f9cb4d7e6d356b39b8b8a4a10fb3cfcdf2e81 Mon Sep 17 00:00:00 2001 From: jsakamotoIGJP Date: Fri, 11 Sep 2026 17:27:40 +0900 Subject: [PATCH 5/6] review: apply native check fixes (reword literal "boundaries" translation in the Before You Start lead-in) --- docs/xplat/src/content/jp/components/themes/accessibility.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/xplat/src/content/jp/components/themes/accessibility.mdx b/docs/xplat/src/content/jp/components/themes/accessibility.mdx index 9a22b02045..1beef1b022 100644 --- a/docs/xplat/src/content/jp/components/themes/accessibility.mdx +++ b/docs/xplat/src/content/jp/components/themes/accessibility.mdx @@ -44,7 +44,7 @@ import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; ## はじめる前に -このページの内容のうち何に依存できるかは、3 つの境界によって決まります。 +このページの内容のうち何に依存できるかは、3 つの前提によって決まります。 **テーマ設定エンジンはスタイルを設定するものであり、セマンティクスを追加するものではありません。** ARIA ロール、キーボード処理、およびフォーカス管理は、テーマではなくコンポーネント ライブラリから提供されます。テーマを適用するだけでは、カスタム コントロールはアクセシブルになりません。 From 10bcf46a5b9258f3417a062619e592c2f3176c4f Mon Sep 17 00:00:00 2001 From: jsakamotoIGJP Date: Fri, 11 Sep 2026 17:37:23 +0900 Subject: [PATCH 6/6] review: apply native check fixes (restore accessibility anchors on carousel and tooltip links) --- .../components/interactivity/accessibility-compliance.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 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 77ad691b68..714a687cf0 100644 --- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -92,7 +92,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Button Group](../inputs/button-group.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Calendar](../calendar.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../calendar.mdx#キーボード-ナビゲーション) | | [Card](../card.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Carousel](../carousel.mdx) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../carousel.mdx) | +| [Carousel](../carousel.mdx) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../carousel.mdx#ユーザー補助) | | [Checkbox](../checkbox.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Chip](../chip.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../chip.mdx#キーボード-ナビゲーション) | | [Circular Progress](../circular-progress.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | @@ -119,7 +119,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Tabs](../tabs.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Time Picker](../time-picker.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../time-picker.mdx#キーボード-ナビゲーション) | | [Toast](../toast.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Tooltip](../tooltip.mdx) | ドキュメント化済み | 未ドキュメント化 | [アクセシビリティ](../tooltip.mdx) | +| [Tooltip](../tooltip.mdx) | ドキュメント化済み | 未ドキュメント化 | [アクセシビリティ](../tooltip.mdx#ユーザー補助) | @@ -139,7 +139,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Button Group](../inputs/button-group.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Calendar](../scheduling/calendar.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../scheduling/calendar.mdx#キーボード-ナビゲーション) | | [Card](../layouts/card.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Carousel](../layouts/carousel.mdx) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/carousel.mdx) | +| [Carousel](../layouts/carousel.mdx) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../layouts/carousel.mdx#ユーザー補助) | | [Checkbox](../inputs/checkbox.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Chip](../inputs/chip.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Circular Progress](../inputs/circular-progress.mdx) | 未ドキュメント化 | 未ドキュメント化 | — |

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 literal 0 HcmV?d00001 diff --git a/docs/angular/src/content/jp/images/button/button-do-1.png b/docs/angular/src/content/jp/images/button/button-do-1.png new file mode 100644 index 0000000000000000000000000000000000000000..9243c7edbdbb7021f9f8d1fe824f652356ab37aa GIT binary patch literal 2997 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 +このページの機能は、テーマ設定エンジンの動作を説明するものです。製品としての {ProductName} の適合宣言ではありません。コンポーネントごとの適合情報については、[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) を参照してください。 + + +## 次のステップ + +- パレット カラーの上にテキストを配置する場合は、前景色をハードコーディングする代わりに、[`contrast-color()`](#ブランド-カラーでテキストを読みやすく保つ) を使用します。 +- アプリケーションでチャートをレンダリングする場合は、[色覚異常に対応したチャート パレット](#色覚異常に対応したチャート-パレットを有効にする) を有効にします。 +- 独自に導入するカスタムのカラーの組み合わせは、リリース前に [`contrast()`](#コントラスト比を自分で確認する) で確認します。 +- [Theming MCP サーバー](../ai/theming-mcp.mdx) でパレットを生成する場合、サーバーはパレットの構築時にサーフェスとグレーのコントラストを WCAG のしきい値に照らして確認します。 + +## 利用可能なツール + +テーマ設定エンジンは、このページで説明するアクセシビリティの動作のために、以下の Sass 関数とミックスインを公開しています。 + + +これらは Sass API です。[Sass を使用したテーマ設定](sass/index.mdx)[Sass によるカスタマイズ](overview.mdx) で説明されているように、ロード パスから `igniteui-theming` を解決できる Sass ビルドが必要です。代わりにビルド済みのテーマ CSS を使用する場合でも、計算されたコントラスト カラーは利用できます。各パレット カラーを対応する `-contrast` 変数 (例: `var(--ig-primary-500-contrast)`) と組み合わせ、`--ig-contrast-level` でしきい値を設定してください。チャート パレット、`hide-default()`、および `contrast()` と `luminance()` 関数には、CSS のみの同等機能はありません。 + + +| ツール | シグネチャ | 機能 | +|---|---|---| +| `contrast-color()` | `contrast-color($palette: null, $color: primary, $variant: 500, $opacity: null)` | パレット カラーに対して読みやすい前景色を返します。すべての引数は省略可能です。`$palette` を省略すると、シェードは対応する CSS 変数を通じて解決されます。 | +| `adaptive-contrast()` | `adaptive-contrast($color)` | CSS 変数に格納されたカラーを含め、渡された任意のカラーに対して読みやすい前景色を返します。 | +| `contrast()` | `contrast($background, $foreground)` | 2 つのカラー間の WCAG コントラスト比を返します。 | +| `luminance()` | `luminance($color)` | カラーの相対輝度を `0` (黒) から `1` (白) の範囲で返します。 | +| `configure-colors()` | `configure-colors($enhanced-accessibility: null)` | チャート テーマを色覚異常に対応したパレットに切り替えます。 | +| `hide-default()` | `@include hide-default()` | ネイティブ入力を視覚的に非表示にしながら、アクセシビリティ ツリーには残します。 | + +## 一般的なワークフロー + +### ブランド カラーでテキストを読みやすく保つ + +パレットから取得したすべての背景には、ハードコーディングした `black` や `white` ではなく、`contrast-color()` を組み合わせます。 + +```scss +.my-component { + background: color($color: 'primary', $variant: 500); + color: contrast-color($color: 'primary', $variant: 500); +} +``` + +テーマが既に出力している変数を使用した、プレーン CSS での同じ組み合わせ: + +```css +.my-component { + background: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); +} +``` + +パレット由来ではないカラー (テナント カラー、ユーザー設定、実行時に設定される値など) には、`adaptive-contrast()` を使用します。 + +```scss +.my-component { + --bg: #09f; + + background: var(--bg); + color: adaptive-contrast(var(--bg)); +} +``` + +`adaptive-contrast()` は相対カラー式の薄いラッパーであるため、Sass を使用しなくても同じ結果を得られます。`--y-contrast` はテーマによって定義されます。 + +```css +.my-component { + --bg: #09f; + + background: var(--bg); + color: hsla(from color(from var(--bg) var(--y-contrast)) h 0 l / 1); +} +``` + +計算はビルド時ではなくブラウザーで行われます。スタイルシートのコンパイル後に背景色が変わると、前景色もそれに合わせて再計算されるため、実行時のテーマ切り替えやテナントごとのブランディングでも組み合わせが維持されます。 + + +`adaptive-contrast()` は黒と白のどちらかを選択します。選択できる結果がこの 2 つであるため、中間色の背景に対してこの仕組みで達成できる比率は最大でも約 4.6:1 に制限されます。これは、通常のテキストに対する WCAG AA のしきい値 4.5:1 を満たしており、エンジンがデフォルトで構成されているレベルです。7:1 の AAA しきい値に達するために、この仕組みだけに頼らないでください。AAA に達するには、それを可能にする十分に明るい、または十分に暗い背景色を選択する必要があります。 + + +### コントラスト レベルを設定する + +計算された前景色は、`--ig-contrast-level` CSS 変数に保持されている WCAG のしきい値に照らして測定されます。この変数のデフォルトは `var(--ig-wcag-aa)` です。`a`、`aa`、`aaa` の 3 つのレベルが事前定義されています。 + +パレットを生成する際に、アプリケーション全体のレベルを設定します。 + +```scss +@include palette($palette, $contrast-level: 'aaa'); +``` + +ページの一部だけレベルを引き上げるには、そのスコープで変数をオーバーライドします。 + +```css +.high-contrast-panel { + --ig-contrast-level: var(--ig-wcag-aaa); +} +``` + +コントラスト レベルは、計算された前景色が黒と白の間で切り替わる輝度のしきい値を移動させるものであり、選択できる 2 つのカラーを変更するものではありません。また、`aaa` を設定するだけで組み合わせが適合するわけではなく、それは選択した背景色によって決まります。[`contrast()`](#コントラスト比を自分で確認する) で検証してください。生成されるコントラスト変数については、[パレット](palettes.mdx) を参照してください。 + +### ユーザーのブラウザー設定に合わせてテキストをスケーリングする + +構成は必要ありません。提供される 4 つのテーマのすべてのタイプ スケールは、`font-size`、`line-height`、`letter-spacing`、およびマージンを `rem()` 関数で表現しているため、出力されるすべての値はルートのフォント サイズに対する相対値になります。 + +ライブラリは、基準サイズを読み取り可能な値として記録します。 + +```css +--ig-base-font-size: 16px; +``` + +ライブラリが `html { font-size: … }` ルールを出力することはありません。このルールを記述することは、テーマ設定システムがデフォルトのテキストを拡大しているユーザーの設定を上書きしてしまう最も一般的な原因であるため、これは重要です。ライブラリは基準サイズを読み取るだけなので、ブラウザーでより大きなデフォルト サイズを設定しているユーザーには、{ProductName} のテキストもより大きく表示されます。 + +これは、スタイル設定レイヤーにおいて WCAG 2.1 1.4.4 テキストのサイズ変更 (レベル AA) に対応するものです。 + +### コントラストのしきい値を上下させる + +計算された前景色が黒から白に切り替わるレベルは CSS 変数に保持されているため、Sass を使用せずに変更できます。デフォルトは AA です。 + +```css +:root { + --ig-contrast-level: var(--ig-wcag-aaa); +} +``` + +Sass では、`palette()` および `adaptive-contrast()` ミックスインが `a`、`aa`、または `aaa` を直接受け取ります。 + +### 色覚異常に対応したチャート パレットを有効にする + +チャートは一般に色相のみでシリーズを区別しますが、これは色覚異常のある読者には機能しません。テーマ設定エンジンには、一般的な色覚異常の形態でも区別しやすいカラーで構成された 2 つ目のチャート パレットが用意されています。 + +このパレットは**デフォルトでは無効**です。`configure-colors()` で有効にします。 + +```scss +// Include at the top level, before your theme includes. +@include configure-colors($enhanced-accessibility: true); +``` + +これにより、すべてのチャート テーマがアクセシブルなカラー セットを使用するようになります。チャートのブラシはテーマの生成時に設定されるため、この機能には Sass が必要です。ビルド済みのテーマ CSS には、ブラシ用の変数は公開されていません。 + + + +{ProductName} では、同じスイッチをセットアップ時にも利用できます。 + +```scss +@include core($enhanced-accessibility: true); +``` + + + + +チャートが意味を伝える手段は、色だけであってはなりません。グレースケールでもチャートが機能するように、このパレットを直接ラベル、区別しやすいマーカー、または破線パターンと組み合わせてください。 + + +### コントラスト比を自分で確認する + +エンジンは WCAG の相対輝度の計算式を実装して公開しているため、ライブラリが使用しているものと同じ実装で独自のカラーの選択を確認できます。 + +```scss +$ratio: contrast(#09f, #000); // 7 +$lum: luminance(#09f); // 0.3 +``` + +コンポーネント トークンを直接オーバーライドする場合や、パレット ジェネレーターが生成していないカラーの組み合わせを導入する場合には、常にこれを使用してください。これら 2 つはコンパイル時に実行されるため、CSS に同等の機能はありません。スタイルシートで比率を計算することはできません。 + +### スクリーン リーダーから隠さずに入力を非表示にする + +カスタム スタイルのチェックボックス、ラジオ、スイッチは、通常、セマンティクスとキーボード動作のために、その下にネイティブ入力を保持しています。これは `hide-default()` で非表示にします。 + +```scss +.my-checkbox input { + @include hide-default(); +} +``` + +このミックスインは固定された宣言のセットに展開されるため、CSS に直接記述することもできます。 + +```css +.my-checkbox input { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: none; + clip: rect(0, 0, 0, 0); + outline: 0; + pointer-events: none; + overflow: hidden; + appearance: none; +} +``` + +このミックスインは、入力をアクセシビリティ ツリーに残したまま画面外に移動させるため、入力のロール、キーボード動作、およびスクリーン リーダーの読み上げは維持されます。代わりに `display: none` や `visibility: hidden` を使用すると、コントロールは支援技術から完全に取り除かれ、視覚に頼らずに操作するすべての人にとってコンポーネントが機能しなくなります。 + +### ダーク テーマを使用する + +提供される 4 つのテーマ (Material、Bootstrap、Fluent、Indigo) にはそれぞれ、ライト パレットと並んで完全なダーク パレットが用意されています。ダーク表示は、光に敏感な人を含む一部のユーザーにとってアクセシビリティ上の必要性であるため、見た目の好みではなく、サポート対象の構成として扱ってください。選択方法については、[パレット](palettes.mdx) を参照してください。 + +## トラブルシューティング + +**スタイルを変更したコンポーネントのテキストが読みにくい。** 背景トークンを置き換えたものの、それと組になる前景トークンを置き換えていない可能性があります。前景色は固定値ではなく `contrast-color()` または `adaptive-contrast()` で設定し、`contrast()` で結果を確認してください。 + +**`$contrast-level: 'aaa'` を設定したが、カラーがあまり変わらない。** コントラスト レベルは、計算された前景色が黒と白の間で切り替わる輝度のしきい値を移動させるものです。前景色に色味を付けるものではないため、達成可能な比率を前述の上限を超えて引き上げることはできません。AAA に達するには、背景色そのものを変更してください。 + +**アクセシブルなパレットを有効にしたが、チャートのカラーが変わらない。** `configure-colors()` は、チャート テーマが生成される前にインクルードする必要があります。インクルードをテーマのインクルードより上に移動してください。 + +**ブラウザーのフォント サイズを大きくしてもテキストが大きくならない。** アプリケーション自身のスタイルに `html { font-size: … }` ルールや `px` 単位の `font-size` 値がないか確認してください。テーマ設定エンジンはどちらも出力しません。 + +## その他のリソース + +- [パレット](palettes.mdx) — パレット カラーと、それに対応するコントラスト カラーがどのように生成されるか。 +- [タイポグラフィ](typography.mdx) — タイプ スケールとそのカスタマイズ方法。 +- [アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) — コンポーネントごとの適合情報。 +- WCAG 2.1 クイック リファレンス — このページで参照している達成基準。 +- WAI-ARIA オーサリング プラクティス — インタラクション パターンごとに期待されるキーボードおよび ARIA の動作。 + +## FAQ + + + + いいえ。テーマ設定エンジンが担当するのは、カラー コントラスト、テキスト サイズ、およびチャート パレットです。キーボード操作、ARIA セマンティクス、およびスクリーン リーダーのサポートは、コンポーネント ライブラリと独自のマークアップから提供されます。 + + + + はい。パレットを通じて使用されるカラーについては、構成したレベル (デフォルトは AA) に照らして測定されます。前景色は、実行時を含め、背景が変わるたびにブラウザーで再計算されます。手動で設定した組み合わせは計算の対象外なので、contrast() で検証してください。 + + + + 計算された前景色が黒から白に切り替わる輝度のしきい値を移動させます。選択できる 2 つのカラーは変わらないため、この仕組みで達成できる最大の比率が上がることはありません。 + + + + いいえ。configure-colors($enhanced-accessibility: true)、またはセットアップ時に core($enhanced-accessibility: true) で有効にします。 + + + + いいえ。すべてのタイプ スケールは既に相対値であり、ライブラリがページのフォント サイズを設定することはありません。テキストがスケーリングされない場合は、アプリケーション自身のスタイルを確認してください。 + + diff --git a/docs/xplat/src/content/jp/toc.json b/docs/xplat/src/content/jp/toc.json index ffb8e7231c..18756a66ca 100644 --- a/docs/xplat/src/content/jp/toc.json +++ b/docs/xplat/src/content/jp/toc.json @@ -2221,11 +2221,9 @@ "href": "layouts/accordion.mdx" }, { - "exclude": [ - "Angular" - ], "name": "アバター", - "href": "layouts/avatar.mdx" + "href": "layouts/avatar.mdx", + "updated": true }, { "exclude": [ @@ -2437,11 +2435,9 @@ "updated": true }, { - "exclude": [ - "Angular" - ], "name": "ボタン", - "href": "inputs/button.mdx" + "href": "inputs/button.mdx", + "updated": true }, { "name": "ボタン グループ", @@ -2513,16 +2509,10 @@ "href": "inputs/dropdown.mdx" }, { - "exclude": [ - "Angular" - ], "name": "アイコン", "href": "layouts/icon.mdx" }, { - "exclude": [ - "Angular" - ], "name": "アイコン ボタン", "href": "inputs/icon-button.mdx" }, @@ -2765,6 +2755,11 @@ "name": "スタイル", "href": "themes/styles.mdx" }, + { + "name": "アクセシビリティ", + "href": "themes/accessibility.mdx", + "new": true + }, { "name": "カスタム Tailwind クラス", "href": "themes/tailwind.mdx", From 6c831b814d38b7268cde7da20090333839a00251 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Wed, 9 Sep 2026 13:57:04 +0300 Subject: [PATCH 2/6] docs(jp): sync xplat JP docs with EN PRs #522, #438, #535, #491 Manual replay of the four failed "Sync Japanese Documentation (xplat)" runs (33877005838, 34238718784, 34250163990, 34329511576), which died in the Copilot CLI step exactly like their Angular counterparts. Change set is the EN diff under docs/xplat/src/content/en/ since the last successful xplat sync (d34687170d), filtered to TOC-covered files per the workflow. - inputs/button: re-mirror the rewritten EN topic (anatomy, getting started, usage/variants/states/layout/size/download/do-don't, properties, styling incl. Tailwind, accessibility, troubleshooting, dependencies, related, FAQ), reusing existing JP prose where EN kept it. The Getting Started link is split per platform like the JP badge and button-group pages, because the JP xplat toc still excludes general-getting-started.mdx for Angular (EN does not) - inputs/button-group: Angular-specific PlatformBlocks throughout, {PackageCommon} install block, per-platform properties tables, API references and dependencies, new Related/FAQ content - inputs/badge: {PackageCommon} install block, Angular import sentence, CSS variables table, troubleshooting/FAQ updates - interactivity/accessibility-compliance: replace the Section 508 / WCAG matrices with the new standards, criteria, per-component documentation index (JP heading anchors), configuration, VPAT and FAQ sections - interactivity/chat: Blazor MessageCreated guidance, per-platform property names, bidirectional messages collection section - themes/overview: configureTheme variant argument, new Customizing with Sass section; themes/accessibility now anchors to it - themes/palettes: runtime relative-color contrast, seed variables, --ig-wcag-* excerpt, contrast-level note - ai/theming-mcp: WCAG contrast note Not mirrored: the EN toc href fix for grids/grid/theming-grid.mdx (#535) only corrected EN after a July file move (#355) that was never applied to JP; JP still keeps the page at grids/theming-grid.mdx consistently. Co-Authored-By: Claude Fable 5.1 --- .../content/jp/components/ai/theming-mcp.mdx | 4 + .../content/jp/components/inputs/badge.mdx | 59 +- .../jp/components/inputs/button-group.mdx | 190 +++- .../content/jp/components/inputs/button.mdx | 891 +++++++++++++++--- .../accessibility-compliance.mdx | 415 ++++---- .../jp/components/interactivity/chat.mdx | 58 +- .../jp/components/themes/accessibility.mdx | 2 +- .../content/jp/components/themes/overview.mdx | 24 +- .../content/jp/components/themes/palettes.mdx | 29 +- 9 files changed, 1268 insertions(+), 404 deletions(-) diff --git a/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx b/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx index ed78342b24..98871ef5c6 100644 --- a/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx +++ b/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx @@ -267,6 +267,10 @@ MCP サーバーは、プロンプトに基づいて AI が自動的に使用す 各ツールの簡単な概要を以下に示します。 + +パレットを生成する際、サーバーはサーフェス カラーとグレー カラーのコントラスト比を WCAG のしきい値と照合し、組み合わせが基準を満たさない場合は警告します。テーマ設定エンジン自体に組み込まれているコントラストの動作については、[アクセシビリティ](../themes/accessibility.mdx) を参照してください。 + + | ツール | 説明 | |------|-------------| | `detect_platform` | `package.json` を読み取り、プロジェクトが Ignite UI for Angular、Web Components、React、Blazor のいずれを使用しているかを識別します。以降のすべてのツールに対して正しいインポート パスとコンポーネント セレクターを選択します。 | diff --git a/docs/xplat/src/content/jp/components/inputs/badge.mdx b/docs/xplat/src/content/jp/components/inputs/badge.mdx index a44f04c4d2..da5c4b344d 100644 --- a/docs/xplat/src/content/jp/components/inputs/badge.mdx +++ b/docs/xplat/src/content/jp/components/inputs/badge.mdx @@ -90,18 +90,18 @@ import badgeDoNot from '@xplat-images/badge/badge-do-nоt.png'; -### 前提条件とバージョンの互換性 - -対象フレームワークでサポートされているバージョンの {ProductName} パッケージを使用してください。フレームワーク パッケージ、Badge パッケージ、テーマ パッケージは同じリリース バージョンに揃えてください。以下の例では、各コード ブロックで使用されているフレームワークとパッケージを明記しているため、周囲のページ コンテキストなしで読んでもスニペットが自己完結的になっています。 - - + -**{PackageWebComponents}** パッケージを使用する Web Components の場合は、パッケージをインストールします: +**{PackageCommon}** パッケージを使用する {Platform} の場合は、パッケージをインストールします: ```cmd -npm install {PackageWebComponents} +npm install {PackageCommon} ``` + + + + 次に、以下のように 、そのテーマ CSS をインポートし、コンポーネントを登録する必要があります: ```ts @@ -115,12 +115,6 @@ defineComponents(IgcBadgeComponent); -**igniteui-react** パッケージを使用する React の場合は、パッケージをインストールします: - -```cmd -npm install igniteui-react -``` - 次に、以下のように Badge のラッパーとそのテーマ CSS をインポートする必要があります: ```tsx @@ -156,16 +150,18 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule)); npm install igniteui-angular ``` -次に、Badge コンポーネントをインポートします: +次に、コンポーネントの `imports` コレクションに `IgxBadgeComponent` をインポートします。 ```ts import { IgxBadgeComponent } from 'igniteui-angular/badge'; ``` -コンポーネントの `imports` コレクションに `IgxBadgeComponent` を追加し、テンプレートで `igx-badge` 要素を使用します。 + の使用を開始する最も簡単な方法は次のとおりです: + + ```html ``` @@ -174,8 +170,6 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; - の使用を開始する最も簡単な方法は次のとおりです: - ```html ``` @@ -805,18 +799,16 @@ Blazor Badge は、次のプロパティを公開します。 ### CSS 変数 -```css -igc-badge::part(base) { - --background-color: var(--ig-error-A100); - --border-radius: 2px; -} -``` - | 変数 | 変更内容 | | --- | --- | | `--background-color` | バッジの背景色。 | +| `--border-color` | バッジのボーダー カラー。 | | `--border-radius` | バッジの角の半径。 | -| `--border-color` | アウトライン バッジのボーダー カラー。 | +| `--elevation` | バッジのシャドウ。 | +| `--icon-color` | バッジのアイコンの色。 | +| `--text-color` | バッジのテキストの色。 | +| `--size` | バッジのサイズ。 | +| `--dot-size` | ドット タイプのバッジのサイズ。 | ### スタイル パーツ @@ -824,6 +816,13 @@ igc-badge::part(base) { | --- | --- | | `base` | バッジのルート要素。 | +```css +igc-badge::part(base) { + --background-color: var(--ig-error-A100); + --border-radius: 2px; +} +``` + @@ -944,7 +943,7 @@ igc-badge::part(base) { ## トラブルシューティング -{Platform} Badge のトラブルシューティング ガイダンスは、一般的なスタイルおよびコンテンツの問題について、問題 → 原因 → 対処法の形式で構成されています。 +このセクションを使用して、Badge をインタラクティブなコントロールとして扱ったり、ステータスの唯一の表示手段として扱ったりする前に、境界と一般的な判断を確認してください。 ### カスタムの背景色を設定してもバッジが変わらないのはなぜですか? @@ -986,18 +985,20 @@ igc-badge::part(base) { ## FAQ -これらの FAQ は、{Platform} Badge の一般的なコンテンツ、インジケーター、パッケージの選択について説明します。 - - はい。**使用方法** に示されているプラットフォーム固有の value と icon の API を使用してください。コンテンツを子要素として直接指定する場合は、アイコンとテキストをコンポーネントのデフォルトのコンテンツ領域内に保持してください。 + はい。テキストには Badge のコンテンツ領域を使用し、視覚的なインジケーターにはサポートされているアイコン コンテンツを使用します。コンパクトなステータスまたはカテゴリのラベルとして機能するように、組み合わせは短くしてください。 プラットフォーム固有の `dot` プロパティまたは属性を設定します。ドット バッジは、意図的にテキストやその他のコンテンツなしでレンダリングされます。 + + ステータスが存在するかどうかだけで伝わる場合は、ドット バッジを使用します。ユーザーが色や位置に頼らずにステータス、カテゴリ、またはカウントを理解する必要がある場合は、テキスト バッジを使用します。 + + Angular には `igniteui-angular`、React には `igniteui-react`、Web Components には `igniteui-webcomponents`、Blazor には `IgniteUI.Blazor` を使用してください。関連する Ignite UI パッケージは同じリリース バージョンに揃えてください。 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 59a1da73fd..e85474506b 100644 --- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx @@ -28,7 +28,13 @@ import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3. # ボタン グループ コンポーネント + +{Platform} ボタン グループ コンポーネントは、 ディレクティブを持つボタンを、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。 + + + {Platform} ボタン グループ コンポーネントは、 を、水平 / 垂直配置、単一 / 複数選択、切り替えを備えたスタイル付きボタン グループに編成するために使用されます。 + ## ライブ デモ @@ -93,18 +99,18 @@ Button Group -### 前提条件とバージョン互換性 - -ターゲット フレームワークでサポートされているバージョンの {ProductName} パッケージを使用してください。フレームワーク パッケージ、ボタン グループ パッケージ、テーマ パッケージを同じリリース バージョンに保ってください。 + - - -**{PackageWebComponents}** パッケージを使用する Web Components の場合は、パッケージをインストールします。 +**{PackageCommon}** パッケージを使用する {Platform} の場合は、パッケージをインストールします。 ```cmd -npm install {PackageWebComponents} +npm install {PackageCommon} ``` + + + + 次に、 とそのテーマ CSS をインポートし、コンポーネントを登録します。 ```ts @@ -118,12 +124,6 @@ defineComponents(IgcButtonGroupComponent); -**igniteui-react** パッケージを使用する React の場合は、パッケージをインストールします。 - -```cmd -npm install igniteui-react -``` - 次に、ボタン グループ ラッパーとそのテーマ CSS をインポートします。 ```tsx @@ -135,7 +135,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -**IgniteUI.Blazor** パッケージを使用する Blazor の場合は、次のようにボタン グループ モジュールを登録します。 +**IgniteUI.Blazor** パッケージを使用する {Platform} の場合は、次のようにボタン グループ モジュールを登録します。 ```csharp // in Program.cs file @@ -159,18 +159,22 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); ng add igniteui-angular ``` -次に、NgModule アプリケーションでは `IgxButtonGroupModule` をインポートするか、コンポーネントの `imports` コレクションに `IGX_BUTTON_GROUP_DIRECTIVES` と必要なスタンドアロン コンポーネントをインポートします。 +次に、コンポーネントの `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) トピックをお読みください。 + + + を使用する最もシンプルな方法は次のとおりです。 + を使用する最もシンプルな方法は次のとおりです。 + @@ -206,7 +210,13 @@ Ignite UI for Angular の完全な紹介については、[**作業の開始**]( ## 使用方法 + + を使用して、 ディレクティブを使用するボタンをラップします。デフォルトでボタンを選択するには、そのボタンで `selected` 入力を設定します。 + + + を使用して コンポーネントをラップします。デフォルトでボタンを選択するには、 属性を使用します。 + @@ -306,7 +316,13 @@ Ignite UI for Angular の完全な紹介については、[**作業の開始**]( ### 配置 + +ボタン グループは水平および垂直レイアウトをサポートします。 プロパティを使用して、グループ内のボタンの方向を設定します。 + + + ボタン グループは水平および垂直レイアウトをサポートします。 プロパティを使用して、グループ内のボタンの方向を設定します。 + @@ -339,7 +355,20 @@ public alignment = ButtonGroupAlignment.vertical; ### 選択 -{ProductName} の選択を構成するには、プラットフォーム固有の選択プロパティを使用します。Angular の場合は 、React、Web Components、Blazor の場合は を使用します。使用可能なモードは次のとおりです。 +{ProductName} ボタン グループの選択を構成するには、プラットフォーム固有の選択プロパティを使用します。 + + +{Platform} の場合は、 プロパティを使用します。使用可能なモードは次のとおりです。 + + + +{Platform} の場合は、 プロパティを使用します。使用可能なモードは次のとおりです。 + + + +{Platform} の場合は、 プロパティを使用します。使用可能なモードは次のとおりです。 + + - **single** - ボタン グループのデフォルトの選択モードです。ユーザーは単一のボタンを選択/選択解除できます。 - **single-required** - ラジオ グループの動作を模倣します。選択できるボタンは 1 つだけで、最初に選択すると、ユーザーの操作によって選択解除することはできません。 - **multiple** - グループ内の複数のボタンを選択または選択解除できます。 @@ -370,7 +399,13 @@ Angular の選択モードは `single`、`singleRequired`、`multi` です。 + + は、その `selected` 入力またはボタン グループの 入力を通じて選択済みとしてマークできます。 + + + は、 属性または の 属性を通じて選択済みとしてマークできます。 + @@ -439,12 +474,23 @@ Angular の選択モードは `single`、`singleRequired`、`multi` です。 + + 入力でボタン グループを初期化する場合は、各ボタンに一意の `value` を設定してください。 + + の プロパティを使用するには、 の 属性の設定が必須です。 + ### 状態 + +グループ内の各ボタンは、有効および無効のバリアントをサポートし、選択済みまたは未選択の状態にできます。含まれる コンポーネントが提供する状態動作を使用します。 + + + グループ内の各ボタンは、有効および無効のバリアントをサポートし、選択済みまたは未選択の状態にできます。含まれる コンポーネントが提供する状態動作を使用します。 + @@ -460,7 +506,13 @@ Angular の選択モードは `single`、`singleRequired`、`multi` です。 ### インタラクション状態 + +グループ内の有効なボタンは、アイドル、ホバー、フォーカスのインタラクション状態をサポートします。含まれる コンポーネントが提供する状態動作を使用します。 + + + グループ内の有効なボタンは、アイドル、ホバー、フォーカスのインタラクション状態をサポートします。含まれる コンポーネントが提供する状態動作を使用します。 + @@ -528,7 +580,7 @@ public bordersButtons: IButton[] = [ -Web Components の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 +{Platform} の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 ボタン グループとトグル ボタン コンポーネントを登録します。 @@ -560,7 +612,7 @@ defineComponents(IgcButtonGroupComponent, IgcToggleButtonComponent, IgcIconCompo -React の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 +{Platform} の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 ボタン グループ、トグル ボタン、アイコン コンポーネントをインポートします。 @@ -590,7 +642,7 @@ import { IgrButtonGroup, IgrToggleButton, IgrIcon } from 'igniteui-react'; -Blazor の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 +{Platform} の場合は、個々のトグル ボタンを使用してカスタム ボタン グループを作成します。各ボタンには独自の値、アイコン、ラベル、選択状態、無効状態を定義できます。 `Program.cs` でボタン グループ モジュールを登録します。 @@ -701,15 +753,40 @@ igx-buttongroup { ## プロパティ -ボタン グループのプロパティはコンポーネント API リファレンスから生成されます。 + + +Angular ボタン グループは、次のプロパティを公開します。 + +| 名前 | タイプ | デフォルト | 説明 | +| --- | --- | --- | --- | +| | `ButtonGroupAlignment` | `horizontal` | グループ内のボタンの方向を設定します。 | +| | `IButton[]` | `[]` | グループに表示されるボタン アイテムを定義します。 | + + + + -プロパティの行は、ドキュメントのビルド時に型付き API ソースから注入されます。 +{Platform} ボタン グループは、次のプロパティを公開します。 | 名前 | タイプ | デフォルト | 説明 | | --- | --- | --- | --- | -| | `ButtonGroupAlignment` | `horizontal` | グループ内のボタンの方向を設定します。 | -| | `ButtonGroupSelection` | `single` | グループ内のボタンの選択モードを設定します。 | -| | `string[]` | `[]` | 選択されているボタンの値を取得または設定します。各トグル ボタンには一意の `value` が必要です。 | +| | `ButtonGroupAlignment` | `horizontal` | グループ内のボタンの方向を設定します。 | +| | `ButtonGroupSelection` | `single` | グループ内のボタンの選択モードを設定します。 | +| | `string[]` | `[]` | 選択されているボタンの値を取得または設定します。 | + + + + + +Blazor ボタン グループは、次のプロパティを公開します。 + +| 名前 | タイプ | デフォルト | 説明 | +| --- | --- | --- | --- | +| | `ButtonGroupAlignment` | `horizontal` | グループ内のボタンの方向を設定します。 | +| | `ButtonGroupSelection` | `single` | グループ内のボタンの選択モードを設定します。 | +| | `string[]` | `[]` | 選択されているボタンの値を取得または設定します。 | + + ## スタイル設定 @@ -1004,7 +1081,7 @@ igc-toggle-button::part(toggle) { ## トラブルシューティング -{Platform} ボタン グループのトラブルシューティング ガイダンスは、一般的な選択の問題に対して問題、原因、修正のフォーマットで提供されます。 +このセクションを使用して、ボタン グループを単一のトグル、フォーム フィールド、またはアクション グループとして扱う前に、境界と一般的な判断を確認してください。 ### selectedItems でボタンが選択されないのはなぜですか? @@ -1020,16 +1097,53 @@ igc-toggle-button::part(toggle) { ## API リファレンス -{Platform} ボタン グループ API リファレンスは、コンポーネントと関連するトグル ボタン機能の完全な API サーフェスを提供します。 +{Platform} ボタン グループ API リファレンスは、コンポーネントと関連するボタン機能の完全な API サーフェスを提供します。 + + + + + + + + + + + + + + + - + + + + + + + + + ## 依存関係 -{Platform} ボタン グループは、プラットフォーム パッケージとそのテーマ スタイルシートが必要です。サンプルではトグル ボタン、アイコン、リップル コンポーネントも使用します。 + +Angular ボタン グループには、Angular パッケージとそのテーマ スタイルシートが必要です。サンプルでは 、、 コンポーネントも使用します。 + + + +React ボタン グループには、React パッケージとそのテーマ スタイルシートが必要です。サンプルでは 、、 コンポーネントも使用します。 + + + +Web Components ボタン グループには、Web Components パッケージとそのテーマ スタイルシートが必要です。サンプルでは 、、 コンポーネントも使用します。 + + + +Blazor ボタン グループには、Blazor パッケージとそのテーマ スタイルシートが必要です。サンプルでは 、、 コンポーネントも使用します。 + ## その他のリソース @@ -1040,26 +1154,22 @@ API の詳細とプロジェクト サポートについては、次の {Platfor ## 関連コンポーネント -{Platform} ボタン グループは選択可能なトグル ボタンで構成されています。グループではなく個別のトグル アクションが必要な場合は、次の関連コンポーネントを使用してください。 - -- +- [Button](./button.mdx) - 選択可能なグループではなく個別のアクションが必要な場合は、Button を使用します。 ## FAQ -これらのよくある質問は、{Platform} ボタン グループの選択、コンテンツ、設定に関する一般的なシナリオをカバーします。 - - -ボタン グループは `single`、`single-required`、`multiple` の選択モードをサポートします。必要なインタラクションに合ったモードを選択するには `selection` プロパティを使用します。 + +すべてのボタン アイテムに一意の値を指定し、プラットフォーム固有の選択アイテム設定を使用して、最初に選択状態にするアイテムを指定します。一意の値により、サポートされるすべてのプラットフォームでグループが選択を一貫して追跡できます。 - -すべての に一意の `value` を割り当て、ボタン グループの `selectedItems` プロパティを通じて対応する値を設定します。 + +はい。各ボタン アイテムには、アイコン、ラベル、またはその両方を含めることができます。グループ全体でコンテンツのパターンを統一し、アイコンだけではオプションを説明できない場合は、表示ラベルまたはアクセシブル名を提供してください。 - -はい。各 にアイコンを追加し、グループ全体でボタン コンテンツを統一してください。 + +はい。プラットフォーム固有の配置プロパティを垂直オプションに設定します。関連する選択肢を 1 行で表示する場合は、水平配置を使用します。 diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx index 81967cea12..20c13e6a65 100644 --- a/docs/xplat/src/content/jp/components/inputs/button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button.mdx @@ -1,9 +1,11 @@ --- -title: "{Platform} Button コンポーネント | {ProductName}" +title: "Button コンポーネント" description: "{Platform} Button コンポーネントの使用を開始します。{Platform} Button OnClick イベントを通じて、ボタンのバリアントを選択し、サイズを構成し、スタイルを定義し、柔軟性を獲得します。" keywords: "{Platform}, UI controls, web widgets, UI widgets, {Platform} Button Components, Infragistics, UI コントロール, web ウィジェット, UI ウィジェット, {Platform} Button コンポーネント, インフラジスティックス" -license: MIT mentionedTypes: ["Button", "ButtonBase"] +license: MIT +last_updated: 2026-08-13 +relatedComponents: ["IconButton"] _language: ja llms: description: "{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。" @@ -11,35 +13,178 @@ llms: 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 buttonAnatomy from '@xplat-images/anatomy-content-light/button-lt-a.png'; +import buttonDo1 from '@xplat-images/button/button-do-1.png'; +import buttonDo2 from '@xplat-images/button/button-do-2.png'; +import buttonDo3 from '@xplat-images/button/button-do-3.png'; +import buttonDoNot1 from '@xplat-images/button/button-do-not-1.png'; +import buttonDoNot2 from '@xplat-images/button/button-do-not-2.png'; +import buttonDoNot3 from '@xplat-images/button/button-do-not-3.png'; + +# Button コンポーネント -# {Platform} Button (ボタン) の概要 +{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアント、スタイル、サイズを完全に制御できます。また、Button コンポーネントでは、クリックの処理、ボタンの切り替え、必要に応じたボタンの無効化も行えます。 - +## ライブ デモ -{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button OnClick イベント、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 + + + - + -{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button クリックされたコールバック、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 + -## {Platform} Button の例 +## 構造 - +{Platform} Button は、ラベルとオプションのプレフィックス / サフィックス コンテンツをコンポーネントのシャドウ DOM 内にレンダリングします。 -## 使用方法 + - + + +