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 0000000000..05656c6c3e Binary files /dev/null and b/docs/angular/src/content/jp/images/anatomy-content-light/button-lt-a.png differ 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 0000000000..9243c7edbd Binary files /dev/null and b/docs/angular/src/content/jp/images/button/button-do-1.png differ diff --git a/docs/angular/src/content/jp/images/button/button-do-2.png b/docs/angular/src/content/jp/images/button/button-do-2.png new file mode 100644 index 0000000000..d833307a65 Binary files /dev/null and b/docs/angular/src/content/jp/images/button/button-do-2.png differ diff --git a/docs/angular/src/content/jp/images/button/button-do-3.png b/docs/angular/src/content/jp/images/button/button-do-3.png new file mode 100644 index 0000000000..d833307a65 Binary files /dev/null and b/docs/angular/src/content/jp/images/button/button-do-3.png differ diff --git a/docs/angular/src/content/jp/images/button/button-do-not-1.png b/docs/angular/src/content/jp/images/button/button-do-not-1.png new file mode 100644 index 0000000000..2f37198ea3 Binary files /dev/null and b/docs/angular/src/content/jp/images/button/button-do-not-1.png differ diff --git a/docs/angular/src/content/jp/images/button/button-do-not-2.png b/docs/angular/src/content/jp/images/button/button-do-not-2.png new file mode 100644 index 0000000000..aa39725522 Binary files /dev/null and b/docs/angular/src/content/jp/images/button/button-do-not-2.png differ diff --git a/docs/angular/src/content/jp/images/button/button-do-not-3.png b/docs/angular/src/content/jp/images/button/button-do-not-3.png new file mode 100644 index 0000000000..473d3e6ed6 Binary files /dev/null and b/docs/angular/src/content/jp/images/button/button-do-not-3.png differ 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..057c3c9056 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..c956bb78b9 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..8c58d342f6 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 内にレンダリングします。 -## 使用方法 + - + + +
+
+ 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..714a687cf0 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 new file mode 100644 index 0000000000..1beef1b022 --- /dev/null +++ b/docs/xplat/src/content/jp/components/themes/accessibility.mdx @@ -0,0 +1,290 @@ +--- +title: "{Platform} スタイル設定およびテーマ | {Platform} アクセシビリティ | インフラジスティックス" +description: "{ProductName} のテーマ設定エンジンがアクセシビリティをどのようにサポートするか - テキスト コントラストの自動計算、相対的なテキストのスケーリング、および色覚異常に対応したチャート パレット。" +keywords: "{ProductName}, Infragistics, Accessibility, Contrast, WCAG, Styling, Themes, インフラジスティックス, アクセシビリティ, コントラスト, スタイル設定, テーマ" +license: MIT +last_updated: "2026-08-31" +mentionedTypes: [] +_language: ja +llms: + description: "{ProductName} は、実行時に WCAG のコントラストしきい値に照らしてテキスト カラーを計算し、すべてのタイプ スケールを相対値に保ち、オプトインの色覚異常対応チャート パレットを提供します。" +--- + +{/*This topic serves Angular, React, Web Components and Blazor. Angular-specific content sits in Angular-only platform blocks; everything else is shared. The Angular doc set still carries its own copy at docs/angular/src/content/en/components/themes/accessibility.mdx because this page is excluded for Angular in src/content/en/toc.json; keep the two in sync until that exclude is lifted. Never write a literal PlatformBlock tag in prose or a comment - the generator strips blocks with a regex that does not skip comments, and an unpaired tag swallows the rest of the page.*/} + +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} のアクセシビリティ + +{ProductName} のテーマ設定エンジンは、スタイル設定レイヤーにアクセシビリティを組み込んでいます。任意の背景色に対するテキスト カラーを実行時に計算して WCAG のコントラストしきい値に照らして測定し、すべてのタイプ スケールを相対単位で表現してユーザーの設定に合わせてテキストをスケーリングし、色覚異常のある読者向けのオプトインのカラー パレットを提供します。 + +## 概要 + +{ProductName} のアクセシビリティは、それぞれ独立して構成する 2 つのレイヤーによって提供されます。 + +| レイヤー | 担当する範囲 | ドキュメントの場所 | +|---|---|---| +| **テーマ設定エンジン** (`igniteui-theming`) | カラー コントラスト、テキスト サイズ、チャートのカラー パレット、およびカスタム コントロールを支援技術から到達可能に保つスタイル設定ユーティリティ。 | このページ。 | +| **コンポーネント ライブラリ** (`{PackageCommon}`) | キーボード操作、フォーカスの移動、ARIA のロールと状態、およびスクリーン リーダーの読み上げ。 | [アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx) および各コンポーネントのトピック。 | + +このページでは 1 つ目のレイヤーを扱います。テーマ設定エンジンでスタイル設定するすべてのコンポーネント (エンジンの上に独自に構築するコンポーネントを含む) に適用される機能について説明します。 + +以下の表は、アプリケーションを最終的に使用する人に対してテーマ設定エンジンが行うことをまとめたものです。各行はアプリケーションの基盤となる入力であり、適合の結果ではありません。カラーを指定するのはユーザー自身であり、エンジンは WCAG のしきい値に照らして測定した組み合わせを生成しますが、完成した製品が適合しているかどうかの検証は引き続きユーザーの責任です。 + +| ユーザーの状況 | テーマ設定エンジンが提供するもの | +|---|---| +| 色付きのボタン、チップ、バッジ上で読みやすいテキストを必要としている | 生成されるすべてのパレット カラー (指定したブランド カラーを含む) について前景色がブラウザーで計算され、構成した WCAG コントラスト レベル (デフォルトは AA) に照らして測定されます。 | +| ブラウザーのデフォルトのフォント サイズを拡大している | すべてのタイプ スケールが相対単位で表現され、ライブラリがページのフォント サイズを固定することはありません。 | +| 色覚異常があり、チャートを読む | 一般的な色覚異常の形態でも区別しやすいように選ばれた、オプトインのチャート パレット。 | +| 光に敏感なため、ダーク インターフェイスを好む | 提供される 4 つのテーマそれぞれに対する完全なダーク パレット。 | +| カスタム スタイルのフォーム コントロールでスクリーン リーダーを使用している | ネイティブ入力を視覚的に非表示にしながら、アクセシビリティ ツリーには残すスタイル設定ユーティリティ。 | + +## はじめる前に + +このページの内容のうち何に依存できるかは、3 つの前提によって決まります。 + +**テーマ設定エンジンはスタイルを設定するものであり、セマンティクスを追加するものではありません。** ARIA ロール、キーボード処理、およびフォーカス管理は、テーマではなくコンポーネント ライブラリから提供されます。テーマを適用するだけでは、カスタム コントロールはアクセシブルになりません。 + +**コントラストの計算は、生成されたパレット カラーに適用されます。** エンジンは、`palette()` ジェネレーターによって生成されたパレットの前景色を計算します。個々のコンポーネント テーマでは、特定の前景トークンと特定の背景トークンを手動で組み合わせている場合もあります。それらの組み合わせはテーマごとに設定されており、以下で説明するコントラストの計算によって生成されるものではありません。コンポーネント トークンを直接オーバーライドする場合は、[`contrast()`](#コントラスト比を自分で確認する) で結果を検証してください。 + +**完成した製品の適合性はユーザー自身が検証する必要があります。** エンジンが制御するのは、パレット、計算された組み合わせ、タイプ スケールといった入力であり、アプリケーションがそれらをどのように使用するかではありません。ブランド カラーから構築したパレットは完全な適合に達することができますが、エンジンがその結果を保証することはできません。適合を表明する前に、レンダリングされた結果を確認してください。 + + +このページの機能は、テーマ設定エンジンの動作を説明するものです。製品としての {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#sass-によるカスタマイズ) で説明されているように、ロード パスから `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/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)を参照してください。 ## パレットの定義 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",