diff --git a/docs/xplat/src/content/jp/components/inputs/rating.mdx b/docs/xplat/src/content/jp/components/inputs/rating.mdx index 55eb64636a..0b730df218 100644 --- a/docs/xplat/src/content/jp/components/inputs/rating.mdx +++ b/docs/xplat/src/content/jp/components/inputs/rating.mdx @@ -1,62 +1,147 @@ --- -title: "{Platform} Rating" -description: "{ProductName} Rating を使用すると、ユーザーは Unicode シンボル、SVG、またはアイコンを使用してフィードバックを表示および提供できます。" -keywords: "{ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Rating components, {Platform} Rating controls, UI コントロール, {Platform} ウィジェット, web ウィジェット, UI ウィジェット, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} Rating コンポーネント, {Platform} Rating コントロール" +title: "{Platform} Rating (評価) コンポーネント" +description: "{ProductName} Rating は、星またはカスタム シンボルのスケールでスコアを選択または表示するフォーム関連の入力で、半星単位のステップに対応します。" +keywords: "{Platform} Rating, {ProductName}, 星評価, 半星評価, 評価シンボル" license: MIT -mentionedTypes: ["Rating"] +last_updated: "2026-10-07" +relatedComponents: ["Slider", "RadioGroup"] +mentionedTypes: ["Rating", "RatingSymbol"] _language: ja llms: - description: "{ProductName} Rating コンポーネントで Unicode シンボル、SVG、またはアイコンを使用した評価とフィードバックを実装する方法を説明します。" + description: "{ProductName} Rating は、ユーザーが星またはカスタム シンボルのスケールでスコアを表示および選択できるフォーム関連のコンポーネントです。" --- 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 ratingAnatomy from '@xplat-images/anatomy-content-light/rating-lt-a.png'; +import ratingDoSymbol from '@xplat-images/rating/rating-do-1.png'; +import ratingDoNotSymbol from '@xplat-images/rating/rating-do-not-1.png'; +import ratingDoContrast from '@xplat-images/rating/rating-do-2.png'; +import ratingDoNotContrast from '@xplat-images/rating/rating-do-not-2.png'; +# Rating (評価) +{ProductName} Rating は、ユーザーが星またはカスタム シンボルのスケールでスコアを表示および選択できるフォーム関連のコンポーネントです。 -# {Platform} Rating (評価) の概要 + -{ProductName} 評価コンポーネントを使用すると、ユーザーはフィードバックを表示して提供できます。 +Angular では、Rating は `igniteui-webcomponents` の `igc-rating` Web コンポーネントです。`IgcFormControlDirective` を使用して Angular フォームにバインドします。 - + + +Rating は、半星などの小数値、ホバー プレビュー、個別シンボルの単一選択、およびキーボードによる完全な入力をサポートします。 + - +## ライブ デモ + + -まず、次のコマンドを実行して {ProductName} をインストールする必要があります: + -```cmd -npm install {PackageWebComponents} -``` + + +## 構造 + +Rating はラベルと値で構成されます。値は評価スケールの数値です。ラベルは `label` を設定すると表示されます。`max` を設定すると、シンボルの数を変更できます (既定値は 5)。 + + + + + +1. ラベル (オプション): ユーザーが何を評価しているかを説明します
+2. Rating アイコン: 選択された項目を示します
+3. Rating アイコン: 半分選択された項目を示します
+4. Rating アイコン: 選択されていない項目を示します + +`igc-rating` 要素は、ラベルと、シンボルを保持するスライダーをレンダリングします。シンボルが投影されていない場合は、`max` の各ポイントに対して 1 つの星をレンダリングします。 + +```text +igc-rating +└─ #shadow-root + ├─ label[part="label"] // hidden when label isn't set + └─ div[part="base"][role="slider"] + ├─ div[part="symbols"] // aria-hidden="true" + │ └─ slot[name="symbol"] // projected igc-rating-symbol elements + │ └─ igc-rating-symbol × max // default stars when nothing is projected + │ └─ #shadow-root + │ ├─ div[part="symbol full"] // star_filled icon, clipped to the value + │ └─ div[part="symbol empty"] // star_outlined icon, clipped to the rest + └─ label[part="value-label"] + └─ slot[name="value-label"] // hidden when the slot is empty +``` +各 `igc-rating-symbol` は、既定のスロットを `full` パートに、`empty` スロットを `empty` パートにレンダリングします。 - +## はじめに +{Platform} Rating を使用するには、基本的なプロジェクト設定について [{ProductName} はじめに](../general/getting-started.mdx)[{ProductName} はじめに](../general-getting-started.mdx) トピックに従い、対象プラットフォーム用のコンポーネントを追加します。 + -まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: +**{PackageCommon}** パッケージをインストールします。 ```cmd -npm install igniteui-react +npm install {PackageCommon} ``` +次に、、そのテーマ CSS をインポートし、コンポーネントを登録します。この登録により、`igc-rating-symbol` 要素と `igc-icon` 要素も登録されます。 + +```ts +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcRatingComponent); +``` + + +**{PackageCommon}** パッケージをインストールします。 + +```cmd +npm install {PackageCommon} +``` + +次に、 ラッパーとテーマ CSS をインポートします。 - を使用する前に、次のように登録する必要があります: +```tsx +import { IgrRating } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +**Program.cs** で Rating モジュールを登録します。 ```csharp // in Program.cs file @@ -64,7 +149,7 @@ npm install igniteui-react builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule)); ``` -また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +次に、ホスト ページにテーマ スタイルシートを追加します。 ```razor @@ -72,460 +157,1239 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule)); + +プロジェクトで {ProductName} をまだ使用していない場合は、`ng add igniteui-angular` を実行します。次に、Rating を提供する **{PackageComponents}** パッケージをインストールします。 - +```cmd +npm install {PackageComponents} +``` +`IgcRatingComponent` を登録し、`igc-rating` をレンダリングする Angular コンポーネントに `CUSTOM_ELEMENTS_SCHEMA` を追加します。 ```ts -import { defineComponents, IgcRatingComponent } from "igniteui-webcomponents"; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; defineComponents(IgcRatingComponent); + +@Component({ + selector: 'app-product-rating', + template: '', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class ProductRatingComponent {} ``` -{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。 +{ProductName} テーマは `igc-rating` にスタイルを設定するため、Rating は `theme()` ミックスインで含めたテーマに従います。 + + + + +登録後、ラベル付きで をレンダリングします。 + + +```html + +``` + - ```tsx -import { IgrRating } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; + ``` + + +```razor + +``` + + + +Rating は 5 つの星をレンダリングし、値 0 から開始します。 - の使用を開始する最も簡単な方法は次のとおりです: +## 使用方法 +{Platform} Rating は、製品、サービス、または体験のスコアを収集する場合や、ユーザーが変更できない平均スコアを表示する場合に使用します。 + +### ホバー プレビュー + +`hoverPreview` を設定すると、ユーザーがクリックする前に、ポインターの下の値までシンボルが塗りつぶされます。ポインターがシンボルから離れると、{Platform} Rating は元の値を表示します。読み取り専用または無効な Rating では、プレビューは表示されません。 +プレビューがオンの間、Rating はポインターの下の値とともに `igcHover` を発行します。 ```html - + + +``` + +```ts +const rating = document.querySelector('igc-rating')!; +const hint = document.getElementById('hint')!; + +rating.addEventListener('igcHover', (event) => { + hint.textContent = `${event.detail} stars`; +}); ``` + + +プレビューがオンの間、Rating はポインターの下の値とともに `onHover` を呼び出します。 +```tsx +) => setHint(`${e.detail} stars`)} +/> +``` + + +プレビューがオンの間、Rating はポインターの下の値とともに `Hover` を発生させます。 ```razor - + + +@code { + private string Hint { get; set; } + + private void OnHover(IgbNumberEventArgs e) + { + Hint = $"{e.Detail} stars"; + } +} ``` + +プレビューがオンの間、Rating はポインターの下の値とともに `igcHover` を発行します。 - +```html + +``` + +```ts +public hint = ''; + +public onHover(event: Event) { + this.hint = `${(event as CustomEvent).detail} stars`; +} +``` + + + +### リセット + +既定では、現在の値をクリックしても値は保持されます。`allowReset` を設定すると、ユーザーが現在の値を再度クリックしたときに {Platform} Rating が 0 にリセットされます。 + + + +```html + +``` + + + ```tsx - + ``` + -これにより、データの入力と読み取りに使用できる 5 つ星の評価コンポーネントが作成されます。 +```razor + +``` -## カスタム シンボルの使用 + - コンポーネントを使用すると、デフォルトの星シンボルの代わりにカスタム シンボルを使用できます。SVG、アイコン、または別の Unicode シンボルなどの別のシンボルを使用する場合は、 の開く括弧と閉じる括弧の間に コンポーネントを配置する必要があります。 + +```html + +``` - + + +### 読み取り専用 +`readOnly` を設定すると、すべてのレビューの平均など、ユーザーが変更できないスコアを表示します。値は範囲内の任意の数値にでき、たとえば 4.3 の場合は 4 つのシンボルと 5 つ目の 30% が塗りつぶされます。読み取り専用の {Platform} Rating はタブ順序に残ります。また、支援技術は読み取り専用として通知します。 + + ```html - -
💙
💙
 -
💙
💙
 -
💙
💙
 -
💙
💙
 - + ``` + + +```tsx + +``` + - ```razor - -
💙
💙
 -
💙
💙
 -
💙
💙
 -
💙
💙
 -
💙
💙
 - + +``` + + + + + +```html + ``` +### レイアウト +`label` プロパティは、シンボルの上に表示ラベルをレンダリングし、支援技術に対して {Platform} Rating に名前を付けます。現在のスコアなど、シンボルの横にカスタム コンテンツを表示するには、`value-label` スロットに配置します。 - + + +```html + + 4 of 5 + +``` + +値との同期を保つには、`igcChange` ハンドラーでスロットのコンテンツを更新します。 + + + ```tsx - - - - - - - - - - - - - - - - +) => setScore(e.detail)}> + {score} of 5 ``` + + +```razor + + @Score of 5 + +``` + + + + + +```html + + {{ score }} of 5 + +``` - + +すべての {Platform} Rating にアクセシブルな名前を付け、スケールに合った言葉で値を説明してください。 + -> 評価コンポーネントの開く括弧と閉じる括弧間の評価記号の数によって、最大値が決まります。 +Rating に表示用の `label` がない場合は、`aria-label` を設定するか、`igniteui-webcomponents` 7.4.1 以降では ` + - +支援技術は、既定で値を "3 of 5" として読み上げます。このテキストを置き換えるには を設定します。Rating は `{0}` を値に、`{1}` を `Max` に置き換えるため、テキストのローカライズも可能です。 + + + ```html - -
😣
😣
 -
😣
😣
 -
😣
😣
 -
😣
😣
 -
😣
😣
 - + ``` + + +```tsx + +``` + - ```razor - -
😣
😣
 -
😣
😣
 -
😣
😣
 -
😣
😣
 -
😣
😣
 - + ``` + +```html + +``` - + + +`label` を未設定のままにするとラベルが非表示になります。または、`value-label` スロットを使用してスコアを表示します。 + + + + + + + + + + + + + +### 操作状態 + +{Platform} Rating は既定で有効です。無効にするには `disabled` を設定します。 + + +```html + +``` + + + + ```tsx - - -
😣
-
😣
- - -
😣
-
😣
- - -
😣
-
😣
- - -
😣
-
😣
- - -
😣
-
😣
- - + +``` + + + + + +```razor + +``` + + + + + +```html + ``` + - + + + + + -> `step` 属性は単一選択モードでは機能しないことに注意してください。 + -## 空および選択済み -{ProductName} 評価コンポーネントを使用すると、ユーザーは単一の評価値の空の状態と選択された状態に異なるアイコン / 要素を使用できます。シンボルを宣言するときは、たとえ同じであっても、スロットごとに 2 つのアイコン (空とフル) を提供することが必須です。次に例を示します。 +### 空/満たされた状態 +{Platform} Rating の `value` は、シンボルがどの程度満たされるかを設定します。既定値の 0 ではすべてのシンボルが空になり、`max` と等しい値ではすべてのシンボルが満たされます。 +値と最大値を属性として設定し、`igcChange` をリッスンしてユーザーが選択した値を取得します。 ```html - - - - + +``` + +```ts +const rating = document.querySelector('igc-rating')!; + +rating.addEventListener('igcChange', (event) => { + console.log(`New rating: ${event.detail}`); +}); ``` + + +値を状態に保持し、`onChange` ハンドラーで更新します。 + +```tsx +import { useState } from 'react'; +import { IgrRating } from 'igniteui-react'; +export default function MovieRating() { + const [score, setScore] = useState(3); + + return ( + ) => setScore(e.detail)} + /> + ); +} +``` + + +`@bind-Value` で値をバインドします。 ```razor - - - - + + +@code { + private double Score { get; set; } = 3; +} ``` + +値をプロパティとしてバインドし、`igcChange` ハンドラーで更新します。 - +```html + +``` + +```ts +public score = 3; + +public onScoreChange(event: Event) { + this.score = (event as CustomEvent).detail; +} +``` + + + +`step` を `0.5` に設定すると、ユーザーは半星を選択できます。 + + +```html + +``` + + + + ```tsx - -
-
- + +``` + + + + + +```razor + +``` + + + + + +```html + ``` + + + + + + + + + + + + +### サイズ + +Rating には、小、中、大の 3 つのサイズがあります。小、中、大のサイズでは、それぞれ 18px、24px、36px のシンボルがレンダリングされ、{Platform} Rating は既定で中サイズを使用します。サイズを選択するには、CSS 変数 `--ig-size` を `--ig-size-small`、`--ig-size-medium`、または `--ig-size-large` に設定します。これらのプリセット以外のサイズにするには、`--ig-rating-symbol-size` を設定します。 - +```css +.rating-small { + --ig-size: var(--ig-size-small); +} + +.rating-large { + --ig-size: var(--ig-size-large); +} + +.rating-custom { + --ig-rating-symbol-size: 3rem; +} +``` + + + +```html + +``` + + + +```tsx + +``` -## 構成 + -### Single (単一) + + +```razor + +``` -評価の ビジュアル モードをオンにします。フィードバック絵文字の顔など、固有の値を伝える記号を使用する場合に便利です。 + -### Value (値) + - 属性は、コンポーネントの現在の値を設定します。 +```html + +``` -### Label (ラベル) + - 属性を使用すると、評価コンポーネントのラベル値を設定できます。 + -### 値の形式 -[aria-valuetext (英語)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) を設定する書式文字列。そのすべてのインスタンスは、コントロールの現在の値に置き換えられます。スクリーン リーダーにとって重要であり、ローカライズに役立ちます。 + -### Max Value (最大値) + - 属性は、評価コンポーネントの最大許容値を設定します。 + -### Step (ステップ) + - 属性は、2 つのシンボル間の許容されるステップの割合を設定します。評価記号を半分に分割する場合に便利です。 + -### Hover Preview (ホバー プレビュー) +### シンボル +既定では、{Platform} Rating は星のアイコンをレンダリングします。他のシンボルを使用するには、スケールの各ポイントに対して `igc-rating-symbol` 要素 を 1 つずつ Rating の内側に配置します。各評価シンボルは、値が覆う部分に既定のスロット コンテンツを、残りの部分に `empty` スロット コンテンツを表示します。そのため、同じコンテンツであっても両方のスロットを埋めてください。評価シンボルの数が `max` を設定し、Rating は設定した `max` を無視します。 +次の Rating は、登録済みのハート アイコンを使用します。最初に、[Icon](../layouts/icon.mdx) トピックで説明されているようにアイコンを登録します。 -`hover-preview` 属性により、ホバー時にユーザー選択の可能な結果がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。 +```html + + + + + + + + + + + + + + + + + + + + + + +``` + + +次の Rating は、登録済みのハート アイコンを使用します。最初に、[Icon](../layouts/icon.mdx) トピックで説明されているようにアイコンを登録します。 + +```tsx +import { IgrIcon, IgrRating, IgrRatingSymbol } from 'igniteui-react'; + + + {[1, 2, 3, 4, 5].map((i) => ( + + + + + ))} + +``` + +次の Rating は、登録済みのハート アイコンを使用します。最初に、[Icon](../layouts/icon.mdx) トピックで説明されているようにアイコンを登録します。 + +```razor + + @for (var i = 0; i < 5; i++) + { + + + + + } + +``` + + - 属性により、ホバー時にユーザー選択の可能な結果がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。 + + +次の Rating は、`igniteui-webcomponents` の `registerIconFromText` で登録したハート アイコンを使用します。Rating は `igc-icon` 要素のサイズをシンボル サイズに合わせるため、評価シンボルには `igc-icon` を使用してください。 + +```html + + @for (i of [1, 2, 3, 4, 5]; track i) { + + + + + } + +``` +Rating は、テーマの満たされたシンボルと空のシンボルの色で、アイコンとテキストに色を付けます。`empty` スロット内のアイコン以外のコンテンツはグレースケールでレンダリングされるため、両方のスロットに同じ絵文字を入れると、選択済みまたは空のように見えます。 + +### 単一選択 + +`single` を設定すると、選択されたシンボルのみが満たされて表示されます。単一選択は、表情のスケールなど、各シンボルが 1 つの個別の値を表す場合に使用します。単一選択では、{Platform} Rating は `step` を 1 とし、小数値を切り上げます。 + + + +```html + + 😣😣 + 😔😔 + 😐😐 + 🙂🙂 + 😆😆 + +``` + +```tsx +const faces = ['😣', '😔', '😐', '🙂', '😆']; -`hoverPreview` 属性により、ホバー時にユーザー選択の可能な結果がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。 + + {faces.map((face) => ( + + {face} + {face} + + ))} + +``` + -### Read-Only (読み取り専用) +```razor + + @foreach (var face in Faces) + { + + @face + @face + + } + - 属性を使用すると、ユーザーは を読み取り専用モードで設定できます。この属性は、コンポーネントを情報提供のみを目的として使用する場合に役立ちます。 +@code { + private readonly string[] Faces = { "😣", "😔", "😐", "🙂", "😆" }; +} +``` -### Disabled (無効) + - 属性はコンポーネントを無効にし、マウスやキーボードを使用して値を選択することを不可能にします。 + -## メソッド +```html + + @for (face of faces; track face) { + + {{ face }} + {{ face }} + + } + +``` -### Step Up (ステップアップ) +```ts +public faces = ['😣', '😔', '😐', '🙂', '😆']; +``` - メソッドは、コンポーネントの値を `n` ステップずつ増やします。`step` 係数によって決定されます。 + -### Step Down (ステップダウン) + - メソッドは、コンポーネントの値を `n` ステップ分減らします。`step` 係数によって決定されます。 +### フォーム -## イベント +{Platform} Rating は、フォーム関連の要素です。`
` 内では、`name` に指定した名前で値をテキストとして送信します。 + +フォームのリセットにより、`value` 属性で設定された値が復元されます。 - コンポーネントは、`igcHover` と `igcChange` の 2 つの個別のイベントを発行します。 +```html + + + + + +```
+ + +```tsx +
{ + e.preventDefault(); + console.log(new FormData(e.currentTarget).get('score')); + }} +> + + + +``` +
 +### フォーム - コンポーネントは、`Hover` と `Change` の 2 つの個別のイベントを発行します。 +Blazor の `EditForm` コンポーネントを使用し、Rating の値を `@bind-Value` でモデルのプロパティにバインドします。このバインディングは、ユーザーが値を変更したときに `ValueChanged` イベントを通じてモデルを更新します。 + +```razor + + + + + +@code { + private ReviewModel Review { get; set; } = new(); + + private void Submit() + { + // Review.Score holds the value that the user selected. + } + + public class ReviewModel + { + public double Score { get; set; } + } +} +``` + +### フォーム - +Rating を `ngModel` または `formControlName` にバインドするには、Angular の `ControlValueAccessor` インターフェイスの実装が必要です。{ProductName} は、これをスタンドアロンの `IgcFormControlDirective` として提供しており、`ngModel` または `formControlName` を持つ `igc-rating` 要素にアタッチされます。`FormsModule` または `ReactiveFormsModule` とともにインポートします。 +```ts +import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IgcFormControlDirective } from 'igniteui-angular/directives'; +// import { IgcFormControlDirective } from '@infragistics/igniteui-angular/directives'; for licensed package + +@Component({ + selector: 'app-review-form', + template: ` +
+ +
+ `, + imports: [FormsModule, IgcFormControlDirective], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class ReviewFormComponent { + public review = { rating: 0 }; +} +``` + +リアクティブ フォームでは、`formControlName` で Rating をバインドします。 + +```html +
+ +
+``` - コンポーネントは、`hover` と `change` の 2 つの個別のイベントを発行します。 +ディレクティブは `igcChange` でモデルを更新し、Rating がフォーカスを失ったときにコントロールを touched としてマークし、フォーム コントロールを無効にしたときに Rating を無効にします。 +Rating には `required` 検証がありません。スコアを必須にするには、データを送信する前に値が 0 より大きいことを確認してください。 + +### 使用すべき場合と使用すべきでない場合 + +星は非常によく知られたランキング シンボルであり、他のシンボルは評価スケールとして認識されない場合があります。星をカスタム シンボルに置き換える場合は、その目的が明確であることを確認してください。同じ色の似た色合いや、色収差を生じる組み合わせなど、コントラストの低い色は避けてください。アイコンの選択は強調され、視覚的に明確に区別できる外観である必要があります。 + +
+ Rate your experience ラベルの下で、5 つのオレンジ色の星のうち 4 つが選択されている Rating + 星の代わりに円の中のひし形シンボルを使用している Rating +
+ +
+
+

推奨

+

星、またはユーザーが評価スケールとして連想するシンボルを使用します。

+
+
+

非推奨

+

スコアとしての意味が明確でないシンボルは避けます。

+
+
+ +
+ 灰色の枠線の星 1 つと区別しやすい、4 つの選択されたオレンジ色の星を持つ Rating + 選択された薄い灰色の星が、灰色の空の星と区別しにくい Rating +
+ +
+
+

推奨

+

選択されたシンボルを、空のシンボルから際立たせます。

+
+
+

非推奨

+

選択されたシンボルと空のシンボルに似た色合いを使用するのは避けます。

+
+
+ +## プロパティ + +{Platform} Rating は、次のプロパティを公開します。完全な型定義については、API リファレンスを参照してください。 + +| 名前 | 型 | 既定値 | 説明 | +| --- | --- | --- | --- | +| [`value`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#value) | `number` | `0` | 現在の値。0 から最大値までです。 | +| [`max`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#max) | `number` | `5` | 最大値および既定のシンボルの数。投影された評価シンボルがある場合は、その数に設定されます。 | +| [`step`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#step) | `number` | `1` | 値の最小変化量。0.001 から 1 までです。 | +| [`label`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#label) | `string` | — | 表示ラベル。Rating の名前にもなります。 | +| [`valueFormat`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#valueFormat) | `string` | — | `aria-valuetext` の形式。`{0}` は値、`{1}` は最大値を表します。 | +| [`hoverPreview`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#hoverPreview) | `boolean` | `false` | Rating がポインターの下の値をプレビューするかどうか。 | +| [`readOnly`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#readOnly) | `boolean` | `false` | ユーザーが値を変更できないかどうか。 | +| [`single`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#single) | `boolean` | `false` | 選択されたシンボルのみを満たされた状態で表示するかどうか。 | +| [`allowReset`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#allowReset) | `boolean` | `false` | 現在の値をクリックしたときに Rating を 0 にリセットするかどうか。 | +| `disabled`[`disabled`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#disabled) | `boolean` | `false` | Rating を無効にするかどうか。 | +| `invalid`[`invalid`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#invalid) | `boolean` | `false` | `ig-invalid` カスタム状態により、Rating を無効としてマークします。Rating テーマはこの状態にスタイルを設定しません。 | +| `name`[`name`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#name) | `string` | — | フォームが値を送信するときの名前。 | -### Hover Event (ホバー イベント) +## メソッド +{Platform} Rating は、次のメソッドを公開します。ステップ メソッドは、変更イベントを発行せずに値を変更します。 - +| メソッド | 説明 | +| --- | --- | +| [`stepUp`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#stepUp), | 指定したステップ数だけ値を増やします。数値の既定値は 1 です。 | +| [`stepDown`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#stepDown), | 指定したステップ数だけ値を減らします。数値の既定値は 1 です。 | +| `checkValidity`[`checkValidity`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#checkValidity), | 値が有効かどうかを返し、無効な場合は `invalid` を発行します。 | +| `reportValidity`[`reportValidity`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#reportValidity), | 値が有効かどうかを返し、無効な場合はブラウザーの検証メッセージを表示します。 | +| `setCustomValidity`[`setCustomValidity`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent#setCustomValidity), | カスタム検証メッセージを設定します。メッセージが空でない間、Rating は無効になります。 | + +## イベント +{Platform} Rating は、次のイベントを発行します。値を設定したりメソッドを呼び出したりしたときには、イベントを発行しません。 + +| 名前 | 型 | 説明 | +| --- | --- | --- | +| `igcChange` | `CustomEvent``EventCallback` | ユーザーが値を変更したときに発行されます。イベントの detail には新しい値が含まれます。 | +| `igcHover` | `CustomEvent``EventCallback` | ホバー プレビューがオンで、ポインターが別の値に移動したときに発行されます。イベントの detail にはポインターの下の値が含まれます。 | +| | `EventCallback` | 新しい値とともに発行されます。`@bind-Value` を通じて使用します。 | + +## スタイル設定 -`igcHover` イベントは、シンボルにカーソルを合わせると発生します。マウス カーソルの下にあるシンボルの値を提供します。カスタム値ラベルと読み出しを作成するのに役立ちます。 +{Platform} Rating は、色とシンボル サイズをテーマから取得します。次の CSS 変数で変更できます。 + +| 変数 | 変更内容 | +| --- | --- | +| `--ig-rating-symbol-full-color` | 満たされたシンボル (既定の星、アイコン、テキスト) の色。 | +| `--ig-rating-symbol-empty-color` | 空のシンボルの色。 | +| `--ig-rating-label-color` | ラベルの色。 | +| `--ig-rating-value-label` | 値ラベルの色。 | +| `--ig-rating-symbol-size` | シンボルのサイズ。 | +| `--ig-size` | サイズのプリセット: `--ig-size-small`、`--ig-size-medium`、または `--ig-size-large`。 | +| `--ig-rating-disabled-full-symbol-color` | Rating が無効なときの、満たされたシンボルの色。 | +| `--ig-rating-disabled-empty-symbol-color` | Rating が無効なときの、空のシンボルの色。 | +| `--ig-rating-disabled-label-color` | Rating が無効なときの、ラベルと値ラベルの色。 | +| `--ig-rating-symbol-full-filter` | Rating が無効なときの、絵文字など、アイコン以外の満たされたシンボルの CSS フィルター。 | +| `--ig-rating-symbol-empty-filter` | Rating が無効なときの、絵文字など、アイコン以外の空のシンボルの CSS フィルター。 | + +`igc-rating` 要素は、次の CSS パートを公開します。 + +| パート | スタイルを設定する対象 | +| --- | --- | +| `base` | シンボルと値ラベルを保持するスライダー。 | +| `label` | ラベル。 | +| `value-label` | `value-label` スロットのコンテナー。 | +| `symbols` | すべてのシンボルのコンテナー。 | +| `symbol` | 各既定シンボル。 | +| `full` | 各既定シンボルの満たされたレイヤー。 | +| `empty` | 各既定シンボルの空のレイヤー。 | + +`igc-rating` 要素がエクスポートするのは、既定の星の `symbol`、`full`、`empty` パートのみです。投影された評価シンボルにスタイルを設定するには、`igc-rating-symbol` 要素の `symbol`、`full`、`empty` パートを使用します。 + +### Sass テーマ + +`rating-theme` 関数でテーマを作成し、`tokens()` ミックスインで含めます。この関数は `$symbol-full-color`、`$symbol-empty-color`、`$label-color`、`$symbol-size` などのパラメーターを受け取り、ミックスインは、含めたスコープに対応する `--ig-rating-*` 変数を出力します。 + + + +```scss +@use "igniteui-angular/theming" as *; + +$custom-rating-theme: rating-theme( + $symbol-full-color: #e41c77, + $symbol-empty-color: #a9b8cc, + $label-color: #344b65 +); + +:host { + @include tokens($custom-rating-theme); +} +``` + +Sass 関数は `igniteui-theming` パッケージから提供されます。Sass のセットアップについては、[テーマ](../themes/overview.mdx)トピックを参照してください。 - +```scss +@use "igniteui-theming" as *; +$custom-rating-theme: rating-theme( + $symbol-full-color: #e41c77, + $symbol-empty-color: #a9b8cc, + $label-color: #344b65 +); -`Hover` イベントは、シンボルにカーソルを合わせると発生します。マウス カーソルの下にあるシンボルの値を提供します。カスタム値ラベルと読み出しを作成するのに役立ちます。 +:root { + @include tokens($custom-rating-theme); +} +``` +### CSS 変数 +Sass ビルド ステップなしでローカルにスタイルを設定する必要がある場合は、Rating またはコンテナーに CSS 変数を設定し、その他のスタイルには CSS パートを使用します。 - +```css +igc-rating { + --ig-rating-symbol-full-color: #e41c77; + --ig-rating-symbol-empty-color: #a9b8cc; +} +igc-rating::part(label) { + font-weight: 600; +} -`hover` イベントは、シンボルにカーソルを合わせると発生します。マウス カーソルの下にあるシンボルの値を提供します。カスタム値ラベルと読み出しを作成するのに役立ちます。 +igc-rating-symbol::part(empty) { + opacity: 0.6; +} +``` + + + + + + + -### Change Event (変更イベント) + +### Tailwind によるスタイル設定 - +CSS 変数を設定する Tailwind の任意プロパティを使用して、{Platform} Rating にスタイルを設定できます。最初に、[Tailwind をセットアップ](../themes/misc/tailwind-classes.mdx)[Tailwind をセットアップ](../themes/tailwind.mdx)してください。 + -選択した値が変更されると、`igcChange` イベントが発生します。 +```html + +``` + + +```tsx + +``` + +```razor + +``` + + + + -選択した値が変更されると、`Change` イベントが発生します。 + + + - + + +## アクセシビリティ + +{Platform} Rating はスライダーです。ユーザーは Tab キーで移動し、矢印キーで値を変更し、ARIA 属性を通じて値を聞き取ります。 + +### キーボード操作 + +{Platform} Rating は、内部のスライダー要素 (`base` パート) のみがフォーカスを受け取るため、タブ ストップは 1 つです。無効な Rating はタブ順序から外れます。読み取り専用の Rating はタブ順序に残りますが、次のキーを無視するため、ページのスクロールなど、ブラウザーの既定の動作がそのまま維持されます。 + +| キー | 動作 | +| --- | --- | +| Tab / Shift + Tab | 次または前のフォーカス可能な要素にフォーカスを移動します。Rating はこれらのキーを処理しないため、フォーカスがトラップされることはありません。 | +| Arrow Right | 値を 1 ステップ増やします。右から左のレイアウトでは減らします。 | +| Arrow Left | 値を 1 ステップ減らします。右から左のレイアウトでは増やします。 | +| Arrow Up | 値を 1 ステップ増やします。 | +| Arrow Down | 値を 1 ステップ減らします。 | +| Home | 値を 1 ステップに設定します。これはクリックで選択できる最小値です。 | +| End | 値を最大値に設定します。 | +{Platform} Rating は、`keydown` でこれらのキーを次のように処理します。 -選択した値が変更されると、`change` イベントが発生します。 +- 既定の動作を防止するため、Rating にフォーカスがある間、矢印キー、Home、End でページはスクロールしません。 +- キーを押し続けると、その動作が繰り返されます。 +- Shift、Ctrl、Alt、Meta と同時に押したキーは何も行いません。 +- 値は 0 から最大値の間に保たれます。値が境界を超えるキーは、値を保持し、イベントを発行しません。 +- 値を変更する各キーは、変更イベントを発行します。 + +ポインターでは、クリックすると、ポインターの下の値が次のステップに切り上げられて選択されます。読み取り専用または無効な Rating は、クリックを無視します。 + +### スクリーン リーダー / ARIA + +{Platform} Rating は、`slider` ロールを持つフォーカス可能な要素 (`base` パート) を 1 つレンダリングします。その `tabindex` は `0` で、Rating が無効な場合は `-1` になり、次の値の属性を持ちます。 + +| 属性 | 値 | +| --- | --- | +| `aria-valuemin` | `0` | +| `aria-valuemax` | 最大値 | +| `aria-valuenow` | `4.3` などの小数を含む値 | +| `aria-valuetext` | 既定では "3 of 5"、または `valueFormat` のテキスト | + + + +`igniteui-webcomponents` 7.3.0 以降では、スライダーは `aria-disabled` と `aria-readonly` も設定して、無効状態と読み取り専用状態を公開します。7.4.1 以降では、スライダーは次のうち最初に該当するものからアクセシブルな名前を取得します。 + +1. ホストの `aria-labelledby` 属性。 +2. `for` でバインドされた、または Rating を囲んでいる ` + -## スタイル設定 +`Label` プロパティは、スライダーが `aria-labelledby` で参照する表示ラベルをレンダリングし、これによりスライダーにアクセシブルな名前が付きます。 - コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。 + -|名前|説明| -|--|--| -| `base` | すべての評価要素を保持するメイン ラッパー。 | -| `label` | ラベルのパーツ。 | -| `value-label` | 値ラベルのパーツ。 | -| `symbols` | すべての評価記号のラッパー。 | -| `symbol` | カプセル化されたデフォルト シンボルのパーツ。 | -| `full` | カプセル化された完全なシンボルのパーツ。 | -| `empty` | カプセル化された空のシンボルのパーツ。 | +{Platform} Rating は、支援技術に対して次のようにも動作します。 -```css -igc-rating::part(full) { - color: var(--ig-primary-500) -} +- `symbols` パートは `aria-hidden="true"` を設定するため、投影されたアイコンや絵文字を含むシンボルは非表示になり、代替テキストは不要です。値は、`aria-valuenow` と `aria-valuetext` を通じてのみ支援技術に伝わります。 +- `value-label` スロットはスライダーの内部にレンダリングされます。スクリーン リーダーは `aria-valuetext` から値を読み上げるため、スロットのコンテンツではなく `valueFormat` で値を説明してください。 +- Rating はライブ リージョンを使用しません。変更された値は、スライダーの属性を通じてのみ支援技術に伝わります。 +- Rating は `aria-invalid` を設定しないため、カスタム検証メッセージは無効状態として公開されません。 -igc-rating::part(empty) { - color: var(--ig-secondary-200); -} -``` +### アクセシビリティ準拠 - +Infragistics は、{ProductName} のアクセシビリティ サポートについて、Section 508 と WCAG 2.1 ガイドライン領域を[アクセシビリティ準拠](../interactivity/accessibility-compliance.mdx)トピックで説明しています。 +| 基準 | コンポーネントの準拠方法 | +| --- | --- | +| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | シンボルは支援技術から非表示になり、スライダーは `aria-valuetext` を通じて値をテキストとして公開します。 | +| [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) | `label` プロパティの表示ラベルは、`aria-labelledby` を通じてスライダーに関連付けられます。 | +| [1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color) | 既定のシンボルは、スケールの選択された部分に塗りつぶされた星を、それ以外に枠線の星を表示するため、値が色だけに依存しません。 | +| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | 矢印キー、Home、End で値が変更されるため、ユーザーはポインターなしで評価できます。 | +| [2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap) | Rating はタブ ストップが 1 つで、Tab キーを処理しないため、Tab と Shift + Tab でフォーカスを外に移動できます。 | +| [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible) | Rating テーマは、フォーカスされたスライダーからブラウザーのフォーカス インジケーターを削除しません。 | +| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | スライダーは、`slider` ロール、`aria-valuenow` と `aria-valuetext` による値、および指定した名前を公開します。`igniteui-webcomponents` 7.3.0 以降では、無効状態と読み取り専用状態も公開します。 | + +ユーザー側の責任: + +- すべての Rating に名前を付けます (`label` プロパティ、関連付けられた `)。[レイアウト](#レイアウト)を参照してください。 +- "3 of 5" がスケールを説明していない場合や、ページが別の言語を使用する場合は、`valueFormat` を設定します。 +- カスタム シンボルでは、満たされたシンボルと空のシンボルを、色だけでなく形や塗りつぶしでも区別できるようにし、[1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast) の要件に従って、背景に対して 3:1 以上のコントラスト比を維持します。 +- `base` パートのスタイルを変更する場合は、表示されるフォーカス インジケーターを維持します。 +- ポインターのターゲットを十分な大きさに保ちます。各値は、1 つのシンボルの幅、またはステップが 0.5 の場合はシンボルの半分の幅のターゲットです。小サイズは 18px のシンボルをレンダリングし、[2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum) の 24 x 24 CSS ピクセルを下回るため、ポインターおよびタッチ入力には中サイズまたは大サイズを推奨します。 +- キーボード ユーザーには見えないため、ホバー プレビューだけに情報を載せないでください。 +- カスタム検証メッセージで Rating を検証する場合は、Rating は `aria-invalid` を設定しないため、[3.3.1 Error Identification](https://www.w3.org/WAI/WCAG21/Understanding/error-identification) の要件に従って、Rating の横にメッセージをテキストとして表示してください。 + +[WAI-ARIA スライダー パターン](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)との相違点: + +- Home は、値を `aria-valuemin` (0) ではなく 1 ステップに設定します。0 にするには Arrow Down を使用します。 +- Rating は、パターンでオプションのキーとされている Page Up と Page Down をサポートしません。 + +## トラブルシューティング + +{Platform} Rating が期待どおりに動作しない場合は、次の回答を参照してください。 + +### 値を設定しても change イベントが発生しないのはなぜですか? + +{Platform} Rating は、ユーザー入力 (クリックまたはキー) に対してのみ change イベントを発行します。コードで値を設定したり、ステップ メソッドを呼び出したりすると、イベントなしで値が変更されるため、値を設定する場所で独自の状態を更新してください。 + +### 現在の値をクリックしても Rating がリセットされないのはなぜですか? + +{Platform} Rating は、`allowReset` を設定しない限り、現在の値をクリックしても値を保持します。`igniteui-webcomponents` 4.7.0 より前は、現在の値をクリックすると常に Rating がリセットされました。アップグレード後もその動作を維持するには、`allowReset` を設定します。 + +### hover イベントが発生しないのはなぜですか? + +{Platform} Rating は、`hoverPreview` がオンの間のみ hover イベントを発行し、Rating が読み取り専用または無効な場合は発行しません。イベントを受け取るには `hoverPreview` を設定します。 ## API リファレンス +{Platform} Rating の API リファレンスには、対象プラットフォームの完全な API サーフェスが記載されています。 + + + +- +- -
-
+ + + + +- [`IgcRatingComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingComponent) +- [`IgcRatingSymbolComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcRatingSymbolComponent) +- +- + + + +## 依存関係 + +{Platform} Rating には、色とシンボル サイズを適用するテーマが必要です。フレームワーク固有のセットアップについては、[**はじめに**](../general/getting-started.mdx)[**はじめに**](../general-getting-started.mdx)を参照してください。 + + + +Rating には `igniteui-webcomponents` パッケージが必要で、Angular フォームのバインディングには `IgcFormControlDirective` が必要です。{ProductName} の `theme()` ミックスインは、`$exclude` パラメーターで `igc-rating` を除外しない限り、`igc-rating` のスタイルを含みます。 + + + + + +`IgcRatingComponent` の登録により、Rating がレンダリングする `igc-rating-symbol` 要素と `igc-icon` 要素も登録されます。 + + + + + +評価シンボルに `IgbIcon` 要素を配置する場合は、`IgbIconModule` も登録してください。 + + ## その他のリソース -- [{ProductName} **フォーラム (英語)**]({ForumsLink}) -- [{ProductName} **GitHub (英語)**]({GithubLink}) +次のリソースでは、{Platform} Rating に関するその他のガイダンスとプロジェクト サポートを提供しています。 + +- [Rating - Design System Component](https://www.infragistics.com/products/indigo-design/help/components/rating) +- [{ProductName} **フォーラム**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) + +## 関連コンポーネント + +{Platform} Rating は、シンボルのスケールでスコアを収集します。入力に別の形式が必要な場合は、次のコンポーネントを使用します。 + +- [Slider](../slider/slider.mdx)[Slider](./slider.mdx) - 価格や音量など、連続した範囲から正確な数値を選択する場合に Slider を使用します。 +- [Radio Group](../radio-button.mdx)[Radio Group](./radio.mdx) - Poor、Fair、Good など、各オプションにテキスト ラベルが必要な場合に Radio Group を使用します。 +- [Icon](../layouts/icon.mdx) - Rating のカスタム シンボルを描画するには Icon を使用します。 + +## FAQ + +ここでは、{Platform} Rating のセットアップ、アクセシビリティ、使用シナリオに関するよくある質問に回答します。 + + + + はい。{Platform} Rating の `step` プロパティを `0.5` に設定すると、左から右のレイアウトでは星の左半分をクリックして半分の値を選択できます。その後、矢印キーで {Platform} Rating の値が 0.5 ステップで変化します。 + + + {Platform} Rating の `readOnly` プロパティを設定し、値を 4.3 などの平均値に設定します。{Platform} Rating は、小数値に対してシンボルを部分的に塗りつぶし、フォーカス可能なままで、クリックとキーを無視します。 + + + はい。{Platform} Rating は `slider` ロールを持つ単一のタブ ストップで、矢印キー、Home、End で値を変更でき、スクリーン リーダーは `aria-valuetext` を通じて値を読み上げます。`label` プロパティまたは `aria-label` で {Platform} Rating にアクセシブルな名前を付け、`valueFormat` で値を言葉で説明してください。 + + + はい。`igniteui-angular/directives` から `IgcFormControlDirective` をインポートして、Angular の Rating を `ngModel` または `formControlName` にバインドします。このディレクティブは、ユーザーが値を変更したときにモデルを更新し、フォーム コントロールを無効にしたときに Rating を無効にします。はい。{Platform} Rating はフォーム関連の要素であるため、`
` は `name` に指定した名前で値を送信します。無効な `
` も {Platform} Rating を無効にします。はい。Blazor の Rating を Blazor の `EditForm` に配置し、`@bind-Value` でその値をモデルのプロパティにバインドします。このバインディングは、ユーザーが値を変更したときに `ValueChanged` イベントを通じてモデルを更新します。 + + 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 ed55fffe1e..afc74010ab 100644 --- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -112,6 +112,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Navbar](../navbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Navigation Drawer](../navdrawer.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Radio](../radio-button.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Rating](../inputs/rating.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/rating.mdx#アクセシビリティ) | | [Select](../select.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../select.mdx#キーボード-ナビゲーション) | | [Slider](../slider/slider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Snackbar](../snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | @@ -159,7 +160,7 @@ WCAG への適合は、より広範なガイドラインに対してではなく | [Navbar](../menus/navbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Navigation Drawer](../menus/navigation-drawer.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Radio](../inputs/radio.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | -| [Rating](../inputs/rating.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | +| [Rating](../inputs/rating.mdx#アクセシビリティ) | ドキュメント化済み | ドキュメント化済み | [アクセシビリティ](../inputs/rating.mdx#アクセシビリティ) | | [Select](../inputs/select.mdx#キーボード-ナビゲーション) | ドキュメント化済み | 未ドキュメント化 | [キーボード ナビゲーション](../inputs/select.mdx#キーボード-ナビゲーション) | | [Slider](../inputs/slider.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | | [Snackbar](../notifications/snackbar.mdx) | 未ドキュメント化 | 未ドキュメント化 | — | diff --git a/docs/xplat/src/content/jp/toc.json b/docs/xplat/src/content/jp/toc.json index 672fa8e778..11a43ea3f5 100644 --- a/docs/xplat/src/content/jp/toc.json +++ b/docs/xplat/src/content/jp/toc.json @@ -3373,11 +3373,9 @@ ] }, { - "exclude": [ - "Angular" - ], "name": "評価", "href": "inputs/rating.mdx", + "updated": true, "include": [ "Web" ]