diff --git a/docs/angular/src/content/en/components/chat.mdx b/docs/angular/src/content/en/components/chat.mdx index c54ce83f0c..5577837dd3 100644 --- a/docs/angular/src/content/en/components/chat.mdx +++ b/docs/angular/src/content/en/components/chat.mdx @@ -25,7 +25,7 @@ To get started, install Ignite UI for Angular package as well as the Ignite UI f npm install igniteui-angular igniteui-webcomponents ``` -`IgxChatComponent` provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI. + provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI. For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. @@ -85,8 +85,8 @@ The Chat component exposes several key properties that let you control its state | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `messages` | Array of messages (`IgcChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown. | | `draftMessage` | The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts. | -| `options` | Chat configuration (`IgxChatOptions`) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. | -| `templates` | Custom Angular templates (`IgxChatTemplates`) for message content, input, attachments, and other parts of the chat UI. | +| `options` | Chat configuration () such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. | +| `templates` | Custom Angular templates () for message content, input, attachments, and other parts of the chat UI. | These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend. @@ -168,7 +168,7 @@ This level of granularity means you can tweak just one part (for example, how at Here: - `let-message` exposes the message object. -- The `igxChatMessageContext` directive ensures proper typing for message templates. +- The directive ensures proper typing for message templates. #### Custom Input Area By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button: @@ -435,12 +435,12 @@ Finally, **include** the custom theme in your application: ## API Reference -- `IgxChatComponent` -- `IgxChatOptions` -- `IgxChatTemplates` -- `IgxChatMessageContextDirective` -- `IgxChatInputContextDirective` -- `IgxChatAttachmentContextDirective` +- +- +- +- +- +- - [`Styling & Themes`](/themes) ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/binding.mdx b/docs/angular/src/content/en/components/grid-lite/binding.mdx index 40bdfd6689..838675ebae 100644 --- a/docs/angular/src/content/en/components/grid-lite/binding.mdx +++ b/docs/angular/src/content/en/components/grid-lite/binding.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls 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 Grid Lite Data Binding @@ -56,19 +57,17 @@ Or just set the respective properties in the html instead of using a `@ViewChild The sort/filter states of the Grid Lite component are kept when changing the data source in this manner. -Usually you will want to reset them by calling either **`clearSort()`** and/or **`clearFilter()`**. +Usually you will want to reset them by calling either and/or . In the sample below, the grid has column auto-generation enabled. When you click on the switch data button, the column collection is reset, and a new data source is bound to the grid. -{/* TODO ## API References +## API References -* `{ComponentName}` -* `Column` - -*/} +- +- ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx index e806240031..7deda360b7 100644 --- a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls 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'; # Column Cell Template @@ -26,7 +27,7 @@ To achieve that, use **``** inside `... ``` -You also need to import **`IgxGridLiteCellTemplateDirective`** +You also need to import ```typescript import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; @@ -117,7 +118,7 @@ Keep in mind the more complex and involved the template is, the greater the perf ## Cell Context Object -The custom cell renderer is passed an **`GridLiteCellContext`** object as a parameter with the following props: +The custom cell renderer is passed an object as a parameter with the following props: ```typescript @@ -148,12 +149,11 @@ export interface IgxGridLiteCellTemplateContext { -{/* TODO ## API References +## API References -* `{ComponentName}` -* `Column` - -*/} +- +- +- ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx index 02aa6e4f2a..7a31868048 100644 --- a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx +++ b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls 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'; # Column Configuration @@ -101,12 +102,10 @@ In the sample below you can try out the different column properties and how they -{/* TODO ## API References +## API References -* `{ComponentName}` -* `Column` - -*/} +- +- ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/filtering.mdx b/docs/angular/src/content/en/components/grid-lite/filtering.mdx index bc10403891..ebc531da53 100644 --- a/docs/angular/src/content/en/components/grid-lite/filtering.mdx +++ b/docs/angular/src/content/en/components/grid-lite/filtering.mdx @@ -8,6 +8,7 @@ namespace: Infragistics.Controls --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Grid Lite Filter Operations @@ -42,7 +43,7 @@ column.filteringCaseSensitive = true; ## Filter Model -The building blocks for filter operations in the grid is the **`FilterExpression`** which has the following structure: +The building blocks for filter operations in the grid is the which has the following structure: ```typescript export interface FilterExpression = Keys> { @@ -79,7 +80,7 @@ export interface FilterExpression = Keys> { ## Filter API -The Grid Lite exposes two main approaches for applying filter operations from its API. Either through the **`GridLite.filter()`**/**`GridLite.clearFilter()`** methods or through the **`Grid.Lite.filterExpressions`** property. +The Grid Lite exposes two main approaches for applying filter operations from its API. Either through the / methods or through the property. The **`filter()`** method accepts either a single expression or an array of filter expression and then filters the grid data based on those expressions. @@ -107,7 +108,7 @@ grid.clearFilter(); ## Initial Filter State -The **`filterExpressions`** property is very similar in behavior to the **`filter()`** method call. It exposes a declarative way to control filter state in the grid, but the most useful property is the ability to set initial filter state when the Grid Lite component is first rendered. +The property is very similar in behavior to the **`filter()`** method call. It exposes a declarative way to control filter state in the grid, but the most useful property is the ability to set initial filter state when the Grid Lite component is first rendered. For example here is a Lit-based sample: @@ -155,7 +156,7 @@ onFiltered(event: IgxFilteredEvent) { ... } In cases where filtering must be done remotely or you want to save the current state/data to a server somewhere, the Grid Lite exposes a hook where you can implement and customize this behavior. -Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a **`DataPipelineParams`** object. +Using the property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a **`DataPipelineParams`** object. ```typescript export type DataPipelineParams = { @@ -184,11 +185,11 @@ The following example mocks remote filter operation, reflecting the REST endpoin -{/* TODO ## API References ## API References -* `{ComponentName}` -* `Column` -*/} + +- +- + ## Additional Resources - [Column Configuration](/grid-lite/column-configuration) diff --git a/docs/angular/src/content/en/components/grid-lite/header-template.mdx b/docs/angular/src/content/en/components/grid-lite/header-template.mdx index b5a95fecfa..99f6f7b132 100644 --- a/docs/angular/src/content/en/components/grid-lite/header-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/header-template.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls 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'; # Customizing the Column Header @@ -62,12 +63,11 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla -{/* TODO ## API References +## API References -* `{ComponentName}` -* `Column` - -*/} +- +- +- ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/overview.mdx b/docs/angular/src/content/en/components/grid-lite/overview.mdx index 886a2c5155..c78a2a6338 100644 --- a/docs/angular/src/content/en/components/grid-lite/overview.mdx +++ b/docs/angular/src/content/en/components/grid-lite/overview.mdx @@ -8,6 +8,7 @@ namespace: Infragistics.Controls --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Free & Open-Source Angular Data Grid (Grid Lite) @@ -27,7 +28,7 @@ Angular ## Installation and Setup -To use Grid Lite in your application you can import it directly from `igniteui-angular` through this entry point `igniteui-angular/grids/lite`. But you also need to install the `igniteui-grid-lite` package that powers the UI. IgxGridLiteComponent provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by `igniteui-grid-lite`. Installing both ensures the grid lite behaves natively in Angular while leveraging the full `igniteui-grid-lite` UI. +To use Grid Lite in your application you can import it directly from `igniteui-angular` through this entry point `igniteui-angular/grids/lite`. But you also need to install the `igniteui-grid-lite` package that powers the UI. provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by `igniteui-grid-lite`. Installing both ensures the grid lite behaves natively in Angular while leveraging the full `igniteui-grid-lite` UI. ```shell npm install igniteui-grid-lite diff --git a/docs/angular/src/content/en/components/grid-lite/sorting.mdx b/docs/angular/src/content/en/components/grid-lite/sorting.mdx index 143a6adf83..17104944b2 100644 --- a/docs/angular/src/content/en/components/grid-lite/sorting.mdx +++ b/docs/angular/src/content/en/components/grid-lite/sorting.mdx @@ -9,6 +9,7 @@ namespace: Infragistics.Controls 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'; # Sort Operations @@ -184,7 +185,7 @@ In the following sample, when you try to sort the **Name** and **Rating** column In cases where sorting must be done remotely or you want to save the current state/data to a server somewhere, the Grid Lite exposes a hook where you can implement and customize this behavior. -Using the **`dataPipelineConfiguration`** property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a **`DataPipelineParams`** object. +Using the property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a **`DataPipelineParams`** object. ```typescript export type DataPipelineParams = { @@ -213,12 +214,10 @@ The following example mocks remote sorting operation, reflecting the REST endpoi -{/* TODO ## API References +## API References -* `{ComponentName}` -* `Column` - -*/} +- +- ## Additional Resources diff --git a/docs/angular/src/content/en/components/grid-lite/theming.mdx b/docs/angular/src/content/en/components/grid-lite/theming.mdx index 8522723483..2edc4e5c6e 100644 --- a/docs/angular/src/content/en/components/grid-lite/theming.mdx +++ b/docs/angular/src/content/en/components/grid-lite/theming.mdx @@ -8,6 +8,7 @@ namespace: Infragistics.Controls --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Styles and Themes @@ -87,11 +88,10 @@ Here is an example showcasing the custom theming from above. -{/* TODO ## API References +## API References -* `{ComponentName}` -* `Column` -*/} +- +- ## Additional Resources diff --git a/docs/angular/src/content/jp/components/chat.mdx b/docs/angular/src/content/jp/components/chat.mdx index be4f3b12af..f6467a2395 100644 --- a/docs/angular/src/content/jp/components/chat.mdx +++ b/docs/angular/src/content/jp/components/chat.mdx @@ -26,7 +26,7 @@ Chat コンポーネントは静的なメッセージ リストではなく、** npm install igniteui-angular igniteui-webcomponents ``` -`IgxChatComponent` は Angular のバインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なチャット UI は Web Components によってレンダリングされます。両方をインストールすることで、Angular でネイティブに動作するチャットを実現しつつ、Web Components の完全な UI を活用できます。 + は Angular のバインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なチャット UI は Web Components によってレンダリングされます。両方をインストールすることで、Angular でネイティブに動作するチャットを実現しつつ、Web Components の完全な UI を活用できます。 Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。 @@ -86,8 +86,8 @@ Chat コンポーネントは、その状態と構成を制御できるいくつ | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `messages` | チャットに表示されるメッセージ (`IgcChatMessage[]`) の配列。表示するメッセージを制御するためにバインド可能。 | | `draftMessage` | 未送信メッセージ。`text` とオプションの `attachments` を含むオブジェクト。メッセージ下書きの保存や復元に便利。 | -| `options` | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 (`IgxChatOptions`)。 | -| `templates` | メッセージ コンテンツ、入力、添付ファイル、その他のチャット UI 部分に対して、カスタム Angular テンプレート(`IgxChatTemplates`)。 | +| `options` | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 ()。 | +| `templates` | メッセージ コンテンツ、入力、添付ファイル、その他のチャット UI 部分に対して、カスタム Angular テンプレート()。 | 上記のプロパティを使用することで、Chat の UI をアプリケーションの状態やバックエンドと簡単に同期させることができます。 @@ -167,7 +167,7 @@ Chat のカスタマイズ可能な部分は次の通りです: 上記の例では: - `let-message` はメッセージ オブジェクトを公開します。 -- `igxChatMessageContext` ディレクティブは、メッセージ テンプレートの適切な入力を保証します。 +- ディレクティブは、メッセージ テンプレートの適切な入力を保証します。 #### 入力領域のカスタマイズ デフォルトでは、チャット入力はテキスト領域です。音声入力ボタンなど、より適した体験を提供するためにオーバーライドできます。 @@ -401,12 +401,12 @@ Chat コンポーネントのオプションには、高度なスタイル設定 ## API リファレンス -- `IgxChatComponent` -- `IgxChatOptions` -- `IgxChatTemplates` -- `IgxChatMessageContextDirective` -- `IgxChatInputContextDirective` -- `IgxChatAttachmentContextDirective` +- +- +- +- +- +- - [スタイル設定およびテーマ](./themes/index.md) ## その他のリソース diff --git a/docs/angular/src/content/jp/components/grid-lite/binding.mdx b/docs/angular/src/content/jp/components/grid-lite/binding.mdx index f9e129d32e..c5f0c7711a 100644 --- a/docs/angular/src/content/jp/components/grid-lite/binding.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/binding.mdx @@ -10,6 +10,7 @@ _language: ja 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 Grid Lite データ バインディング @@ -54,14 +55,17 @@ grid.data = []; -Grid Lite のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。通常は `clearSort()` または `clearFilter()` を呼び出してリセットすることをお勧めします。 +Grid Lite のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。通常は または を呼び出してリセットすることをお勧めします。 以下のサンプルでは、グリッドに列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。 +## API リファレンス +- +- ## その他のリソース diff --git a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx index 997192fed2..eec39b7423 100644 --- a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx @@ -10,6 +10,7 @@ _language: ja 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'; # 列セル テンプレート @@ -26,7 +27,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; ``` -**`IgxGridLiteCellTemplateDirective`** をインポートする必要もあります。 + をインポートする必要もあります。 ```typescript import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; @@ -116,7 +117,7 @@ defineComponents( ## セル コンテキスト オブジェクト -カスタム セル レンダラーには **`GridLiteCellContext`** オブジェクトがパラメータｖとして渡され、以下のプロパティを持ちます。 +カスタム セル レンダラーには オブジェクトがパラメータｖとして渡され、以下のプロパティを持ちます。 ```typescript @@ -147,7 +148,11 @@ export interface IgxGridLiteCellTemplateContext { +## API リファレンス +- +- +- ## その他のリソース diff --git a/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx index b00293318c..ea0313fd05 100644 --- a/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx @@ -10,6 +10,7 @@ _language: ja 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'; # 列の構成 @@ -99,7 +100,10 @@ Grid Lite コンポーネントの各列は、列要素の `resizable` プロパ +## API リファレンス +- +- ## その他のリソース diff --git a/docs/angular/src/content/jp/components/grid-lite/filtering.mdx b/docs/angular/src/content/jp/components/grid-lite/filtering.mdx index 0026ff1de8..86efb79a45 100644 --- a/docs/angular/src/content/jp/components/grid-lite/filtering.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/filtering.mdx @@ -9,6 +9,7 @@ _language: ja --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Grid Lite フィルター操作 @@ -42,7 +43,7 @@ column.filteringCaseSensitive = true; ## フィルター モデル -グリッド内のフィルター操作の構成要素は、次の構造を持つ **`FilterExpression`** です。 +グリッド内のフィルター操作の構成要素は、次の構造を持つ です。 ```typescript export interface FilterExpression = Keys> { @@ -79,7 +80,7 @@ export interface FilterExpression = Keys> { ## フィルター API -Grid Lite は、API からフィルター操作を適用する 2 つの方法を提供します。**`GridLite.filter()`**/**`GridLite.clearFilter()`** メソッドまたは **`Grid.Lite.filterExpressions`** プロパティのいずれかを使用します。 +Grid Lite は、API からフィルター操作を適用する 2 つの方法を提供します。/ メソッドまたは プロパティのいずれかを使用します。 **`filter()`** メソッドは、単一の式またはフィルター式の配列を受け入れ、それらの式に基づいてグリッド データをフィルターします。 @@ -106,7 +107,7 @@ grid.clearFilter(); ## 初期のフィルター状態 -**`filterExpressions`** プロパティの動作は、**`filter()`** メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、Grid Lite コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。 + プロパティの動作は、**`filter()`** メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、Grid Lite コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。 たとえば、Lit ベースのサンプルを次に示します。 @@ -153,7 +154,7 @@ onFiltered(event: IgxFilteredEvent) { ... } フィルタリングをリモートで実行する必要がある場合、または現在の状態/データをどこかのサーバーに保存する必要がある場合、Grid Lite は、この動作を実装およびカスタマイズできるフックを公開します。 -**`dataPipelineConfiguration`** プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには **`DataPipelineParams`** オブジェクトが渡されます。 + プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには **`DataPipelineParams`** オブジェクトが渡されます。 ```typescript export type DataPipelineParams = { @@ -182,7 +183,10 @@ grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[ +## API リファレンス +- +- ## その他のリソース diff --git a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx index d0f2660c2a..397a6846ef 100644 --- a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx @@ -10,6 +10,7 @@ _language: ja 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'; # 列ヘッダーのカスタマイズ @@ -62,7 +63,11 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla +## API リファレンス +- +- +- ## その他のリソース diff --git a/docs/angular/src/content/jp/components/grid-lite/overview.mdx b/docs/angular/src/content/jp/components/grid-lite/overview.mdx index cb892c2f6a..d6579df361 100644 --- a/docs/angular/src/content/jp/components/grid-lite/overview.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/overview.mdx @@ -9,6 +9,7 @@ _language: ja --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # 無料のオープン ソース Angular データ グリッド (Grid Lite) @@ -27,7 +28,7 @@ Angular はカスタム要素を ## インストールとセットアップ -アプリケーションで Grid Lite を使用するには、エントリ ポイント `igniteui-angular/grids/lite` を通じて `igniteui-angular` から直接インポートできます。ただし、UI を提供する `igniteui-grid-lite` パッケージもインストールする必要があります。IgxGridLiteComponent は Angular バインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なグリッド ライト UI は `igniteui-grid-lite` によってレンダリングされます。両方をインストールすることで、`igniteui-grid-lite` の完全な UI を活用しながら、グリッド ライトが Angular でネイティブに動作することを保証します。 +アプリケーションで Grid Lite を使用するには、エントリ ポイント `igniteui-angular/grids/lite` を通じて `igniteui-angular` から直接インポートできます。ただし、UI を提供する `igniteui-grid-lite` パッケージもインストールする必要があります。 は Angular バインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なグリッド ライト UI は `igniteui-grid-lite` によってレンダリングされます。両方をインストールすることで、`igniteui-grid-lite` の完全な UI を活用しながら、グリッド ライトが Angular でネイティブに動作することを保証します。 ```shell npm install igniteui-grid-lite diff --git a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx index db440a4997..ffc2e27762 100644 --- a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx @@ -10,6 +10,7 @@ _language: ja 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'; # ソート操作 @@ -181,7 +182,7 @@ onSorted(event: IgxSortedEvent) { ... } ソートをリモートで実行する必要がある場合、または現在の状態/データをどこかのサーバーに保存する必要がある場合、Grid Lite は、この動作を実装およびカスタマイズできるフックを公開します。 -**`dataPipelineConfiguration`** プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには **`DataPipelineParams`** オブジェクトが渡されます。 + プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには **`DataPipelineParams`** オブジェクトが渡されます。 ```typescript export type DataPipelineParams = { @@ -210,7 +211,10 @@ grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams) => T[] +## API リファレンス +- +- ## その他のリソース diff --git a/docs/angular/src/content/jp/components/grid-lite/theming.mdx b/docs/angular/src/content/jp/components/grid-lite/theming.mdx index 2a64abca15..a1a6b531ef 100644 --- a/docs/angular/src/content/jp/components/grid-lite/theming.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/theming.mdx @@ -9,6 +9,7 @@ _language: ja --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # スタイルとテーマ @@ -81,7 +82,10 @@ $my-light-palette: palette( +## API リファレンス +- +- ## その他のリソース diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx index 328cb63068..8b651f5afe 100644 --- a/docs/xplat/src/content/en/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx @@ -8,13 +8,14 @@ license: MIT import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Chat Overview The {ProductName} Chat component provides a complete solution for building conversational interfaces in your applications. Whether you are creating a customer support tool, a collaborative workspace, or a chatbot assistant, the Chat component gives you the building blocks you need: sending and receiving text messages, uploading file attachments, displaying quick reply suggestions, showing typing indicators when the other participant is writing a response. -Unlike a static message list, the `Chat` component is interactive and designed for **real-time communication**. It manages input, rendering, and user interaction while giving you full control over how messages and attachments are displayed. It also exposes an extensive rendering API that lets you override any part of its layout or visuals. +Unlike a static message list, the component is interactive and designed for **real-time communication**. It manages input, rendering, and user interaction while giving you full control over how messages and attachments are displayed. It also exposes an extensive rendering API that lets you override any part of its layout or visuals. @@ -171,9 +172,9 @@ The `Chat` component exposes several key properties that let you control its sta | Name | Description | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `messages` | Array of messages (`ChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown. | +| `messages` | Array of messages ([]) displayed in the chat. You can bind to this to control which messages are shown. | | `draftMessage` | The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts. | -| `options` | Chat configuration (`ChatOptions`) such as current user ID, input placeholders, accepted file types, quick reply suggestions, typing delay, and custom renderers. | +| `options` | Chat configuration () such as current user ID, input placeholders, accepted file types, quick reply suggestions, typing delay, and custom renderers. | | `resourceStrings` | Localized resource strings for labels, headers, and system text. Use this property to adapt the component for different languages. | These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend. @@ -306,7 +307,7 @@ This feature is typically toggled programmatically, for example when receiving a ### Custom Renderers While the Chat component works out of the box with its default UI, many applications need to customize the look and feel. For example, you might want to add read receipts, display avatars, or replace the input area with a voice recording button. -The `Chat` component addresses this need with a renderer system. A renderer is simply a function that returns a template for a given part of the UI. You can override as many or as few renderers as you like. +The component addresses this need with a renderer system. A renderer is simply a function that returns a template for a given part of the UI. You can override as many or as few renderers as you like. #### ChatTemplateRenderer Every renderer follows the same function signature: @@ -321,10 +322,10 @@ The ctx parameter provides different contextual data depending on what is being | Context Type | Provided Data | | --------------------------- | -----------------------------------------------------------------------------------------------------------------------| -| `ChatRenderContext` | `instance` (the chat component instance). | -| `ChatInputRenderContext` | Inherits `ChatRenderContext` and adds `attachments` (array of `ChatMessageAttachment`) and `value` (current input text). | -| `ChatMessageRenderContext` | Inherits `ChatRenderContext` and adds `ChatMessage` (the `ChatMessage` being rendered). | -| `ChatAttachmentRenderContext` | Inherits `ChatMessageRenderContext` and adds `attachment` (the `ChatMessageAttachment` being rendered). | +| | `instance` (the chat component instance). | +| | Inherits and adds `attachments` (array of ) and `value` (current input text). | +| | Inherits and adds `ChatMessage` (the being rendered). | +| | Inherits and adds `attachment` (the being rendered). | #### Available Renderers @@ -749,12 +750,12 @@ This allows you to style the `Chat` to match your brand without replacing its fu ## API Reference -- `Chat` -- `ChatOptions` -- `ChatMessage` -- `ChatMessageAttachment` -- `ChatRenderers` -- `ChatTemplateRenderer` +- +- +- +- +- +- - [Styling & Themes](../themes/overview.md) ## Additional Resources diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx index ed121a8797..df1a2c316f 100644 --- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx @@ -9,12 +9,13 @@ _language: ja import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Chat (チャット) の概要 {ProductName} チャット コンポーネントは、アプリケーションで会話型インターフェースを構築するための完全なソリューションを提供します。カスタマー サポート ツール、コラボレーション ワークスペース、チャットボット アシスタントなどを作成する場合でも、チャット コンポーネントは必要な機能を提供します: テキスト メッセージの送受信、ファイル添付のアップロード、クイック リプライサジェストの表示、他の参加者が入力中であることを示す入力中インジケーター。 -`Chat` コンポーネントは静的なメッセージ リストではなく、**リアルタイム通信**を想定したインタラクティブな設計です。入力やレンダリング、ユーザー操作を管理しつつ、メッセージや添付の表示方法は完全にカスタマイズ可能です。また、レイアウトやビジュアルの任意部分をオーバーライドできる広範なレンダリング API も提供されています。 + コンポーネントは静的なメッセージ リストではなく、**リアルタイム通信**を想定したインタラクティブな設計です。入力やレンダリング、ユーザー操作を管理しつつ、メッセージや添付の表示方法は完全にカスタマイズ可能です。また、レイアウトやビジュアルの任意部分をオーバーライドできる広範なレンダリング API も提供されています。 @@ -164,9 +165,9 @@ const ChatExample = () => { | 名前 | 説明 | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `messages` | チャットに表示されるメッセージの配列 (`ChatMessage[]`)。表示するメッセージを制御するためにバインド可能。 | +| `messages` | チャットに表示されるメッセージの配列 ([])。表示するメッセージを制御するためにバインド可能。 | | `draftMessage` | 未送信メッセージ。`text` とオプションの `attachments` を含むオブジェクト。メッセージ下書きの保存や復元に便利。 | -| `options` | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 (`ChatOptions`)。 | +| `options` | 現在のユーザー ID、入力プレースホルダー、許可されるファイル タイプ、クイック リプライサジェスト、入力遅延、カスタム レンダラーなどのチャット設定 ()。 | | `resourceStrings` | ラベル、ヘッダー、システム テキストのローカライズ文字列。多言語対応に使用。 | 上記のプロパティを使用することで、Chat の UI をアプリケーションの状態やバックエンドと簡単に同期させることができます。 @@ -294,7 +295,7 @@ const options: IgrChatOptions = { ### カスタム レンダラー Chat コンポーネントはデフォルトの UI ですぐに使用できますが、多くのアプリケーションでは外観と操作性をカスタマイズする必要があります。たとえば、既読通知を追加したり、アバターを表示したり、入力領域を音声録音ボタンに置き換えたりする場合です。 -`Chat` コンポーネントはレンダラー システムでこのニーズに対応します。レンダラーは、UI の特定の部分のテンプレートを返す関数です。必要に応じて、任意の数のレンダラーをオーバーライドできます。 + コンポーネントはレンダラー システムでこのニーズに対応します。レンダラーは、UI の特定の部分のテンプレートを返す関数です。必要に応じて、任意の数のレンダラーをオーバーライドできます。 #### ChatTemplateRenderer すべてのレンダラーは同じ関数シグネチャに従います。 @@ -309,10 +310,10 @@ ctx パラメーターは、レンダリングされる対象に応じたさま | コンテキスト タイプ | 提供データ | |-------------------------------|-----------------------------------------------------------------------------------------------------------| -| `ChatRenderContext` | `instance` (チャット コンポーネント インスタンス). | -| `ChatInputRenderContext` | `ChatRenderContext` を継承し、`attachments` (`ChatMessageAttachment` の配列) と `value` (現在の入力テキスト) を追加。 | -| `ChatMessageRenderContext` | `ChatRenderContext` を継承し、`ChatMessage` (レンダリングされる `ChatMessage`) を追加。 | -| `ChatAttachmentRenderContext` | `ChatMessageRenderContext` を継承し、`attachment` (レンダリングされる `ChatMessageAttachment`) を追加。 | +| | `instance` (チャット コンポーネント インスタンス). | +| | を継承し、`attachments` ( の配列) と `value` (現在の入力テキスト) を追加。 | +| | を継承し、`ChatMessage` (レンダリングされる ) を追加。 | +| | を継承し、`attachment` (レンダリングされる ) を追加。 | #### 利用可能なレンダラー @@ -738,12 +739,12 @@ igc-chat::part(empty-state) { ## API リファレンス -- `Chat` -- `ChatOptions` -- `ChatMessage` -- `ChatMessageAttachment` -- `ChatRenderers` -- `ChatTemplateRenderer` +- +- +- +- +- +- - [スタイル設定およびテーマ](../themes/overview.md) ## その他のリソース