diff --git a/docs/angular/src/content/en/components/drop-down.mdx b/docs/angular/src/content/en/components/drop-down.mdx index 1b5b2b07f8..cb92f12a11 100644 --- a/docs/angular/src/content/en/components/drop-down.mdx +++ b/docs/angular/src/content/en/components/drop-down.mdx @@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Drop Down Component Overview
-The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
+The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
## Angular Drop Down Example
diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx
index 6f3bc6ee60..6cf11feaef 100644
--- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx
+++ b/docs/angular/src/content/en/components/excel-library-using-cells.mdx
@@ -24,7 +24,6 @@ The -{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## Changed Import Statements @@ -134,4 +134,4 @@ import { IgxGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igx-g import { IgxGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-module"; ``` -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx index 7870d7eedc..1df8faca07 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx @@ -65,9 +65,6 @@ The following code loads and binds
- Satellite Map Style
- Satellite Map with Labels Style
- Road Map Style
- Satellite Map Style
- Road Map Style
- Satellite Map Style
- Road Map Style
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx index 8163bf42a6..fda49462c2 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx @@ -60,14 +60,6 @@ The following code shows how to bind the
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx index 3142e52ed2..77fa63cc57 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx @@ -54,15 +54,6 @@ The following code demonstrates how set the
- {/* Theme Switcher Radios and Labels */}
+ {/*Theme Switcher Radios and Labels*/}
diff --git a/docs/angular/src/content/en/components/inputs/color-editor.mdx b/docs/angular/src/content/en/components/inputs/color-editor.mdx
index c5b1a0c220..9b23ad9ae2 100644
--- a/docs/angular/src/content/en/components/inputs/color-editor.mdx
+++ b/docs/angular/src/content/en/components/inputs/color-editor.mdx
@@ -36,15 +36,6 @@ Before using the `ColorEditor`, you need to register the following modules as fo
-
-
-
-
-
-
-
-
-
## Usage
The simplest way to start using the `ColorEditor` is as follows:
@@ -52,7 +43,6 @@ The simplest way to start using the `ColorEditor` is as follows:
-
```html
{
-
-
-
-
-
diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
index c89c8c78fa..101202d896 100644
--- a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
+++ b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
@@ -35,11 +35,11 @@ The matrix below provides a high-level outline of the accessibility support prov
|**Component/Principle**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__||||||||||||||||| +|**Grids**||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|__Other__||||||||||*||||||| +|**Other**||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -114,11 +114,11 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul |**Component/Guideline**|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
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__|||||||||||||| +|**Grids**|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|__Other__|||||||*||||||| +|**Other**|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| diff --git a/docs/angular/src/content/en/components/linear-gauge.mdx b/docs/angular/src/content/en/components/linear-gauge.mdx index 8fd0653f26..549d34ed33 100644 --- a/docs/angular/src/content/en/components/linear-gauge.mdx +++ b/docs/angular/src/content/en/components/linear-gauge.mdx @@ -26,7 +26,6 @@ The following sample demonstrates how setting multiple properties on the same requires the following modules: - - ```ts // app.module.ts import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; @@ -62,14 +59,6 @@ import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` - - - - - - - - ## Usage The following code demonstrates how create a linear gauge containing a needle and three comparative ranges on the scale. @@ -97,15 +86,6 @@ The following code demonstrates how create a linear gauge containing a needle an ``` - - - - - - - - - ## Needle This is the primary measure displayed by the linear gauge component and is visualized as a bar or you can customize it to show almost any shape as is demonstrated below. @@ -138,12 +118,6 @@ This is the primary measure displayed by the linear gauge component and is visua - - - - - -
-{/* Angular, React, WebComponents */}
+{/*Angular, React, WebComponents*/}
## Dependencies
@@ -33,7 +33,7 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-inputs
-{/* end: Angular, React, WebComponents */}
+{/*end: Angular, React, WebComponents*/}
## Required Modules
diff --git a/docs/angular/src/content/en/components/pie-chart.mdx b/docs/angular/src/content/en/components/pie-chart.mdx
index fedc6789e2..1fb640a5a5 100644
--- a/docs/angular/src/content/en/components/pie-chart.mdx
+++ b/docs/angular/src/content/en/components/pie-chart.mdx
@@ -21,7 +21,7 @@ This control is used for representing categorical data. It is most effective whe
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__||||||||||||||||| +|**Grids**||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|__Other__||||||||||*||||||| +|**Other**||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -114,11 +114,11 @@ The table above is relevant only to the **Default theme** of Ignite UI for Angul |**Component/Guideline**|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
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__|||||||||||||| +|**Grids**|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|__Other__|||||||*||||||| +|**Other**|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| diff --git a/docs/angular/src/content/en/components/linear-gauge.mdx b/docs/angular/src/content/en/components/linear-gauge.mdx index 8fd0653f26..549d34ed33 100644 --- a/docs/angular/src/content/en/components/linear-gauge.mdx +++ b/docs/angular/src/content/en/components/linear-gauge.mdx @@ -26,7 +26,6 @@ The following sample demonstrates how setting multiple properties on the same requires the following modules: - - ```ts // app.module.ts import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; @@ -62,14 +59,6 @@ import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` - - - - - - - - ## Usage The following code demonstrates how create a linear gauge containing a needle and three comparative ranges on the scale. @@ -97,15 +86,6 @@ The following code demonstrates how create a linear gauge containing a needle an ``` - - - - - - - - - ## Needle This is the primary measure displayed by the linear gauge component and is visualized as a bar or you can customize it to show almost any shape as is demonstrated below. @@ -138,12 +118,6 @@ This is the primary measure displayed by the linear gauge component and is visua - - - - - -
-{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## Dependencies @@ -32,7 +32,7 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-charts -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} ## Required Modules diff --git a/docs/angular/src/content/en/components/radial-gauge.mdx b/docs/angular/src/content/en/components/radial-gauge.mdx index 5baa155415..d6a455fd7a 100644 --- a/docs/angular/src/content/en/components/radial-gauge.mdx +++ b/docs/angular/src/content/en/components/radial-gauge.mdx @@ -27,7 +27,6 @@ The following sample demonstrates how setting multiple properties on the same requires the following modules: @@ -51,8 +46,6 @@ The
-The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
+The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
### Demo
diff --git a/docs/angular/src/content/en/components/sparkline.mdx b/docs/angular/src/content/en/components/sparkline.mdx
index f332826de2..0cb702531d 100644
--- a/docs/angular/src/content/en/components/sparkline.mdx
+++ b/docs/angular/src/content/en/components/sparkline.mdx
@@ -24,7 +24,7 @@ The sparkline control has several visual elements and corresponding features tha
-{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## Dependencies @@ -35,7 +35,7 @@ npm install --save igniteui-angular-core npm install --save igniteui-angular-charts -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} The Angular sparkline component requires the import of the following modules: diff --git a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx index 5925239757..daf68fa305 100644 --- a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -106,9 +106,6 @@ import { WorksheetCell } from 'igniteui-angular-excel'; - - - ## Code Snippet The following code snippet demonstrates how to add charts to the currently viewed worksheet in the
diff --git a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx index d8e1be1540..bb2624774e 100644 --- a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx @@ -72,7 +72,3 @@ import { WorkbookColorInfo } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx index c149040edc..e90a7c1785 100644 --- a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx @@ -43,13 +43,6 @@ The following code snippets demonstrate the above: - - - - - - - ```ts this.spreadsheet.isEnterKeyNavigationEnabled = true; this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left; @@ -70,9 +63,6 @@ The following code snippets demonstrate the above: - - - ```ts this.spreadsheet.isFormulaBarVisible = true; ``` @@ -92,9 +82,6 @@ The following code snippets demonstrate the above: - - - ```ts this.spreadsheet.areGridlinesVisible = true; ``` @@ -114,9 +101,6 @@ The following code snippets demonstrate the above: - - - ```ts this.spreadsheet.areHeadersVisible = false; ``` @@ -140,9 +124,6 @@ The following code snippets demonstrate the above, in that the
diff --git a/docs/angular/src/content/en/components/switch.mdx b/docs/angular/src/content/en/components/switch.mdx index fb53a78893..7cd3972d59 100644 --- a/docs/angular/src/content/en/components/switch.mdx +++ b/docs/angular/src/content/en/components/switch.mdx @@ -138,7 +138,7 @@ When you modify a primary property, all related dependent properties are automat
- {/* Theme Switcher Radios and Labels */}
+ {/*Theme Switcher Radios and Labels*/}
diff --git a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx
index e9dccd9ab0..03cd2390d8 100644
--- a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx
+++ b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx
@@ -23,6 +23,7 @@ This guide assumes you already have **Ignite UI for Angular** installed. If not,
```cmd
ng add igniteui-angular
```
+
### 1. Install Tailwind
diff --git a/docs/angular/src/content/en/components/tree.mdx b/docs/angular/src/content/en/components/tree.mdx
index 3e7255b859..3df407ad9f 100644
--- a/docs/angular/src/content/en/components/tree.mdx
+++ b/docs/angular/src/content/en/components/tree.mdx
@@ -278,7 +278,7 @@ To create a reusable template for your nodes, declare `` **within `
diff --git a/docs/angular/src/content/en/components/zoomslider-overview.mdx b/docs/angular/src/content/en/components/zoomslider-overview.mdx
index bc8b0d615f..b876cd94fd 100644
--- a/docs/angular/src/content/en/components/zoomslider-overview.mdx
+++ b/docs/angular/src/content/en/components/zoomslider-overview.mdx
@@ -36,8 +36,6 @@ The following sample demonstrates how to use
{{ data.CompanyName }}
-
+
-### ネストされた Angular Accoridon のシナリオ +### ネストされた Angular Accordion のシナリオ 以下の Angular Accordion 例では、この一般的なアプリケーション シナリオを説明するために、複雑な FAQ セクションを作成します。サンプルでネストされた
-
+
dragIndicatorIconTemplate =
;
};
```
+
@@ -484,6 +501,7 @@ enum DragIcon {
DEFAULT = "drag_handle",
}
```
+
| プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
@@ -564,7 +564,7 @@ export class CalendarSample9Component {
| | $date-special-border-radius | 特別な日付の境界線の半径を制御します |
| | $date-border-radius | 指定されておらず、`$date-range-border-radius` が設定されている場合は、`$date-range-border-radius` の値が使用されます |
-
+
| プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
diff --git a/docs/angular/src/content/jp/components/carousel.mdx b/docs/angular/src/content/jp/components/carousel.mdx
index 8d203fb423..970fc9b584 100644
--- a/docs/angular/src/content/jp/components/carousel.mdx
+++ b/docs/angular/src/content/jp/components/carousel.mdx
@@ -413,7 +413,7 @@ These configurations will have the following result:
@@ -1184,6 +1188,7 @@ Then set the related CSS variables for the related components. We will apply the
--ig-button-focus-visible-foreground: black;
--ig-button-disabled-foreground: #ffcd0f;
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
index 866219599d..b342ef6fb1 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
@@ -85,9 +85,11 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => {
**Column moving** feature is enabled on a per-grid level, meaning that the
+
```html
<{ComponentSelector} [moving]="true">
```
+
@@ -162,6 +164,7 @@ const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
+
```
@@ -174,6 +177,7 @@ grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget);
}
```
+
@@ -237,6 +241,7 @@ public onColumnMovingEnd(event) {
}
}
```
+
@@ -252,6 +257,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => {
@@ -267,6 +273,7 @@ const onColumnMovingEnd = (event: IgrColumnMovingEndEventArgs) => {
ColumnMovingEndScript='onColumnMovingEnd'>
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
index 43456ba01b..b469b5d588 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
@@ -279,6 +279,7 @@ function onColumnPin(e) {
}
igRegisterScript("onColumnPin", onColumnPin, false);
+
```
@@ -295,6 +296,7 @@ When set to End the columns are rendered at the end of the grid, after the unpin
```typescript
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
```
+
@@ -306,6 +308,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
var grid = document.getElementById('dataGrid') as {ComponentName}Component;
grid.pinning = { columns: ColumnPinningPosition.End };
```
+
@@ -316,6 +319,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };
```tsx
<{ComponentSelector} data={nwindData} autoGenerate={true} pinning={pinningConfig}>
```
+
@@ -327,6 +331,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };
Columns = ColumnPinningPosition.End
};
}
+
```
@@ -365,6 +370,7 @@ This can be done by creating a header template for the columns with a custom ico
```
+
@@ -423,6 +429,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -444,7 +451,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
- var grid = document.getElementsByTagName("igc-grid")[0];
+ var grid = document.getElementsByTagName["igc-grid"](0);
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
@@ -490,6 +497,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
);
}
```
+
@@ -578,6 +586,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -608,7 +617,7 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
- var grid = document.getElementsByTagName("igc-tree-grid")[0];
+ var grid = document.getElementsByTagName["igc-tree-grid"](0);
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
@@ -634,6 +643,7 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
@@ -733,12 +744,13 @@ constructor() {
public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
return html`
-
@@ -415,6 +428,7 @@ public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
+
```
@@ -429,6 +443,7 @@ private RenderFragment dragIndicatorIconTemplate =
;
};
```
+
@@ -458,6 +473,7 @@ const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => {
<{ComponentSelector} rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}>
+
```
@@ -473,6 +489,7 @@ private RenderFragment
-
+
```
+
### Disable hiding of a column
@@ -864,6 +865,7 @@ We can easily prevent the user from being able to hide columns through the colum
| プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
diff --git a/docs/angular/src/content/jp/components/charts/chart-overview.mdx b/docs/angular/src/content/jp/components/charts/chart-overview.mdx
index 6fd38ea767..a5afde016a 100644
--- a/docs/angular/src/content/jp/components/charts/chart-overview.mdx
+++ b/docs/angular/src/content/jp/components/charts/chart-overview.mdx
@@ -130,7 +130,6 @@ Angular 複合チャートまたはコンボ チャートは、同じプロッ
-
### Angular 極座標チャート
Angular 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。[極座標チャート](types/polar-chart.md)の詳細をご覧ください。
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx
index 8fc5d71516..140884cd66 100644
--- a/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx
+++ b/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx
@@ -86,10 +86,6 @@ Angular チャートのホバー操作と注釈は、シリーズ コレクシ
-
-
-
-
## Angular コールアウト レイヤー
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx b/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx index a455682219..14b0d340bd 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx @@ -15,15 +15,11 @@ _language: ja - - - ## Angular 凡例レイアウト - ## Angular 凡例のカスタマイズ diff --git a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx index 9715030101..a831685f62 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx @@ -87,7 +87,6 @@ Angular
@@ -216,9 +213,6 @@ this.LineSeries.Resolution = 10;
-
-
-
### 軸の間隔
デフォルトでは、Angular チャートは、データの範囲に基づいて
@@ -280,9 +269,6 @@ this.LineSeries.Resolution = 10;
-
-
-
### 軸ラベルの省略形
ただし、Angular チャートは、
diff --git a/docs/angular/src/content/jp/components/drop-down.mdx b/docs/angular/src/content/jp/components/drop-down.mdx index aa4bf844f1..bb105904d8 100644 --- a/docs/angular/src/content/jp/components/drop-down.mdx +++ b/docs/angular/src/content/jp/components/drop-down.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Drop Down (ドロップダウン) コンポーネントの概要
diff --git a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx index 31a7f5f5c1..15cc497485 100644 --- a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx +++ b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx @@ -58,7 +58,7 @@ Import ステートメントは、API クラスと列挙型へのフル パス
-{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## 変更後のコード @@ -129,4 +129,4 @@ import { IgxGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igx-g import { IgxGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-module"; ``` -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} diff --git a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx index f7c893f8e2..89da048f94 100644 --- a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx +++ b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx @@ -40,8 +40,8 @@ _language: ja |select (v4.1.0) |Ignite UI Schematics コレクション:
Ignite UI CLI:
Ignite UI CLI:
Ignite UI CLI:
Ignite UI CLI:
Ignite UI CLI:
Ignite UI CLI:
Ignite UI CLI:
Ignite UI CLI:
**this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?:
`reset`: boolean (**true** by default) | -| `clearFormatting` | 選択されたセルの条件付き書式を削除します。使用方法:
**this.conditonalFormatting.clearFormatting()** | +| `formatCells` | 選択したセルに条件付き書式を適用します。使用方法:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?:
`reset`: boolean (**true** by default) | +| `clearFormatting` | 選択されたセルの条件付き書式を削除します。使用方法:
**this.conditionalFormatting.clearFormatting()** | ### IgxChartIntegrationDirective diff --git a/docs/angular/src/content/jp/components/general/update-guide.mdx b/docs/angular/src/content/jp/components/general/update-guide.mdx index 51001d95c9..11926eadaa 100644 --- a/docs/angular/src/content/jp/components/general/update-guide.mdx +++ b/docs/angular/src/content/jp/components/general/update-guide.mdx @@ -456,15 +456,15 @@ public onButtonClick(event) { - `IgxGridCell` -functions
```
- - **重大な変更** - グリッドにカスタム ディレクティブを適用する場合、ホスティング グリッドへの参照を取得するために、コンストラクターに `IGX_GRID_BASE` トークンを注入します。
+- **重大な変更** - グリッドにカスタム ディレクティブを適用する場合、ホスティング グリッドへの参照を取得するために、コンストラクターに `IGX_GRID_BASE` トークンを注入します。
```scss
// free version
@@ -1029,15 +1029,15 @@ const selectedCells = grid.selectedCells; // returns IgxGridCell[]
const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[]
```
- - ページング コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーション レベルで処理する必要があります。
- - 次のプロパティはグリッドから非推奨になりました:
- - paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone
- - 次のメソッドも非推奨です:
- - nextPage()
- - previousPage()
- - 次のプロパティが削除されました:
- - paginationTemplate - カスタム テンプレートを定義するには、`igx-paginator-content` を使用します。
- - HierarchicalGrid の詳細 - RowIslands でページングを有効にする場合は、次の `*igxPaginator` ディレクティブの使用法が必要です。
+- ページング コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーション レベルで処理する必要があります。
+- 次のプロパティはグリッドから非推奨になりました:
+ - paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone
+- 次のメソッドも非推奨です:
+ - nextPage()
+ - previousPage()
+- 次のプロパティが削除されました:
+ - paginationTemplate - カスタム テンプレートを定義するには、`igx-paginator-content` を使用します。
+- HierarchicalGrid の詳細 - RowIslands でページングを有効にする場合は、次の `*igxPaginator` ディレクティブの使用法が必要です。
```html
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx
index 7302e6a870..b0e9de848c 100644
--- a/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx
+++ b/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx
@@ -67,9 +67,6 @@ Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650
-
-
-
```ts
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps";
@@ -143,12 +140,6 @@ export class MapBindingDataCsvComponent implements AfterViewInit {
-
-
-
-
-
-
## API リファレンス
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx index be66ea73b0..cd9bb63285 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx @@ -61,9 +61,6 @@ JSON ファイルからのデータの例: - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -131,12 +128,6 @@ export class MapBindingDataJsonPointsComponent implements AfterViewInit { - - - - - - ## API リファレンス
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx index 7a8692f8f9..b849b9637d 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx @@ -74,9 +74,6 @@ Ignite UI for Angular マップ コンポーネントは、シェイプ ファ - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -177,13 +174,6 @@ export class MapBindingDataModelComponent implements AfterViewInit { - - - - - - - ## API リファレンス
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx index 1ac7a87ccb..97a45ffedf 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx @@ -39,9 +39,6 @@ Ignite UI for Angular マップでは、複数の地理的シリーズオブジ - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; @@ -53,7 +50,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - ## シリーズの作成 次に、後で異なるタイプのシェープ ファイルをロードする地理的シリーズでマップを作成します。 @@ -118,11 +114,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - - - - - ## シェープファイルの読み込み 次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx index 1dd0b91549..f4d208394d 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx @@ -88,9 +88,6 @@ Ignite UI for Angular マップに表示するすべての地理的シリーズ - - - ## フライトのオーバーレイ 主要空港間のフライト接続を持つ最初の
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx index 9a9d500f3b..5205b8c5d5 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx @@ -36,7 +36,6 @@ Ignite UI for Angular Map コンポーネントの
diff --git a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx index 893a085c47..65e0505d69 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx @@ -42,7 +42,6 @@ Angular
diff --git a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx index ab0634eb95..2ee46a09d1 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx @@ -60,20 +60,6 @@ export default {} as typeof Worker & (new () => Worker); - - - - - - - - - - - - - - ```ts import { IgxHeatTileGenerator } from 'igniteui-angular-core'; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -84,9 +70,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - - - ## ヒートマップの作成 以下のコード スニペットは、人口ベースのヒートマップを Ignite UI for Angular マップ コンポーネントに表示する方法を示しています。 @@ -94,9 +77,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - - - ```html
diff --git a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx index 529aa6a936..2000deb33d 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx @@ -40,7 +40,6 @@ Angular
diff --git a/docs/angular/src/content/jp/components/geo-map-navigation.mdx b/docs/angular/src/content/jp/components/geo-map-navigation.mdx index 4320837d05..bfc50e9644 100644 --- a/docs/angular/src/content/jp/components/geo-map-navigation.mdx +++ b/docs/angular/src/content/jp/components/geo-map-navigation.mdx @@ -38,7 +38,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ## ウィンドウ座標 また、これらの相対座標で区切られたウィンドウ長方形内でマップ コンテンツをナビゲーションできます。 @@ -50,7 +49,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ## プロパティ 以下の表は
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx index 5928f34407..922e58a30c 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx @@ -62,15 +62,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx index 4cd114dea3..1d905bca50 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx @@ -45,16 +45,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx index 9df60d5441..6887046fc6 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx @@ -61,14 +61,6 @@ ValueBrushScale クラスは、ユーザーの色分けのニーズもほとん - - - - - - - - ```html
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx index ae27c893c1..b9ba27e464 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx @@ -56,15 +56,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx index e650a61755..d15796e7ad 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx @@ -34,15 +34,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx index ff6225dcc2..dc24139590 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx @@ -34,15 +34,6 @@ Angular マップ コンポーネントでは、
@@ -69,7 +60,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map.mdx b/docs/angular/src/content/jp/components/geo-map.mdx index 413be73de5..bfa904b58d 100644 --- a/docs/angular/src/content/jp/components/geo-map.mdx +++ b/docs/angular/src/content/jp/components/geo-map.mdx @@ -53,7 +53,6 @@ npm install --save igniteui-angular-maps - ```ts // app.module.ts import { IgxGeographicMapModule } from 'igniteui-angular-maps'; @@ -73,7 +72,6 @@ export class AppModule {} - ```ts import { AfterViewInit, Component, ViewChild } from "@angular/core"; import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; @@ -97,15 +95,6 @@ export class MapOverviewComponent implements AfterViewInit { } ``` - - - - - - - - - ## 使用方法 マップ モジュールがインポートされたので、以下のステップは地理的地図を作成することです。以下のコードは、これを実行して地図内でズームを有効にする方法を示しています。 @@ -122,15 +111,6 @@ export class MapOverviewComponent implements AfterViewInit {
```
-
-
-
-
-
-
-
-
-
## その他のリソース
関連する Angular マップ機能の詳細については、以下のトピックを参照してください。
diff --git a/docs/angular/src/content/jp/components/icon-service.mdx b/docs/angular/src/content/jp/components/icon-service.mdx
index daa33d13aa..273920a4bf 100644
--- a/docs/angular/src/content/jp/components/icon-service.mdx
+++ b/docs/angular/src/content/jp/components/icon-service.mdx
@@ -318,7 +318,7 @@ iconService.setIconRef('input_collapse', 'default', {
| **drag_indicator** | 項目をドラッグできることを示すハンドルを表示するために使用されます。 |
| **error** | 編集可能なセルで、誤ったデータ入力を示すために使用されます。 |
| **expand_more** | Excel フィルタリング メニューで使用され、フィルターの追加を示します。 |
-| **file_dowload** | Excel フィルター エクスポーターによって使用されます。 |
+| **file_download** | Excel フィルター エクスポーターによって使用されます。 |
| **filter_*** | さまざまなフィルタリング オペランドに使用されます。 |
| **group_work** | グループ化ドロップ領域で使用されます。 |
| **hide** | さまざまな UI 要素によって列を非表示にするために使用されます。 |
diff --git a/docs/angular/src/content/jp/components/input-group.mdx b/docs/angular/src/content/jp/components/input-group.mdx
index 45a73cab6b..61d88b467c 100644
--- a/docs/angular/src/content/jp/components/input-group.mdx
+++ b/docs/angular/src/content/jp/components/input-group.mdx
@@ -457,7 +457,7 @@ constructor(fb: FormBuilder) {
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx b/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx index a455682219..14b0d340bd 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-legends.mdx @@ -15,15 +15,11 @@ _language: ja - - - ## Angular 凡例レイアウト - ## Angular 凡例のカスタマイズ diff --git a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx index 9715030101..a831685f62 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx @@ -87,7 +87,6 @@ Angular
diff --git a/docs/angular/src/content/jp/components/drop-down.mdx b/docs/angular/src/content/jp/components/drop-down.mdx index aa4bf844f1..bb105904d8 100644 --- a/docs/angular/src/content/jp/components/drop-down.mdx +++ b/docs/angular/src/content/jp/components/drop-down.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Drop Down (ドロップダウン) コンポーネントの概要
-The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
+The Ignite UI for Angular Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data. Drop Down component allows declarative binding, which makes it possible for you to embed additional content and links. This also leaves room for further UI customization and styling of the Angular drop down list appearance. In addition to this, it is packed with key features like keyboard dropdown navigation and virtualization.
## Angular Drop Down の例
diff --git a/docs/angular/src/content/jp/components/excel-library-using-cells.mdx b/docs/angular/src/content/jp/components/excel-library-using-cells.mdx
index ad63589643..f8662dcfa9 100644
--- a/docs/angular/src/content/jp/components/excel-library-using-cells.mdx
+++ b/docs/angular/src/content/jp/components/excel-library-using-cells.mdx
@@ -26,7 +26,6 @@ Excel ワークシートの diff --git a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx index 31a7f5f5c1..15cc497485 100644 --- a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx +++ b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx @@ -58,7 +58,7 @@ Import ステートメントは、API クラスと列挙型へのフル パス
-{/* Angular, React, WebComponents */} +{/*Angular, React, WebComponents*/} ## 変更後のコード @@ -129,4 +129,4 @@ import { IgxGeographicMapComponent } from "igniteui-webcomponents-maps/ES5/igx-g import { IgxGeographicMapModule } from "igniteui-webcomponents-maps/ES5/igx-geographic-map-module"; ``` -{/* end: Angular, React, WebComponents */} +{/*end: Angular, React, WebComponents*/} diff --git a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx index f7c893f8e2..89da048f94 100644 --- a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx +++ b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx @@ -40,8 +40,8 @@ _language: ja |select (v4.1.0) |Ignite UI Schematics コレクション:
ng g @igniteui/angular-schematics:c select-in-form newFormSelectIgnite UI CLI:
ig add select-in-form newFormSelectフォームの IgxSelect。
| フォームで使用する [IgxSelect](../../select.md) コンポーネント。 |
|input group |Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c input-group newInputGroupIgnite UI CLI:
ig add input-group newInputGroup基本 IgxInputGroup フォーム ビュー。
| [IgxInputGroup](../../input-group.md) で作成したフォーム。|
|インタラクション|
-|dialog |gnite UI Schematics collection:ng g @igniteui/angular-schematics:c dialog newDialogIgnite UI CLI:
ig add dialog newDialog基本 IgxDialog。
| 標準の確認ダイアログとして使用される [IgxDialog](../../dialog.md)。 |
-|tooltip |gnite UI Schematics collection:ng g @igniteui/angular-schematics:c tooltip newTooltipIgnite UI CLI:
ig add tooltip newTooltipフルカスタマイズ可能なツールチップ。
| [IgxTooltip](../../tooltip.md) で作成される基本 ツールチップ。 |
+|dialog |Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dialog newDialogIgnite UI CLI:
ig add dialog newDialog基本 IgxDialog。
| 標準の確認ダイアログとして使用される [IgxDialog](../../dialog.md)。 |
+|tooltip |Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tooltip newTooltipIgnite UI CLI:
ig add tooltip newTooltipフルカスタマイズ可能なツールチップ。
| [IgxTooltip](../../tooltip.md) で作成される基本 ツールチップ。 |
|スケジュール | |
|date-picker |Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c date-picker newDatePickerIgnite UI CLI:
ig add date-picker newDatePicker基本 IgxDatePicker。
| 一方向データ バインディングを含む基本 [IgxDatePicker](../../date-picker.md)。 |
|time-picker |Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c time-picker newTimePickerIgnite UI CLI:
ig add time-picker newTimePicker基本 IgxTimePicker。
| 初期値設定と一方向データ バインディングを含む基本 [IgxTimePicker](../../time-picker.md)。 |
diff --git a/docs/angular/src/content/jp/components/general/data-analysis.mdx b/docs/angular/src/content/jp/components/general/data-analysis.mdx
index 16c8dab6e1..5f198ee019 100644
--- a/docs/angular/src/content/jp/components/general/data-analysis.mdx
+++ b/docs/angular/src/content/jp/components/general/data-analysis.mdx
@@ -177,8 +177,8 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
| `formatter`: **string** | 現在の書式タイプを設定/取得する**入力**プロパティ |
| `formatColors` | 現在の書式色を設定/取得する**入力**プロパティ | `val`: _IFormatColors_ |
| `onFormattersReady`| 選択されたデータに適用可能な`書式タイプ`が決定されたときにそれらを発生する**イベント**。 |
-| `formatCells` | 選択したセルに条件付き書式を適用します。使用方法: **this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?:
`reset`: boolean (**true** by default) | -| `clearFormatting` | 選択されたセルの条件付き書式を削除します。使用方法:
**this.conditonalFormatting.clearFormatting()** | +| `formatCells` | 選択したセルに条件付き書式を適用します。使用方法:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?:
`reset`: boolean (**true** by default) | +| `clearFormatting` | 選択されたセルの条件付き書式を削除します。使用方法:
**this.conditionalFormatting.clearFormatting()** | ### IgxChartIntegrationDirective diff --git a/docs/angular/src/content/jp/components/general/update-guide.mdx b/docs/angular/src/content/jp/components/general/update-guide.mdx index 51001d95c9..11926eadaa 100644 --- a/docs/angular/src/content/jp/components/general/update-guide.mdx +++ b/docs/angular/src/content/jp/components/general/update-guide.mdx @@ -456,15 +456,15 @@ public onButtonClick(event) { - `IgxGridCell` -
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx index be66ea73b0..cd9bb63285 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx @@ -61,9 +61,6 @@ JSON ファイルからのデータの例: - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -131,12 +128,6 @@ export class MapBindingDataJsonPointsComponent implements AfterViewInit { - - - - - - ## API リファレンス
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx index 7a8692f8f9..b849b9637d 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx @@ -74,9 +74,6 @@ Ignite UI for Angular マップ コンポーネントは、シェイプ ファ - - - ```ts import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core"; import { MarkerType } from 'igniteui-angular-charts'; @@ -177,13 +174,6 @@ export class MapBindingDataModelComponent implements AfterViewInit { - - - - - - - ## API リファレンス
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx index 1ac7a87ccb..97a45ffedf 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx @@ -39,9 +39,6 @@ Ignite UI for Angular マップでは、複数の地理的シリーズオブジ - - - ```ts import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps'; @@ -53,7 +50,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - ## シリーズの作成 次に、後で異なるタイプのシェープ ファイルをロードする地理的シリーズでマップを作成します。 @@ -118,11 +114,6 @@ import { IgxShapeDataSource } from 'igniteui-angular-core'; - - - - - ## シェープファイルの読み込み 次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx index 1dd0b91549..f4d208394d 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx @@ -88,9 +88,6 @@ Ignite UI for Angular マップに表示するすべての地理的シリーズ - - - ## フライトのオーバーレイ 主要空港間のフライト接続を持つ最初の
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx index 9a9d500f3b..5205b8c5d5 100644 --- a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx @@ -36,7 +36,6 @@ Ignite UI for Angular Map コンポーネントの
diff --git a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx index 893a085c47..65e0505d69 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx @@ -42,7 +42,6 @@ Angular
diff --git a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx index ab0634eb95..2ee46a09d1 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx @@ -60,20 +60,6 @@ export default {} as typeof Worker & (new () => Worker); - - - - - - - - - - - - - - ```ts import { IgxHeatTileGenerator } from 'igniteui-angular-core'; import { IgxShapeDataSource } from 'igniteui-angular-core'; @@ -84,9 +70,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - - - ## ヒートマップの作成 以下のコード スニペットは、人口ベースのヒートマップを Ignite UI for Angular マップ コンポーネントに表示する方法を示しています。 @@ -94,9 +77,6 @@ import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps'; - - - ```html
diff --git a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx index 529aa6a936..2000deb33d 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx @@ -40,7 +40,6 @@ Angular
diff --git a/docs/angular/src/content/jp/components/geo-map-navigation.mdx b/docs/angular/src/content/jp/components/geo-map-navigation.mdx index 4320837d05..bfc50e9644 100644 --- a/docs/angular/src/content/jp/components/geo-map-navigation.mdx +++ b/docs/angular/src/content/jp/components/geo-map-navigation.mdx @@ -38,7 +38,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ## ウィンドウ座標 また、これらの相対座標で区切られたウィンドウ長方形内でマップ コンテンツをナビゲーションできます。 @@ -50,7 +49,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ## プロパティ 以下の表は
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx index 5928f34407..922e58a30c 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx @@ -62,15 +62,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx index 4cd114dea3..1d905bca50 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx @@ -45,16 +45,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx index 9df60d5441..6887046fc6 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx @@ -61,14 +61,6 @@ ValueBrushScale クラスは、ユーザーの色分けのニーズもほとん - - - - - - - - ```html
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx index ae27c893c1..b9ba27e464 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx @@ -56,15 +56,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx index e650a61755..d15796e7ad 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx @@ -34,15 +34,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx index ff6225dcc2..dc24139590 100644 --- a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx @@ -34,15 +34,6 @@ Angular マップ コンポーネントでは、
diff --git a/docs/angular/src/content/jp/components/geo-map.mdx b/docs/angular/src/content/jp/components/geo-map.mdx index 413be73de5..bfa904b58d 100644 --- a/docs/angular/src/content/jp/components/geo-map.mdx +++ b/docs/angular/src/content/jp/components/geo-map.mdx @@ -53,7 +53,6 @@ npm install --save igniteui-angular-maps - ```ts // app.module.ts import { IgxGeographicMapModule } from 'igniteui-angular-maps'; @@ -73,7 +72,6 @@ export class AppModule {} - ```ts import { AfterViewInit, Component, ViewChild } from "@angular/core"; import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; @@ -97,15 +95,6 @@ export class MapOverviewComponent implements AfterViewInit { } ``` - - - - - - - - - ## 使用方法 マップ モジュールがインポートされたので、以下のステップは地理的地図を作成することです。以下のコードは、これを実行して地図内でズームを有効にする方法を示しています。 @@ -122,15 +111,6 @@ export class MapOverviewComponent implements AfterViewInit {
-
+
@@ -429,6 +430,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -471,6 +473,7 @@ public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
`;
}
```
+
@@ -529,6 +532,7 @@ public webGridCellEditCellTemplate = (e: IgrCellTemplateContext) => {
);
};
```
+
Working sample of the above can be found here for further reference:
@@ -588,6 +592,7 @@ public keydownHandler(event) {
}
}
}
+
```
@@ -610,6 +615,7 @@ function handleKeyDown(event: KeyBoardEvent) {
}
}
```
+
- ENTER/SHIFT + ENTER navigation
@@ -631,6 +637,7 @@ if (key == 13) {
this.cdr.detectChanges();
});
}
+
```
@@ -648,6 +655,7 @@ if (code === "Enter" || code === "NumpadEnter") {
});
}
```
+
Key parts of finding the next eligible index would be:
@@ -791,6 +799,7 @@ this.selectedCell.update(newData);
// Directly using the row `update` method
const row = this.grid.getRowByKey(rowID);
row.update(newData);
+
```
@@ -809,6 +818,7 @@ selectedCell.update(newData);
const row = grid1Ref.current.getRowByKey(rowID);
row.update(newData);
```
+
@@ -828,6 +838,7 @@ row.update(newData);
IgbRowType row = this.grid.GetRowByKey(rowID);
row.Update(newData);
}
+
```
@@ -848,6 +859,7 @@ this.selectedCell.update(newData);
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);
```
+
@@ -866,6 +878,7 @@ row.update(newData);
IgbRowType row = this.treeGrid.GetRowByKey(rowID);
row.Update(newData);
}
+
```
@@ -887,6 +900,7 @@ this.selectedCell.update(newData);
const row = this.hierarchicalGrid.getRowByKey(rowID);
row.update(newData);
```
+
@@ -905,6 +919,7 @@ row.update(newData);
IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID);
row.Update(newData);
}
+
```
@@ -922,6 +937,7 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.grid.getRowByIndex(rowIndex);
row.delete();
```
+
@@ -1145,6 +1161,7 @@ function handleCellEdit(args: IgrGridEditEventArgs): void {
}
}
```
+
@@ -1171,7 +1188,7 @@ If the value entered in a cell under the **Units On Order** column is larger tha
```typescript
public webTreeGridCellEdit(event: CustomEvent): void {
const column = event.detail.column;
-
+
if (column.field === 'Age') {
if (event.detail.newValue < 18) {
event.detail.cancel = true;
@@ -1207,6 +1224,7 @@ igRegisterScript("HandleCellEdit", (ev) => {
}
}, false);
```
+
@@ -1229,6 +1247,7 @@ public webTreeGridCellEdit(args: IgrGridEditEventArgs): void {
}
}
}
+
```
@@ -1257,6 +1276,7 @@ Here, we are validating two columns. If the user tries to set an invalid value f
}
}
```
+
@@ -1332,6 +1352,7 @@ Then set the related CSS properties for that class:
--ig-grid-cell-editing-background: #add8e6;
}
```
+
@@ -1362,6 +1383,7 @@ Then set the related CSS properties for that class:
--ig-grid-cell-editing-background: #add8e6;
}
```
+
@@ -1392,6 +1414,7 @@ Then set the related CSS properties for that class:
--ig-grid-cell-editing-background: #add8e6;
}
```
+
### Styling Example
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
index 98702f709e..288a562f1d 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
@@ -77,6 +77,7 @@ const cellMergeMode: GridCellMergeMode = 'always';
@code {
private GridCellMergeMode CellMergeMode = GridCellMergeMode.Always;
}
+
```
@@ -88,6 +89,7 @@ At the column level, merging can be enabled or disabled with the
@@ -123,6 +125,7 @@ In the above example:
```tsx
const cellMergeMode: GridCellMergeMode = 'onSort';
```
+
@@ -146,6 +149,7 @@ const cellMergeMode: GridCellMergeMode = 'onSort';
@code {
private GridCellMergeMode CellMergeMode = GridCellMergeMode.OnSort;
}
+
```
@@ -173,6 +177,7 @@ export declare class IgrGridMergeStrategy {
comparer: (prevRecord: any, record: any, field: string) => boolean;
}
```
+
@@ -189,6 +194,7 @@ export declare class IgcGridMergeStrategy {
comparer: (prevRecord: any, record: any, field: string) => boolean;
}
+
```
@@ -213,6 +219,7 @@ export class MyCustomStrategy extends IgrDefaultMergeStrategy {
}
}
```
+
```ts
@@ -270,6 +277,7 @@ export class MyCustomStrategy extends IgcDefaultTreeGridMergeStrategy {
### Applying a Custom Strategy
Once defined, assign the strategy to the grid through the
+
```tsx
<{ComponentSelector} data={data} mergeStrategy={customStrategy}>
@@ -291,6 +300,7 @@ constructor() {
grid.mergeStrategy = new MyCustomStrategy() as IgcGridMergeStrategy;
grid.cellMergeMode = 'always';
}
+
```
### Demo
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
index c1b469273a..7382bdcdfa 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
@@ -141,6 +141,7 @@ gridRef.current.selectRange(range)
this.grid.SelectRange(new IgbGridSelectionRange[] {});
}
}
+
```
@@ -154,6 +155,7 @@ gridRef.current.selectRange(range)
```ts
this.grid.clearCellSelection();
```
+
@@ -192,6 +194,7 @@ gridRef.current.clearCellSelection();
}
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
index b34303f3e1..b2d02a9712 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
@@ -202,6 +202,7 @@ Also, if you need to change the default expand/collapse indicator, we provide te
this.addressColumn.CollapsibleIndicatorTemplate = this.ColumnIndicatorTemplate;
}
}
+
```
@@ -232,6 +233,7 @@ public indTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
@@ -251,6 +253,7 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => {
)
}
+
```
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
index bfac61e8b7..4445a96d0e 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
@@ -733,6 +733,7 @@ Now all we have to do is bind the `Checked` property of both radio buttons respe
| プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
diff --git a/docs/angular/src/content/jp/components/inputs/color-editor.mdx b/docs/angular/src/content/jp/components/inputs/color-editor.mdx
index 28bc7c2c1d..140380d6b4 100644
--- a/docs/angular/src/content/jp/components/inputs/color-editor.mdx
+++ b/docs/angular/src/content/jp/components/inputs/color-editor.mdx
@@ -37,15 +37,6 @@ npm install igniteui-angular-inputs
-
-
-
-
-
-
-
-
-
## 使用方法
`ColorEditor` の使用を開始する最も簡単な方法は次のとおりです:
@@ -53,7 +44,6 @@ npm install igniteui-angular-inputs
-
```html
```
-
-
-
-
-
-
-
-
-
-
-
-
## イベントにバインド
Color Editor コンポーネントは、次のイベントを発生させます:
@@ -95,16 +73,6 @@ public onValueChanged = (e: any) => {
}
```
-
-
-
-
-
-
-
-
-
-
## API リファレンス
`ColorEditor`
diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx index 371ff0ac31..527ef6e9e5 100644 --- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -36,11 +36,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/原則**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*||||||||||||||||| +|_グリッド_||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|*その他*||||||||||*||||||| +|_その他_||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -115,11 +115,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/ガイドライン**|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||||||*|*||||*||| diff --git a/docs/angular/src/content/jp/components/linear-gauge.mdx b/docs/angular/src/content/jp/components/linear-gauge.mdx index 1a7660e1a6..192f2e0284 100644 --- a/docs/angular/src/content/jp/components/linear-gauge.mdx +++ b/docs/angular/src/content/jp/components/linear-gauge.mdx @@ -28,7 +28,6 @@ Ignite UI for Angular リニア ゲージ コンポーネントを使用する - ## 依存関係 Angular gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -48,8 +47,6 @@ npm install --save igniteui-angular-gauges - - ```ts // app.module.ts import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; @@ -64,14 +61,6 @@ import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` - - - - - - - - ## 使用方法 以下のコードは針およびスケールで 3 つの比較範囲を含むリニア ゲージを作成する方法を紹介します。 @@ -99,15 +88,6 @@ export class AppModule {} ``` - - - - - - - - - ## 針 これは、コンポーネントで表示されるプライマリ メジャーでバーで可視化されます。あるいは以下で示す図形のほとんどすべてをカスタマイズすることもできます。 @@ -140,12 +120,6 @@ export class AppModule {} - - - - - -
diff --git a/docs/angular/src/content/jp/components/menus/toolbar.mdx b/docs/angular/src/content/jp/components/menus/toolbar.mdx index 13c8c96f0e..f3f82ff3c9 100644 --- a/docs/angular/src/content/jp/components/menus/toolbar.mdx +++ b/docs/angular/src/content/jp/components/menus/toolbar.mdx @@ -56,18 +56,6 @@ import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategory export class AppModule {} ``` - - - - - - - - - - - - ## 使用方法 ### ツール操作 @@ -99,7 +87,6 @@ Angular ツールバーには、
diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx index 241ca8b2fa..f118d339f7 100644 --- a/docs/angular/src/content/jp/components/radio-button.mdx +++ b/docs/angular/src/content/jp/components/radio-button.mdx @@ -239,7 +239,7 @@ class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" ## Radio Group
diff --git a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx index f0b671474c..1225bf996b 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx @@ -73,7 +73,3 @@ import { WorkbookColorInfo } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx index dba9da7b1f..5edc6af8bd 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx @@ -44,13 +44,6 @@ Enter キーを押したときに移動する隣接セルの方向は、
diff --git a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx index 51bf08711d..5b648edd05 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx @@ -38,7 +38,3 @@ import { WorksheetHyperlink } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx index be4b7bbe4a..3de08295d7 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx @@ -73,8 +73,6 @@ npm install --save igniteui-angular-spreadsheet - - ```ts import { IgxExcelModule } from 'igniteui-angular-excel'; import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; @@ -90,28 +88,15 @@ import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; export class AppModule {} ``` - - - - - - - ## 使用方法 Angular スプレッドシート モジュールがインポートされたので、次にスプレッドシートの基本設定です。 - - ```html
```
-
-
-
-
次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して
diff --git a/docs/angular/src/content/jp/components/switch.mdx b/docs/angular/src/content/jp/components/switch.mdx index 45e27f563a..a3159db54b 100644 --- a/docs/angular/src/content/jp/components/switch.mdx +++ b/docs/angular/src/content/jp/components/switch.mdx @@ -151,7 +151,7 @@ igx-switch {
@@ -146,6 +151,7 @@ Or via .NET CLI:
```cmd
dotnet add package IgniteUI.Blazor.GridLite
```
+
### Using Grid Lite
1 - Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file:
diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
index 12941f101c..e5bce6a3bd 100644
--- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
@@ -250,6 +250,7 @@ The {GridLiteTitle} supports tri-state sorting and it is always enabled. End-use
```
ascending -> descending -> none -> ascending
```
+
where `none` is the initial state of the data, that is to say with no sorting applied by the grid.
@@ -261,6 +262,7 @@ where `none` is the initial state of the data, that is to say with no sorting ap
```
Ascending -> Descending -> None -> Ascending
```
+
where `None` is the initial state of the data, that is to say with no sorting applied by the grid.
@@ -706,6 +708,7 @@ export type DataPipelineParams = {
type: 'sort' | 'filter';
};
```
+
```typescript
grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams) => T[] | Promise };
@@ -748,6 +751,7 @@ grid.DataPipelineConfiguration = new DataPipelineParams
}
};
```
+
The custom callback can be async as the grid will wait for it until it resolves.
@@ -756,11 +760,8 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
@@ -257,6 +259,7 @@ const filteringTree: IgrFilteringExpressionsTree = {
diff --git a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
index 0b97a03174..d9cafada53 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
@@ -82,6 +82,7 @@ After batch editing is enabled, define a Redo
+
```
@@ -115,6 +116,7 @@ After batch editing is enabled, define a
@@ -126,6 +128,7 @@ After batch editing is enabled, define a Undo
+
```
@@ -209,6 +212,7 @@ private OnRedoClick() {
this.grid.transactions.redo();
}
}
+
```
@@ -222,6 +226,7 @@ private OnRedoClick() {
```
+
@@ -395,6 +400,7 @@ export class GridBatchEditingSampleComponent {
}
}
```
+
@@ -423,6 +429,7 @@ export class HierarchicalGridBatchEditingSampleComponent {
}
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
index 8f174f7d0f..e9efd44789 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
@@ -94,6 +94,7 @@ Then you should define the column template with the combo:
);
}
+
```
@@ -110,6 +111,7 @@ Then you should define the column template with the combo:
}
```
+
@@ -182,6 +184,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) {
};
});
}
+
```
@@ -211,6 +214,7 @@ public bindEventsCountryCombo(rowId: any, cell: any) {
}
}
```
+
@@ -275,6 +279,7 @@ The `id` is necessary to set the value of `id` attribute.
type="info" [indeterminate]="true">
```
+
@@ -307,6 +312,7 @@ And lastly, adding the
## Known Issues and Limitations
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
index 6175924098..ec96c22c27 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
@@ -337,6 +337,7 @@ igRegisterScript("WebGridCellEditCellTemplate", (ctx) => {
`;
}, false);
```
+
diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx index 371ff0ac31..527ef6e9e5 100644 --- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -36,11 +36,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/原則**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*||||||||||||||||| +|_グリッド_||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|*その他*||||||||||*||||||| +|_その他_||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -115,11 +115,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/ガイドライン**|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||||||*|*||||*||| diff --git a/docs/angular/src/content/jp/components/linear-gauge.mdx b/docs/angular/src/content/jp/components/linear-gauge.mdx index 1a7660e1a6..192f2e0284 100644 --- a/docs/angular/src/content/jp/components/linear-gauge.mdx +++ b/docs/angular/src/content/jp/components/linear-gauge.mdx @@ -28,7 +28,6 @@ Ignite UI for Angular リニア ゲージ コンポーネントを使用する - ## 依存関係 Angular gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。 @@ -48,8 +47,6 @@ npm install --save igniteui-angular-gauges - - ```ts // app.module.ts import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; @@ -64,14 +61,6 @@ import { IgxLinearGaugeModule } from 'igniteui-angular-gauges'; export class AppModule {} ``` - - - - - - - - ## 使用方法 以下のコードは針およびスケールで 3 つの比較範囲を含むリニア ゲージを作成する方法を紹介します。 @@ -99,15 +88,6 @@ export class AppModule {} ``` - - - - - - - - - ## 針 これは、コンポーネントで表示されるプライマリ メジャーでバーで可視化されます。あるいは以下で示す図形のほとんどすべてをカスタマイズすることもできます。 @@ -140,12 +120,6 @@ export class AppModule {} - - - - - -
diff --git a/docs/angular/src/content/jp/components/menus/toolbar.mdx b/docs/angular/src/content/jp/components/menus/toolbar.mdx index 13c8c96f0e..f3f82ff3c9 100644 --- a/docs/angular/src/content/jp/components/menus/toolbar.mdx +++ b/docs/angular/src/content/jp/components/menus/toolbar.mdx @@ -56,18 +56,6 @@ import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategory export class AppModule {} ``` - - - - - - - - - - - - ## 使用方法 ### ツール操作 @@ -99,7 +87,6 @@ Angular ツールバーには、
diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx index 241ca8b2fa..f118d339f7 100644 --- a/docs/angular/src/content/jp/components/radio-button.mdx +++ b/docs/angular/src/content/jp/components/radio-button.mdx @@ -239,7 +239,7 @@ class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" ## Radio Group
-The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
+The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.
### デモ
diff --git a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
index b4b28cff92..47b73c1c5e 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
@@ -105,9 +105,6 @@ import { WorksheetCell } from 'igniteui-angular-excel';
-
-
-
## コード スニペット
以下のコード スニペットは、diff --git a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx index f0b671474c..1225bf996b 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx @@ -73,7 +73,3 @@ import { WorkbookColorInfo } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx index dba9da7b1f..5edc6af8bd 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx @@ -44,13 +44,6 @@ Enter キーを押したときに移動する隣接セルの方向は、
diff --git a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx index 51bf08711d..5b648edd05 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx @@ -38,7 +38,3 @@ import { WorksheetHyperlink } from 'igniteui-angular-excel'; - - - - diff --git a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx index be4b7bbe4a..3de08295d7 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx @@ -73,8 +73,6 @@ npm install --save igniteui-angular-spreadsheet - - ```ts import { IgxExcelModule } from 'igniteui-angular-excel'; import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; @@ -90,28 +88,15 @@ import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet'; export class AppModule {} ``` - - - - - - - ## 使用方法 Angular スプレッドシート モジュールがインポートされたので、次にスプレッドシートの基本設定です。 - - ```html
diff --git a/docs/angular/src/content/jp/components/switch.mdx b/docs/angular/src/content/jp/components/switch.mdx index 45e27f563a..a3159db54b 100644 --- a/docs/angular/src/content/jp/components/switch.mdx +++ b/docs/angular/src/content/jp/components/switch.mdx @@ -151,7 +151,7 @@ igx-switch {
-
+
@@ -20,7 +20,7 @@ _language: kr
> [!NOTE]
> To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic.
-###Usage
+### Usage
To get started with the Ignite UI for Angular Badge, let's first import the `IgxBadgeModule` in the **app.module.ts** file:
```typescript
@@ -120,11 +120,12 @@ class Member {
}
}
```
+
If the sample is configured properly, a list with members' name and status should be displayed.
-
@@ -154,8 +155,8 @@ Let's add an avatar in front of every chat member. To do this, put another div e
```
-
@@ -165,9 +166,9 @@ Having just a list with names doesn't provide much useful visual information. Th
Notice that the [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied.
-In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named *icon* and *type*.
+In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named _icon_ and _type_.
-In order to position the badge in its parent container, create a custom css class *badge-style* and define the top and right positions.
+In order to position the badge in its parent container, create a custom css class _badge-style_ and define the top and right positions.
```html
@@ -204,26 +205,26 @@ In order to position the badge in its parent container, create a custom css clas
If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge showing its current state.
-
## API References
-* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
-* [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html)
-* [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme)
-* [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html)
-* [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
-* [Type]({environment:angularApiUrl}/enums/type.html)
+- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
+- [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html)
+- [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme)
+- [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html)
+- [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
+- [Type]({environment:angularApiUrl}/enums/type.html)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/components/banner.md b/docs/angular/src/content/kr/components/banner.md
index e2c82cffd0..0f50394168 100644
--- a/docs/angular/src/content/kr/components/banner.md
+++ b/docs/angular/src/content/kr/components/banner.md
@@ -13,8 +13,8 @@ The Ignite UI for Angular Banner Component provides a way to easily display a pr
### Banner Demo
-
@@ -39,6 +39,7 @@ import { IgxBannerModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
### Basic banner
In order to display the Banner component, use its [`open()`]({environment:angularApiUrl}/classes/igxbannercomponent.html#open) method and call it on a button click. To configure the banner message, simply pass some text inside of the banner content. The text will show up in the specified banner area and the banner will use its default template when displaying it
@@ -58,8 +59,8 @@ The banner appears relative to where the element was inserted in the page templa
#### Basic Banner Demo
-
@@ -101,7 +102,7 @@ To pass an `igx-icon` to you banner, simply insert it in the `igx-banner`s conte
#### Adding custom banner buttons
-The `IgxBannerModule` also exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html). Using this directive allows you to override the default banner button (`Dismiss`) and add user defined custom actions. As most (but not all) of the button interactions are suposed to close the banner, make sure to call the banner's `close()` method in their `click` handlers.
+The `IgxBannerModule` also exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`]({environment:angularApiUrl}/classes/igxbanneractionsdirective.html). Using this directive allows you to override the default banner button (`Dismiss`) and add user defined custom actions. As most (but not all) of the button interactions are supposed to close the banner, make sure to call the banner's `close()` method in their `click` handlers.
> [!NOTE]
> Per Google's [`Material Design` guidelines](https://material.io/design/components/banners.html#anatomy), a banner should have a maximum of 2 buttons present. The `IgxBannerComponent` **does not** explicitly limit developers from passing more than 2 elements under the `igx-banner-actions` tag, but it is strongly advised if you choose to adhere to the material design guidelines.
@@ -120,6 +121,7 @@ To further template the 'Connection' banner, we can pass custom action handles u
...
```
+
The dismiss option (`'Continue Offline'`) does not require any further logic, so it can just call `connectionBanner.close()`. The confirm action (`'Turn On Wifi'`) requires some additional logic, so we define it in the component. We create and subscribe to the `onNetworkStateChange` `Observable` and on each change we call the `refreshBanner` method, which toggles the banner depending on `wifiState`.
```typescript
@@ -160,6 +162,7 @@ export class MyBannerComponent implements OnInit, OnDestroy {
}
}
```
+
As the subscription fires on any change to `wifiState`, the banner can now also be toggled using the WiFi icon in the demo navbar.
The results of the templated banner can be seen in the below demo:
@@ -167,8 +170,8 @@ The results of the templated banner can be seen in the below demo:
#### Templating Demo
-
@@ -204,14 +207,14 @@ export class MyBannerComponent {
#### Animation Demo
-
### Binding to events
-The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The *ing* events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown.
+The banner component emits events when changing its state - [`opening`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opening) and [`opened`]({environment:angularApiUrl}/classes/igxbannercomponent.html#opened) are called when the banner is shown (before and after, resp.), while [`closing`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closing) and [`closed`]({environment:angularApiUrl}/classes/igxbannercomponent.html#closed) are emitted when the banner is closed. The _ing_ events (`opening`, `closing`) are cancelable - they use the `ICancelEventArgs` interface and the emitted object has a `cancel` property. If the `cancel` property is set to true, the corresponding end action and event will not be triggered - e.g. if we cancel `opening`, the banner's `open` method will not finish and the banner will not be shown.
To cancel an event bind it to the emitted object and set its `cancel` property to `true`.
@@ -221,6 +224,7 @@ To cancel an event bind it to the emitted object and set its `cancel` property t
...
```
+
```typescript
// banner.component.ts
...
@@ -231,10 +235,11 @@ export class MyBannerComponent {
}
}
```
+
> [!NOTE]
> If the changes above are applied, the banner will never open, as the opening event is always cancelled.
## API Reference
-* [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html)
-* [IgxBannerComponent Theme]({environment:sassApiUrl}/themes#function-banner-theme)
+- [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html)
+- [IgxBannerComponent Theme]({environment:sassApiUrl}/themes#function-banner-theme)
diff --git a/docs/angular/src/content/kr/components/button-group.md b/docs/angular/src/content/kr/components/button-group.md
index 43c48e97d2..d4dd563acc 100644
--- a/docs/angular/src/content/kr/components/button-group.md
+++ b/docs/angular/src/content/kr/components/button-group.md
@@ -10,8 +10,8 @@ The [**igx-buttongroup**]({environment:angularApiUrl}/classes/igxbuttongroupcomp
### Button Group Demo
-
@@ -33,6 +33,7 @@ import { IgxButtonGroupModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
### Usage
Use [`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) to organize buttons into an Angular styled button group.
@@ -68,8 +69,8 @@ igx-buttongroup{
}
```
-
@@ -93,8 +94,8 @@ Use the the [`multiSelection`]({environment:angularApiUrl}/classes/igxbuttongrou
```
-
@@ -102,7 +103,7 @@ Use the the [`multiSelection`]({environment:angularApiUrl}/classes/igxbuttongrou
#### Display Density
Use the [`displayDensity`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#displaydensity) input to set the display density for the button group. This will set the style for the buttons in the group to cosy, compact or comfortable (default value) accordingly.
-> [!NOTE]
+> [!NOTE]
> The display density of a button within a button group is not changed if it is explicitly specified.
```typescript
@@ -136,8 +137,8 @@ public selectDensity(event) {
```
-
@@ -210,22 +211,22 @@ public ngOnInit() {
```
-
## API References
-* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
-* [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html)
-* [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme)
+- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
+- [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html)
+- [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/components/button.md b/docs/angular/src/content/kr/components/button.md
index acbd2b26ed..7b8e08affa 100644
--- a/docs/angular/src/content/kr/components/button.md
+++ b/docs/angular/src/content/kr/components/button.md
@@ -12,8 +12,8 @@ The Button directive within Ignite UI for Angular is intended to be used on any
### Button Demo
-
@@ -101,6 +101,7 @@ A floating action button and use an icon to display:
edit
```
+
@@ -112,11 +113,13 @@ Or use icons as buttons:
search
```
+
```html
```
+
Icon results:
-###API References
+### API References
-* [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html)
-* [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme)
-* [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html)
-* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
-* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme)
-* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
-* [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html)
+- [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme)
+- [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html)
+- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
+- [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme)
+- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
+- [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme)
diff --git a/docs/angular/src/content/kr/components/category-chart-axis-options.md b/docs/angular/src/content/kr/components/category-chart-axis-options.md
index ead3d0f649..40e9d3a598 100644
--- a/docs/angular/src/content/kr/components/category-chart-axis-options.md
+++ b/docs/angular/src/content/kr/components/category-chart-axis-options.md
@@ -148,8 +148,8 @@ Ignite UI for Angular 카테고리 차트 컴포넌트에서는 축은 축 기
이 속성은 -1과 1 사이의 수치 소수값을 허용합니다. 이 값은 각 시리즈에 사용 가능한 픽셀 수에서 상대하는 중복을 나타냅니다.
-- 음수 값(-1까지): 카테고리가 서로 생성하는 갭에 의해 떨어집니다.
-- 양수 값(1까지): 카테고리가 서로 중복됩니다. 값1은 서로 차트 위에 카테고리를 렌더링합니다.
+- 음수 값(-1까지): 카테고리가 서로 생성하는 갭에 의해 떨어집니다.
+- 양수 값(1까지): 카테고리가 서로 중복됩니다. 값1은 서로 차트 위에 카테고리를 렌더링합니다.
다음의 코드 예제는 `XAxisOverlap`을 0으로 설정합니다.
diff --git a/docs/angular/src/content/kr/components/category-chart-config-options.md b/docs/angular/src/content/kr/components/category-chart-config-options.md
index 81f1154fd2..0ea726ab95 100644
--- a/docs/angular/src/content/kr/components/category-chart-config-options.md
+++ b/docs/angular/src/content/kr/components/category-chart-config-options.md
@@ -28,10 +28,10 @@ _language: kr
width="700px"
height="500px"
chartType="waterfall"
- brushes="blue, green"
- negativeBrushes="red, yellow"
- outlines="black"
- thickness="5">
+ brushes="blue, green"
+ negativeBrushes="red, yellow"
+ outlines="black"
+ thickness="5">
```
diff --git a/docs/angular/src/content/kr/components/category-chart-high-frequency.md b/docs/angular/src/content/kr/components/category-chart-high-frequency.md
index e9e0d38326..ebdc69a046 100644
--- a/docs/angular/src/content/kr/components/category-chart-high-frequency.md
+++ b/docs/angular/src/content/kr/components/category-chart-high-frequency.md
@@ -25,9 +25,9 @@ Ignite UI for Angular 카테고리 차트 컴포넌트는 다음 데모에서
컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다.
-- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
- - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
- - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
-- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
+- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
+ - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
+ - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
+- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
> 참고: 애플리케이션에 성능 문제가 있는 경우, 디버그 빌드가 아닌 프로덕션 빌드에서 실행하면 차트 성능이 개선됩니다. 이러한 경우에는 프로덕션 빌드를 실행하십시오.
diff --git a/docs/angular/src/content/kr/components/category-chart-high-volume.md b/docs/angular/src/content/kr/components/category-chart-high-volume.md
index 13be41bba4..2b0db7a452 100644
--- a/docs/angular/src/content/kr/components/category-chart-high-volume.md
+++ b/docs/angular/src/content/kr/components/category-chart-high-volume.md
@@ -25,9 +25,9 @@ Ignite UI for Angular 카테고리 차트 컴포넌트는 다음의 데모에서
컴포넌트에 바인딩할 속성에 대량의 데이터를 저장할 경우, `@Component` 데코레이터에서 `changeDetection: ChangeDetectionStrategy.OnPush`를 설정해야 합니다. 이것을 설정하면 Angular에서 데이터 배열 내의 변경 사항을 자세히 검사하지 않으며, 변경 검출 주기마다 Angular가 필요하지 않습니다.
-- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
- - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
- - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
-- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
+- Angular가 차트에 자동으로 데이터 변경을 알려주는 대신에 바인딩된 데이터가 변경된 방법을 컴포넌트에 알리도록 할 수 했습니다.
+ - 이러한 델타 알림은 Angular가 변경 검출을 실행할 때마다 100만 레코드 배열의 모든 변경을 비교하는 것보다 훨씬 효율적으로 실행할 수 있습니다.
+ - 바인딩된 데이터의 변경을 차트에 알리는 방법에 대한 자세한 것은 각 차트의 `notify*` 메소드를 참조하십시오.
+- Angular가 디버그 모드에서 실행된 경우, 일부 브라우저에는 퍼포먼스를 저하시키는 오버헤드가 있습니다. 실제 퍼포먼스를 평가할 경우, 항상 `--prod`를 사용하여 서비스하거나 빌드해야 합니다
> 참고: 애플리케이션에 성능 문제가 있는 경우, 디버그 빌드가 아닌 프로덕션 빌드에서 실행하면 차트 성능이 개선됩니다. 이러한 경우에는 프로덕션 빌드를 실행하십시오.
diff --git a/docs/angular/src/content/kr/components/category-chart-highlighting.md b/docs/angular/src/content/kr/components/category-chart-highlighting.md
index add99498e5..14cd7ae0b5 100644
--- a/docs/angular/src/content/kr/components/category-chart-highlighting.md
+++ b/docs/angular/src/content/kr/components/category-chart-highlighting.md
@@ -23,11 +23,11 @@ _language: kr
카테고리 차트 컴포넌트는 항목 위로 마우스를 가져간 경우, 3가지 유형의 강조 표시를 활성화할 수 있습니다.
-1. 시리즈 강조 표시는 포인터가 데이터 점 위에 있을 때 단일 데이터 점을 강조 표시합니다.
+1. 시리즈 강조 표시는 포인터가 데이터 점 위에 있을 때 단일 데이터 점을 강조 표시합니다.
-2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다.
+2. 항목 강조 표시는 해당 위치에 줄무늬 모양을 그리거나 해당 위치에 마커를 렌더링하여 시리즈의 항목을 강조 표시합니다.
-3. 카테고리 강조 표시는 차트의 모든 카테고리 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축의 영역을 밝게 하는 모양을 그립니다.
+3. 카테고리 강조 표시는 차트의 모든 카테고리 축을 대상으로 합니다. 포인터 위치에 가장 가까운 축의 영역을 밝게 하는 모양을 그립니다.
```html
The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox.
@@ -70,6 +70,7 @@ statusChanged()
// event handler logic
}
```
+
Enhance the component template by adding a checkbox for each task and then setting the corresponding property bindings:
```html
@@ -88,13 +89,13 @@ The final result would be something like that:
## API References
-* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
-* [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme)
-* [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html)
+- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
+- [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme)
+- [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/components/chip.md b/docs/angular/src/content/kr/components/chip.md
index fe46d9f410..7551ccee19 100644
--- a/docs/angular/src/content/kr/components/chip.md
+++ b/docs/angular/src/content/kr/components/chip.md
@@ -12,15 +12,15 @@ _language: kr
#### Demo
-
#### Initializing Chips
-The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is the main class for a chip elemenent and the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is the main class for a chip area. The chip area is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation etc.). The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) has an [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) input so that the different chips can be easily distinguished. If [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) is not provided it will be automatically generated.
+The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) is the main class for a chip element and the [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) is the main class for a chip area. The chip area is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation etc.). The [`IgxChipComponent`]({environment:angularApiUrl}/classes/igxchipcomponent.html) has an [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) input so that the different chips can be easily distinguished. If [`id`]({environment:angularApiUrl}/classes/igxchipcomponent.html#id) is not provided it will be automatically generated.
Example of using [`igxChip`]({environment:angularApiUrl}/classes/igxchipcomponent.html) with [`igxChipArea`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html):
@@ -194,17 +194,18 @@ The chip can be focused using the `Tab` key or by clicking on it. When in chip a
- SPACE or ENTER Fires the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) output so the chip deletion can be handled manually.
### Styling
-The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/themes#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip.
+The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/themes#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip.
- #### Importing global theme
+#### Importing global theme
To begin styling of the predefined chip layout, you need to import the `index` file, where all styling functions and mixins are located.
+
```scss
@import '~igniteui-angular/lib/core/styles/themes/index'
-```
+```
#### Defining custom theme
Next, create a new theme, that extends the [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) and accepts the parameters, required to customize the chip as desired.
-
+
```scss
$custom-theme: chip-theme(
@@ -219,10 +220,10 @@ $custom-theme: chip-theme(
$focus-selected-background: #ffcd0f,
$border-radius: 5px
);
-```
+```
#### Defining a custom color palette
-In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
+In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
`igx-palette` generates a color palette, based on provided primary and secondary colors.
```scss
@@ -233,9 +234,9 @@ $custom-palette: palette(
$primary: $black-color,
$secondary: $yellow-color
);
-```
+```
-After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors.
+After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors.
```scss
$custom-theme: chip-theme(
@@ -253,8 +254,8 @@ $custom-theme: chip-theme(
```
#### Defining custom schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_chip`.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_chip`.
```scss
$custom-chip-schema: extend($_light-chip, (
@@ -269,8 +270,9 @@ $custom-chip-schema: extend($_light-chip, (
focus-selected-background: (igx-color("secondary", 500)),
border-radius: 5px
));
-```
-In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
+```
+
+In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
```scss
$my-custom-schema: extend($light-schema, (
@@ -284,7 +286,8 @@ $custom-theme: chip-theme(
```
#### Applying the custom theme
-The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+
```scss
@include chip($custom-theme);
```
@@ -298,7 +301,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
>[!NOTE]
>If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
>[!NOTE]
- >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component:
+ >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component:
```scss
:host {
@@ -306,22 +309,22 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
@include chip($custom-theme);
}
}
-```
+```
#### Demo
-
### API
-* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
-* [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme)
-* [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html)
+- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
+- [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme)
+- [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html)
### References
diff --git a/docs/angular/src/content/kr/components/circular-progress.md b/docs/angular/src/content/kr/components/circular-progress.md
index 64d39040e7..ddb885dc1a 100644
--- a/docs/angular/src/content/kr/components/circular-progress.md
+++ b/docs/angular/src/content/kr/components/circular-progress.md
@@ -5,7 +5,7 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
_language: kr
---
-##Circular Progress
+## Circular Progress
-
-
+
+
```
@@ -155,6 +155,7 @@ Use selector `[igxComboClearIcon]`:
### Templating combo input
The above-mentioned selectors, `[igxComboClearIcon]` and `[igxComboToggleIcon]`, used with templates will change how the respective buttons appear in the combo input.
Passing content inside of the `igx-combo` also allows templating of the combo input similar to the way an `igx-input-group` can be templated (using `igx-prefix`, `igx-suffix` and `[igxLabel]`). The code snippet below illustrates how to add an appropriate label and `igx-prefix` to the combo input, as well as changing the `clear` button icon:
+
```html
...
@@ -169,13 +170,13 @@ Passing content inside of the `igx-combo` also allows templating of the combo in
## Additional Resources
-* [Combo Features](combo-features.md)
-* [Combo Remote Binding](combo-remote.md)
-* [Template Driven Forms Integration](input-group.md)
-* [Reactive Forms Integration](angular-reactive-form-validation.md)
-* [Single Select ComboBox](simple-combo.md)
+- [Combo Features](combo-features.md)
+- [Combo Remote Binding](combo-remote.md)
+- [Template Driven Forms Integration](input-group.md)
+- [Reactive Forms Integration](angular-reactive-form-validation.md)
+- [Single Select ComboBox](simple-combo.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/components/combo.md b/docs/angular/src/content/kr/components/combo.md
index fd88ed2f95..9ff7d3b715 100644
--- a/docs/angular/src/content/kr/components/combo.md
+++ b/docs/angular/src/content/kr/components/combo.md
@@ -62,6 +62,7 @@ export class ComboDemo implements OnInit {
}
}
```
+
> Note: If [displayKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#displaykey) is omitted then [valueKey]({environment:angularApiUrl}/classes/igxcombocomponent.html#valuekey) entity will instead be used as item text.
## Features
@@ -108,9 +109,9 @@ When igxCombo is opened, allow custom values are enabled and add item button is
## API
-* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html)
-* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme)
-* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html)
+- [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme)
+- [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme)
## Known Issues
@@ -123,16 +124,16 @@ When igxCombo is opened, allow custom values are enabled and add item button is
## Additional Resources
-* [Combo Features](combo-features.md)
-* [Combo Remote Binding](combo-remote.md)
-* [Combo Templates](combo-templates.md)
-* [Template Driven Forms Integration](input-group.md)
-* [Reactive Forms Integration](angular-reactive-form-validation.md)
-* [Single Select ComboBox](simple-combo.md)
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-* [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [Combo Features](combo-features.md)
+- [Combo Remote Binding](combo-remote.md)
+- [Combo Templates](combo-templates.md)
+- [Template Driven Forms Integration](input-group.md)
+- [Reactive Forms Integration](angular-reactive-form-validation.md)
+- [Single Select ComboBox](simple-combo.md)
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
+- [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/components/data-chart-axis-annotations.md b/docs/angular/src/content/kr/components/data-chart-axis-annotations.md
index 9e8c1b538c..52b400d83a 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-annotations.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-annotations.md
@@ -20,9 +20,9 @@ In the Ignite UI for Angular data chart component, you are able to add annotatio
In the Ignite UI for Angular data chart, the following are the series and layers that support axis annotations:
-- [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html)
-- [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinalvaluelayercomponent.html)
-- [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html)
+- [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html)
+- [`IgxFinalValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinalvaluelayercomponent.html)
+- [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html)
You can enable the axis annotations by setting the [`isAxisAnnotationEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvalueoverlaycomponent.html#isaxisannotationenabled) property of the corresponding layer or overlay to `true`. In doing so, this will place a box on the corresponding owning axis or axes with the value that that particular overlay or layer represents at the point that it is currently at. For example, with the [`IgxCrosshairLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcrosshairlayercomponent.html), these annotations can appear on both the X and Y axes and will move around and change as you scroll around the plot area.
@@ -53,5 +53,5 @@ This code demonstrates how to create a Ignite UI for Angular data chart with eac
## Additional Resources
-- [Data Chart Series Annotations](data-chart-series-annotations.md)
-- [Value Overlay](data-chart-value-overlay.md)
+- [Data Chart Series Annotations](data-chart-series-annotations.md)
+- [Value Overlay](data-chart-value-overlay.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-axis-locations.md b/docs/angular/src/content/kr/components/data-chart-axis-locations.md
index f9140626be..35ed2193ee 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-locations.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-locations.md
@@ -62,6 +62,6 @@ _language: kr
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-axis-sharing.md b/docs/angular/src/content/kr/components/data-chart-axis-sharing.md
index 701247d43f..5aea1db7d3 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-sharing.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-sharing.md
@@ -62,5 +62,5 @@ _language: kr
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-axis-types.md b/docs/angular/src/content/kr/components/data-chart-axis-types.md
index 34914fd61e..1d533d92db 100644
--- a/docs/angular/src/content/kr/components/data-chart-axis-types.md
+++ b/docs/angular/src/content/kr/components/data-chart-axis-types.md
@@ -156,9 +156,9 @@ _language: kr
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [축 설정](data-chart-axis-settings.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [축 설정](data-chart-axis-settings.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-data-sources.md b/docs/angular/src/content/kr/components/data-chart-data-sources.md
index 49d58022a7..9ca59e03bd 100644
--- a/docs/angular/src/content/kr/components/data-chart-data-sources.md
+++ b/docs/angular/src/content/kr/components/data-chart-data-sources.md
@@ -10,14 +10,14 @@ _language: kr
[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어에서 모든 시리즈를 올바르게 렌더링하려면 특정 수치와 데이터 열 유형이 필요합니다. 이 항목에서는 각 시리즈 그룹에 데이터 소스를 구현하는 방법에 대한 예제를 표시합니다.
-- [카테고리 시리즈](data-chart-type-category-series.md)의 [SampleCategoryData](data-chart-data-sources-category.md)
-- [금융 시리즈](data-chart-type-financial-series.md)의 [SampleFinancialData](data-chart-data-sources-financial.md)
-- [폴라 시리즈](data-chart-type-polar-series.md)의 [SamplePolarData](data-chart-data-sources-polar.md)
-- [레이디얼 시리즈](data-chart-type-radial-series.md)의 [SampleRadialData](data-chart-data-sources-radial.md)
-- [범위 시리즈](data-chart-type-range-series.md)의 [SampleRangeData](data-chart-data-sources-range.md)
-- [분산 HD 시리즈](data-chart-type-scatter-hd-series.md)의 [SampleDensityData](data-chart-data-sources-density.md)
-- [분산 영역 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
-- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
-- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
-- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
-- [분산 모양 시리즈](data-chart-type-shape-series.md)의 [SampleShapeData](data-chart-data-sources-shape.md)
+- [카테고리 시리즈](data-chart-type-category-series.md)의 [SampleCategoryData](data-chart-data-sources-category.md)
+- [금융 시리즈](data-chart-type-financial-series.md)의 [SampleFinancialData](data-chart-data-sources-financial.md)
+- [폴라 시리즈](data-chart-type-polar-series.md)의 [SamplePolarData](data-chart-data-sources-polar.md)
+- [레이디얼 시리즈](data-chart-type-radial-series.md)의 [SampleRadialData](data-chart-data-sources-radial.md)
+- [범위 시리즈](data-chart-type-range-series.md)의 [SampleRangeData](data-chart-data-sources-range.md)
+- [분산 HD 시리즈](data-chart-type-scatter-hd-series.md)의 [SampleDensityData](data-chart-data-sources-density.md)
+- [분산 영역 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
+- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)의 [SampleScatterData](data-chart-data-sources-scatter.md)
+- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
+- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)의 [SampleScatterStats](data-chart-data-sources-stats.md)
+- [분산 모양 시리즈](data-chart-type-shape-series.md)의 [SampleShapeData](data-chart-data-sources-shape.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-navigation.md b/docs/angular/src/content/kr/components/data-chart-navigation.md
index 47ecc2ca80..86c64241c3 100644
--- a/docs/angular/src/content/kr/components/data-chart-navigation.md
+++ b/docs/angular/src/content/kr/components/data-chart-navigation.md
@@ -51,20 +51,20 @@ UI에서 탐색을 허용하려면 확대/축소를 허용하려는 방향에
[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 탐색은 마우스나 키보드가 활성화된 상태에서 실행됩니다. 다음 조작은 기본적으로 다음의 마우스 또는 키보드 조작을 사용하여 호출할 수 있습니다:
-- **Panning**: 키보드의 화살표 키를 사용하거나 Shift 키를 누른 상태에서 마우스로 클릭하고 드래그합니다.
-- **Zoom In**: 키보드의 PageUp 키를 사용하거나 마우스 휠을 위로 회전시킵니다.
-- **Zoom Out**: 키보드의 PageDown 키를 사용하거나 마우스 휠을 아래로 회전시킵니다.
-- **차트 플롯 영역에 맞춤**: 키보드의 Home 키입니다. 이것에 대한 마우스 조작은 없습니다.
-- **영역 줌**: `DefaultInteraction` 속성을 기본값인 `DragZoom`으로 설정하고 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.
+- **Panning**: 키보드의 화살표 키를 사용하거나 Shift 키를 누른 상태에서 마우스로 클릭하고 드래그합니다.
+- **Zoom In**: 키보드의 PageUp 키를 사용하거나 마우스 휠을 위로 회전시킵니다.
+- **Zoom Out**: 키보드의 PageDown 키를 사용하거나 마우스 휠을 아래로 회전시킵니다.
+- **차트 플롯 영역에 맞춤**: 키보드의 Home 키입니다. 이것에 대한 마우스 조작은 없습니다.
+- **영역 줌**: `DefaultInteraction` 속성을 기본값인 `DragZoom`으로 설정하고 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.
확대/축소 및 이동 조작은 `DragModifier` 및 `PanModifier` 속성을 각각 설정하고 보조 키를 사용하여 활성화할 수도 있습니다. 이러한 속성은 다음의 보조 키로 설정할 수 있으며 누르면 해당 조작이 활성화됩니다:
-- Shift
-- Alt
-- Control
-- Windows 키
-- Apple 키
-- None
+- Shift
+- Alt
+- Control
+- Windows 키
+- Apple 키
+- None
다음 코드 조각은 차트에서 UI 탐색을 활성화하는 방법을 보여줍니다: 다음은 **Shift** 키를 누른 상태에서 확대/축소, **Alt** 키를 누른 상태에서 이동만 가능합니다:
@@ -112,11 +112,11 @@ The following code snippet demonstrates how to enable the overview plus detail p
[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어는 차트에서 확대/축소 또는 이동 조작이 발생할 때마다 업데이트되는 여러 탐색 속성을 제공합니다. 이러한 각 속성을 설정하여 차트를 프로그래밍 방식으로 확대/축소 또는 이동할 수도 있습니다. 다음은 이러한 속성 목록입니다:
-- `WindowPositionHorizontal`: 차트에 표시되는 콘텐츠 뷰 직사각형의 X부분을 나타내는 수치 값입니다.
-- `WindowPositionVertical`: 차트에 표시되는 콘텐츠 뷰 직사각형의 Y부분을 나타내는 수치 값입니다.
-- `WindowRect`: 현재 뷰에 있는 차트 부분을 표시하는 직사각형을 나타내는 `IgRect` 객체입니다. 예를 들면, "0, 0, 1, 1"의 `WindowRect`는 전체 차트입니다.
-- [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalehorizontal): 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 나타내는 수치 값입니다.
-- [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalevertical): 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 나타내는 수치 값입니다.
+- `WindowPositionHorizontal`: 차트에 표시되는 콘텐츠 뷰 직사각형의 X부분을 나타내는 수치 값입니다.
+- `WindowPositionVertical`: 차트에 표시되는 콘텐츠 뷰 직사각형의 Y부분을 나타내는 수치 값입니다.
+- `WindowRect`: 현재 뷰에 있는 차트 부분을 표시하는 직사각형을 나타내는 `IgRect` 객체입니다. 예를 들면, "0, 0, 1, 1"의 `WindowRect`는 전체 차트입니다.
+- [`windowScaleHorizontal`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalehorizontal): 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 나타내는 수치 값입니다.
+- [`windowScaleVertical`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#windowscalevertical): 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 나타내는 수치 값입니다.
다음의 코드 조각은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 뷰를 프로그래밍 방식으로 변경하는 방법을 보여줍니다. 다음은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어를 나타내는 "chart"라는 변수가 있다고 가정한 경우입니다:
diff --git a/docs/angular/src/content/kr/components/data-chart-series-markers.md b/docs/angular/src/content/kr/components/data-chart-series-markers.md
index 302b906c75..e7bb3b15fb 100644
--- a/docs/angular/src/content/kr/components/data-chart-series-markers.md
+++ b/docs/angular/src/content/kr/components/data-chart-series-markers.md
@@ -23,14 +23,14 @@ _language: kr
대부분의 차트 시리즈는 다음과 같은 마커를 지원합니다:
-- 모든 [카테고리 시리즈](data-chart-type-category-series.md)
-- 모든 [폴라 시리즈](data-chart-type-polar-series.md)
-- 모든 [레이디얼 시리즈](data-chart-type-radial-series.md)
-- 분산 시리즈:
- - [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
- - [분산점 시리즈](data-chart-type-scatter-point-series.md)
- - [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
- - [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
+- 모든 [카테고리 시리즈](data-chart-type-category-series.md)
+- 모든 [폴라 시리즈](data-chart-type-polar-series.md)
+- 모든 [레이디얼 시리즈](data-chart-type-radial-series.md)
+- 분산 시리즈:
+ - [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
+ - [분산점 시리즈](data-chart-type-scatter-point-series.md)
+ - [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
+ - [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
## 마커 속성
@@ -73,6 +73,6 @@ This code snippet below demonstrate how to create custom marker with values of
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [시리즈 유형](data-chart-series-types.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [축 유형](data-chart-axis-types.md)
+- [시리즈 유형](data-chart-series-types.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-series-trendlines.md b/docs/angular/src/content/kr/components/data-chart-series-trendlines.md
index 8d5a4c315b..b8eff34572 100644
--- a/docs/angular/src/content/kr/components/data-chart-series-trendlines.md
+++ b/docs/angular/src/content/kr/components/data-chart-series-trendlines.md
@@ -23,20 +23,20 @@ _language: kr
추세선은 스택 시리즈 및 범위 시리즈를 제외한 모든 시리즈에서 지원됩니다. 다음은 차트 시리즈에서 사용할 수 있는 추세선 목록입니다:
-- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none)
-- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit)
-- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage)
-- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage)
-- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit)
-- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit)
-- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit)
-- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage)
-- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit)
-- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit)
-- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit)
-- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit)
-- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage)
-- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage)
+- [`None`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#none)
+- [`CubicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cubicfit)
+- [`CumulativeAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#cumulativeaverage)
+- [`ExponentialAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialaverage)
+- [`ExponentialFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#exponentialfit)
+- [`LinearFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#linearfit)
+- [`LogarithmicFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#logarithmicfit)
+- [`ModifiedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#modifiedaverage)
+- [`PowerLawFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#powerlawfit)
+- [`QuadraticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quadraticfit)
+- [`QuarticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quarticfit)
+- [`QuinticFit`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#quinticfit)
+- [`SimpleAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#simpleaverage)
+- [`WeightedAverage`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/trendlinetype.html#weightedaverage)
다음 코드 조각은 [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html) 제어의 시리즈에 추세선을 추가하는 방법을 보여 줍니다:
diff --git a/docs/angular/src/content/kr/components/data-chart-series-types.md b/docs/angular/src/content/kr/components/data-chart-series-types.md
index 80278d0501..59b4e726f2 100644
--- a/docs/angular/src/content/kr/components/data-chart-series-types.md
+++ b/docs/angular/src/content/kr/components/data-chart-series-types.md
@@ -16,88 +16,88 @@ _language: kr
### 카테고리 시리즈
-- [AreaSeries](data-chart-type-category-series.md)
-- [BarSeries](data-chart-type-category-series.md)
-- [ColumnSeries](data-chart-type-category-series.md)
-- [LineSeries](data-chart-type-category-series.md)
-- [PointSeries](data-chart-type-category-series.md)
-- [SplineSeries](data-chart-type-category-series.md)
-- [SplineAreaSeries](data-chart-type-category-series.md)
-- [StepAreaSeries](data-chart-type-category-series.md)
-- [StepLineSeries](data-chart-type-category-series.md)
-- [WaterfallSeries](data-chart-type-category-series.md)
+- [AreaSeries](data-chart-type-category-series.md)
+- [BarSeries](data-chart-type-category-series.md)
+- [ColumnSeries](data-chart-type-category-series.md)
+- [LineSeries](data-chart-type-category-series.md)
+- [PointSeries](data-chart-type-category-series.md)
+- [SplineSeries](data-chart-type-category-series.md)
+- [SplineAreaSeries](data-chart-type-category-series.md)
+- [StepAreaSeries](data-chart-type-category-series.md)
+- [StepLineSeries](data-chart-type-category-series.md)
+- [WaterfallSeries](data-chart-type-category-series.md)
### 폴라 시리즈
-- [PolarAreaSeries](data-chart-type-polar-series.md)
-- [PolarLineSeries](data-chart-type-polar-series.md)
-- [PolarScatterSeries](data-chart-type-polar-series.md)
-- [PolarSplineSeries](data-chart-type-polar-series.md)
-- [PolarSplineAreaSeries](data-chart-type-polar-series.md)
+- [PolarAreaSeries](data-chart-type-polar-series.md)
+- [PolarLineSeries](data-chart-type-polar-series.md)
+- [PolarScatterSeries](data-chart-type-polar-series.md)
+- [PolarSplineSeries](data-chart-type-polar-series.md)
+- [PolarSplineAreaSeries](data-chart-type-polar-series.md)
### Radial Series
-- [RadialAreaSeries](data-chart-type-radial-series.md)
-- [RadialLineSeries](data-chart-type-radial-series.md)
-- [RadialColumnSeries](data-chart-type-radial-series.md)
-- [RadialPieSeries](data-chart-type-radial-series.md)
+- [RadialAreaSeries](data-chart-type-radial-series.md)
+- [RadialLineSeries](data-chart-type-radial-series.md)
+- [RadialColumnSeries](data-chart-type-radial-series.md)
+- [RadialPieSeries](data-chart-type-radial-series.md)
### 범위 시리즈
-- [RangeAreaSeries](data-chart-type-range-series.md)
-- [RangeColumnSeries](data-chart-type-range-series.md)
+- [RangeAreaSeries](data-chart-type-range-series.md)
+- [RangeColumnSeries](data-chart-type-range-series.md)
### 분산 시리즈
-- [분산 영역 시리즈](data-chart-type-scatter-area-series.md)
-- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
-- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)
-- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)
-- [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
-- [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
-- [분산 폴리곤 시리즈](data-chart-type-shape-series.md)
-- [분산 폴리라인 시리즈](data-chart-type-shape-series.md)
+- [분산 영역 시리즈](data-chart-type-scatter-area-series.md)
+- [분산 버블 시리즈](data-chart-type-scatter-bubble-series.md)
+- [분산 등고선 시리즈](data-chart-type-scatter-contour-series.md)
+- [분산 마커 시리즈](data-chart-type-scatter-point-series.md)
+- [분산 라인 시리즈](data-chart-type-scatter-point-series.md)
+- [분산 스플라인 시리즈](data-chart-type-scatter-point-series.md)
+- [분산 폴리곤 시리즈](data-chart-type-shape-series.md)
+- [분산 폴리라인 시리즈](data-chart-type-shape-series.md)
### 금융 시리즈
-- [FinancialPriceSeries(OHLC)](data-chart-type-financial-series.md)
-- [FinancialPriceSeries(Candlestick)](data-chart-type-financial-series.md)
+- [FinancialPriceSeries(OHLC)](data-chart-type-financial-series.md)
+- [FinancialPriceSeries(Candlestick)](data-chart-type-financial-series.md)
### 금융 오버레이
-- [BollingerBandsOverlay](data-chart-type-financial-series.md)
-- [PriceChannelOverlay](data-chart-type-financial-series.md)
+- [BollingerBandsOverlay](data-chart-type-financial-series.md)
+- [PriceChannelOverlay](data-chart-type-financial-series.md)
### 금융지표
-- [AbsoluteVolumeOscillatorIndicator](data-chart-type-financial-series.md)
-- [AccumulationDistributionIndicator](data-chart-type-financial-series.md)
-- [BollingerBandWidthIndicator](data-chart-type-financial-series.md)
-- [ChaikinVolatilityIndicator](data-chart-type-financial-series.md)
-- [ChaikinOscillatorIndicator](data-chart-type-financial-series.md)
-- [DetrendedPriceOscillatorIndicator](data-chart-type-financial-series.md)
-- [CommodityChannelIndexIndicator](data-chart-type-financial-series.md)
-- [EaseOfMovementIndicator](data-chart-type-financial-series.md)
-- [FastStochasticOscillatorIndicator](data-chart-type-financial-series.md)
-- [ForceIndexIndicator](data-chart-type-financial-series.md)
-- [FullStochasticOscillatorIndicator](data-chart-type-financial-series.md)
-- [MarketFacilitationIndexIndicator](data-chart-type-financial-series.md)
-- [MassIndexIndicator](data-chart-type-financial-series.md)
-- [MedianPriceIndicator](data-chart-type-financial-series.md)
-- [MoneyFlowIndexIndicator](data-chart-type-financial-series.md)
-- [MovingAverageConvergenceDivergenceIndicator](data-chart-type-financial-series.md)
-- [NegativeVolumeIndexIndicator](data-chart-type-financial-series.md)
-- [OnBalanceVolumeIndicator](data-chart-type-financial-series.md)
-- [PercentageVolumeOscillatorIndicator](data-chart-type-financial-series.md)
-- [PercentagePriceOscillatorIndicator](data-chart-type-financial-series.md)
-- [PositiveVolumeIndexIndicator](data-chart-type-financial-series.md)
-- [RateOfChangeAndMomentumIndicator](data-chart-type-financial-series.md)
-- [RelativeStrengthIndexIndicator](data-chart-type-financial-series.md)
-- [SlowStochasticOscillatorIndicator](data-chart-type-financial-series.md)
-- [StandardDeviationIndicator](data-chart-type-financial-series.md)
-- [StochRSIIndicator](data-chart-type-financial-series.md)
-- [TRIXIndicator](data-chart-type-financial-series.md)
-- [TypicalPriceIndicator](data-chart-type-financial-series.md)
-- [UltimateOscillatorIndicator](data-chart-type-financial-series.md)
-- [WeightedCloseIndicator](data-chart-type-financial-series.md)
-- [WilliamsPercentRIndicator](data-chart-type-financial-series.md)
+- [AbsoluteVolumeOscillatorIndicator](data-chart-type-financial-series.md)
+- [AccumulationDistributionIndicator](data-chart-type-financial-series.md)
+- [BollingerBandWidthIndicator](data-chart-type-financial-series.md)
+- [ChaikinVolatilityIndicator](data-chart-type-financial-series.md)
+- [ChaikinOscillatorIndicator](data-chart-type-financial-series.md)
+- [DetrendedPriceOscillatorIndicator](data-chart-type-financial-series.md)
+- [CommodityChannelIndexIndicator](data-chart-type-financial-series.md)
+- [EaseOfMovementIndicator](data-chart-type-financial-series.md)
+- [FastStochasticOscillatorIndicator](data-chart-type-financial-series.md)
+- [ForceIndexIndicator](data-chart-type-financial-series.md)
+- [FullStochasticOscillatorIndicator](data-chart-type-financial-series.md)
+- [MarketFacilitationIndexIndicator](data-chart-type-financial-series.md)
+- [MassIndexIndicator](data-chart-type-financial-series.md)
+- [MedianPriceIndicator](data-chart-type-financial-series.md)
+- [MoneyFlowIndexIndicator](data-chart-type-financial-series.md)
+- [MovingAverageConvergenceDivergenceIndicator](data-chart-type-financial-series.md)
+- [NegativeVolumeIndexIndicator](data-chart-type-financial-series.md)
+- [OnBalanceVolumeIndicator](data-chart-type-financial-series.md)
+- [PercentageVolumeOscillatorIndicator](data-chart-type-financial-series.md)
+- [PercentagePriceOscillatorIndicator](data-chart-type-financial-series.md)
+- [PositiveVolumeIndexIndicator](data-chart-type-financial-series.md)
+- [RateOfChangeAndMomentumIndicator](data-chart-type-financial-series.md)
+- [RelativeStrengthIndexIndicator](data-chart-type-financial-series.md)
+- [SlowStochasticOscillatorIndicator](data-chart-type-financial-series.md)
+- [StandardDeviationIndicator](data-chart-type-financial-series.md)
+- [StochRSIIndicator](data-chart-type-financial-series.md)
+- [TRIXIndicator](data-chart-type-financial-series.md)
+- [TypicalPriceIndicator](data-chart-type-financial-series.md)
+- [UltimateOscillatorIndicator](data-chart-type-financial-series.md)
+- [WeightedCloseIndicator](data-chart-type-financial-series.md)
+- [WilliamsPercentRIndicator](data-chart-type-financial-series.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-category-series.md b/docs/angular/src/content/kr/components/data-chart-type-category-series.md
index a45a656708..aec6090df3 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-category-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-category-series.md
@@ -56,10 +56,10 @@ _language: kr
카테고리 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 카테고리 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlineseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 카테고리 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxLineSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlineseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
[SampleCategoryData](data-chart-data-sources-category.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -145,12 +145,12 @@ import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 주석](data-chart-series-annotations.md)
-- [시리즈 강조 표시](data-chart-series-highlighting.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 주석](data-chart-series-annotations.md)
+- [시리즈 강조 표시](data-chart-series-highlighting.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-financial-series.md b/docs/angular/src/content/kr/components/data-chart-type-financial-series.md
index b74fcfbaec..9c683258cd 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-financial-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-financial-series.md
@@ -28,47 +28,47 @@ _language: kr
금융 오버레이는 일반적으로 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)
뒤에 표시되며 주가의 동향을 보여줍니다. 이러한 오버레이는 Y축에서 동일한 비율의 값을 사용하기 때문에 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)를 표시하는 동일한 데이터 차트에 표시할 수 있습니다. 다음 목록은 모든 금융 오버레이 유형을 보여줍니다:
-- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)(BBO)는 가격의 표준 편차를 기반으로 하므로 가격 변동폭을 반영합니다. 밴드는 표준 편차가 증가할 때 더 넓어지고 표준 편차가 감소할 때 더 좁아지며 이동 평균에 의해 평탄해집니다. 사용자가 조정할 수 있는 표준 편차 및 평탄한 기간을 제외하고 BollingerBandsOverlay 너비의 비율에 영향을 주는 사용자가 조정 가능한 승수가 있으며,
-- [`IgxPriceChannelOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricechanneloverlaycomponent.html)(PCO)는 가격 변동성 또는 2개의 평행선 간의 시간에 따른 가격 변화입니다. 아래 줄은 추세선으로 저가에 그려지고, 위쪽 줄은 채널선으로 고가에 기초합니다. 채널은 모든 시간대의 추세 방향을 보여줍니다. 가격 채널 또는 추세, 위, 아래 또는 옆으로 가능
+- [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)(BBO)는 가격의 표준 편차를 기반으로 하므로 가격 변동폭을 반영합니다. 밴드는 표준 편차가 증가할 때 더 넓어지고 표준 편차가 감소할 때 더 좁아지며 이동 평균에 의해 평탄해집니다. 사용자가 조정할 수 있는 표준 편차 및 평탄한 기간을 제외하고 BollingerBandsOverlay 너비의 비율에 영향을 주는 사용자가 조정 가능한 승수가 있으며,
+- [`IgxPriceChannelOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricechanneloverlaycomponent.html)(PCO)는 가격 변동성 또는 2개의 평행선 간의 시간에 따른 가격 변화입니다. 아래 줄은 추세선으로 저가에 그려지고, 위쪽 줄은 채널선으로 고가에 기초합니다. 채널은 모든 시간대의 추세 방향을 보여줍니다. 가격 채널 또는 추세, 위, 아래 또는 옆으로 가능
## 금융지표
금융지표는 종종 거래자들이 변화를 측정하고 주가의 추세를 보여 주기 위해 사용됩니다. 이러한 지표는 일반적으로 동일한 Y축 비율을 공유하지 않기 때문에 [`IgxFinancialPriceSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html)의 차트 위 또는 아래에 별도의 차트로 표시됩니다. 단, 차트 제어는 원하는 경우, 여러 축을 사용하고 축을 공유하여 동일한 플롯 영역에 가격 시리즈와 지표를 나타내도록 지원합니다. 이에 대한 자세한 것은 [Axis Sharing and Multiple Axes](data-chart-axis-sharing.md) 항목을 참조하십시오. 또한, 모든 금융지표에는 인디케이터가 선, 열 또는 영역을 사용하여 렌더링되는지 여부를 결정하는 [`displayType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfinancialpriceseriescomponent.html#displaytype) 속성이 있습니다. 다음 목록은 모든 금융지표 유형을 보여줍니다:
-- [`IgxAbsoluteVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxabsolutevolumeoscillatorindicatorcomponent.html)(AVO)는 2개의 평균 볼륨 측정값의 차이를 계산합니다. 백분율 볼륨 오실레이터와 유사하지만 점수 범위는 -100%~+100%입니다. 인디케이터는 볼륨 추세가 증가하는지 또는 감소하는지 식별하는 데 사용됩니다. 사용자는 분석 기간을 선택할 수 있으며
-- [`IgxAccumulationDistributionIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaccumulationdistributionindicatorcomponent.html)(ADI)는 매우 인기 있는 볼륨 관련 인디케이터입니다. 투자자가 매도 또는 매수에 대한 차이를 살펴봄으로써 주식, 증권 또는 지수의 공급 및 수요를 시간 경과에 따라 평가하며
-- [`IgxAverageDirectionalIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragedirectionalindexindicatorcomponent.html) | (ADX)는 추세 방향에 상관없이 추세 강도를 측정합니다. 이 인디케이터는 일반적으로 주식 동향의 강도와 방향을 결정하는 데 사용되며
-- [`IgxAverageTrueRangeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragetruerangeindicatorcomponent.html) | (ATR)는 주어진 기간 내에 증권의 가격 이동이나 변동성을 측정합니다. 이 인디케이터는 가격 방향이나 지속 기간의 측정이 아니라 가격 이동 또는 변동성의 양입니다. 평균 참 범위(ATR)은 종종 매일, 매주 또는 매월을 포함한 여러 기준을 사용하여 14일 기간을 주기로 계산됩니다. 평균 참 범위는 지난 14일 기간의 TR 값의 지수 이동 평균입니다. 실제 사용된 기간은 사용자 선호에 따라 다를 수 있으며
-- [`IgxBollingerBandWidthIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandwidthindicatorcomponent.html) | (BBW)는 [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 함께 사용됩니다. 이 인디케이터는 주어진 점에서 볼링거 밴드 폭을 나타냅니다. 편차가 클수록 밴드가 넓어집니다. 대역폭(하한값)을 줄이면 표준 편차가 줄어들고 대역폭(상한값)을 넓히면 가격의 표준 편차가 증가함을 나타냅니다. [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 같은 계수 인자를 지원하여 값을 일치시킬 수 있으며
-- [`IgxChaikinVolatilityIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinvolatilityindicatorcomponent.html)(CHV)는 특정 기간 동안의 고가 및 저가 가격 차이의 지수 이동 평균의 변화율을 보여줌으로써 증권의 변동성을 반영합니다.
-- [`IgxChaikinOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinoscillatorindicatorcomponent.html)(COI)는 누적/분포 인디케이터의 추세를 식별하는 데 사용됩니다. 체킨 오실레이터는 누적/분포 인디케이터의 3일 지수 이동 평균(EMA)에서 뺀 누적/분포 인디케이터의 10일 EMA입니다.
-- [`IgxCommodityChannelIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcommoditychannelindexindicatorcomponent.html)(CCI)는 증권의 주기적 추세를 파악하는 데 사용됩니다. 이 인디케이터는 증권 가격이 식별할 수 있는 주기에 따라 변한다는 가정에 기초한 것입니다. 특정 기간 동안의 표준 가격(SMATP)의 단순 이동 평균(SMA)과 이전 기간의 표준 가격(TP)의 차이를 상수와 절대 평균 편차의 곱으로 나눠 계산한 것입니다.
-- [`IgxDetrendedPriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdetrendedpriceoscillatorindicatorcomponent.html) (DPO)는 단기 추세를 파악하기 위해 장기 가격 동향을 제어하도록 설계되었습니다. 이것은 이동 평균의 변화에 의한 것이며 모멘텀 오실레이터가 아닙니다.
-- [`IgxEaseOfMovementIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxeaseofmovementindicatorcomponent.html)(EOM)는 증권 가격 변동에 필요한 볼륨을 파악하는 데 사용됩니다. 일반적으로 이동 평균으로 부드럽게 처리됩니다.
-- [`IgxFastStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfaststochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 스탁캐스틱 오실레이터의 3가지 유형: 패스트, 슬로우, 풀. 이 인디케이터는 0~100 비율을 사용하여 특정 기간 동안 고/저 범위에 비례한 현재 마감가의 관계를 나타내는 모멘텀 인디케이터입니다. 상승하는 시장에서는 가격이 100에 가깝고, 하락하는 시장에서는 가격이 0에 가깝다는 전제에 기반하고 있습니다. 이 인디케이터는 매수 또는 매도 차이를 식별하는 데 사용됩니다.
-- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxforceindexindicatorcomponent.html)(FII)는 금융 분석가들이 주식 추세가 긍정적인지 부정적인지를 판단하기 위해 사용하는 가격 및 볼륨 오실레이터입니다. 강도 지수는 오늘 종가에서 어제 종가를 뺀 다음 그 차액을 현재 날짜의 볼륨과 곱하여 계산합니다. 오늘 종가가 어제보다 높은 경우에는 강도는 긍정적입니다. 종가가 어제보다 낮은 경우에는 강도는 부정적입니다.
-- [`IgxFullStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfullstochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)와 유사하지만 시간대 사용자 지정이 가능합니다.
-- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 효율성 측정을 위해 분석에 가격과 볼륨을 결합합니다. 낮은 가격과 높은 가격의 차이를 볼륨으로 나누어 계산됩니다.
-- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmassindexindicatorcomponent.html)(MII)는 추세 역전을 찾는 데 사용됩니다. 가격 범위가 넓어지면 반전이 일어날 수 있다는 전제에 기반하고 있습니다. 이 계산은 이전 거래 범위(하이 마이너스 로우)를 비교합니다. EMA는 이러한 용도로 사용됩니다. 이 인디케이터는 상당한 움직임이 있으면 증가하고 작은 움직임이 있으면 감소하며
-- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmedianpriceindicatorcomponent.html)(MPI)는 고가와 저가 사이의 중간점을 나타냅니다. 중간값은 중심 경향의 척도입니다. 이 인디케이터는 중간값의 차트를 표시합니다.
-- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 모멘텀 지표로 상대 강도 지수(RSI)와 유사하며, MFI는 증권에 들어오고 나가는 자금 흐름의 척도로 사용되며 추세 역전을 예측하는 데 사용할 수 있습니다. MFI 범위는 0~100까지이며 RSI처럼 해석됩니다.
-- [`IgxMovingAverageConvergenceDivergenceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmovingaverageconvergencedivergenceindicatorcomponent.html)(MACD)는 금융 서비스에서 가장 대표적인 인디케이터 중 하나입니다. 주가 추세의 강도, 방향, 모멘텀 또는 길이 변화를 파악하는 데 사용됩니다. MACD는 종가의 두 지수 이동 평균(EMA)의 차이로 계산됩니다. 그 차이는 시간 경과에 따라 차이의 이동 평균으로 차트화됩니다.
-- [`IgxNegativeVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnegativevolumeindexindicatorcomponent.html)(NVI)는 [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)와 함께 자주 사용됩니다. 이 인디케이터는 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
-- [`IgxOnBalanceVolumeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxonbalancevolumeindicatorcomponent.html)(OBV)는 주식의 총 판매량의 누계를 계산하고 해당 주식의 유입(구매) 또는 유출(판매) 여부를 표시합니다. 하루 동안의 총 판매량은 전날보다 가격이 높았는지 낮았는지에 따라 양수 또는 음수 값이 부여됩니다. 높은 종가는 양수 값을 산출하고, 낮은 종가는 음수 값을 발생합니다. 이 값은 누계에 누적됩니다.
-- [`IgxPercentagePriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagepriceoscillatorindicatorcomponent.html)(PPO)는 두 이동 평균 사이의 차이를 보여줍니다. 이 차이는 큰 이동 평균의 백분율로 표시됩니다. 최종 사용자는 분석 기간을 선택합니다.
-- [`IgxPercentageVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagevolumeoscillatorindicatorcomponent.html)(PVO)는 장기 및 단기 기간을 사용하여 완만해진 볼륨 사이의 백분율 차이입니다. 이 인디케이터는 0을 중심으로 맴돕니다. 사용자는 분석할 다양한 기간 값을 선택할 수 있습니다. 이 인디케이터는 그래픽으로 표시하면 볼륨 패턴을 감지하는 데 유용할 수 있습니다. PVO가 증가하면 볼륨 수준이 증가하고, PVO가 감소하면 볼륨 수준이 감소함을 나타냅니다.
-- [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)(PVI)는 네거티브 볼륨 인덱스와 함께 사용되며 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
-- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
-- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
-- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html)(RSI)는 일반적으로 특정 기간 동안 종가에 따라 산출된 시장 강세/약세의 측정에 사용됩니다. 가격은 시장이 강세 기간일 때 높고, 약세 기간일 때 낮다는 전제에 기반하고 있습니다. RSI는 최고치 대 최저치의 비율입니다. 범위는 0~100입니다.
-- [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)(SSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 구매 또는 판매 차이를 파악하는 데 사용되며, 이동 평균(SMA)에 3일 기간을 사용합니다.
-- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstandarddeviationindicatorcomponent.html)(SDI)는 주가나 변동성의 통계적 변이성을 측정합니다. 개인 증권의 종가와 평균 증권의 종가 차이를 분산이라고 합니다. 분산이 클수록 표준 편차는 더 커지며 따라서 변동성이 커집니다. 분산이 작을수록(개인 종가와 평균 가격의 차이) 표준 편차가 작아지고 가격 변동성이 낮아집니다.
-- [`IgxStochRSIIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstochrsiindicatorcomponent.html)(SRSI)는 특정 기간 내에 증권을 과도하게 구매하거나 초과 판매할 경우에 측정합니다. 값 범위는 0~1입니다. 이 인디케이터는 [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html) (RSI) 데이터에 스탁캐스틱 오실레이터 수식을 적용하여 계산합니다.
-- [`IgxTRIXIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtrixindicatorcomponent.html)(TRIX)는 과다 매입 또는 과다 매도된 증권을 식별하는 데 사용되는 모멘텀 측정입니다. 다른 오실레이터와 마찬가지로 TRIX 점수도 0을 중심으로 맴돕니다. 양수 값은 과다 매입된 증권을 나타내며, 음수 값은 과다 매도된 증권을 나타냅니다. TRIX는 특정 기간 동안 가격의 3배 지수 이동 평균을 사용하여 계산합니다. 신호 라인은 증권 가격이 향후 어디에 위치 할지를 나타내는 데 자주 사용됩니다.
-- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)(TPI)는 특정 기간 동안 증권의 고가, 저가 및 종가의 산술 평균을 나타내는 일반적인 금융 피벗 포인트입니다.
-- [`IgxUltimateOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxultimateoscillatorindicatorcomponent.html)(UOI)는 단일 기간을 기준으로 하는 다른 인디케이터와 관련된 변동성과 노이즈를 줄이기 위해 3가지 다른 기간의 가중 평균을 사용합니다. 이것은 범위 제한 인디케이터이므로 지수는 0~100입니다.
-- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxweightedcloseindicatorcomponent.html)(WCI)는 하루 동안의 고가, 저가 및 종가 평균을 나타내는 점에서 [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)와 유사합니다. 단, 이 인디케이터는 종가에 더 중점을 두며 산술 평균을 계산할 때 2번 포함됩니다.
-- [`IgxWilliamsPercentRIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxwilliamspercentrindicatorcomponent.html)(WPRI)는 스탁캐스틱 오실레이터와 유사합니다. 단, 비율 범위는 0~-100입니다. 과다 매입 및 과다 매도 증권을 식별하는 데 유용합니다. 이 인디케이터는 해당 기간의 가장 높은 최고치와 해당 기간의 가장 높은 최고치에서 가장 낮은 최저치를 뺀 값의 현재 종가 사이의 차이로 나누어 계산합니다.
+- [`IgxAbsoluteVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxabsolutevolumeoscillatorindicatorcomponent.html)(AVO)는 2개의 평균 볼륨 측정값의 차이를 계산합니다. 백분율 볼륨 오실레이터와 유사하지만 점수 범위는 -100%~+100%입니다. 인디케이터는 볼륨 추세가 증가하는지 또는 감소하는지 식별하는 데 사용됩니다. 사용자는 분석 기간을 선택할 수 있으며
+- [`IgxAccumulationDistributionIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaccumulationdistributionindicatorcomponent.html)(ADI)는 매우 인기 있는 볼륨 관련 인디케이터입니다. 투자자가 매도 또는 매수에 대한 차이를 살펴봄으로써 주식, 증권 또는 지수의 공급 및 수요를 시간 경과에 따라 평가하며
+- [`IgxAverageDirectionalIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragedirectionalindexindicatorcomponent.html) | (ADX)는 추세 방향에 상관없이 추세 강도를 측정합니다. 이 인디케이터는 일반적으로 주식 동향의 강도와 방향을 결정하는 데 사용되며
+- [`IgxAverageTrueRangeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaveragetruerangeindicatorcomponent.html) | (ATR)는 주어진 기간 내에 증권의 가격 이동이나 변동성을 측정합니다. 이 인디케이터는 가격 방향이나 지속 기간의 측정이 아니라 가격 이동 또는 변동성의 양입니다. 평균 참 범위(ATR)은 종종 매일, 매주 또는 매월을 포함한 여러 기준을 사용하여 14일 기간을 주기로 계산됩니다. 평균 참 범위는 지난 14일 기간의 TR 값의 지수 이동 평균입니다. 실제 사용된 기간은 사용자 선호에 따라 다를 수 있으며
+- [`IgxBollingerBandWidthIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandwidthindicatorcomponent.html) | (BBW)는 [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 함께 사용됩니다. 이 인디케이터는 주어진 점에서 볼링거 밴드 폭을 나타냅니다. 편차가 클수록 밴드가 넓어집니다. 대역폭(하한값)을 줄이면 표준 편차가 줄어들고 대역폭(상한값)을 넓히면 가격의 표준 편차가 증가함을 나타냅니다. [`IgxBollingerBandsOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbollingerbandsoverlaycomponent.html)와 같은 계수 인자를 지원하여 값을 일치시킬 수 있으며
+- [`IgxChaikinVolatilityIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinvolatilityindicatorcomponent.html)(CHV)는 특정 기간 동안의 고가 및 저가 가격 차이의 지수 이동 평균의 변화율을 보여줌으로써 증권의 변동성을 반영합니다.
+- [`IgxChaikinOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxchaikinoscillatorindicatorcomponent.html)(COI)는 누적/분포 인디케이터의 추세를 식별하는 데 사용됩니다. 체킨 오실레이터는 누적/분포 인디케이터의 3일 지수 이동 평균(EMA)에서 뺀 누적/분포 인디케이터의 10일 EMA입니다.
+- [`IgxCommodityChannelIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcommoditychannelindexindicatorcomponent.html)(CCI)는 증권의 주기적 추세를 파악하는 데 사용됩니다. 이 인디케이터는 증권 가격이 식별할 수 있는 주기에 따라 변한다는 가정에 기초한 것입니다. 특정 기간 동안의 표준 가격(SMATP)의 단순 이동 평균(SMA)과 이전 기간의 표준 가격(TP)의 차이를 상수와 절대 평균 편차의 곱으로 나눠 계산한 것입니다.
+- [`IgxDetrendedPriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdetrendedpriceoscillatorindicatorcomponent.html) (DPO)는 단기 추세를 파악하기 위해 장기 가격 동향을 제어하도록 설계되었습니다. 이것은 이동 평균의 변화에 의한 것이며 모멘텀 오실레이터가 아닙니다.
+- [`IgxEaseOfMovementIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxeaseofmovementindicatorcomponent.html)(EOM)는 증권 가격 변동에 필요한 볼륨을 파악하는 데 사용됩니다. 일반적으로 이동 평균으로 부드럽게 처리됩니다.
+- [`IgxFastStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfaststochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 스탁캐스틱 오실레이터의 3가지 유형: 패스트, 슬로우, 풀. 이 인디케이터는 0~100 비율을 사용하여 특정 기간 동안 고/저 범위에 비례한 현재 마감가의 관계를 나타내는 모멘텀 인디케이터입니다. 상승하는 시장에서는 가격이 100에 가깝고, 하락하는 시장에서는 가격이 0에 가깝다는 전제에 기반하고 있습니다. 이 인디케이터는 매수 또는 매도 차이를 식별하는 데 사용됩니다.
+- [`IgxForceIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxforceindexindicatorcomponent.html)(FII)는 금융 분석가들이 주식 추세가 긍정적인지 부정적인지를 판단하기 위해 사용하는 가격 및 볼륨 오실레이터입니다. 강도 지수는 오늘 종가에서 어제 종가를 뺀 다음 그 차액을 현재 날짜의 볼륨과 곱하여 계산합니다. 오늘 종가가 어제보다 높은 경우에는 강도는 긍정적입니다. 종가가 어제보다 낮은 경우에는 강도는 부정적입니다.
+- [`IgxFullStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxfullstochasticoscillatorindicatorcomponent.html)(FSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)와 유사하지만 시간대 사용자 지정이 가능합니다.
+- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 효율성 측정을 위해 분석에 가격과 볼륨을 결합합니다. 낮은 가격과 높은 가격의 차이를 볼륨으로 나누어 계산됩니다.
+- [`IgxMassIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmassindexindicatorcomponent.html)(MII)는 추세 역전을 찾는 데 사용됩니다. 가격 범위가 넓어지면 반전이 일어날 수 있다는 전제에 기반하고 있습니다. 이 계산은 이전 거래 범위(하이 마이너스 로우)를 비교합니다. EMA는 이러한 용도로 사용됩니다. 이 인디케이터는 상당한 움직임이 있으면 증가하고 작은 움직임이 있으면 감소하며
+- [`IgxMedianPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmedianpriceindicatorcomponent.html)(MPI)는 고가와 저가 사이의 중간점을 나타냅니다. 중간값은 중심 경향의 척도입니다. 이 인디케이터는 중간값의 차트를 표시합니다.
+- [`IgxMarketFacilitationIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmarketfacilitationindexindicatorcomponent.html)(MFI)는 모멘텀 지표로 상대 강도 지수(RSI)와 유사하며, MFI는 증권에 들어오고 나가는 자금 흐름의 척도로 사용되며 추세 역전을 예측하는 데 사용할 수 있습니다. MFI 범위는 0~100까지이며 RSI처럼 해석됩니다.
+- [`IgxMovingAverageConvergenceDivergenceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxmovingaverageconvergencedivergenceindicatorcomponent.html)(MACD)는 금융 서비스에서 가장 대표적인 인디케이터 중 하나입니다. 주가 추세의 강도, 방향, 모멘텀 또는 길이 변화를 파악하는 데 사용됩니다. MACD는 종가의 두 지수 이동 평균(EMA)의 차이로 계산됩니다. 그 차이는 시간 경과에 따라 차이의 이동 평균으로 차트화됩니다.
+- [`IgxNegativeVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnegativevolumeindexindicatorcomponent.html)(NVI)는 [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)와 함께 자주 사용됩니다. 이 인디케이터는 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
+- [`IgxOnBalanceVolumeIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxonbalancevolumeindicatorcomponent.html)(OBV)는 주식의 총 판매량의 누계를 계산하고 해당 주식의 유입(구매) 또는 유출(판매) 여부를 표시합니다. 하루 동안의 총 판매량은 전날보다 가격이 높았는지 낮았는지에 따라 양수 또는 음수 값이 부여됩니다. 높은 종가는 양수 값을 산출하고, 낮은 종가는 음수 값을 발생합니다. 이 값은 누계에 누적됩니다.
+- [`IgxPercentagePriceOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagepriceoscillatorindicatorcomponent.html)(PPO)는 두 이동 평균 사이의 차이를 보여줍니다. 이 차이는 큰 이동 평균의 백분율로 표시됩니다. 최종 사용자는 분석 기간을 선택합니다.
+- [`IgxPercentageVolumeOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpercentagevolumeoscillatorindicatorcomponent.html)(PVO)는 장기 및 단기 기간을 사용하여 완만해진 볼륨 사이의 백분율 차이입니다. 이 인디케이터는 0을 중심으로 맴돕니다. 사용자는 분석할 다양한 기간 값을 선택할 수 있습니다. 이 인디케이터는 그래픽으로 표시하면 볼륨 패턴을 감지하는 데 유용할 수 있습니다. PVO가 증가하면 볼륨 수준이 증가하고, PVO가 감소하면 볼륨 수준이 감소함을 나타냅니다.
+- [`IgxPositiveVolumeIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpositivevolumeindexindicatorcomponent.html)(PVI)는 네거티브 볼륨 인덱스와 함께 사용되며 불 마켓을 파악하는 데 사용할 수 있습니다. 이 두 인디케이터는 적은 볼륨의 날에 스마트 머니 거래를 하며, 많은 볼륨의 날에 정보가 부족하거나 지나치게 낙관적인 투자자가 거래한다는 전제에 기반하고 있습니다.
+- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
+- [`IgxPriceVolumeTrendIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpricevolumetrendindicatorcomponent.html)(PVT)는 일일 볼륨의 일부를 더하거나 빼서 금전 흐름을 측정하는 데 사용되는 모멘텀 기반의 인디케이터입니다. 이 가산 또는 감산 값은 전날 종가 대비 현재 날의 가격 상승 또는 하락 량에 따라 달라집니다. 이 인디케이터는 주로 추세를 확인하는 데 사용되며 또한 차이로 인해 발생할 수 있는 거래 신호를 포착하기 위해 사용됩니다.
+- [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html)(RSI)는 일반적으로 특정 기간 동안 종가에 따라 산출된 시장 강세/약세의 측정에 사용됩니다. 가격은 시장이 강세 기간일 때 높고, 약세 기간일 때 낮다는 전제에 기반하고 있습니다. RSI는 최고치 대 최저치의 비율입니다. 범위는 0~100입니다.
+- [`IgxSlowStochasticOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxslowstochasticoscillatorindicatorcomponent.html)(SSO)는 특정 기간 동안 고-저 범위에 비례하여 종가를 표시합니다. 이 인디케이터는 구매 또는 판매 차이를 파악하는 데 사용되며, 이동 평균(SMA)에 3일 기간을 사용합니다.
+- [`IgxStandardDeviationIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstandarddeviationindicatorcomponent.html)(SDI)는 주가나 변동성의 통계적 변이성을 측정합니다. 개인 증권의 종가와 평균 증권의 종가 차이를 분산이라고 합니다. 분산이 클수록 표준 편차는 더 커지며 따라서 변동성이 커집니다. 분산이 작을수록(개인 종가와 평균 가격의 차이) 표준 편차가 작아지고 가격 변동성이 낮아집니다.
+- [`IgxStochRSIIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstochrsiindicatorcomponent.html)(SRSI)는 특정 기간 내에 증권을 과도하게 구매하거나 초과 판매할 경우에 측정합니다. 값 범위는 0~1입니다. 이 인디케이터는 [`IgxRelativeStrengthIndexIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrelativestrengthindexindicatorcomponent.html) (RSI) 데이터에 스탁캐스틱 오실레이터 수식을 적용하여 계산합니다.
+- [`IgxTRIXIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtrixindicatorcomponent.html)(TRIX)는 과다 매입 또는 과다 매도된 증권을 식별하는 데 사용되는 모멘텀 측정입니다. 다른 오실레이터와 마찬가지로 TRIX 점수도 0을 중심으로 맴돕니다. 양수 값은 과다 매입된 증권을 나타내며, 음수 값은 과다 매도된 증권을 나타냅니다. TRIX는 특정 기간 동안 가격의 3배 지수 이동 평균을 사용하여 계산합니다. 신호 라인은 증권 가격이 향후 어디에 위치 할지를 나타내는 데 자주 사용됩니다.
+- [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)(TPI)는 특정 기간 동안 증권의 고가, 저가 및 종가의 산술 평균을 나타내는 일반적인 금융 피벗 포인트입니다.
+- [`IgxUltimateOscillatorIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxultimateoscillatorindicatorcomponent.html)(UOI)는 단일 기간을 기준으로 하는 다른 인디케이터와 관련된 변동성과 노이즈를 줄이기 위해 3가지 다른 기간의 가중 평균을 사용합니다. 이것은 범위 제한 인디케이터이므로 지수는 0~100입니다.
+- [`IgxWeightedCloseIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxweightedcloseindicatorcomponent.html)(WCI)는 하루 동안의 고가, 저가 및 종가 평균을 나타내는 점에서 [`IgxTypicalPriceIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxtypicalpriceindicatorcomponent.html)와 유사합니다. 단, 이 인디케이터는 종가에 더 중점을 두며 산술 평균을 계산할 때 2번 포함됩니다.
+- [`IgxWilliamsPercentRIndicatorComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxwilliamspercentrindicatorcomponent.html)(WPRI)는 스탁캐스틱 오실레이터와 유사합니다. 단, 비율 범위는 0~-100입니다. 과다 매입 및 과다 매도 증권을 식별하는 데 유용합니다. 이 인디케이터는 해당 기간의 가장 높은 최고치와 해당 기간의 가장 높은 최고치에서 가장 낮은 최저치를 뺀 값의 현재 종가 사이의 차이로 나누어 계산합니다.
## 필요한 축
@@ -78,10 +78,10 @@ _language: kr
금융 시리즈, 인디케이터 및 오버레이의 데이터 요구 사항은 다음과 같습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 금융 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 금융 축의 `라벨` 속성(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 금융 시리즈의 속성을 사용하여 매핑해야 하는 5개의 숫자 데이터 열을 이 포함되어 있어야 함: `OpenMemberPath`, `HighMemberPath`, `LowMemberPath`, `CloseMemberPath`, `VolumeMemberPath`
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 금융 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 금융 축의 `라벨` 속성(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 금융 시리즈의 속성을 사용하여 매핑해야 하는 5개의 숫자 데이터 열을 이 포함되어 있어야 함: `OpenMemberPath`, `HighMemberPath`, `LowMemberPath`, `CloseMemberPath`, `VolumeMemberPath`
[SampleFinancialData](data-chart-data-sources-financial.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -165,12 +165,12 @@ import { IgxDataChartCoreModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 주석](data-chart-series-annotations.md)
-- [시리즈 강조 표시](data-chart-series-highlighting.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 주석](data-chart-series-annotations.md)
+- [시리즈 강조 표시](data-chart-series-highlighting.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-polar-series.md b/docs/angular/src/content/kr/components/data-chart-type-polar-series.md
index 15cc123c12..17eed1a77f 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-polar-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-polar-series.md
@@ -49,9 +49,9 @@ _language: kr
폴라 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 폴라 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 폴라 시리즈의 `AngleMemberPath` 및 `RadiusMemberPath` 속성(예: [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpolarareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 폴라 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 폴라 시리즈의 `AngleMemberPath` 및 `RadiusMemberPath` 속성(예: [`IgxPolarAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxpolarareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
폴라 좌표계의 데이터 점의 위치는 "극"이라고 하는 고정 방향에서의 각도(각도 좌표)와 고정점(데카르트 좌표의 원점과 유사)에서의 거리(반경 좌표)로 결정됩니다. 극에서 시작하여 바깥 쪽을 향하는 선은 각도 축의 격자선([`IgxNumericAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnumericangleaxiscomponent.html))이며, 극을 둘러싸는 동심원은 반경 축의 격자선([`IgxNumericRadiusAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxnumericradiusaxiscomponent.html))입니다
@@ -118,8 +118,8 @@ import { IgxDataChartPolarModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-radial-series.md b/docs/angular/src/content/kr/components/data-chart-type-radial-series.md
index da5039ca53..7bebbb2332 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-radial-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-radial-series.md
@@ -46,10 +46,10 @@ _language: kr
레이디얼 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 레이디얼 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryangleaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxradialareaseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 레이디얼 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryAngleAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryangleaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 카테고리 시리즈(예: [`IgxRadialAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxradialareaseriescomponent.html))의 `ValueMemberPath` 속성을 사용하여 매핑하는 숫자 데이터 열이 하나 이상 있어야 합니다
[SampleRadialData](data-chart-data-sources-radial.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -113,8 +113,8 @@ import { IgxDataChartRadialModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-range-series.md b/docs/angular/src/content/kr/components/data-chart-type-range-series.md
index f4f28679cd..b2c208feac 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-range-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-range-series.md
@@ -41,10 +41,10 @@ _language: kr
범위 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 범위 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는 범위 시리즈의 `HighMemberPath` 및 `LowMemberPath` 속성(예: [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrangeareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 범위 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`IgxLabelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxlabelcomponent.html) 속성에 매핑해야 하는 하나 이상의 라벨 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는 범위 시리즈의 `HighMemberPath` 및 `LowMemberPath` 속성(예: [`IgxRangeAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxrangeareaseriescomponent.html))을 사용하여 매핑하는 숫자 데이터 열이 2개 이상 있어야 합니다
[SampleRangeData](data-chart-data-sources-range.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -105,12 +105,12 @@ import { IgxDataChartCategoryModule } from 'igniteui-angular-charts';
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 주석](data-chart-series-annotations.md)
-- [시리즈 강조 표시](data-chart-series-highlighting.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 주석](data-chart-series-annotations.md)
+- [시리즈 강조 표시](data-chart-series-highlighting.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md
index 9be5e235e9..9692c20bbf 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-area-series.md
@@ -27,9 +27,9 @@ _language: kr
[`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html#colormemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`colorMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html#colormemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
[SampleScatterData](data-chart-data-sources-scatter.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -96,13 +96,13 @@ export class AppModule { /* ... */ }
다음 표에는 [`IgxScatterAreaSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterareaseriescomponent.html)의 면 채색에 영향을 주는 [`IgxCustomPaletteColorScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html)의 속성이 열거되어 있습니다 .
-- [`palette`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#palette)는 선택하거나 보간하는 컬러의 컬렉션을 설정합니다.
-- [`interpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#interpolationmode)는 팔레트에서 컬러를 가져오는 메소드를 설정합니다.
-- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#maximumvalue)는 컬러를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
-- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#minimumvalue)는 컬러를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
+- [`palette`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#palette)는 선택하거나 보간하는 컬러의 컬렉션을 설정합니다.
+- [`interpolationMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#interpolationmode)는 팔레트에서 컬러를 가져오는 메소드를 설정합니다.
+- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#maximumvalue)는 컬러를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
+- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettecolorscalecomponent.html#minimumvalue)는 컬러를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md
index 967232fd3d..3b176ecfc3 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-bubble-series.md
@@ -28,9 +28,9 @@ _language: kr
[`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html#radiusmemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`radiusMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html#radiusmemberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다
[SampleScatterStats](data-chart-data-sources-stats.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -114,15 +114,15 @@ export class AppModule { /* ... */ }
`FillScale`은 단일 [`IgxBubbleSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxbubbleseriescomponent.html) 내의 컬러 패턴을 결정하는 옵션 기능입니다. 이 시리즈는 다음과 같은 채우기 비율을 지원합니다:
-- [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)은 `FillMemberPath` 속성에 매핑된 데이터 열의 값 집합을 사용하여 버블의 보간 브러시를 결정합니다. 또한, 사용자가 지정한 [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue) 및 [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)를 가질 수 있습니다. 이 비율로 범위를 설정하면 범위 밖에 있는 값을 가진 버블은 `Brushes` 컬렉션으로부터 브러시를 얻지 못하고 컬러도 없습니다.
-- [`IgxCustomPaletteBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html)은 버블 마커의 인덱스를 사용하여 `Brushes` 컬렉션으로부터 브러시를 선택합니다. [`brushSelectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html#brushselectionmode) 속성을 `Select` enumerable 값으로 설정하면 버블이 순차적으로 색칠되어 `Interpolate`로 설정되고, 브러시는 버블의 인덱스와 컬렉션의 브러시 수에 따라 보간됩니다.
+- [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)은 `FillMemberPath` 속성에 매핑된 데이터 열의 값 집합을 사용하여 버블의 보간 브러시를 결정합니다. 또한, 사용자가 지정한 [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue) 및 [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)를 가질 수 있습니다. 이 비율로 범위를 설정하면 범위 밖에 있는 값을 가진 버블은 `Brushes` 컬렉션으로부터 브러시를 얻지 못하고 컬러도 없습니다.
+- [`IgxCustomPaletteBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html)은 버블 마커의 인덱스를 사용하여 `Brushes` 컬렉션으로부터 브러시를 선택합니다. [`brushSelectionMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcustompalettebrushscalecomponent.html#brushselectionmode) 속성을 `Select` enumerable 값으로 설정하면 버블이 순차적으로 색칠되어 `Interpolate`로 설정되고, 브러시는 버블의 인덱스와 컬렉션의 브러시 수에 따라 보간됩니다.
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md
index b17be71054..ad58694c43 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-contour-series.md
@@ -28,9 +28,9 @@ _language: kr
[`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html)에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html#valuememberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath`, `YMemberPath` 및 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html#valuememberpath) 속성에 매핑되는 3개의 숫자 데이터 열이 있어야 합니다.
[SampleScatterData](data-chart-data-sources-scatter.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -95,9 +95,9 @@ export class AppModule { /* ... */ }
제공된 [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html) 클래스는 대부분의 착색 요구 사항을 만족시킬 수 있지만 이 클래스에서 상속하고 독자적인 착색 논리를 제공할 수 있습니다. 다음 표에는 [`IgxScatterContourSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscattercontourseriescomponent.html)의 면 채색에 영향을 주는 [`IgxValueBrushScaleComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html)의 속성이 열거되어 있습니다:
-- `Brushes`는 등고선을 채우기 위한 브러시 컬렉션을 설정합니다.
-- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)는 브러시를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
-- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue)는 브러시를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
+- `Brushes`는 등고선을 채우기 위한 브러시 컬렉션을 설정합니다.
+- [`maximumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#maximumvalue)는 브러시를 할당할 수 있는 상한값을 설정합니다. 지정한 값이 이 값보다 큰 경우에는 투명하게 됩니다.
+- [`minimumValue`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxvaluebrushscalecomponent.html#minimumvalue)는 브러시를 할당할 수 있는 최소값을 설정합니다. 지정한 값이 이 값보다 작은 경우에는 투명하게 됩니다.
## 등고선 값 리졸버
@@ -107,6 +107,6 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md b/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md
index 3a085d7702..47d888369b 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-scatter-point-series.md
@@ -43,9 +43,9 @@ _language: kr
분산 마커 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 `XMemberPath` 및 `YMemberPath` 속성에 매핑되는 2개의 숫자 데이터 열이 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 `XMemberPath` 및 `YMemberPath` 속성에 매핑되는 2개의 숫자 데이터 열이 있어야 합니다
[SampleScatterStats](data-chart-data-sources-stats.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -123,10 +123,10 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 도구 설명](data-chart-series-tooltips.md)
-- [시리즈 추세선](data-chart-series-trendlines.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 도구 설명](data-chart-series-tooltips.md)
+- [시리즈 추세선](data-chart-series-trendlines.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-shape-series.md b/docs/angular/src/content/kr/components/data-chart-type-shape-series.md
index 4cdabffef4..1f97aa1ee1 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-shape-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-shape-series.md
@@ -43,9 +43,9 @@ _language: kr
분산 모양 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 분산 모양 시리즈의 `ShapeMemberPath` 속성(예: [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterpolygonseriescomponent.html))에 매핑되어야 하는 하나의 모양 데이터 열(배열 또는 X/Y 좌표 배열)이 있어야 합니다
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 분산형 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 분산 모양 시리즈의 `ShapeMemberPath` 속성(예: [`IgxScatterPolygonSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxscatterpolygonseriescomponent.html))에 매핑되어야 하는 하나의 모양 데이터 열(배열 또는 X/Y 좌표 배열)이 있어야 합니다
[SampleShapeData](data-chart-data-sources-shape.md)는 위의 데이터 요구 사항을 충족하는 데이터 소스로 사용할 수 있습니다.
@@ -106,8 +106,8 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md b/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md
index c792a0dc85..586f4d34bd 100644
--- a/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md
+++ b/docs/angular/src/content/kr/components/data-chart-type-stacked-series.md
@@ -65,10 +65,10 @@ namespace: Infragistics.Controls.Charts
스택 시리즈에는 다음과 같은 데이터 요구 사항이 있습니다:
-- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
-- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 스택 시리즈를 렌더링하지 않습니다.
-- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaxiscomponent.html#label) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
-- 모든 데이터 항목에는스택 시리즈의 `시리즈` 컬렉션에 추가할 [`IgxStackedFragmentSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html)의 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html#valuememberpath) 속성을 사용하여 매핑해야 하는 숫자 데이터 열이 적어도 하나 이상 포함되어야 합니다.
+- 데이터 소스는 배열 또는 데이터 항목 목록이어야 함
+- 데이터 소스에는 하나 이상의 데이터 항목이 포함되어야 하며 그렇지 않을 경우에는 차트가 스택 시리즈를 렌더링하지 않습니다.
+- 모든 데이터 항목에는 카테고리 축(예: [`IgxCategoryXAxisComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxcategoryxaxiscomponent.html))의 [`label`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxaxiscomponent.html#label) 속성에 매핑해야 하는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어 있어야 함
+- 모든 데이터 항목에는스택 시리즈의 `시리즈` 컬렉션에 추가할 [`IgxStackedFragmentSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html)의 [`valueMemberPath`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxstackedfragmentseriescomponent.html#valuememberpath) 속성을 사용하여 매핑해야 하는 숫자 데이터 열이 적어도 하나 이상 포함되어야 합니다.
## 필요한 모듈
diff --git a/docs/angular/src/content/kr/components/data-chart.md b/docs/angular/src/content/kr/components/data-chart.md
index f84007385c..259a3078e1 100644
--- a/docs/angular/src/content/kr/components/data-chart.md
+++ b/docs/angular/src/content/kr/components/data-chart.md
@@ -24,8 +24,8 @@ _language: kr
차트 패키지를 설치할 때 코어 패키지도 설치해야 합니다.
-- **npm install --save igniteui-angular-core**
-- **npm install --save igniteui-angular-charts**
+- **npm install --save igniteui-angular-core**
+- **npm install --save igniteui-angular-charts**
## 필요한 모듈
@@ -104,9 +104,9 @@ export class AppModule { /* ... */ }
## 추가 리소스
-- [축 유형](data-chart-axis-types.md)
-- [축 공유](data-chart-axis-sharing.md)
-- [축 설정](data-chart-axis-settings.md)
-- [차트 범례](data-chart-legends.md)
-- [시리즈 마커](data-chart-series-markers.md)
-- [시리즈 유형](data-chart-series-types.md)
+- [축 유형](data-chart-axis-types.md)
+- [축 공유](data-chart-axis-sharing.md)
+- [축 설정](data-chart-axis-settings.md)
+- [차트 범례](data-chart-legends.md)
+- [시리즈 마커](data-chart-series-markers.md)
+- [시리즈 유형](data-chart-series-types.md)
diff --git a/docs/angular/src/content/kr/components/date-picker.md b/docs/angular/src/content/kr/components/date-picker.md
index eb7e4c59db..530c6824d1 100644
--- a/docs/angular/src/content/kr/components/date-picker.md
+++ b/docs/angular/src/content/kr/components/date-picker.md
@@ -56,22 +56,27 @@ public date = new Date(2000, 0, 1);
```
If a string is bound to the picker, it needs to be a date-only string in the `ISO 8601` format:
+
```html
```
+
}
모든 것이 잘 진행되었다면 다음과 같이 열 숨기기 UI 컴포넌트가 표시됩니다:
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -423,43 +444,43 @@ export class AppModule {}
열 숨기기 UI에는 아래에 나열된 몇 가지 API가 추가로 포함되어 있습니다.
-* [IgxColumnHidingComponent]({environment:angularApiUrl}/classes/igxcolumnhidingcomponent.html)
-* [IgxColumnHidingComponent 스타일]({environment:sassApiUrl}/themes#function-igx-column-hiding-theme)
+- [IgxColumnHidingComponent]({environment:angularApiUrl}/classes/igxcolumnhidingcomponent.html)
+- [IgxColumnHidingComponent 스타일]({environment:sassApiUrl}/themes#function-igx-column-hiding-theme)
사용된 상대 API가 있는 추가 컴포넌트 및/또는 지시문:
[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) 속성:
-* [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding)
+- [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding)
[`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) 속성:
-* [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress)
+- [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress)
[`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) 메소드:
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 이벤트:
-* [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged)
+- [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged)
[IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html)
스타일:
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxRadioComponent 스타일]({environment:sassApiUrl}/themes#function-radio-theme)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxRadioComponent 스타일]({environment:sassApiUrl}/themes#function-radio-theme)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [필터링](filtering.md)
-* [페이징](paging.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [필터링](filtering.md)
+- [페이징](paging.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
@@if (igxName !== 'IgxHierarchicalGrid') {* [검색](search.md)}
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/column-moving.md b/docs/angular/src/content/kr/grids_templates/column-moving.md
index 5e1cb8721b..ebe812b8f5 100644
--- a/docs/angular/src/content/kr/grids_templates/column-moving.md
+++ b/docs/angular/src/content/kr/grids_templates/column-moving.md
@@ -46,24 +46,24 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -75,26 +75,32 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin
@@if (igxName === 'IgxGrid') {
+
```html
...
```
+
}
#### API
-In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically:
+In addition to the drag and drop functionality, the Column Moving feature also provides two API methods to allow moving a column/reordering columns programmatically:
[`moveColumn`]({environment:angularApiUrl}/classes/igxgridcomponent.html#movecolumn) - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `position` (representing a `DropPosition`({environment:angularApiUrl}/enums/dropposition.html) value), which determines whether to place the column before or after the target column.
@@ -114,15 +120,16 @@ const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
```
-Note that when using the API, only the [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true.
+Note that when using the API, only the [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the `moving` property to true.
#### 이벤트
-열의 드래그 앤드 드롭 조작을 설정하기 위해 열 이동과 관련된 복수의 이벤트가 제공됩니다. [`columnMovingStart`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingStart), [`columnMoving`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMoving) 및 [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd)가 있습니다.
+열의 드래그 앤드 드롭 조작을 설정하기 위해 열 이동과 관련된 복수의 이벤트가 제공됩니다. [`columnMovingStart`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingStart), [`columnMoving`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMoving) 및 [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd)가 있습니다.
[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) 이벤트를 처리하고 열을 새로운 위치로 드롭할 때 일부 사용자 논리를 구현할 수 있습니다. 예를 들면, Change On Year(%) 열 뒤에 카테고리 드롭을 취소할 수 있습니다.
@@if (igxName === 'IgxGrid') {
+
```html
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -56,6 +56,7 @@ A column or multiple columns can be pinned to the left-hand side of the Angular
@@if (igxName === 'IgxGrid') {
+
```html
@@ -66,8 +67,10 @@ A column or multiple columns can be pinned to the left-hand side of the Angular
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -84,32 +89,40 @@ A column or multiple columns can be pinned to the left-hand side of the Angular
```
+
}
@@igComponent의 [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 [`pinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pincolumn) 또는 [`unpinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#unpincolumn) 메소드를 사용하여 열을 필드 이름별로 핀 고정하거나 핀 고정 해제할 수도 있습니다:
@@if (igxName === 'IgxGrid') {
+
```typescript
this.grid.pinColumn("AthleteNumber");
this.grid.unpinColumn("Name");
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
this.treeGrid.pinColumn("Title");
this.treeGrid.unpinColumn("Name");
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
this.hierarchicalGrid.pinColumn("Artist");
this.hierarchicalGrid.unpinColumn("Debut");
```
+
}
두 메소드는 각각 조작이 성공했는지 여부를 나타내는 불 값을 반환합니다. 일반적인 실패 원인으로 열이 이미 원하는 상태인 경우가 있습니다. [`pinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pincolumn)은 결과가 핀 고정 영역이 @@igComponent 자체보다 크거나 같을 경우에도 실패합니다. 다음의 예제를 참조하십시오:
@@if (igxName === 'IgxGrid') {
+
```html
@@ -156,6 +171,7 @@ var succeed = this.hierarchicalGrid.pinColumn("Artist"); // pinning fails and su
열은 가장 오른쪽에 배치된 핀 고정된 열의 오른쪽에 핀 고정됩니다. [`columnPin`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnPin) 이벤트에서 이벤트 인수인 [`insertAtIndex`]({environment:angularApiUrl}/interfaces/ipincolumneventargs.html#insertatindex) 속성을 원하는 위치 인덱스로 변경하면 핀 고정 열의 순서를 변경할 수 있습니다.
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -237,8 +265,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -246,8 +274,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
@@if (igxName === 'IgxTreeGrid') {
-
@@ -336,6 +364,7 @@ This can be done by creating a header template for the column with a custom icon
```
+
}
On click of the custom icon the pin state of the related column can be changed using the column's API methods.
@@ -350,24 +379,24 @@ public toggleColumn(col: IgxColumnComponent) {
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -375,7 +404,7 @@ public toggleColumn(col: IgxColumnComponent) {
### 핀 고정 제한
-* 열 너비를 백분율(%)로 명시적으로 설정한 경우, 핀 고정 열이 있으면 @@igComponent 자체 및 헤드 내용이 바르게 정렬되지 않습니다. 열 핀 고정 기능이 제대로 작동하려면 열 너비가 픽셀(px)로 설정하거나 @@igComponent에 의해 자동 할당되어야 합니다.
+- 열 너비를 백분율(%)로 명시적으로 설정한 경우, 핀 고정 열이 있으면 @@igComponent 자체 및 헤드 내용이 바르게 정렬되지 않습니다. 열 핀 고정 기능이 제대로 작동하려면 열 너비가 픽셀(px)로 설정하거나 @@igComponent에 의해 자동 할당되어야 합니다.
### 문제 해결
@@ -384,24 +413,25 @@ public toggleColumn(col: IgxColumnComponent) {
#### 경고
-* `@@igxName - 핀 고정 영역이 최대 핀 고정 폭을 초과합니다. 다음 열은 다른 문제를 방지하기 위해 핀 고정 해제되었습니다:... .` - 사용자가 처음에 너무 많은 핀 고정 열을 정의한 경우에 이 경고가 표시됩니다. 처음에 핀 고정된 열의 합계 너비는 @@igComponent 너비의 80%를 넘지 않아야 합니다. 그렇지 않으면 기본적으로 @@igComponent의 제한을 초과하지 않는 최초의 열(정의된 순서)을 취하고 나머지(경고에 나열된 열)는 핀 고정 해제됩니다. @@igComponent에서 핀 고정을 초기화하기 전에 [`columnInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnInit) 이벤트를 사용하여 초기화할 때 일부 열을 수동으로 핀 고정 해제할지 결정하기 위해 자체 논리를 실행할 수 있습니다. 각 열에 트리거됩니다.
+- `@@igxName - 핀 고정 영역이 최대 핀 고정 폭을 초과합니다. 다음 열은 다른 문제를 방지하기 위해 핀 고정 해제되었습니다:... .` - 사용자가 처음에 너무 많은 핀 고정 열을 정의한 경우에 이 경고가 표시됩니다. 처음에 핀 고정된 열의 합계 너비는 @@igComponent 너비의 80%를 넘지 않아야 합니다. 그렇지 않으면 기본적으로 @@igComponent의 제한을 초과하지 않는 최초의 열(정의된 순서)을 취하고 나머지(경고에 나열된 열)는 핀 고정 해제됩니다. @@igComponent에서 핀 고정을 초기화하기 전에 [`columnInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnInit) 이벤트를 사용하여 초기화할 때 일부 열을 수동으로 핀 고정 해제할지 결정하기 위해 자체 논리를 실행할 수 있습니다. 각 열에 트리거됩니다.
@@if (igxName === 'IgxGrid') {
-### Styling
+### Styling
-The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid.
In the below steps, we are going through the steps of customizing the grid's Pinning styling.
#### Importing global theme
To begin the customization of the Pinning feature, you need to import the `index` file, where all styling functions and mixins are located.
+
```scss
@import '~igniteui-angular/lib/core/styles/themes/index'
```
#### Defining custom theme
-Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired.
+Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired.
```scss
$custom-theme: grid-theme(
@@ -412,10 +442,10 @@ $custom-theme: grid-theme(
$cell-active-border-color: #FFCD0F
/* add other features properties here... */
);
-```
+```
#### Defining a custom color palette
-In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
+In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
`igx-palette` generates a color palette, based on provided primary and secondary colors.
```scss
@@ -426,9 +456,9 @@ $custom-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
-```
+```
-After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors.
+After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors.
```scss
@@ -438,13 +468,14 @@ $custom-theme: grid-theme(
$pinned-border-color: color($custom-palette, "secondary", 500),
$cell-active-border-color: color($custom-palette, "secondary", 500)
);
-```
+```
-The `$custom-theme` contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom `igx-palette` was used and the colors were obtained through its primary and secondary colors, with a given color variant.
+The `$custom-theme` contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom `igx-palette` was used and the colors were obtained through its primary and secondary colors, with a given color variant.
#### Defining custom schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
+
```scss
$custom-grid-schema: extend($_light-grid,(
pinned-border-width: 5px,
@@ -452,8 +483,10 @@ $custom-grid-schema: extend($_light-grid,(
pinned-border-color: color:("secondary", 500),
cell-active-border-color: color:("secondary", 500)
));
-```
-In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
+```
+
+In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
+
```scss
$my-custom-schema: extend($light-schema, (
igx-grid: $custom-grid-schema
@@ -465,7 +498,8 @@ $custom-theme: grid-theme(
```
#### Applying the custom theme
-The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+
```scss
@include grid($custom-theme);
```
@@ -478,7 +512,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
>[!NOTE]
>If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
>[!NOTE]
- >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component:
+ >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component:
```scss
:host {
@@ -487,34 +521,35 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
}
}
```
+
#### Demo
-
}
### API 참조
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/column-resizing.md b/docs/angular/src/content/kr/grids_templates/column-resizing.md
index 0dad02f56f..53e09d2c0c 100644
--- a/docs/angular/src/content/kr/grids_templates/column-resizing.md
+++ b/docs/angular/src/content/kr/grids_templates/column-resizing.md
@@ -2,7 +2,7 @@
---
title: 열 크기 조정 컴포넌트- 네이티브 Angular | Ignite UI for Angular
description: With deferred column resizing, see a temporary resize indicator while the drag operation is in effect with using the Ignite UI for Angular Column Resizing Component.
-keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Column Resizing, Deferred Column Reszing, Grid Column Resizing, Angular Grid Column Resizing, Angular Data Table Column Resizing
+keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Column Resizing, Deferred Column Resizing, Grid Column Resizing, Angular Grid Column Resizing, Angular Data Table Column Resizing
_language: kr
---
}
@@ -10,7 +10,7 @@ _language: kr
---
title: 열 크기 조정 컴포넌트- 네이티브 Angular | Ignite UI for Angular
description: With deferred column resizing, see a temporary resize indicator while the drag operation is in effect with using the Ignite UI for Angular Column Resizing Component.
-keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Tree Grid, Angular Tree Table, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular High Performance Tree Grid, Angular High Performance Tree Table, Column Resizing, Deferred Column Reszing, Tree Grid Column Resizing, Angular Tree Grid Column Resizing, Angular Tree Table Column Resizing
+keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Tree Grid, Angular Tree Table, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular High Performance Tree Grid, Angular High Performance Tree Table, Column Resizing, Deferred Column Resizing, Tree Grid Column Resizing, Angular Tree Grid Column Resizing, Angular Tree Table Column Resizing
_language: kr
---
}
@@ -18,7 +18,7 @@ _language: kr
---
title: 열 크기 조정 컴포넌트- 네이티브 Angular | Ignite UI for Angular
description: With deferred column resizing, see a temporary resize indicator while the drag operation is in effect with using the Ignite UI for Angular Column Resizing Component.
-keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Hierarchical Grid, Angular Hierarchical Table, Angular Hierarchical Grid component, Angular Hierarchical Table component, Angular Hierarchical Grid control, Angular Hierarchical Table control, Angular High Performance Hierarchical Grid, Angular High Performance Hierarchical Table, Column Resizing, Deferred Column Reszing, Hierarchical Grid Column Resizing, Angular Hierarchical Grid Column Resizing, Angular Hierarchical Table Column Resizing
+keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Hierarchical Grid, Angular Hierarchical Table, Angular Hierarchical Grid component, Angular Hierarchical Table component, Angular Hierarchical Grid control, Angular Hierarchical Table control, Angular High Performance Hierarchical Grid, Angular High Performance Hierarchical Table, Column Resizing, Deferred Column Resizing, Hierarchical Grid Column Resizing, Angular Hierarchical Grid Column Resizing, Angular Hierarchical Table Column Resizing
_language: kr
---
}
@@ -32,24 +32,24 @@ _language: kr
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -58,18 +58,23 @@ _language: kr
**열 크기 조정**은 열 단위 수준에서도 사용할 수 있는데 즉, [**@@igSelector**]({environment:angularApiUrl}/classes/@@igTypeDoc.html)에 크기를 조정 가능한 열 및 크기를 조정할 수 없는 열을 혼합하여 사용할 수 있습니다. 이는 [`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)의 [`resizable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#resizable) 입력을 통해 제어할 수 있습니다.
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
@@ -109,6 +118,7 @@ public onResize(event) {
...
```
+
```typescript
public onResize(event) {
this.col = event.column;
@@ -116,6 +126,7 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
}
#### Resizing columns in pixels/percentages
@@ -125,6 +136,7 @@ Depending on the user scenario, the column width may be defined in pixels, perce
This means that the following configuration is possible:
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -152,6 +168,7 @@ This means that the following configuration is possible:
...
```
+
}
>[!NOTE]
@@ -170,16 +187,20 @@ When resizing columns with width in percentages, the horizontal amount of the mo
최소 및 최대 허용 열 너비를 구성할 수도 있습니다. 이는 [`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)의 [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minwidth) 및 [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxwidth) 입력을 통해 제어할 수 있습니다. 이 경우, 크기 조정 인디케이터의 드래그 조작은 열이 [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minwidth) 및 [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxwidth)에 의해 정의된 범위 이외로 크기를 조정할 수 없음을 사용자에게 알리도록 제한됩니다.
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-{/* TODO */}
+{/_TODO_/}
}
#### 개요
[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellclasses) 입력을 설정하고 사용자 규칙을 정의하여 @@igxName 셀의 조건부 스타일을 지정할 수 있습니다.
@@if (igxName === 'IgxGrid') {
+
```html
@@ -68,14 +71,16 @@ This can be achieved by setting the [`IgxColumnComponent`]({environment:angularA
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
-{/* TODO */}
+{/_TODO_/}
}
[`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellclasses) 입력은 키 값 쌍을 포함하는 객체 리터럴을 허용하며 여기서 키는 CSS 클래스의 이름이고 값은 불 또는 불 값을 반환하는 콜백 함수입니다.
@@if (igxName === 'IgxGrid') {
+
```typescript
// sample.component.ts
@@ -106,8 +111,10 @@ public beatsPerMinuteClasses = {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid'){
+
```typescript
// sample.component.ts
@@ -138,39 +145,40 @@ public priceClasses = {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
-{/* TODO */}
+{/_TODO_/}
}
**::ng-deep** 또는 **`ViewEncapsulation.None`**을 사용하여 사용자 스타일을 현재 컴포넌트와 그 하위 요소를 통해 강제로 적용할 수 있습니다.
### API 참조
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [편집](editing.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [열 숨기기](column_hiding.md)
-* [선택](selection.md)
-* [검색](search.md)
-* [도구 모음](toolbar.md)
-* [복수 열 헤더](multi-column-headers.md)
-* [표시 밀도](display-density.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [편집](editing.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [열 숨기기](column_hiding.md)
+- [선택](selection.md)
+- [검색](search.md)
+- [도구 모음](toolbar.md)
+- [복수 열 헤더](multi-column-headers.md)
+- [표시 밀도](display-density.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/display-density.md b/docs/angular/src/content/kr/grids_templates/display-density.md
index 6bdb817665..4ebb4d758d 100644
--- a/docs/angular/src/content/kr/grids_templates/display-density.md
+++ b/docs/angular/src/content/kr/grids_templates/display-density.md
@@ -32,24 +32,24 @@ _language: kr
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -63,16 +63,19 @@ _language: kr
<@@igSelector #@@igObjectRef [data]="data" [displayDensity]="'cosy'" >
```
+
또는
+
```typescript
...
this.@@igObjectRef.displayDensity = "cosy";
...
```
+
이제 각 옵션을 @@igComponent 컴포넌트에 반영하는 방법을 자세하게 살펴 보겠습니다. 서로 다른 표시 밀도 옵션 사이에서 전환하면 각 @@igComponent 요소의 높이 및 해당 패딩이 변경됩니다. 또한, 사용자 열 [**width**]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)를 적용하는 경우 왼쪽 및 오른쪽 패딩 합계보다 커야 함에 주의하십시오.
- - **comfortable** - 이것은 밀도가 가장 낮고 행 높이가 `50px`인 기본 @@igComponent 표시 밀도입니다. 왼쪽 및 오른쪽 패딩은 `24px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `48px`임;
- - **cosy** - 이것은 행 높이가 `40px`인 중간 밀도입니다. 왼쪽 및 오른쪽 패딩은 `16px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `32px`임;
- - **compact** - 이것은 행 높이가 `32px`인 최고 밀도입니다. 왼쪽 및 오른쪽 패딩은 `12px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `24px`임;
+- **comfortable** - 이것은 밀도가 가장 낮고 행 높이가 `50px`인 기본 @@igComponent 표시 밀도입니다. 왼쪽 및 오른쪽 패딩은 `24px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `48px`임;
+- **cosy** - 이것은 행 높이가 `40px`인 중간 밀도입니다. 왼쪽 및 오른쪽 패딩은 `16px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `32px`임;
+- **compact** - 이것은 행 높이가 `32px`인 최고 밀도입니다. 왼쪽 및 오른쪽 패딩은 `12px`임; 최소 열 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width)는 `24px`임;
> [!NOTE]
> 현재 크기를 재정의 할 수는 **없습니다**.
@@ -114,6 +117,7 @@ public ngOnInit() {
이제 마크업을 추가할 수 있습니다.
@@if (igxName === 'IgxGrid') {
+
```html
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
}
-특정 셀에서 편집 모드에 들어가려면 먼저 열을 [`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)로 설정해야 합니다. 데이터 유형별 *편집 템플릿*을 사용하려면 열 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype) 속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴 보겠습니다.
+특정 셀에서 편집 모드에 들어가려면 먼저 열을 [`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)로 설정해야 합니다. 데이터 유형별 _편집 템플릿_을 사용하려면 열 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype) 속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴 보겠습니다.
- - `string` 데이터 형식의 경우 기본 템플릿은 [**igxInput**]({environment:angularApiUrl}/classes/igxinputdirective.html)을 사용합니다
- - `number` 데이터 유형의 경우 기본 템플릿은 **[igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) type="number"**를 사용하며, 숫자로 분석할 수 없는 값으로 셀을 업데이트한 경우에는 변경이 취소되고 셀 값은 **0**으로 설정됩니다.
- - `date` 데이터 형식의 경우 기본 템플릿은 [**igx-date-picker**]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)를 사용합니다
- - `boolean` 데이터 형식의 경우 기본 템플릿은 [**igx-checkbox**]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)를 사용합니다
+- `string` 데이터 형식의 경우 기본 템플릿은 [**igxInput**]({environment:angularApiUrl}/classes/igxinputdirective.html)을 사용합니다
+- `number` 데이터 유형의 경우 기본 템플릿은 **[igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) type="number"**를 사용하며, 숫자로 분석할 수 없는 값으로 셀을 업데이트한 경우에는 변경이 취소되고 셀 값은 **0**으로 설정됩니다.
+- `date` 데이터 형식의 경우 기본 템플릿은 [**igx-date-picker**]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)를 사용합니다
+- `boolean` 데이터 형식의 경우 기본 템플릿은 [**igx-checkbox**]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)를 사용합니다
편집 가능한 셀이 다음 중 하나의 방법으로 포커스되어 있는 경우, 특정 셀에서 편집 모드로 들어갈 수 있습니다:
- - 더블 클릭;
- - 원클릭 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 원클릭으로 편집 모드에 들어갑니다. 이전에 선택한 셀이 편집 모드에 있지 않은 경우, 원클릭을 하면 편집 모드에 들어가지 않고 셀이 선택됩니다.
- - `Enter` 키를 누름;
- - `F2` 키를 누름;
+- 더블 클릭;
+- 원클릭 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 원클릭으로 편집 모드에 들어갑니다. 이전에 선택한 셀이 편집 모드에 있지 않은 경우, 원클릭을 하면 편집 모드에 들어가지 않고 셀이 선택됩니다.
+- `Enter` 키를 누름;
+- `F2` 키를 누름;
다음 방법 중 하나를 사용하여 **변경을 확정하지 않고** 편집 모드를 종료할 수 있습니다:
- - `Escape` 키를 누름;
- - *정렬*, *필터링*, *검색*, *숨기기* 조작을 실행할 때;
+- `Escape` 키를 누름;
+- _정렬_, _필터링_, _검색_, _숨기기_ 조작을 실행할 때;
다음 방법 중 하나를 사용하여 편집 모드를 종료하고 변경을 **확정**할 수 있습니다:
- - `Enter` 키를 누름;
- - `F2` 키를 누름;
- - `Tab` 키를 누름;
- - 다른 셀을 원클릭 - @@igComponent의 다른 셀을 클릭하면 변경이 제출됩니다.
- - 페이징, 크기 조정, 핀 고정 또는 이동 등의 조작은 편집 모드를 종료하고 변경 사항이 확정됩니다.
+- `Enter` 키를 누름;
+- `F2` 키를 누름;
+- `Tab` 키를 누름;
+- 다른 셀을 원클릭 - @@igComponent의 다른 셀을 클릭하면 변경이 제출됩니다.
+- 페이징, 크기 조정, 핀 고정 또는 이동 등의 조작은 편집 모드를 종료하고 변경 사항이 확정됩니다.
> [!NOTE]
> 셀은 수직 또는 수평으로 스크롤하거나 @@igComponent 이외를 클릭해도 편집 모드로 유지됩니다. 이것은 셀 편집과 행 편집 모두에 유효합니다.
@@ -82,6 +82,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
기본 키가 정의되어 있는 경우에만 @@igxName API를 통해 셀 값을 수정할 수도 있습니다.
@@if (igxName === 'IgxGrid') {
+
```typescript
...
public updateCell() {
@@ -89,8 +90,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
}
...
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
...
public updateCell() {
@@ -98,8 +101,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
}
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
...
public updateCell() {
@@ -107,12 +112,14 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
}
...
```
+
}
업데이트하려는 셀이 @@igComponent의 표시 컨테이너 외부에 있는 경우 새로운 값이 제출되지 않습니다.
셀을 업데이트하는 또 다른 방법은 [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html)의 [`update`]({environment:angularApiUrl}/classes/igxgridcell.html#update) 메소드를 직접 호출하는 것입니다:
@@if (igxName === 'IgxGrid') {
+
```typescript
...
public updateCell() {
@@ -123,8 +130,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
}
...
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
...
public updateCell() {
@@ -135,8 +144,10 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
}
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
...
public updateCell() {
@@ -147,6 +158,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
}
...
```
+
}
@@if (igxName === 'IgxGrid') {
@@ -165,14 +177,17 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation
@@igComponent 컴포넌트는 제공된 데이터를 데이터 소스 자체에 추가하는 [`addRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#addrow) 메소드를 제공합니다.
@@if (igxName === 'IgxGrid') {
+
```typescript
// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
public addNewChildRow() {
// Adding a new record
@@ -182,8 +197,10 @@ public addNewChildRow() {
this.treeGrid.addRow(record, 1);
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
public addRow() {
// Adding a new record
@@ -192,6 +209,7 @@ public addRow() {
this.hierarchicalGrid.addRow(record, 1);
}
```
+
}
#### @@igComponent에 데이터를 업데이트
@@ -199,6 +217,7 @@ public addRow() {
@@igComponent에 데이터를 업데이트하는 것은 [`updateRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updaterow) 및 [`updateCell`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updatecell) 메소드를 통해 이루어지며 **그리드의 기본 키가 정의되어 있는 경우에만 실행됩니다**. 또한, `update` 메소드를 통해 셀 및/또는 행 값을 직접 업데이트할 수 있습니다.
@@if (igxName === 'IgxGrid') {
+
```typescript
// Updating the whole row
this.grid.updateRow(newData, this.selectedCell.cellID.rowID);
@@ -213,8 +232,10 @@ this.selectedCell.update(newData);
const row = this.grid.getRowByKey(rowID);
row.update(newData);
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Updating the whole row
this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID);
@@ -229,8 +250,10 @@ this.selectedCell.update(newData);
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
// Updating the whole row
this.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID);
@@ -245,6 +268,7 @@ this.selectedCell.update(newData);
const row = this.hierarchicalGrid.getRowByKey(rowID);
row.update(newData);
```
+
}
#### @@igComponent에서 데이터 삭제
@@ -252,6 +276,7 @@ row.update(newData);
[`deleteRow()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deleterow) 메소드는 기본 키가 정의 된 경우에만 지정된 행을 제거합니다.
@@if (igxName === 'IgxGrid') {
+
```typescript
// Delete row through Grid API
this.grid.deleteRow(this.selectedCell.cellID.rowID);
@@ -259,8 +284,10 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.grid.getRowByIndex(rowIndex);
row.delete();
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Delete row through Tree Grid API
this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
@@ -268,8 +295,10 @@ this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.treeGrid.getRowByIndex(rowIndex);
row.delete();
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
// Delete row through Grid API
this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID);
@@ -277,8 +306,10 @@ this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.hierarchicalGrid.getRowByIndex(rowIndex);
row.delete();
```
+
}
**@@igSelector**와 관계 없이 예를 들면 버튼 클릭 등의 사용자 상호 작용에 연결할 수 있습니다:
+
```html
```
@@ -286,30 +317,30 @@ row.delete();
### API 참조
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
-* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
-* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
-* [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)
-* [IgxDatePickerComponent 스타일]({environment:sassApiUrl}/themes#function-igx-date-picker-theme)
-* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
-* [IgxCheckboxComponent 스타일]({environment:sassApiUrl}/themes#function-checkbox-theme)
-* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
-* [IgxOverlay 스타일]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
+- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
+- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
+- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
+- [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)
+- [IgxDatePickerComponent 스타일]({environment:sassApiUrl}/themes#function-igx-date-picker-theme)
+- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
+- [IgxCheckboxComponent 스타일]({environment:sassApiUrl}/themes#function-checkbox-theme)
+- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
+- [IgxOverlay 스타일]({environment:sassApiUrl}/themes#function-overlay-theme)
### 추가 리소스
-* [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md)
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
@@if (igxName !== 'IgxHierarchicalGrid') {* [검색](search.md)}
diff --git a/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md b/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md
index 124eb333db..41279cca10 100644
--- a/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md
+++ b/docs/angular/src/content/kr/grids_templates/excel-style-filtering.md
@@ -31,68 +31,75 @@ Ignite UI for Angular의 @@igComponent 컴포넌트는 Excel과 유사한 필터
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
}
-###사용 방법
+### 사용 방법
Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowfiltering)을 `true`로 설정하고 [`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filtermode)를 `excelStyleFilter`로 설정해야 합니다.
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
-###상호 작용
+### 상호 작용
특정 열의 필터 메뉴를 열려면 헤더의 필터 아이콘을 클릭해야 합니다. 필터링 기능과 함께 열에서 정렬, 핀 고정, 이동 또는 숨기기가 설정된 경우, 켜져 있는 기능 버튼이 표시됩니다.
-필터가 적용되지 않으면 목록의 모든 항목이 선택됩니다. 목록 위의 입력으로부터 필터링할 수 있습니다. 데이터를 필터링하려면 목록에서 항목을 선택/선택 취소하고 Apply 버튼을 클릭합니다. 목록 항목에 적용된 필터링은 `equals` 연산자로 필터 식을 만들고 각 식간의 논리 연산자는 [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)입니다. 필터를 삭제하려면 Select All 항목을 선택한 다음 Apply 버튼을 누릅니다.
+필터가 적용되지 않으면 목록의 모든 항목이 선택됩니다. 목록 위의 입력으로부터 필터링할 수 있습니다. 데이터를 필터링하려면 목록에서 항목을 선택/선택 취소하고 Apply 버튼을 클릭합니다. 목록 항목에 적용된 필터링은 `equals` 연산자로 필터 식을 만들고 각 식간의 논리 연산자는 [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or)입니다. 필터를 삭제하려면 Select All 항목을 선택한 다음 Apply 버튼을 누릅니다.
다른 식으로 필터를 적용하려면 **Text 필터**를 클릭하고 특정 열에 사용 가능한 모든 필터 연산자의 하위 메뉴가 열립니다. 이들 중 하나를 선택하면 사용자 필터 대화상자가 열리며 다른 필터 및 논리 연산자를 사용하여 원하는 대로 식을 추가할 수 있습니다. 필터를 삭제할 수 있는 clear 버튼도 있습니다.
-###메뉴 기능 구성
+### 메뉴 기능 구성
정렬, 이동, 핀 고정 및 숨기기 기능은 필터 메뉴에서 제거할 수 있습니다. 제어하는 입력은 다음과 같습니다: [`sortable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortable), [`movable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#movable), [`disablePinning`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablepinning), [`disableHiding`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding).
@@if (igxName === 'IgxGrid') {
+
```html
@@ -112,6 +119,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
아래 샘플에서 'Product Name' 및 'Discontinued' 열에서는 4가지 기능이 모두 활성화되어 있으며, 'Quantity Per Unit' 에서는 4 가지 모두 비활성화되어 있으며, 'Unit Price' 에서는 정렬 및 이동만 활성화되어 있으며, 'Order Date' 에서는 고정 및 숨기기만 활성화되어 있습니다.
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -141,6 +149,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
아래 샘플에서 'Product Name' 및 'Discontinued' 열에서는 4가지 기능이 모두 활성화되어 있으며, 'Unit Price'에서는 모두 비활성화되어 있으며, 'Added Date'에서는 고정 및 숨기기만 활성화되어 있습니다.
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -185,24 +194,24 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -212,6 +221,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
열의 정렬, 이동, 핀 고정 및 숨기기 기능을 유지하면서 Excel 스타일 필터 메뉴에서 항목을 제거하는 경우, 각 조작에 대해 그리드에 템플릿을 추가할 수 있습니다.
@@if (igxName === 'IgxGrid') {
+
```html
Sorting Template
@@ -233,6 +243,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -264,6 +275,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -314,24 +326,24 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -340,23 +352,23 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
### API 참조
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/export-excel.md b/docs/angular/src/content/kr/grids_templates/export-excel.md
index 68692f078b..272164b19d 100644
--- a/docs/angular/src/content/kr/grids_templates/export-excel.md
+++ b/docs/angular/src/content/kr/grids_templates/export-excel.md
@@ -33,22 +33,22 @@ The Excel Exporter service can export data to excel from the @@igxName. The data
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
- {/* TODO */}
+ {/_TODO_/}
}
@@ -126,13 +126,13 @@ this.excelExportService.export(this.@@igObjectRef, new IgxExcelExporterOptions("
Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함되어 있습니다.
-* [IgxExcelExporterService API]({environment:angularApiUrl}/classes/igxexcelexporterservice.html)
-* [IgxExcelExporterOptions API]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html)
+- [IgxExcelExporterService API]({environment:angularApiUrl}/classes/igxexcelexporterservice.html)
+- [IgxExcelExporterOptions API]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html)
사용된 추가 컴포넌트:
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
}
-###상호 작용
+### 상호 작용
특정 열에 필터 행을 열려면 헤더 아래에 있는 '필터' 칩을 클릭해야 합니다. 조건을 추가하려면 입력 왼쪽에 있는 드롭다운을 사용하여 필터 오퍼랜드를 선택하고 값을 입력해야 합니다. `number` 및 `date` 열에는 'Equals'이 기본값으로, `string`에는 'Contains', `boolean`에는 'All'이 선택됩니다. 'Enter'를 누르면 조건이 확정되고 다른 조건을 추가할 수 있습니다. '조건' 칩 사이에는 논리 연산자를 결정하는 드롭다운이 있으며 'AND'가 기본값으로 선택됩니다. 조건을 삭제하려면 칩의 'X' 버튼을 클릭하고 편집하려면 칩을 선택해야 하며, 입력은 칩의 데이터로 생성됩니다. 필터 행이 열려 있을 때에 필터 가능한 열의 헤더를 클릭하여 필터 열을 선택하고 필터 조건을 추가할 수 있습니다.
일부 필터링 조건이 열에 적용되어 필터 행이 닫혀 있는 동안 칩의 닫기 버튼을 클릭하여 조건을 삭제하거나 칩 중 하나를 선택하여 필터 행을 열 수 있습니다. 모든 조건을 표시할 공간이 충분하지 않은 경우, 조건 수를 나타내는 배지가 표시된 필터 아이콘이 표시됩니다. 필터 행을 열기 위해 클릭할 수도 있습니다.
-###사용 방법
+### 사용 방법
기본적으로 제공되는 기본 필터링 및 표준 필터링 조건이 있으며 개발자가 사용자 구현으로 대체 할 수도 있습니다. 또한, 사용자 필터링 조건을 간단히 플러그인할 수 있습니다. @@igComponent는 현재 간단한 필터링 UI뿐만 아니라 더 복잡한 필터링 옵션을 제공합니다. 열에서 설정된 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype)에 따라 적절한 [**필터링 처리**]({environment:angularApiUrl}/interfaces/ifilteringoperation.html)의 설정이 필터 UI 드롭다운에 로딩됩니다. 또한, [`ignoreCase`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 및 초기 [`condition`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html#condition) 속성을 설정할 수 있습니다.
-필터링 기능은 [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowfiltering) 입력을 `true`로 설정하여 @@igComponent 컴포넌트에 활성화할 수 있습니다. 기본값 [`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filtermode)는 `quickFilter`이며 실행 시에는 변경할 수 **없습니다**. 특정 열에 대해 이 기능을 비활성화하려면 [`filterable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable) 입력을 `false`로 설정합니다.
+필터링 기능은 [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowfiltering) 입력을 `true`로 설정하여 @@igComponent 컴포넌트에 활성화할 수 있습니다. 기본값 [`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filtermode)는 `quickFilter`이며 실행 시에는 변경할 수 **없습니다**. 특정 열에 대해 이 기능을 비활성화하려면 [`filterable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable) 입력을 `false`로 설정합니다.
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" [allowFiltering]="true">
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -83,6 +86,7 @@ Angular grid filtering enables you to display only the records which meet specif
...
```
+
}
> [!NOTE]
@@ -90,14 +94,14 @@ Angular grid filtering enables you to display only the records which meet specif
@@igComponent API를 통해 모든 열 또는 열 조합을 필터링할 수 있습니다. @@igComponent는 이 작업에 복수의 메소드를 공개합니다 - [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter), [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterglobal) 및 [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearfilter).
-* [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) - 단일 열 또는 열 조합을 필터링합니다.
+- [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) - 단일 열 또는 열 조합을 필터링합니다.
공개된 5개의 필터링 오퍼랜드 클래스가 있습니다:
- - [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html): 기본 필터링 오퍼랜드이며 사용자 필터링 조건을 정의할 때 상속될 수 있습니다.
- - [`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html) `boolean` 유형의 모든 기본 필터링 조건을 정의합니다.
- - [`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html) `numeric` 유형의 모든 기본 필터링 조건을 정의합니다.
- - [`IgxStringFilteringOperand`]({environment:angularApiUrl}/classes/igxstringfilteringoperand.html) `string` 유형의 모든 기본 필터링 조건을 정의합니다.
- - [`IgxDateFilteringOperand`]({environment:angularApiUrl}/classes/igxdatefilteringoperand.html) `Date` 유형의 모든 기본 필터링 조건을 정의합니다.
+- [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html): 기본 필터링 오퍼랜드이며 사용자 필터링 조건을 정의할 때 상속될 수 있습니다.
+- [`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html) `boolean` 유형의 모든 기본 필터링 조건을 정의합니다.
+- [`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html) `numeric` 유형의 모든 기본 필터링 조건을 정의합니다.
+- [`IgxStringFilteringOperand`]({environment:angularApiUrl}/classes/igxstringfilteringoperand.html) `string` 유형의 모든 기본 필터링 조건을 정의합니다.
+- [`IgxDateFilteringOperand`]({environment:angularApiUrl}/classes/igxdatefilteringoperand.html) `Date` 유형의 모든 기본 필터링 조건을 정의합니다.
```typescript
// Single column filtering
@@ -138,7 +142,7 @@ gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTre
this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree;
```
-* [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterglobal) - 기존의 필터를 모두 지우고 모든 @@igComponent 열에 새로운 필터링 조건을 적용합니다.
+- [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterglobal) - 기존의 필터를 모두 지우고 모든 @@igComponent 열에 새로운 필터링 조건을 적용합니다.
```typescript
// Filter all cells for a value which contains `myproduct`
@@ -146,7 +150,7 @@ this.@@igObjectRef.filteringLogic = FilteringLogic.Or;
this.@@igObjectRef.filterGlobal("myproduct", IgxStringFilteringOperand.instance().condition("contains"), false);
```
-* [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearfilter) - 대상 열에서 적용된 모든 필터링을 삭제합니다. 인수 없이 호출하면 모든 열의 필터링이 지워집니다.
+- [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearfilter) - 대상 열에서 적용된 모든 필터링을 삭제합니다. 인수 없이 호출하면 모든 열의 필터링이 지워집니다.
```typescript
// Remove the filtering state from the ProductName column
@@ -268,7 +272,9 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
}
}
```
+
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
@@ -283,8 +289,10 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -300,27 +308,28 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
...
```
+
}
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
-
@@ -331,24 +340,24 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
-
@@ -356,38 +365,38 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
@@if (igxName !== 'IgxHierarchicalGrid') {
#### 6.1.0의 주요 변경 사항
-* @@igxName `filteringExpressions` 속성이 삭제되었습니다. 대신 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 를 사용하십시오.
-* `filter_multiple` 메소드가 삭제되었습니다. 대신에 [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드 및 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 속성을 사용하십시오.
-* [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드에는 새로운 구문이 있습니다. 다음의 매개 변수를 허용할 수 있습니다:
- * `name` - 필터링할 열의 이름.
- * `value` - 필터링에 사용할 값.
- * `conditionOrExpressionTree`(옵션) - 이 매개 변수는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 또는 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) 유형의 객체를 받아들입니다. 간단한 필터링만 필요한 경우 필터링 처리를 인수로 전달할 수 있습니다. 고급 필터링의 경우, 복잡한 필터링 로직을 포함하는 식 트리를 인수로 전달할 수 있습니다.
- * `ignoreCase`(옵션) - 필터링이 대/소문자를 구분하는지 여부.
-* [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) 이벤트에는 이제 필터링된 열의 필터링 상태를 포함하는 유형 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html)의 매개 변수가 하나만 있습니다.
-* 필터링 오퍼랜드: [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 조건 속성은 필터링 조건 메소드에 직접 참조하지 않고 대신에 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html)을 참조하게 됩니다.
-* [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)는 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) 클래스 참조를 사용하는 [`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters) 속성을 공개합니다.
-* 사용자 필터는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 유형의 작업으로 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html)의 [`operations`]({environment:angularApiUrl}/classes/igxfilteringoperand.html#operations) 속성을 생성하여 @@igComponent 열에 제공할 수 있습니다.
+- @@igxName `filteringExpressions` 속성이 삭제되었습니다. 대신 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 를 사용하십시오.
+- `filter_multiple` 메소드가 삭제되었습니다. 대신에 [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드 및 [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) 속성을 사용하십시오.
+- [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) 메소드에는 새로운 구문이 있습니다. 다음의 매개 변수를 허용할 수 있습니다:
+ - `name` - 필터링할 열의 이름.
+ - `value` - 필터링에 사용할 값.
+ - `conditionOrExpressionTree`(옵션) - 이 매개 변수는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 또는 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) 유형의 객체를 받아들입니다. 간단한 필터링만 필요한 경우 필터링 처리를 인수로 전달할 수 있습니다. 고급 필터링의 경우, 복잡한 필터링 로직을 포함하는 식 트리를 인수로 전달할 수 있습니다.
+ - `ignoreCase`(옵션) - 필터링이 대/소문자를 구분하는지 여부.
+- [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) 이벤트에는 이제 필터링된 열의 필터링 상태를 포함하는 유형 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html)의 매개 변수가 하나만 있습니다.
+- 필터링 오퍼랜드: [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 조건 속성은 필터링 조건 메소드에 직접 참조하지 않고 대신에 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html)을 참조하게 됩니다.
+- [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html)는 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) 클래스 참조를 사용하는 [`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters) 속성을 공개합니다.
+- 사용자 필터는 [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 유형의 작업으로 [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html)의 [`operations`]({environment:angularApiUrl}/classes/igxfilteringoperand.html#operations) 속성을 생성하여 @@igComponent 열에 제공할 수 있습니다.
}
### API 참조
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/keyboard-navigation.md b/docs/angular/src/content/kr/grids_templates/keyboard-navigation.md
index 7f1744e256..76bcc39fe2 100644
--- a/docs/angular/src/content/kr/grids_templates/keyboard-navigation.md
+++ b/docs/angular/src/content/kr/grids_templates/keyboard-navigation.md
@@ -26,31 +26,31 @@ Keyboard navigation is available by default in any grid and aims at covering as
### Key combinations
@@if (igxName === 'IgxHierarchicalGrid') {
- - `Arrow Up` - navigates one cell up, going up the grid hierarchy if necessary (no wrapping);
- - `Arrow Down` - navigates one cell down, going deeper into the grid hierarchy if necessary (no wrapping);}@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
- - `Arrow Up` - navigates one cell up (no wrapping);
- - `Arrow Down` - navigates one cell down (no wrapping);}
- - `Arrow Left` - navigates one cell left (no wrapping between lines);
- - `Arrow Right` - navigates one cell right (no wrapping between lines);
- - `Ctrl + Arrow Up` - navigates to the first cell in the current column;
- - `Ctrl + Arrow Down` - navigates to the last cell in the current column;
- - `Ctrl + Arrow Left` - moves to leftmost cell in row;
- - `Home` - moves to leftmost cell in row;
- - `Ctrl + Home` - moves to top left cell in the grid;
- - `Ctrl + Arrow Right` - moves to rightmost cell in row;
- - `End` - moves to rightmost cell in row;
- - `Ctrl + End` - moves to bottom right cell in the grid;
- - `Page Up` - scrolls one page (view port) up;
- - `Page Down` - scrolls one page (view port) down;
- - `Enter` - enters edit mode;
- - `F2` - enters edit mode;
- - `Esc` - exits edit mode;
- - `Tab` - sequentially move the focus over the next cell on the row and if the last cell is reached move to next row; If next row is group row the whole row is focused, if it is data row, move focus over the first cell; When cell is in edit mode, will move the focus to next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row;
- - `Shift + Tab` - sequentially move focus to the previous cell on the row, if the first cell is reached move the focus to the previous row. If previous row is group row focus the whole row or if it is data row, focus the last cell of the row; when cell is in edit mode, will move the focus to the next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row;
- - `Space` - if the row is selectable, on keydown space triggers row selection;@@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') {
- - `Alt + Arrow Left` over GroupRow - collapses the group row content if the row is not already collapsed;
- - `Alt + Arrow Right` over GroupRow - expands the group row content if the row is not already expanded;}
- - on mouse `wheel` - blurs the focused element;
+- `Arrow Up` - navigates one cell up, going up the grid hierarchy if necessary (no wrapping);
+- `Arrow Down` - navigates one cell down, going deeper into the grid hierarchy if necessary (no wrapping);}@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+- `Arrow Up` - navigates one cell up (no wrapping);
+- `Arrow Down` - navigates one cell down (no wrapping);}
+- `Arrow Left` - navigates one cell left (no wrapping between lines);
+- `Arrow Right` - navigates one cell right (no wrapping between lines);
+- `Ctrl + Arrow Up` - navigates to the first cell in the current column;
+- `Ctrl + Arrow Down` - navigates to the last cell in the current column;
+- `Ctrl + Arrow Left` - moves to leftmost cell in row;
+- `Home` - moves to leftmost cell in row;
+- `Ctrl + Home` - moves to top left cell in the grid;
+- `Ctrl + Arrow Right` - moves to rightmost cell in row;
+- `End` - moves to rightmost cell in row;
+- `Ctrl + End` - moves to bottom right cell in the grid;
+- `Page Up` - scrolls one page (view port) up;
+- `Page Down` - scrolls one page (view port) down;
+- `Enter` - enters edit mode;
+- `F2` - enters edit mode;
+- `Esc` - exits edit mode;
+- `Tab` - sequentially move the focus over the next cell on the row and if the last cell is reached move to next row; If next row is group row the whole row is focused, if it is data row, move focus over the first cell; When cell is in edit mode, will move the focus to next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row;
+- `Shift + Tab` - sequentially move focus to the previous cell on the row, if the first cell is reached move the focus to the previous row. If previous row is group row focus the whole row or if it is data row, focus the last cell of the row; when cell is in edit mode, will move the focus to the next editable cell in the row, and from the right-most editable cell to the `CANCEL` and `DONE` buttons, and from the `DONE` button to the left-most editable cell within the currently edited row;
+- `Space` - if the row is selectable, on keydown space triggers row selection;@@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') {
+- `Alt + Arrow Left` over GroupRow - collapses the group row content if the row is not already collapsed;
+- `Alt + Arrow Right` over GroupRow - expands the group row content if the row is not already expanded;}
+- on mouse `wheel` - blurs the focused element;
### Custom keyboard navigation
Customizing the default behavior, that we described above when a certain key is pressed is one of the great benefits that our keyboard navigation feature provides. Like when `Enter key` or `Tab key` are pressed. Actions like `going to the next cell` or `cell below` could be handled easily with the powerful keyboard navigation API.
@@ -61,7 +61,7 @@ Customizing the default behavior, that we described above when a certain key is
- [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) - returns [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) which defines the previous cell, according to the current position, that match specific criteria. You can pass callback function as a third parameter of [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) method.
@@if (igxName === 'IgxHierarchicalGrid') {
-> Note: Both [`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#navigateto) and [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) are availabe on the current level, you cannot access child cells.
+> Note: Both [`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#navigateto) and [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getpreviouscell) are available on the current level, you cannot access child cells.
}
The sample below shows how to:
@@ -88,6 +88,7 @@ const cell = args.event.shiftKey ?
this.grid1.navigateTo(cell.row.index, cell.column.visibleIndex,
(obj) => { obj.target.nativeElement.focus(); });
```
+
- perform column based navigation (vertical) on `enter key` press.
```typescript
@@ -102,11 +103,11 @@ You can try the `actions below` in order to observe the custom keyboard navigati
- Double click on a cell from number column type and after the cell is in edit mode, change the value to `7` and press `tab key`. Prompt message will be shown.
- Select a cell and press `Enter key` a couple of times. Column based navigation will be applied.
-> Note: Keep in mind that the default `Enter key` action is overriden and in order to enter edit mode you can use `F2 key` instead.
+> Note: Keep in mind that the default `Enter key` action is overridden and in order to enter edit mode you can use `F2 key` instead.
-
@@ -167,11 +168,11 @@ You can try the `actions below` in order to observe the custom keyboard navigati
- Double click on a `number type` cell and after the cell is in edit mode, change the value to negative number (e.g. -1) and press `tab key`. Prompt message will be shown.
- Select a cell and press `Enter key` a couple of times. Column based navigation will be applied.
-> Note: Keep in mind that the default `Enter key` action is overriden and in order to enter edit mode you can use `F2 key` instead.
+> Note: Keep in mind that the default `Enter key` action is overridden and in order to enter edit mode you can use `F2 key` instead.
-
@@ -198,6 +199,7 @@ const cell = args.event.shiftKey ?
this.grid1.navigateTo(cell.row.index, cell.column.visibleIndex,
(obj) => { obj.target.nativeElement.focus(); });
```
+
- perform column based navigation (vertical) on `enter key` press.
```typescript
@@ -212,39 +214,40 @@ You can try the `actions below` in order to observe the custom keyboard navigati
- Double click on a cell from `Age` column and after the cell is in edit mode, change the value to `17` and press `tab key`. Prompt message will be shown.
- Select a cell and press `Enter key` a couple of times. Column based navigation will be applied.
-> Note: Keep in mind that the default `Enter key` action is overriden and in order to enter edit mode you can use `F2 key` instead.
+> Note: Keep in mind that the default `Enter key` action is overridden and in order to enter edit mode you can use `F2 key` instead.
-
}
### Known Limitations
+
|Limitation|Description|
|--- |--- |
| Navigating inside grid with scrollable parent container. | If the grid is positioned inside a scrollable parent container and the user navigates inside the grid, it will not scroll the parent container if there are cells out of view.|
## API References
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
## Additional Resources
-* [@@igComponent overview](@@igMainTopic.md)
-* [Virtualization and Performance](virtualization.md)
-* [Filtering](filtering.md)
-* [Sorting](sorting.md)
-* [Summaries](summaries.md)
-* [Column Moving](column-moving.md)
-* [Column Pinning](column_pinning.md)
-* [Column Resizing](column-resizing.md)
-* [Selection](selection.md)
+- [@@igComponent overview](@@igMainTopic.md)
+- [Virtualization and Performance](virtualization.md)
+- [Filtering](filtering.md)
+- [Sorting](sorting.md)
+- [Summaries](summaries.md)
+- [Column Moving](column-moving.md)
+- [Column Pinning](column_pinning.md)
+- [Column Resizing](column-resizing.md)
+- [Selection](selection.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/grids_templates/multi-column-headers.md b/docs/angular/src/content/kr/grids_templates/multi-column-headers.md
index 44c78a85c2..a0ca319325 100644
--- a/docs/angular/src/content/kr/grids_templates/multi-column-headers.md
+++ b/docs/angular/src/content/kr/grids_templates/multi-column-headers.md
@@ -28,24 +28,24 @@ keywords: column headers, ignite ui for angular, infragistics
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -54,6 +54,7 @@ keywords: column headers, ignite ui for angular, infragistics
`Multi-column header`의 선언은 열 집합을 [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) 컴포넌트에 [`header`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#header) 제목을 전달하여 래핑합니다.
@@if (igxName === 'IgxGrid') {
+
```html
@@ -63,8 +64,10 @@ keywords: column headers, ignite ui for angular, infragistics
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -74,8 +77,10 @@ keywords: column headers, ignite ui for angular, infragistics
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
중첩 헤더의 `n-th` 수준을 달성하려면 상기의 선언을 따라야 실행합니다. 즉, [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)을 중첩하면 원하는 결과를 얻을 수 있습니다.
@@if (igxName === 'IgxGrid') {
+
```html
@@ -110,8 +117,10 @@ keywords: column headers, ignite ui for angular, infragistics
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -124,8 +133,10 @@ keywords: column headers, ignite ui for angular, infragistics
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
모든 [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)은 [`moving`](column-moving.md), [`pinning`](column_pinning.md), [`hiding`](column_hiding.md)을 지원합니다.
@@ -149,6 +161,7 @@ keywords: column headers, ignite ui for angular, infragistics
> `columns/column-groups`이 현재 `group`으로 래핑되어 있지 않은 즉, **최상위** `columns`인 경우 표시된 전체 열 사이에서 이동이 허용됩니다.
@@if (igxName === 'IgxGrid') {
+
```html
@@ -159,8 +172,10 @@ keywords: column headers, ignite ui for angular, infragistics
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -171,8 +186,10 @@ keywords: column headers, ignite ui for angular, infragistics
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
### API 참조
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
@@if (igxName === 'IgxGrid') {* [Group by](groupby.md)}
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/multi-row-layout.md b/docs/angular/src/content/kr/grids_templates/multi-row-layout.md
index 0be44cc973..0445fd9a0e 100644
--- a/docs/angular/src/content/kr/grids_templates/multi-row-layout.md
+++ b/docs/angular/src/content/kr/grids_templates/multi-row-layout.md
@@ -12,8 +12,8 @@ _language: kr
#### 데모
-
@@ -21,31 +21,31 @@ _language: kr
다중 행 레이아웃 선언은 [`igx-column-layout`]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) 컴포넌트를 통해 이루어집니다. 각 `igx-column-layout` 컴포넌트는 하나 이상의 `igx-column` 컴포넌트를 포함하는 블록으로 간주해야 합니다. 일부 그리드 기능은 블록 수준에서 작동합니다(아래의 "기능 통합" 섹션에서 열거). 예를 들면, 가상화는 블록을 사용하여 가상 청크를 결정하므로 성능을 향상하려면 레이아웃이 허용하는 경우, 열을 더 많은 `igx-column-layout` 블록으로 분할합니다. 다중 행 레이아웃을 구성할 경우, 이러한 블록 이외에 열이 없어야 하며, `IgxColumnGroupComponent`를 사용하지 않아야 합니다. 다중 행 레이아웃은 [grid layout](https://www.w3.org/TR/css-grid-1/) 사양 상에서 구현되며 요구 사항을 준수해야 합니다.
`IgxColumnComponent` 네 개의 `@Input` 속성을 노출하여 각 셀의 위치와 범위를 결정합니다.
-* [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) - 필드가 시작되는 열 인덱스입니다. 이 속성은 **mandatory**입니다.
-* [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) - 필드가 시작되는 행 인덱스입니다. 이 속성은 **mandatory**입니다.
-* [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) - 현재 필드가 끝나는 열 인덱스입니다. colStart와 colEnd 사이의 열의 양은 해당 필드에 대한 스패닝 열의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `colStart + 1`입니다.
-* [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend) - 현재 필드가 끝나는 행 인덱스입니다. rowStart와 rowEnd 사이의 행의 양은 해당 필드에 대한 스패닝 행의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `rowStart + 1`입니다.
+- [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) - 필드가 시작되는 열 인덱스입니다. 이 속성은 **mandatory**입니다.
+- [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) - 필드가 시작되는 행 인덱스입니다. 이 속성은 **mandatory**입니다.
+- [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) - 현재 필드가 끝나는 열 인덱스입니다. colStart와 colEnd 사이의 열의 양은 해당 필드에 대한 스패닝 열의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `colStart + 1`입니다.
+- [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend) - 현재 필드가 끝나는 행 인덱스입니다. rowStart와 rowEnd 사이의 행의 양은 해당 필드에 대한 스패닝 행의 양을 결정합니다. 이 속성은 **optional**입니다. 설정되지 않은 경우, 기본값은 `rowStart + 1`입니다.
```html
-
-
-
-
```
@@ -64,7 +64,7 @@ _language: kr
- 그룹화 - `hideGroupedColumns` 옵션은 다중 행 레이아웃에 영향을 미치지 않습니다. 그룹화된 열은 항상 표시됩니다.
현재 지원되지 **않는** 기능은 다음과 같습니다:
-- 열 이동
+- 열 이동
- 복수 열 헤더
- Excel로 내보내기
- 요약
@@ -74,19 +74,19 @@ _language: kr
IgxGridComponent with Multi-Row Layouts provides build-in keyboard navigation.
#### TAB navigation
-* TAB and Shift + TAB - move to the next/previous cell in a row unaffected by the column layouts that are defined. The navigation is done through all of the cells by focusing each one only once for each row, meaning that it should skip cell if it doesn't have the same `rowStart` as the currently selected cell. When the row is in edit mode, the navigation is restricted to the cells into that row and to the CANCEL and DONE buttons.
+- TAB and Shift + TAB - move to the next/previous cell in a row unaffected by the column layouts that are defined. The navigation is done through all of the cells by focusing each one only once for each row, meaning that it should skip cell if it doesn't have the same `rowStart` as the currently selected cell. When the row is in edit mode, the navigation is restricted to the cells into that row and to the CANCEL and DONE buttons.
-#### Horizontal nagivation
-* Arrow Left or Arrow Right - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, Arrow Left and Arrow Right should navigate to the first cell on the left and right with the same `rowStart`, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same `rowStart` if possible.
-* Ctrl + Arrow Left (HOME) or Ctrl + Arrow Right (END) - navigate to the start or end of the row and select the cell with accordance to the starting navigation cell.
+#### Horizontal navigation
+- Arrow Left or Arrow Right - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, Arrow Left and Arrow Right should navigate to the first cell on the left and right with the same `rowStart`, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same `rowStart` if possible.
+- Ctrl + Arrow Left (HOME) or Ctrl + Arrow Right (END) - navigate to the start or end of the row and select the cell with accordance to the starting navigation cell.
+
+
+#### Vertical navigation
+- Arrow Up or Arrow Down - move to the cell above/below in relation to a starting position and is unaffected by the rows. If the current cell spans on more than one column the next active cell will be selected with accordance to the starting navigation cell.
+- Ctrl + Arrow Up or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row.
+- Ctrl + Home or Ctrl + End - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell.
-#### Vertical nagivation
-* Arrow Up or Arrow Down - move to the cell above/below in relation to a starting position and is unaffected by the rows. If the current cell spans on more than one column the next active cell will be selected with accordance to the starting navigation cell.
-* Ctrl + Arrow Up or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row.
-* Ctrl + Home or Ctrl + End - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell.
-
-
> [!Note]
> Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows.
@@ -105,8 +105,8 @@ The demo below adds additional navigation down/up via the Enter and <
#### Demo
-
@@ -116,13 +116,13 @@ The demo below adds additional navigation down/up via the Enter and <
Sometimes when configuring a column layout it might be a challenge to calculate and set the proper [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) and [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) or [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) and [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend). Especially when there are a lot of columns in a single layout. That is why we have created a small configurator, so you can easily do that and have a similar preview of how it would look inside the igxGrid when applied. You can do the following interactions with it:
-* Set number of rows for the whole configuration. All layouts must have the same amount of rows.
-* Add/Remove column layouts by clicking the `Add Layout` chip or reordering them by dragging a layout chip left/right.
-* Set specific settings for each layout as number of columns and how wide they will be. The setting refer to the currently selected layout.
-* Resize column cells in the layout preview so they can span more columns/rows or clear them using the `Delete` button.
-* Set columns in the preview by dragging a column chip in the place your will want it to be.
-* Add/Remove new columns by using the `Add Column` chip.
-* Get template output of the whole configuration ready to by placed inside an igxGrid or the JSON representation that can also be used and parsed in your template using [`NgForOf`](https://angular.io/api/common/NgForOf) for example.
+- Set number of rows for the whole configuration. All layouts must have the same amount of rows.
+- Add/Remove column layouts by clicking the `Add Layout` chip or reordering them by dragging a layout chip left/right.
+- Set specific settings for each layout as number of columns and how wide they will be. The setting refer to the currently selected layout.
+- Resize column cells in the layout preview so they can span more columns/rows or clear them using the `Delete` button.
+- Set columns in the preview by dragging a column chip in the place your will want it to be.
+- Add/Remove new columns by using the `Add Column` chip.
+- Get template output of the whole configuration ready to by placed inside an igxGrid or the JSON representation that can also be used and parsed in your template using [`NgForOf`](https://angular.io/api/common/NgForOf) for example.
By default we have set the same columns as our previous sample, but it can be cleared and configured to match your desired configuration.
@@ -131,19 +131,19 @@ By default we have set the same columns as our previous sample, but it can be cl
### Styling
-The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid.
-In the below steps, we are going through the steps of customizing the grid's Multi Row Layout styling.
+In the below steps, we are going through the steps of customizing the grid's Multi Row Layout styling.
- #### Importing global theme
+#### Importing global theme
To begin the customization of the Multi Row Layout feature, you need to import the `index` file, where all styling functions and mixins are located.
```scss
@import '~igniteui-angular/lib/core/styles/themes/index'
-```
+```
#### Defining custom theme
-Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the feature layout as desired.
+Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the feature layout as desired.
```scss
$custom-theme: grid-theme(
@@ -156,10 +156,10 @@ $custom-theme: grid-theme(
$sorted-header-icon-color: #ffcd0f,
$sortable-header-icon-hover-color: #e9bd0d
);
-```
+```
#### Defining a custom color palette
-In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
+In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions.
`igx-palette` generates a color palette, based on provided primary and secondary colors.
```scss
@@ -170,7 +170,7 @@ $custom-palette: palette(
$primary: $black-color,
$secondary: $yellow-color
);
-```
+```
After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors.
@@ -188,8 +188,9 @@ $custom-theme: grid-theme(
```
#### Defining custom schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
+
```scss
$custom-grid-schema: extend($_light-grid,(
cell-active-border-color: (igx-color:('secondary', 500)),
@@ -201,9 +202,9 @@ $custom-grid-schema: extend($_light-grid,(
sorted-header-icon-color: (igx-color:('secondary', 500)),
sortable-header-icon-hover-color: (igx-color:('secondary', 600))
));
-```
+```
-In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
+In order for the custom schema to be applied, either `light`, or `dark` globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
```scss
$my-custom-schema: extend($light-schema, (
@@ -217,6 +218,7 @@ $my-custom-schema: extend($light-schema, (
#### Applying the custom theme
The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file:
+
```scss
@include grid($custom-theme);
```
@@ -230,7 +232,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
>[!NOTE]
>If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
>[!NOTE]
- >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements *outside of* our component:
+ >Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements _outside of_ our component:
```scss
:host {
@@ -240,33 +242,33 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
}
```
-#### Demo
+#### Demo
-
### API 참조
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [정렬](sorting.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [정렬](sorting.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/paging.md b/docs/angular/src/content/kr/grids_templates/paging.md
index 88d26a595c..70e97af815 100644
--- a/docs/angular/src/content/kr/grids_templates/paging.md
+++ b/docs/angular/src/content/kr/grids_templates/paging.md
@@ -31,24 +31,24 @@ Ignite UI for Angular @@igComponent에서 **Paging**은 루트 `@@igSelector`
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -104,6 +104,7 @@ this.@@igObjectRef.paging = false;
먼저 서비스를 선언하여 데이터 가져오기를 실행합니다.
페이지 수를 계산하기 위해 모든 데이터 항목 수가 필요하며 이 논리를 서비스에 추가할 것입니다.
+
```typescript
@Injectable()
export class RemoteService {
@@ -138,8 +139,10 @@ export class RemoteService {
}
}
```
+
서비스를 선언 한 후에는 @@igComponent 생성 및 데이터 서브스크립션을 위한 컴포넌트를 작성해야 합니다.
@@if (igxName === 'IgxGrid') {
+
```typescript
export class RemotePagingGridSample implements OnInit, AfterViewInit {
public data: Observable;
@@ -156,8 +159,10 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy {
public page = 0;
@@ -178,11 +183,13 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit,
}
}
```
+
}
요청된 페이지에 대한 데이터만 가져오고 선택된 페이지 및 [`perPage`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#perPage)에 따라 정확한 `skip` 및 `top` 매개 변수를 원격 서비스에 전달하려면 사용자 호출 템플릿을 생성해야 합니다.
또한, 호출 버튼의 비활성화 및 활성화도 관리해야 합니다.
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
#### 드롭 영역 이벤트 핸들러
템플릿에서 드롭 영역을 정의한 후에는 컴포넌트의 `.ts` 파일에 있는 `igxDrop`의 [`onEnter`]({environment:angularApiUrl}/classes/igxdropdirective.html#onenter), [`onLeave`]({environment:angularApiUrl}/classes/igxdropdirective.html#onleave) 및 [`onDrop`]({environment:angularApiUrl}/classes/igxdropdirective.html#ondrop) 이벤트에 대한 핸들러를 선언해야 합니다.
-먼저, `onEnter` 및 `onLeave` 핸들러를 살펴보겠습니다. 이 방법은 드래그 *고스트* 아이콘을 변경하여 사용자가 행을 드롭할 수 있는 영역 위에 있음을 표시할 수 있습니다:
+먼저, `onEnter` 및 `onLeave` 핸들러를 살펴보겠습니다. 이 방법은 드래그 _고스트_ 아이콘을 변경하여 사용자가 행을 드롭할 수 있는 영역 위에 있음을 표시할 수 있습니다:
```typescript
export class @@igxNameRowDragComponent {
@@ -148,27 +153,33 @@ export class @@igxNameRowDragComponent {
}
```
+
`changeGhostIcon` **프라이빗** 메소드는 드래그 고스트 내부의 아이콘을 변경합니다. 이 메소드의 논리는 아이콘이 포함된 요소(드래그 인디케이터 컨테이너에 적용된 `igx-grid__drag-indicator` 클래스 사용)를 찾아 요소의 내부 텍스트를 전달된 것으로 변경합니다.
아이콘 자체는 [`재료` 폰트 세트](https://material.io/tools/icons/)에 있으며 별도의 **`enum`**으로 정의됩니다:
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
+
```typescript
enum DragIcon {
DEFAULT = "drag_indicator",
ALLOW = "remove"
}
```
+
}
@@if (igxName === 'IgxGrid') {
+
```typescript
enum DragIcon {
DEFAULT = "drag_indicator",
ALLOW = "add"
}
```
+
}
-다음으로, 사용자가 실제로 드롭 영역 내에 행을 *드롭*할 때 실행되는 것을 정의해야 합니다.
+다음으로, 사용자가 실제로 드롭 영역 내에 행을 _드롭_할 때 실행되는 것을 정의해야 합니다.
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
+
```typescript
export class @@igxNameRowDragComponent {
...
@@ -187,6 +198,7 @@ export class @@igxNameRowDragComponent {
}
@@if (igxName === 'IgxGrid') {
+
```typescript
export class @@igxNameRowDragComponent {
@ViewChild("sourceGrid", { read: IgxGridComponent }) public sourceGrid: IgxGridComponent;
@@ -210,6 +222,7 @@ export class @@igxNameRowDragComponent {
#### 드래그 아이콘 템플레이팅
드래그 핸들 아이콘은 그리드의 [`dragIndicatorIconTemplate`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#dragindicatoricontemplate)를 사용하여 템플레이팅할 수 있습니다. 구축 중인 예제에서 아이콘을 기본(`drag_indicator`)에서 `drag_handle`로 변경해 보겠습니다.
이를 위해 `igxDragIndicatorIcon`을 사용하여 `@@igSelector`의 내부에 템플릿을 전달할 수 있습니다:
+
```html
<@@igSelector>
...
@@ -222,6 +235,7 @@ export class @@igxNameRowDragComponent {
새로운 아이콘 템플릿을 설정하면 `DragIcon enum`에서 `DEFAULT` 아이콘도 조정해야 하므로 `changeIcon` 메소드에 의해 적절히 변경됩니다:
+
```typescript
enum DragIcon {
DEFAULT = "drag_handle",
@@ -232,6 +246,7 @@ enum DragIcon {
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
#### 드롭 영역 스타일
드롭 핸들러가 올바르게 설정되면 드롭 영역 스타일만 약간 설정하면 됩니다:
+
```css
.drop-area {
width: 160px;
@@ -265,16 +280,16 @@ enum DragIcon {
#### 예제 데모
@@if (igxName === 'IgxGrid') {
-
The following sample demonstrates how to configure row reordering in the grid. Holding onto the drag icon will allow you to move a row anywhere in the grid.
-
@@ -282,16 +297,16 @@ The following sample demonstrates how to configure row reordering in the grid. H
@@if (igxName === 'IgxTreeGrid') {
-
The following sample demonstrates how to configure row reordering in the tree grid. Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row.
-
@@ -300,8 +315,8 @@ The following sample demonstrates how to configure row reordering in the tree gr
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -309,8 +324,8 @@ The following sample demonstrates how to configure row reordering in the tree gr
The following sample demonstrates how to configure row reordering in the hierarchical grid.
Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row.
-
@@ -321,20 +336,20 @@ Notice that we also have row selection enabled and we preserve the selection whe
`rowDraggable` 지시문을 사용할 경우, 고려해야 할 몇 가지 사항이 있습니다:
> [!NOTE]
-> 행 드롭 이벤트를 처리할 경우, 행 드래그 고스트의 남은 요소가 표시되지 않도록 `eventArgs.cancel`을 **`true`**로 설정해야 합니다
+> 행 드롭 이벤트를 처리할 경우, 행 드래그 고스트의 남은 요소가 표시되지 않도록 `eventArgs.cancel`을 **`true`**로 설정해야 합니다
## API 참조
-* [rowDraggable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowdraggable)
-* [rowDragStart]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragStart)
-* [rowDragEnd]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragEnd)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [rowDraggable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowdraggable)
+- [rowDragStart]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragStart)
+- [rowDragEnd]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragEnd)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
## 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
+- [@@igComponent 개요](@@igMainTopic.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/row-editing.md b/docs/angular/src/content/kr/grids_templates/row-editing.md
index 7b2c32d32d..a8c1278a5c 100644
--- a/docs/angular/src/content/kr/grids_templates/row-editing.md
+++ b/docs/angular/src/content/kr/grids_templates/row-editing.md
@@ -34,24 +34,24 @@ _language: kr
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
-
@@ -80,6 +80,7 @@ export class AppModule {}
그런 다음 바인딩된 데이터 소스 및 [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable) 이 true로 설정된 @@igComponent를 정의합니다:
@@if (igxName ==='IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -113,8 +116,10 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -147,6 +152,7 @@ export class AppModule {}
```
+
}
> [!NOTE]
@@ -156,6 +162,7 @@ export class AppModule {}
> 개별 열에 대해 편집할 필요가 없습니다. @@igComponent에서 [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable) 속성을 사용하면 기본 필드를 제외한 모든 `field` 속성이 편집 가능함을 의미합니다. 특정 열에 대한 편집을 비활성화하려면 [`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable) 열의 입력을 false로 설정합니다.
@@if (igxName === 'IgxGrid') {
+
```typescript
import { Component, ViewChild } from "@angular/core";
import { data } from "./data";
@@ -176,9 +183,11 @@ export class GridRowEditSampleComponent {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxTreeGridComponent } from "igniteui-angular";
@@ -208,8 +217,10 @@ export class TreeGridRowEditSampleComponent implements OnInit {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from "igniteui-angular";
@@ -235,6 +246,7 @@ export class HGridRowEditingSampleComponent implements OnInit {
}
}
```
+
}
> [!NOTE]
@@ -260,9 +272,9 @@ export class HGridRowEditingSampleComponent implements OnInit {
- 행이 편집 모드이고 행이 표시된 영역 밖으로 이동하도록 @@igComponent를 스크롤한 경우에도 행은 여전히 편집 모드에 있습니다. @@igComponent를 스크롤하여 행이 다시 표시되도록 하면 행은 여전히 편집 모드에 있습니다. @@igComponent 이외를 클릭하면 셀도 편집 모드로 유지됩니다.
-- *정렬*, *필터링*, *검색* 및 *숨기기* 조작을 실행하면 행의 모든 현재 변경 사항이 되돌아가고 행은 편집 모드를 종료합니다.
+- _정렬_, _필터링_, _검색_ 및 _숨기기_ 조작을 실행하면 행의 모든 현재 변경 사항이 되돌아가고 행은 편집 모드를 종료합니다.
-- *페이징*, *크기 조정*, *핀 고정* 및 *이동* 조작을 실행하면 편집 모드를 종료하고 최신 값을 제출합니다.
+- _페이징_, _크기 조정_, _핀 고정_ 및 _이동_ 조작을 실행하면 편집 모드를 종료하고 최신 값을 제출합니다.
- 수정된 각 셀은 행 편집이 종료될 때까지 편집된 스타일을 가집니다. @@igComponent가 트랜잭션과 함께 제공되지 않는 경우의 비헤이비어입니다. 트랜잭션을 사용할 수 있는 경우, 모든 변경이 확정될 때까지 셀 편집 스타일이 적용됩니다.
@@ -295,7 +307,7 @@ export class HGridRowEditingSampleComponent implements OnInit {
```html
- Changes: {{rowChangesCount}}
+ Changes: {{rowChangesCount}}
```
@@ -305,38 +317,38 @@ export class HGridRowEditingSampleComponent implements OnInit {
```html
-
-
+
+
```
- ## Known Issues and Limitations
+## Known Issues and Limitations
- When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
- * Row Selection
- * Row Expand/collapse
- * Row Editing
- * Row Pinning
+ - Row Selection
+ - Row Expand/collapse
+ - Row Editing
+ - Row Pinning
### API 참조
-* [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable)
-* [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditenter)
-* [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onrowedit)
-* [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditcancel)
-* [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endedit)
-* [field]({environment:angularApiUrl}/classes/igxcolumncomponent.html#field)
-* [editable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)
-* [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#roweditable)
+- [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditenter)
+- [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onrowedit)
+- [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onroweditcancel)
+- [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endedit)
+- [field]({environment:angularApiUrl}/classes/igxcolumncomponent.html#field)
+- [editable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)
+- [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [@@igComponent 편집](editing.md)
-* [@@igComponent 트랜잭션](batch-editing.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [@@igComponent 편집](editing.md)
+- [@@igComponent 트랜잭션](batch-editing.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/row-pinning.md b/docs/angular/src/content/kr/grids_templates/row-pinning.md
index 1451f03f13..9a9bddfdf5 100644
--- a/docs/angular/src/content/kr/grids_templates/row-pinning.md
+++ b/docs/angular/src/content/kr/grids_templates/row-pinning.md
@@ -2,21 +2,21 @@
---
title: Angular Grid Row Pinning | Lock Row | Ignite UI for Angular | Infragistics
description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock rows with rich and easy to use API
-keywords: lock row, ignite ui for angular, infragistics
+keywords: lock row, ignite ui for angular, infragistics
---
}
@@if (igxName === 'IgxTreeGrid') {
---
title: Angular Tree Grid Row Pinning | Lock Row | Ignite UI for Angular | Infragistics
description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock rows with rich and easy to use API
-keywords: lock row, ignite ui for angular, infragistics
+keywords: lock row, ignite ui for angular, infragistics
---
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
title: Angular Hierarchical Grid Row Pinning | Lock Row | Ignite UI for Angular | Infragistics
description: Start to use the Pinning feature of the Ignite UI for Angular table in order to lock rows with rich and easy to use API
-keywords: lock row, ignite ui for angular, infragistics
+keywords: lock row, ignite ui for angular, infragistics
---
}
@@ -27,24 +27,24 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid.
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -67,9 +67,11 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -81,9 +83,11 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -95,6 +99,7 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w
```
+
}
@@ -103,40 +108,52 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w
Row pinning is controlled through the `pinned` input of the [`row`]({environment:angularApiUrl}/interfaces/rowtype.html). Pinned rows are rendered at the top of the @@igComponent by default and stay fixed through vertical scrolling of the unpinned rows in the @@igComponent body.
@@if (igxName === 'IgxGrid') {
+
```typescript
this.grid.getRowByIndex(0).pinned = true;
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
this.treeGrid.getRowByIndex(0).pinned = true;
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
this.hierarchicalGrid.getRowByIndex(0).pinned = true;
```
+
}
You may also use the @@igComponent's [`pinRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pinrow) or [`unpinRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#unpinrow) methods of the [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to pin or unpin records by their ID:
@@if (igxName === 'IgxGrid') {
+
```typescript
this.grid.pinRow("ALFKI");
this.grid.unpinRow("ALFKI");
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
this.treeGrid.pinRow("ALFKI");
this.treeGrid.unpinRow("ALFKI");
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
this.hierarchicalGrid.pinRow("ALFKI");
this.hierarchicalGrid.unpinRow("ALFKI");
```
+
}
Note that the row ID is the primary key value, defined by the [`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state.
@@ -144,6 +161,7 @@ Note that the row ID is the primary key value, defined by the [`primaryKey`]({en
A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the [`rowPinning`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowPinning) event and changing the [`insertAtIndex`]({environment:angularApiUrl}/interfaces/ipinroweventargs.html#insertatindex) property of the event arguments to the desired position index.
@@if (igxName === 'IgxGrid') {
+
```html
@@ -154,8 +172,10 @@ public rowPinning(event) {
event.insertAtIndex = 0;
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -166,8 +186,10 @@ public rowPinning(event) {
event.insertAtIndex = 0;
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -178,6 +200,7 @@ public rowPinning(event) {
event.insertAtIndex = 0;
}
```
+
}
### Pinning Position
@@ -186,21 +209,27 @@ You can change the row pinning position via the [`pinning`]({environment:angular
When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom.
@@if (igxName === 'IgxGrid') {
+
```html
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -364,8 +394,8 @@ This would allow reordering the rows and moving them between the pinned and unpi
#### Demo
-
@@ -375,16 +405,16 @@ This would allow reordering the rows and moving them between the pinned and unpi
### Row Pinning Limitations
-* Only records that exist in the data source can be pinned.
-* The row pinning state is not exported to excel. The grid is exported as if no row pinning is applied.
-* Because of how pinned rows are stored internally so that they may appear both in the pinned and unpinned areas of the grid, row pinning is not supported when records in the grid are fetched from a remote endpoint on demand (remote virtualization).
-* The copies of pinned rows in the scrollable area of the grid are an integral part of how other grid features achieve their functionality in the presence of pinned rows and therefore their creation cannot be disabled nor can they be removed.
-* As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vise versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record.
-* When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
- * Row Selection
- * Row Expand/collapse
- * Row Editing
- * Row Pinning
+- Only records that exist in the data source can be pinned.
+- The row pinning state is not exported to excel. The grid is exported as if no row pinning is applied.
+- Because of how pinned rows are stored internally so that they may appear both in the pinned and unpinned areas of the grid, row pinning is not supported when records in the grid are fetched from a remote endpoint on demand (remote virtualization).
+- The copies of pinned rows in the scrollable area of the grid are an integral part of how other grid features achieve their functionality in the presence of pinned rows and therefore their creation cannot be disabled nor can they be removed.
+- As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vise versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record.
+- When the grid has no `primaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
+ - Row Selection
+ - Row Expand/collapse
+ - Row Editing
+ - Row Pinning
### Styling
@@ -416,7 +446,7 @@ $custom-grid-theme: grid-theme(
);
```
-#### Using CSS variables
+#### Using CSS variables
The last step is to pass the custom grid theme:
@@ -426,7 +456,7 @@ The last step is to pass the custom grid theme:
#### Using mixins
-In order to style components for Internet Explorer 11, you have to use different approach, since it doesn't support CSS variables.
+In order to style components for Internet Explorer 11, you have to use different approach, since it doesn't support CSS variables.
If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. However, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`:
@@ -443,53 +473,53 @@ If the component is using an [`Emulated`](themes/sass/component-themes.md#view-e
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
}
## API References
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
-* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
-* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
-* [RowType]({environment:angularApiUrl}/interfaces/RowType.html)
-* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
+- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
+- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
+- [RowType]({environment:angularApiUrl}/interfaces/RowType.html)
+- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
## Additional Resources
-* [@@igComponent overview](@@igMainTopic.md)
-* [Virtualization and Performance](virtualization.md)
-* [Paging](paging.md)
-* [Filtering](filtering.md)
-* [Sorting](sorting.md)
-* [Summaries](summaries.md)
-* [Column Moving](column-moving.md)
-* [Column Resizing](column-resizing.md)
-* [Selection](selection.md)
+- [@@igComponent overview](@@igMainTopic.md)
+- [Virtualization and Performance](virtualization.md)
+- [Paging](paging.md)
+- [Filtering](filtering.md)
+- [Sorting](sorting.md)
+- [Summaries](summaries.md)
+- [Column Moving](column-moving.md)
+- [Column Resizing](column-resizing.md)
+- [Selection](selection.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/grids_templates/search.md b/docs/angular/src/content/kr/grids_templates/search.md
index e275682da4..85dba5d482 100644
--- a/docs/angular/src/content/kr/grids_templates/search.md
+++ b/docs/angular/src/content/kr/grids_templates/search.md
@@ -1,21 +1,21 @@
@@if (igxName === 'IgxGrid') {
---
-title: Angular Grid search | search data | Ignite UI for Angular | Infragistics
-description: Learn how to perform grid seach with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid
+title: Angular Grid search | search data | Ignite UI for Angular | Infragistics
+description: Learn how to perform grid search with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid
keywords: Content search, ignite ui for angular, infragistics
---
}
@@if (igxName === 'IgxTreeGrid') {
---
title: Angular Tree Grid search | search data | Ignite UI for Angular | Infragistics
-description: Learn how to perform grid seach with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid
+description: Learn how to perform grid search with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid
keywords: Content search, ignite ui for angular, infragistics
---
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
title: Angular Hierarchical Grid search | search data | Ignite UI for Angular | Infragistics
-description: Learn how to perform grid seach with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid
+description: Learn how to perform grid search with the Ignite Angular table using rich API. It also allows instant content search in the virtualized data of the Grid
keywords: Content search, ignite ui for angular, infragistics
---
}
@@ -28,16 +28,16 @@ While browsers natively provide content search functionality, most of the time t
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -52,6 +52,7 @@ While browsers natively provide content search functionality, most of the time t
그리드를 작성하고 데이터를 바인딩하는 것으로 시작합니다. 사용할 컴포넌트에 사용자 스타일도 추가합니다!
@@if (igxName === 'IgxGrid') {
+
```html
@@ -64,8 +65,10 @@ While browsers natively provide content search functionality, most of the time t
...
```
+
- **caseSensitive** 및 **exactMatch** 속성을 토글하는 두 개의 칩을 표시합니다. 이 속성을 기반으로 색상을 변경하는 두 개의 세련된 칩을 가진 체크 박스로 교체했습니다. 칩을 클릭할 때마다 클릭한 칩에 따라 해당 핸들러인 - **updateSearch** 또는 **updateExactSearch**가 호출됩니다.
```html
@@ -320,6 +327,7 @@ public clearSearch() {
...
```
+
- 검색 탐색 버튼의 경우 재료 아이콘을 사용해 입력을 리플 스타일 버튼으로 변환했습니다. 클릭 이벤트의 핸들러는 그대로 유지되며 [`findNext`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findnext)/[`findPrev`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findprev) 메소드를 호출합니다.
```html
@@ -350,49 +358,49 @@ public clearSearch() {
검색 결과의 탐색은 @@igComponent에 사용자 검색 줄 기능을 추가하여 구현했습니다. 또한 아이콘, 칩, 입력 등의 Ignite UI for Angular 컴포넌트를 추가로 사용했습니다. 검색 API는 다음과 같습니다.
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 메소드:
-- [findNext]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findnext)
-- [findPrev]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findprev)
-- [clearSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearsearch)
-- [refreshSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#refreshsearch)
+- [findNext]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findnext)
+- [findPrev]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findprev)
+- [clearSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearsearch)
+- [refreshSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#refreshsearch)
[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) 메소드:
[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) 속성:
-- [searchable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#searchable)
+- [searchable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#searchable)
[ISearchInfo]({environment:angularApiUrl}/interfaces/isearchinfo.html)
사용된 상대 API가 있는 추가 컴포넌트 및/또는 지시문:
-* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
-* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
-* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
-* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
-* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
+- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
+- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
+- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
+- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
스타일:
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxInputGroupComponent 스타일]({environment:sassApiUrl}/themes#function-input-group-theme)
-* [IgxIconComponent 스타일]({environment:sassApiUrl}/themes#function-icon-theme)
-* [IgxRippleDirective 스타일]({environment:sassApiUrl}/themes#function-ripple-theme)
-* [IgxButtonDirective 스타일]({environment:sassApiUrl}/themes#function-button-theme)
-* [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxInputGroupComponent 스타일]({environment:sassApiUrl}/themes#function-input-group-theme)
+- [IgxIconComponent 스타일]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxRippleDirective 스타일]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxButtonDirective 스타일]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [필터링](filtering.md)
-* [페이징](paging.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [필터링](filtering.md)
+- [페이징](paging.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/selection.md b/docs/angular/src/content/kr/grids_templates/selection.md
index 0aa7ee76d7..74ca531090 100644
--- a/docs/angular/src/content/kr/grids_templates/selection.md
+++ b/docs/angular/src/content/kr/grids_templates/selection.md
@@ -34,7 +34,7 @@ _language: kr
- `Shift 키`를 누른 상태에서 `화살표 키`를 사용하여 키보드로 다중 셀을 선택합니다. 다중 셀 선택 범위는 포커스된 셀을 기반으로 생성됩니다.
- `Shift 키`를 누른 상태에서 `Ctrl + 화살표 키`와 `Ctrl + Home/End`를 사용하여 키보드로 다중 셀을 선택합니다. 다중 셀 선택 범위는 포커스된 셀을 기반으로 생성됩니다.
- `Ctrl 키`를 누른 상태에서 `왼쪽 마우스 키`를 클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다.
-- 마우스로 클릭하고 드래그하면 연속해 다중 셀 선택이 가능합니다.
+- 마우스로 클릭하고 드래그하면 연속해 다중 셀 선택이 가능합니다.
#### 데모
@@ -42,16 +42,16 @@ _language: kr
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -74,7 +74,7 @@ _language: kr
- Ctrl + Shift + Home - 포커스된 셀에서 그리드의 첫 번째 셀까지의 모든 셀을 선택합니다
- Ctrl + Shift + End - 포커스된 셀에서 그리드의 마지막 셀까지의 모든 셀을 선택합니다.
-> [!NOTE]
+> [!NOTE]
> 그리드 보디에서만 연속 스크롤이 가능합니다.
### API 사용
@@ -82,7 +82,7 @@ _language: kr
##### 선택 범위
-[`selectRange(range)`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selectrange) - API를 사용하여 셀 범위를 선택합니다. `rowStart` 및 `rowEnd`는 행 인덱스를 사용해야 하며, `columnStart` 및 `columnEnd`는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.
+[`selectRange(range)`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selectrange) - API를 사용하여 셀 범위를 선택합니다. `rowStart` 및 `rowEnd`는 행 인덱스를 사용해야 하며, `columnStart` 및 `columnEnd`는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.
```typescript
const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
@@ -94,7 +94,7 @@ this.grid1.selectRange(range);
```
-> [!NOTE]
+> [!NOTE]
> 선택 범위는 부가 연산입니다. 이전 선택을 삭제하지 않습니다.
##### 셀 선택 삭제
@@ -106,6 +106,7 @@ this.grid1.selectRange(range);
[`getSelectedData()`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getselecteddata)은 선택한 데이터의 배열을 선택 내용에 따라 형식으로 반환합니다. 이하 예:
1. 3개의 다른 단일 셀을 선택한 경우:
+
```
expectedData = [
{ CompanyName: "Infragistics" },
@@ -113,8 +114,9 @@ expectedData = [
{ ParentID: 147 }
];
```
-
-2. 1열에서 3개 셀을 선택한 경우:
+
+1. 1열에서 3개 셀을 선택한 경우:
+
```
expectedData = [
{ Address: "Obere Str. 57"},
@@ -123,14 +125,16 @@ expectedData = [
];
```
-3. 1행 3열에서 마우스 드래그로 3개 셀을 선택한 경우:
+1. 1행 3열에서 마우스 드래그로 3개 셀을 선택한 경우:
+
```
expectedData = [
{ Address: "Avda. de la Constitución 2222", City: "México D.F.", ContactTitle: "Owner" }
];
```
-4. 2행 3열에서 마우스 드래그로 3개 셀을 선택한 경우:
+1. 2행 3열에서 마우스 드래그로 3개 셀을 선택한 경우:
+
```
expectedData = [
{ ContactTitle: "Sales Agent", Address: "Cerrito 333", City: "Buenos Aires"},
@@ -138,7 +142,8 @@ expectedData = [
];
```
-5. 2개의 다른 범위를 선택한 경우:
+1. 2개의 다른 범위를 선택한 경우:
+
```
expectedData = [
{ ContactName: "Martín Sommer", ContactTitle: "Owner"},
@@ -148,7 +153,8 @@ expectedData = [
];
```
-6. 2개의 중복 범위가 선택되면 형식은 다음과 같이 됩니다:
+1. 2개의 중복 범위가 선택되면 형식은 다음과 같이 됩니다:
+
```
expectedData = [
{ ContactName: "Diego Roel", ContactTitle: "Accounting Manager", Address: "C/ Moralzarzal, 86"},
@@ -158,7 +164,7 @@ expectedData = [
];
```
-> [!NOTE]
+> [!NOTE]
> [`selectedCells()`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selectedcells) will DO return the correct result even if the cell is not visible in grids view port. [`getSelectedData()`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getselecteddata) will also return the selected cell data.
> [`getSelectedRanges(): GridSelectionRange[]`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getselectedranges)는 키보드와 포인터 상호 작용으로 그리드에서 현재 선택된 범위를 반환합니다. 유형은 GridSelectionRange[]입니다.
@@ -184,24 +190,24 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -210,12 +216,12 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크
@@if (igxName === 'IgxGrid') {
### Selection Based Summaries
-This sample demonstrates the usage of multiple selection along with custom summary functions.
+This sample demonstrates the usage of multiple selection along with custom summary functions.
Change the selection to see summaries of the currently selected range.
-
@@ -228,6 +234,7 @@ Change the selection to see summaries of the currently selected range.
@@igComponent의 단일 선택은 @@igComponent의 [`selected`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selected) 이벤트를 사용하여 간단하게 설정할 수 있습니다. 이 이벤트는 셀 컴포넌트에 대한 참조를 내보냅니다. 셀 컴포넌트에는 포함되는 행 컴포넌트에 대한 참조가 있습니다. 행 컴포넌트 참조의 [`key`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxgridrow.html#key) 게터를 사용하여 행([`data[primaryKey]`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) 또는 [`data`]({environment:angularApiUrl}/classes/igxgridrow.html#data) 객체 자체를 사용하여)의 고유 식별자를 선택의 적절한 목록에 전달합니다. 단일 행만 항상 선택되도록 하기 위해 선택 행 선택 목록을 미리 비웁니다([`selectRows`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectrows) 메소드 호출의 두 번째 인수):
@@if (igxName === 'IgxGrid') {
+
```html
@@ -236,6 +243,7 @@ Change the selection to see summaries of the currently selected range.
...
```
+
```typescript
/* selectionExample.component.ts */
@@ -246,8 +254,10 @@ public handleRowSelection(args) {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -256,6 +266,7 @@ public handleRowSelection(args) {
...
```
+
```typescript
/* selectionExample.component.ts */
@@ -267,8 +278,10 @@ public handleRowSelection(event) {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
```typescript
/* selectionExample.component.ts */
@@ -287,6 +301,7 @@ public handleRowSelection(event) {
}
}
```
+
}
#### 복수 선택
@@ -294,6 +309,7 @@ public handleRowSelection(event) {
복수 행 선택을 사용하도록 하기 위해 [`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html)의 [`rowSelectable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowselectable) 속성을 사용합니다. [`rowSelectable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowselectable)을 `true`로 설정하면 각 행 및 @@igComponent 헤더에서 체크 박스 필드를 선택할 수 있게 됩니다. 체크 박스를 사용하여 복수의 행을 선택할 수 있으며 스크롤, 페이징 및 정렬 및 필터링 등의 데이터 조작을 통해 선택이 유지됩니다.
@@if (igxName === 'IgxGrid') {
+
```html
@@ -308,8 +324,10 @@ public handleRowSelection(event) {
public selection = true;
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -323,8 +341,10 @@ public selection = true;
public selection = true;
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
```typescript
/* selectionExample.component.ts */
public selection = true;
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
**참고:** 적절한 행 선택 및 셀 선택을 위해 @@igComponent가 원격 가상화를 실행하는 동안 [`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey)를 제공해야 합니다.
}
-**참고:** 필터링이 설정된 경우, [`selectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectallrows) 및 [`deselectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectallrows)는 *필터링된* 모든 행을 선택/선택 취소합니다.
+**참고:** 필터링이 설정된 경우, [`selectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectallrows) 및 [`deselectAllRows()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectallrows)는 _필터링된_ 모든 행을 선택/선택 취소합니다.
@@if (igxName !== 'IgxTreeGrid') {
**참고:** @@igComponent에 원격 가상화가 설정된 경우, 헤더 체크 박스를 클릭하면 모든 레코드가 선택/선택 취소됩니다. 그러나, 헤더 체크 박스를 통해 모든 레코드가 선택된 후 가시적인 행이 선택 해제된 경우, 필요에 따라 새로운 데이터가 @@igComponent에 로딩되면 새롭게 로드된 행이 선택되지 않는 제한이 있습니다.
@@ -358,6 +380,7 @@ public selection = true;
다음의 코드 예제를 사용하여 단일 또는 복수 행을 동시에 선택할 수 있습니다([`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey)를 사용하여):
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+
```html
@@ -367,8 +390,10 @@ public selection = true;
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -378,11 +403,13 @@ public selection = true;
...
```
+
}
이렇게 하면 ID 1, 2 및 5가 있는 데이터 항목에 해당하는 행을 @@igComponent 선택에 추가할 수 있습니다.
#### 선택 이벤트 취소
+
```html
@@ -390,6 +417,7 @@ public selection = true;
...
```
+
```typescript
/* selectionExample.component.ts */
@@ -401,24 +429,24 @@ public handleRowSelectionChange(args) {
### API 참조
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [가상화 및 성능](virtualization.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [가상화 및 성능](virtualization.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/sizing.md b/docs/angular/src/content/kr/grids_templates/sizing.md
index 04a131170a..9023b67bb4 100644
--- a/docs/angular/src/content/kr/grids_templates/sizing.md
+++ b/docs/angular/src/content/kr/grids_templates/sizing.md
@@ -1,21 +1,21 @@
@@if (igxName === 'IgxGrid') {
---
-title: Angular Grid Sizing | Ignite UI for Angular | infragistics
-description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accomodate the different scenarios that users can have.
+title: Angular Grid Sizing | Ignite UI for Angular | infragistics
+description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have.
keywords: angular grid sizing, igniteui for angular, infragistics
---
}
@@if (igxName === 'IgxTreeGrid') {
---
-title: Angular Tree Grid Sizing | Ignite UI for Angular | infragistics
-description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accomodate the different scenarios that users can have.
+title: Angular Tree Grid Sizing | Ignite UI for Angular | infragistics
+description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have.
keywords: angular grid sizing, igniteui for angular, infragistics
---
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
-title: Angular Hierarchical Grid Sizing | Ignite UI for Angular | infragistics
-description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accomodate the different scenarios that users can have.
+title: Angular Hierarchical Grid Sizing | Ignite UI for Angular | infragistics
+description: Understand how the Angular grid sizing works and learn how to use the width and height in order to accommodate the different scenarios that users can have.
keywords: angular grid sizing, igniteui for angular, infragistics
---
}
@@ -40,20 +40,20 @@ If the `width` input does not have value assigned, its default value is `100%` a
The grid's `width` can accepts value of `null`, which when set, renders all columns in the DOM. The grid sizes accordingly so there is no grid horizontal scrollbar since column virtualization is not applied.
-* If there are 6 columns and none of them has width defined, the grid will have `width` of `816px`, because each column by default have assigned `width` of `136px` in this scenario. Same will happen if the columns have `width` in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also.
+- If there are 6 columns and none of them has width defined, the grid will have `width` of `816px`, because each column by default have assigned `width` of `136px` in this scenario. Same will happen if the columns have `width` in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also.
-* If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible:
+- If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible:
-* If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario:
+- If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario:
-* If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example.
+- If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example.
@@ -64,11 +64,11 @@ The grid's `width` can accepts value of `null`, which when set, renders all colu
When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content:
-* When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered.
+- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered.
-* For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations:
+- For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations:
@@ -78,15 +78,15 @@ When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `
When the `width` of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) will size relative to the browser window.
-* For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly.
+- For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly.
-* If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`.
+- If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`.
-* If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own.
+- If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own.
@@ -102,15 +102,15 @@ By default if no height is defined for the [**@@igxName**]({environment:angularA
The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway.
-* If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid.
+- If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid.
-* If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows.
+- If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows.
-* If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected:
+- If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected:
@@ -122,15 +122,15 @@ The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `heigh
Setting the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how `width` is set in pixels.
-* If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area.
+- If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area.
-* If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way:
+- If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way:
-* If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar.
+- If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar.
@@ -145,25 +145,25 @@ When the parent element does not have defined height, the browser does not assig
Let's have `width` set to `1200px` and the parent element not having any size applied to it:
-* If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid.
+- If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid.
-* If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14.
+- If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14.
-* If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`.
+- If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`.
-* If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size.
+- If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size.
-* If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized.
+- If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized.
@@ -178,23 +178,23 @@ By default when a column doesn't have a specified width it will try to autosize,
When the grid is resized in these scenarios, the column width is also updated to reflect the changes, so it fills any new empty space available.
-* If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`.
+- If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`.
-* When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`.
+- When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`.
-* If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`.
+- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`.
-* If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest.
+- If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest.
-* Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`.
+- Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`.
@@ -205,11 +205,11 @@ When the grid is resized in these scenarios, the column width is also updated to
When columns have set specific `width` in pixels, they stick to that size, unless they are resized manually. Since the combined `width` of the columns is static, it can be less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` or exceed it.
-* If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width.
+- If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width.
-* If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds.
+- If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds.
@@ -218,19 +218,19 @@ When columns have set specific `width` in pixels, they stick to that size, unles
When columns have set `width` in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly.
-* If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover.
+- If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover.
-* If the combined width is exactly `100%`, the columns will fill all available space of the grid.
+- If the combined width is exactly `100%`, the columns will fill all available space of the grid.
-* If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered.
+- If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered.
-* If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`:
+- If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`:
@@ -238,7 +238,7 @@ When columns have set `width` in percentages, their size is calculated relativel
---
### Child Grid Sizing
-Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them.
+Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them.
#### Width
@@ -261,16 +261,16 @@ The difference is that for the child grid, when `height` is set to percentages,
## API References
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
## Additional Resources
-* [@@igComponent overview](@@igMainTopic.md)
-* [Virtualization and Performance](virtualization.md)
+- [@@igComponent overview](@@igMainTopic.md)
+- [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/grids_templates/sorting.md b/docs/angular/src/content/kr/grids_templates/sorting.md
index 219fa64a4a..ab7ec410a7 100644
--- a/docs/angular/src/content/kr/grids_templates/sorting.md
+++ b/docs/angular/src/content/kr/grids_templates/sorting.md
@@ -28,24 +28,24 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -115,23 +115,23 @@ public ngOnInit() {
}
### API 참조
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/state-persistence.md b/docs/angular/src/content/kr/grids_templates/state-persistence.md
index 91e109886d..c41de9725e 100644
--- a/docs/angular/src/content/kr/grids_templates/state-persistence.md
+++ b/docs/angular/src/content/kr/grids_templates/state-persistence.md
@@ -26,8 +26,9 @@ Ignite UI for Angular @@igComponent component provides the [`IgxGridState`]({env
#### API
-[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) - This method returns the grid state in a serialized JSON string, the easisest way to enable developers just take it and save it on any data storage (database, cloud, etc). Once the developer needs to restore this state, just pass it back to the [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setstate) method. The first optional method parameter is `serialize`, which determines whether [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) will return the original objects, or the serialized JSOn string.
+[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) - This method returns the grid state in a serialized JSON string, the easiest way to enable developers just take it and save it on any data storage (database, cloud, etc). Once the developer needs to restore this state, just pass it back to the [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setstate) method. The first optional method parameter is `serialize`, which determines whether [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getstate) will return the original objects, or the serialized JSOn string.
The developer may choose to get only the state for a certain feature/features, by passing in the feature name, or an array with feature names as a second argument.
+
```typescript
// get all features` state in a serialized JSON string
const gridState = this.state.getState();
@@ -56,6 +57,7 @@ public restoreSortingFiltering(sortingFilteringStates: IGridState) {
```typescript
public options = { cellSelection: false; sorting: false; }
```
+
```html
@@ -132,14 +135,14 @@ public initColumns(column: IgxColumnComponent) {
## API References
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
## Additional Resources
-* [@@igComponent overview](@@igMainTopic.md)
-* [Paging](paging.md)
-* [Filtering](filtering.md)
-* [Sorting](sorting.md)
-* [Selection](selection.md)
\ No newline at end of file
+- [@@igComponent overview](@@igMainTopic.md)
+- [Paging](paging.md)
+- [Filtering](filtering.md)
+- [Sorting](sorting.md)
+- [Selection](selection.md)
\ No newline at end of file
diff --git a/docs/angular/src/content/kr/grids_templates/summaries.md b/docs/angular/src/content/kr/grids_templates/summaries.md
index e2cf50adb5..0f65e344b2 100644
--- a/docs/angular/src/content/kr/grids_templates/summaries.md
+++ b/docs/angular/src/content/kr/grids_templates/summaries.md
@@ -1,21 +1,21 @@
@@if (igxName === 'IgxGrid') {
---
title: Angular Grid Summaries| Group Footer | Ignite UI for Angular | Infragistics
-description: Configure Аngular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI
+description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI
keywords: angular grid summaries, igniteui for angular, infragistics
---
}
@@if (igxName === 'IgxTreeGrid') {
---
title: Angular Tree Grid Summaries| Group Footer | Ignite UI for Angular | Infragistics
-description: Configure Аngular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI
+description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI
keywords: angular grid summaries, ignite ui for angular, infragistics
---
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
title: Angular Hierarchical Grid Summaries| Group Footer | Ignite UI for Angular | Infragistics
-description: Configure Аngular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI
+description: Configure Angular grid summaries in the group footer of the column and use the option to set custom angular template in the Ignite UI for Angular UI
keywords: angular grid summaries, ignite ui for angular, infragistics
---
}
@@ -28,24 +28,24 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -59,23 +59,24 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu
`string` 및 `boolean` [`data types`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype)의 경우 다음의 함수를 사용할 수 있습니다:
- - count
+- count
`number` 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다:
- - count
- - min
- - max
- - average
- - sum
+- count
+- min
+- max
+- average
+- sum
`date` 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다:
- - count
- - earliest
- - latest
+- count
+- earliest
+- latest
**[`hasSummary`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#hassummary) 속성을 `true`로 설정하면 @@igComponent 요약**이 열 단위로 활성화됩니다. 또한, 각 열의 요약은 열 데이터 형식에 따라 해결되는 것에 유의하십시오. `@@igSelector`에서 기본 열 데이터 유형은 `string`이므로 `number` 또는 `date` 별 요약을 원하는 경우, [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype) 속성을 `number` 또는 `date`로 설정해야 합니다.
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
@@ -86,8 +87,10 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -106,10 +109,12 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu
```
+
}
특정 열 또는 열 목록에서 요약을 활성화/비활성화하는 또 다른 방법은 **@@igSelector**의 공개 메소드 [`enableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#enablesummaries)/[`disableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disablesummaries)를 사용하는 것입니다.
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -122,6 +127,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu
```
+
```typescript
public enableSummary() {
this.grid1.enableSummaries([
@@ -133,8 +139,10 @@ public disableSummary() {
this.grid1.disableSummaries("ProductName");
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
<@@igSelector #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -243,10 +259,12 @@ export class GridComponent implements OnInit {
....
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
이제 `GramyNominations` 열에 사용자 요약을 추가해 보겠습니다. [`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries) 속성을 아래에서 작성하는 클래스로 설정하면 됩니다.
+
```html
@@ -272,6 +290,7 @@ export class HGridSummarySampleComponent implements OnInit {
....
}
```
+
}
#### Custom summaries, which access all @@igComponent data
@@ -296,24 +315,24 @@ class MySummary extends IgxNumberSummaryOperand {
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -325,13 +344,13 @@ class MySummary extends IgxNumberSummaryOperand {
열 단위로 그룹화하면 @@igComponent는 [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 및 [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성을 사용하여 요약 위치 및 계산 모드를 변경할 수 있습니다.
[`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 속성의 사용 가능한 값은 다음과 같습니다:
- - rootLevelOnly - 요약은 루트 수준에 대해서만 계산됩니다.
- - childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다.
- - rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다.
+- rootLevelOnly - 요약은 루트 수준에 대해서만 계산됩니다.
+- childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다.
+- rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다.
[`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성의 사용 가능한 값은 다음과 같습니다:
- - top - 요약 행은 그룹화 행의 하위 앞에 표시됩니다.
- - bottom - 요약 행은 그룹화 행의 하위 뒤에 표시됩니다. 이것이 기본값입니다.
+- top - 요약 행은 그룹화 행의 하위 앞에 표시됩니다.
+- bottom - 요약 행은 그룹화 행의 하위 뒤에 표시됩니다. 이것이 기본값입니다.
> [!NOTE]
> [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성은 하위 수준 요약에만 적용됩니다. 루트 수준 요약은 @@igComponent의 아래에 항상 고정되어 표시됩니다.
@@ -339,8 +358,8 @@ class MySummary extends IgxNumberSummaryOperand {
#### 데모
-
@@ -351,20 +370,20 @@ class MySummary extends IgxNumberSummaryOperand {
@@igComponent는 루트 노드와 각 중첩된 하위 노드 수준에 대해 별도의 요약을 지원합니다. 표시된 요약은 [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 속성을 사용하여 구성할 수 있습니다. 하위 수준 요약은 [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성을 사용하여 하위 노드 전후에 표시할 수 있습니다.
[`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summarycalculationmode) 속성의 사용 가능한 값은 다음과 같습니다:
- - rootLevelOnly - 요약은 루트 수준 노드에 대해서만 계산됩니다.
- - childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다.
- - rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다.
+- rootLevelOnly - 요약은 루트 수준 노드에 대해서만 계산됩니다.
+- childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다.
+- rootAndChildLevels - 요약은 루트 및 하위 수준 모두에 대해 계산됩니다. 이것이 기본값입니다.
[`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성의 사용 가능한 값은 다음과 같습니다:
- - top - 요약 행은 하위 행의 목록 앞에 나타납니다.
- - bottom - 요약 행은 하위 행의 목록 뒤에 나타납니다. 이것이 기본값입니다.
+- top - 요약 행은 하위 행의 목록 앞에 나타납니다.
+- bottom - 요약 행은 하위 행의 목록 뒤에 나타납니다. 이것이 기본값입니다.
> [!NOTE]
> [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryposition) 속성은 하위 수준 요약에만 적용됩니다. 루트 수준 요약은 @@igComponent의 아래에 항상 고정되어 표시됩니다.
-
@@ -385,28 +404,28 @@ class MySummary extends IgxNumberSummaryOperand {
### API 참조
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [@@igxNameSummaries 스타일]({environment:sassApiUrl}/themes#function-grid-summary-theme)
-* [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html)
-* [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)
-* [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html)
-* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameSummaries 스타일]({environment:sassApiUrl}/themes#function-grid-summary-theme)
+- [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html)
+- [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)
+- [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html)
+- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [가상화 및 성능](virtualization.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [정렬](sorting.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [가상화 및 성능](virtualization.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [정렬](sorting.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/toolbar.md b/docs/angular/src/content/kr/grids_templates/toolbar.md
index 0526fcab43..472b307cb4 100644
--- a/docs/angular/src/content/kr/grids_templates/toolbar.md
+++ b/docs/angular/src/content/kr/grids_templates/toolbar.md
@@ -26,10 +26,10 @@ _language: kr
The @@igComponent in Ignite UI for Angular provides an [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) which is essentially a container for **UI** operations. The Angular toolbar is located at the top of the Angular component, i.e the @@igComponent and it matches its horizontal size. The toolbar container can host predefined UI controls for the following @@igComponent's features:
- - Column Hiding
- - Column Pinning
- - Excel Exporting
- - Advanced Filtering
+- Column Hiding
+- Column Pinning
+- Excel Exporting
+- Advanced Filtering
or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers.
@@ -37,24 +37,24 @@ or just any other custom content. The toolbar and the predefined UI components s
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -63,6 +63,7 @@ or just any other custom content. The toolbar and the predefined UI components s
The predefined `actions` and `title` UI components are added inside the `` and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:
@@if (igxName === 'IgxGrid') {
+
```html
Grid Toolbar
@@ -75,8 +76,10 @@ The predefined `actions` and `title` UI components are added inside the `
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -90,8 +93,10 @@ The predefined `actions` and `title` UI components are added inside the `
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -105,6 +110,7 @@ The predefined `actions` and `title` UI components are added inside the `
```
+
}
> Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the [`` container]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html). This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.
@@ -112,28 +118,34 @@ The predefined `actions` and `title` UI components are added inside the `
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
For a comprehensive look over each of the default UI components, continue reading the **Features** section
@@ -158,24 +170,24 @@ Listed below are the main features of the toolbar with example code for each of
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -196,6 +208,7 @@ import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular
export class AppModule {}
```
+
@@if (igxName !== 'IgxHierarchicalGrid') {
#### 내보내기 사용자 정의
@@ -249,8 +262,8 @@ public toolbarExportingHandler(args) {
@@if (igxName === 'IgxGrid') {
-
@@ -258,8 +271,8 @@ public toolbarExportingHandler(args) {
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -293,8 +306,8 @@ public toolbarExportingHandler(args) {
@@if (igxName === 'IgxGrid') {
-
@@ -302,8 +315,8 @@ public toolbarExportingHandler(args) {
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -311,8 +324,8 @@ public toolbarExportingHandler(args) {
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -326,24 +339,24 @@ public toolbarExportingHandler(args) {
[`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html)
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 속성:
-* [`toolbar`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbar)
-* [`showProgress`]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress)
-* [`exportExcel`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexcel)
-* [`exportCsv`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsv)
-* [`exportText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exporttext)
-* [`exportExcelText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexceltext)
-* [`exportCsvText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsvtext)
+- [`toolbar`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbar)
+- [`showProgress`]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress)
+- [`exportExcel`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexcel)
+- [`exportCsv`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsv)
+- [`exportText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exporttext)
+- [`exportExcelText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportexceltext)
+- [`exportCsvText`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#exportcsvtext)
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 이벤트:
-* [`toolbarExporting`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbarExporting)
+- [`toolbarExporting`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbarExporting)
스타일:
-* [`@@igxNameComponent 스타일`]({environment:sassApiUrl}/themes#function-grid-theme)
+- [`@@igxNameComponent 스타일`]({environment:sassApiUrl}/themes#function-grid-theme)
### 추가 리소스
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/kr/grids_templates/virtualization.md b/docs/angular/src/content/kr/grids_templates/virtualization.md
index adbbfd897f..007bc556f9 100644
--- a/docs/angular/src/content/kr/grids_templates/virtualization.md
+++ b/docs/angular/src/content/kr/grids_templates/virtualization.md
@@ -1,22 +1,22 @@
@@if (igxName === 'IgxGrid') {
---
-title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular
-description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory.
+title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular
+description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory.
keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Angular Virtualization Directive, Angular Data Table Virtualization, Virtualization, Angular Data Table Performance, Data Table Performance
_language: kr
---
}
@@if (igxName === 'IgxTreeGrid') {
---
-title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular
-description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the tree grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory.
+title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular
+description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the tree grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory.
keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Tree Grid, Angular Tree Table, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular Tree Grid component, Angular Tree Table component, Angular Tree Grid control, Angular Tree Table control, Angular High Performance Tree Grid, Angular High Performance Tree Table, Angular Virtualization Directive, Angular Tree Table Virtualization, Virtualization, Angular Tree Table Performance, Tree Table Performance
_language: kr
---
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
-title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular
+title: 가상화 지시문 - 네이티브 Angular | Ignite UI for Angular
description: The Ignite UI for Angular Virtualization directive is the core mechanic behind the speed and performance of the hierarchical grid when handling large data sets, since its virtual rendering mechanism allows the user to effortlessly scroll by its fixing of the number of DOM objects in memory.
keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Hierarchical Grid, Angular Hierarchical Table, Angular Hierarchical Grid component, Angular Hierarchical Table component, Angular Hierarchical Grid control, Angular Hierarchical Table control, Angular High Performance Hierarchical Grid, Angular High Performance Hierarchical Table, Angular Virtualization Directive, Angular Hierarchical Table Virtualization, Virtualization, Angular Hierarchical Table Performance, Hierarchical Table Performance
_language: kr
@@ -30,8 +30,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig
#### 데모
-
@@ -39,8 +39,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig
@@if (igxName === 'IgxHierarchicalGrid') {
#### 데모
-
@@ -52,8 +52,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig
데이터의 크기는 다음에 따라 결정됩니다:
-* 수직(행) 가상화의 행 높이입니다. 이것은 [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) 옵션에 의해 결정되며 기본적으로 50(px)입니다.
-* 수평(열) 가상화의 개별 열 너비(픽셀 단위)입니다. 각 열 컴포넌트에 대해 명시적으로 폭을 설정하거나 명시적으로 폭이 설정되지 않은 모든 열에 적용되는 @@igComponent의 [`columnWidth`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnwidth) 옵션을 설정할 수 있습니다.
+- 수직(행) 가상화의 행 높이입니다. 이것은 [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) 옵션에 의해 결정되며 기본적으로 50(px)입니다.
+- 수평(열) 가상화의 개별 열 너비(픽셀 단위)입니다. 각 열 컴포넌트에 대해 명시적으로 폭을 설정하거나 명시적으로 폭이 설정되지 않은 모든 열에 적용되는 @@igComponent의 [`columnWidth`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnwidth) 옵션을 설정할 수 있습니다.
규격을 설정하지 않은 채로 그리드에 기본 동작을 적용하면 대부분의 경우 원하는 레이아웃이 생성됩니다. 열 너비의 경우에는 열 수, 너비가 설정된 열 및 @@igComponent 컨테이너의 계산된 너비에 따라 결정됩니다. 그리드는 할당하려는 폭이 136(px) 미만인 경우 이외에는 사용 가능한 공간 안에 모든 열을 맞추려고 합니다. 이 경우, 할당되지 않은 너비를 가진 열은 136(px)의 최소 너비로 설정되고 가로 스크롤바가 표시됩니다. 그리드는 가로 방향으로 가상화됩니다.
@@ -67,8 +67,8 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig
### 원격 가상화 데모
-
@@ -107,7 +107,7 @@ public processData() {
데이터를 요청할 때는 [`startIndex`]({environment:angularApiUrl}/interfaces/iforofstate.html#startindex) 및 [`chunkSize`]({environment:angularApiUrl}/interfaces/iforofstate.html#chunksize) 속성을 제공하는 [`IForOfState`]({environment:angularApiUrl}/interfaces/iforofstate.html) 인터페이스를 사용해야 합니다.
-***참고:*** 첫 번째 [`chunkSize`]({environment:angularApiUrl}/interfaces/iforofstate.html#chunksize)는 항상 0이며 특정 애플리케이션애플리케이션 시나리오에 따라 결정해야 합니다.
+_**참고:**_ 첫 번째 [`chunkSize`]({environment:angularApiUrl}/interfaces/iforofstate.html#chunksize)는 항상 0이며 특정 애플리케이션애플리케이션 시나리오에 따라 결정해야 합니다.
### 원격 정렬/필터링 가상화
원격 정렬 및 필터링을 제공하려면 [`dataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#datapreload), [`sortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingDone), [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) 출력에 서브스크라이브해야 하므로 받은 인수를 기반으로 적절한 요청을 하고 공개 [@@igxName]({environment:angularApiUrl}/classes/@@igTypeDoc.html) 속성 [`totalItemCount`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#totalitemcount)를 설정해야 합니다.
@@ -115,8 +115,8 @@ public processData() {
원격 데이터를 요청할 때 필터링 작업은 대소문자를 구분합니다.
-
@@ -160,8 +160,8 @@ public processData() {
원격 필터링은 플랫 컬렉션에서 직접 실행해야 합니다. 상위가 필터링과 일치하는지 여부에 관계없이 필터링 조건과 일치하는 모든 레코드에 대해 모든 상위를 포함시켜야 합니다(계층 구조를 유지하기 위해 이 작업을 실행함). 결과는 다음과 같습니다:
-
@@ -171,7 +171,7 @@ public processData() {
### 가상화 제한 사항
-* Mac OS에서 "스크롤할 때 스크롤바 만 표시" 옵션이 true(기본값)로 설정되어 있으면 가로 스크롤바가 표시되지 않습니다. 이것은 @@igComponent의 행 컨테이너에 오버플로가 숨기기로 설정되어 있기 때문입니다. 옵션을 "항상"으로 변경하면 스크롤바가 표시됩니다.
+- Mac OS에서 "스크롤할 때 스크롤바 만 표시" 옵션이 true(기본값)로 설정되어 있으면 가로 스크롤바가 표시되지 않습니다. 이것은 @@igComponent의 행 컨테이너에 오버플로가 숨기기로 설정되어 있기 때문입니다. 옵션을 "항상"으로 변경하면 스크롤바가 표시됩니다.
### FAQ
@@ -181,25 +181,25 @@ public processData() {
### API 참조
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
-* [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
+- [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html)
### 추가 리소스
-* [@@igComponent 개요](@@igMainTopic.md)
-* [페이징](paging.md)
-* [필터링](filtering.md)
-* [정렬](sorting.md)
-* [요약](summaries.md)
-* [열 이동](column-moving.md)
-* [열 핀 고정](column_pinning.md)
-* [열 크기 조정](column-resizing.md)
-* [선택](selection.md)
+- [@@igComponent 개요](@@igMainTopic.md)
+- [페이징](paging.md)
+- [필터링](filtering.md)
+- [정렬](sorting.md)
+- [요약](summaries.md)
+- [열 이동](column-moving.md)
+- [열 핀 고정](column_pinning.md)
+- [열 크기 조정](column-resizing.md)
+- [선택](selection.md)
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
-* [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)
+- [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/xplat/AI-AGENT-API-LINKS.md b/docs/xplat/AI-AGENT-API-LINKS.md
index e10726046f..782b63f1ab 100644
--- a/docs/xplat/AI-AGENT-API-LINKS.md
+++ b/docs/xplat/AI-AGENT-API-LINKS.md
@@ -159,7 +159,7 @@ Check the `kind` field on the top-level symbol in the JSON:
| JSON `kind` value | MDX `kind=` |
|---|---|
-| `128` | `"class"` *(default — can be omitted)* |
+| `128` | `"class"` _(default — can be omitted)_ |
| `256` | `"interface"` — **must set explicitly** |
| `8` | `"enum"` — **must set explicitly** |
| `4194304` | `"type"` — **must set explicitly** |
@@ -294,6 +294,7 @@ Excel library types (`Workbook`, `Worksheet`, `WorksheetTable`, `WorksheetCell`,
The Blazor excel package is **not** the main `IgniteUI.Blazor` package — it is `IgniteUI.Blazor.Documents.Excel`. This is already configured in `platform-context.ts`. Do not change it to `IgniteUI.Blazor`.
### `platform-context.ts` excel entry (Blazor — correct)
+
```typescript
excel: {
docRoot: 'https://staging.infragistics.com/blazor-apis-new/blazor/IgniteUI.Blazor.Documents.Excel/25.1.x',
@@ -351,11 +352,13 @@ Fix: replace JSX numeric props with string values inside comments:
### Column-level fix
Before:
+
```mdx
@@ -105,6 +106,7 @@ Each platform has a different template/markup syntax. Wrap each variant:
```typescript
this.grid.updateCell(newValue, rowID, 'Age');
```
+
@@ -140,6 +142,7 @@ When two or more platforms share the exact same content, use a comma-separated `
```typescript
this.grid.sort({ fieldName: 'Name', dir: SortingDirection.Asc });
```
+
@@ -171,6 +174,7 @@ public updateCell() {
this.hierarchicalGrid.updateCell(newValue, rowID, 'Age');
}
```
+
@@ -254,6 +258,7 @@ Every `` must have exactly one ` ` closi
```html
```ts
@@ -270,6 +275,7 @@ var grid = document.getElementById('grid') as IgcGridComponent;
```ts
var grid = document.getElementById('grid') as IgcGridComponent;
```
+
```
@@ -300,6 +306,7 @@ Typical full-coverage pattern:
```html
```
+
@@ -310,6 +317,7 @@ Typical full-coverage pattern:
```ts
// WC-specific TypeScript initialization
```
+
@@ -330,9 +338,11 @@ Typical full-coverage pattern:
## Step-by-Step: Adding a PlatformBlock to an Existing File
1. **Check for the import** at the top of the file:
+
```mdx
import PlatformBlock from 'docs-template/components/mdx/PlatformBlock.astro';
```
+
Add it if missing (after existing imports).
2. **Identify the platform-specific content** — look for platform API tokens (see table above) in unprotected code blocks.
diff --git a/docs/xplat/API-LINKS-README.md b/docs/xplat/API-LINKS-README.md
index bf571d7dfc..07f1729e30 100644
--- a/docs/xplat/API-LINKS-README.md
+++ b/docs/xplat/API-LINKS-README.md
@@ -27,11 +27,13 @@ Renders an inline `
@@ -254,6 +255,7 @@ this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
+
```
diff --git a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
index fc0d017d1a..6050d0963c 100644
--- a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
@@ -28,7 +28,7 @@ The following example demonstrates how to create Composite Chart using
@@ -1011,6 +1012,7 @@ Data Filtering via the
diff --git a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx
index 6232314af4..7ae1a21a52 100644
--- a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx
+++ b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx
@@ -22,7 +22,7 @@ The open-source libraries include:
## Create a New Blazor Project
- - Start Visual Studio and click **Create a new project** on the start page, select a Blazor template such as **Blazor Server App**, **Blazor WebAssembly App**, or **Blazor Web App**, and click **Next**.
+- Start Visual Studio and click **Create a new project** on the start page, select a Blazor template such as **Blazor Server App**, **Blazor WebAssembly App**, or **Blazor Web App**, and click **Next**.
When using **Blazor Server App**, ensure you add `@rendermode InteractiveServer` in the pages where the components are used.
diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx
index f0cac68757..c7bd338008 100644
--- a/docs/xplat/src/content/en/components/general-getting-started.mdx
+++ b/docs/xplat/src/content/en/components/general-getting-started.mdx
@@ -413,7 +413,7 @@ This command will run the build script we created earlier. The build script will
3 - To run the project, launch a local development server. In this example, we are using Live Server. Right-click within the editor of **index.html** and select **Open with Live Server**
-{/*
Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
@@ -421,7 +421,7 @@ Live Server is an extension to Visual Studio Code that allows you to launch a lo
4 - Navigate to the **index.html** using a web browser on your local server. The final result should show interactive map of the world:
-{/*
-- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md)
-- [Dock Manager](../components/layouts/dock-manager.md)
+- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md)
+- [Dock Manager](../components/layouts/dock-manager.md)
- [Charting library](../components/charts/chart-overview.md)
- [Maps library](../components/geo-map.md)
- [Excel Library](../components/excel-library.md)
@@ -42,8 +42,8 @@ Our Ignite UI Premium components come with advanced enterprise features and are
-- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md)
-- [Dock Manager](../components/layouts/dock-manager.md)
+- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md)
+- [Dock Manager](../components/layouts/dock-manager.md)
- [Charting library](../components/charts/chart-overview.md)
- [Maps library](../components/geo-map.md)
- [Spreadsheet](../components/spreadsheet-overview.md)
diff --git a/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx
index c51ba88201..bc4c6a3fa0 100644
--- a/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx
@@ -31,8 +31,8 @@ The following table explains properties of the
@@ -93,6 +94,7 @@ const currencyCellTemplate = (ctx: IgrCellContext) => (
{formatCurrency(ctx.value)}
);
```
+
@@ -105,8 +107,8 @@ const currencyCellTemplate = (ctx: IgrCellContext) => (
You can combine values of different fields from the data source as well.
-{/* TODO:
-Refer to the API documentation for `GridLiteCellContext` for more information. */}
+{/*TODO:
+Refer to the API documentation for `GridLiteCellContext` for more information.*/}
@@ -119,6 +121,7 @@ const column = document.querySelector('igc-grid-lite-column');
// Return the custom currency formatted value
column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count);
```
+
@@ -133,6 +136,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => (
{asCurrency(ctx.value * ctx.row.data.count)}
);
```
+
@@ -141,6 +145,7 @@ const totalCellTemplate = (ctx: IgrCellContext) => (
## Custom DOM Templates
@@ -243,7 +248,6 @@ export interface GridLiteCellContext<
Here is an example:
@@ -425,6 +426,7 @@ return(
@@ -564,6 +566,7 @@ export type DataPipelineParams = {
type: 'sort' | 'filter';
};
```
+
```typescript
grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[] | Promise };
@@ -606,6 +609,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
}
};
```
+
@@ -615,11 +619,8 @@ The following example mocks remote filter operation, reflecting the REST endpoin
### Installation
@@ -69,6 +70,7 @@ Or using yarn:
```cmd
yarn add igniteui-react
```
+
### Using the Grid Lite in your {Platform} code
@@ -79,6 +81,7 @@ In the file where you want to use Grid Lite, first we need to import it:
```tsx
import { IgrGridLite } from 'igniteui-react/grid-lite';
```
+
@@ -89,6 +92,7 @@ import { IgcGridLite } from 'igniteui-grid-lite';
IgcGridLite.register();
```
+
@@ -113,6 +117,7 @@ return (
);
```
+
| プライマリ プロパティ | 依存プロパティ | 説明 |
| --- | --- | --- |
diff --git a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx
index 518f5bd9bd..a07c14f5e0 100644
--- a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx
+++ b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx
@@ -25,6 +25,7 @@ Ignite UI for Angular offers full theming customization through CSS variables an
```cmd
ng add igniteui-angular
```
+
### 1. Tailwind のインストール
diff --git a/docs/angular/src/content/jp/components/themes/typography.mdx b/docs/angular/src/content/jp/components/themes/typography.mdx
index 4c15b9a386..3f40723f4e 100644
--- a/docs/angular/src/content/jp/components/themes/typography.mdx
+++ b/docs/angular/src/content/jp/components/themes/typography.mdx
@@ -39,7 +39,7 @@ Ignite UI for Angular のタイポグラフィは、[マテリアル タイプ
diff --git a/docs/angular/src/content/jp/components/zoomslider-overview.mdx b/docs/angular/src/content/jp/components/zoomslider-overview.mdx
index 6f7bb3523c..dedd05ecbb 100644
--- a/docs/angular/src/content/jp/components/zoomslider-overview.mdx
+++ b/docs/angular/src/content/jp/components/zoomslider-overview.mdx
@@ -38,8 +38,6 @@ Angular ZoomSlider コントロールは、範囲対応コントロールにズ
-
-
## 依存関係
Angular chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。
@@ -59,7 +57,6 @@ npm install --save igniteui-angular-charts
-
```ts
import { IgxZoomSliderModule } from 'igniteui-angular-charts';
import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
@@ -77,9 +74,6 @@ export class AppModule {}
-
-
-
## コード スニペット
以下のコードは、ZoomSlider を設定する方法を示します。
@@ -93,14 +87,6 @@ export class AppModule {}
```
-
-
-
-
-
-
-
-
## その他のリソース
チャートの詳細については、[グラフの機能](charts/chart-features.md)トピックを参照してください。
diff --git a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
index 54386b9fff..bde6fb8339 100644
--- a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
@@ -102,6 +102,7 @@ export class AppModule {}
...
```
+
@@ -119,6 +120,7 @@ export class AppModule {}
(click)="openCommitDialog()">Commit
...
```
+
トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、`{ComponentTitle}` は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで
--
-* [検索](/{igPath}/search)
+- [検索](/{igPath}/search)
コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
index f0d98529fd..97d0f8a921 100644
--- a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
+++ b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
@@ -278,7 +278,7 @@ public processData() {
このトピックのはじめにあるコードの結果は、[デモ](#angular-tree-grid-リモート-データ操作の例)で確認できます。
- {/* TODO */}
+ {/*TODO*/}
## 一意の列値ストラテジ
diff --git a/docs/angular/src/content/jp/grids_templates/row-drag.mdx b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
index c40d9d6578..e761b6bab3 100644
--- a/docs/angular/src/content/jp/grids_templates/row-drag.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
@@ -222,7 +222,7 @@ export class {ComponentName}RowDragComponent {
}
```
-次のように `ViewChild` デコレータを使用して各グリッドに refenrece を定義し、ドロップを処理します。
+次のように `ViewChild` デコレータを使用して各グリッドに reference を定義し、ドロップを処理します。
- 削除される行のデータを含む行を `targetGrid` に追加します。
- `sourceGrid` からドラッグした行を削除します。
diff --git a/docs/angular/src/content/kr/components/action-strip.md b/docs/angular/src/content/kr/components/action-strip.md
index a549777382..110f228729 100644
--- a/docs/angular/src/content/kr/components/action-strip.md
+++ b/docs/angular/src/content/kr/components/action-strip.md
@@ -13,8 +13,8 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai
#### Demo
-
@@ -55,8 +55,8 @@ For scenarios where more than three action items will be shown, it is best to us
```
-
@@ -88,11 +88,12 @@ This can be utilized via grid action components and we are providing two default
```
+
>Note: These components inherit [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`.
-
@@ -100,10 +101,13 @@ This can be utilized via grid action components and we are providing two default
### Styling
To customize the Action Strip, you first need to import the `index` file, where all styling functions and mixins are located.
+
```scss
@import '~igniteui-angular/lib/core/styles/themes/index'
```
+
Next, we have to create a new theme that extends the `action-strip-theme` and pass the parameters which we'd like to change:
+
```scss
$custom-strip: action-strip-theme(
$background: rgba(150, 133, 143, 0.4),
@@ -117,19 +121,21 @@ $custom-strip: action-strip-theme(
The last step is to include the newly created component theme in our application.
When `$legacy-support` is set to `false`(default), include the component css variables like this:
+
```scss
@include css-vars($custom-strip);
```
When `$legacy-support` is set to `true`, include the component theme like this:
+
```scss
@include action-strip($custom-strip);
```
-
@@ -138,25 +144,25 @@ When `$legacy-support` is set to `true`, include the component theme like this:
### API and Style References
For more detailed information regarding the Action Strip API, refer to the following links:
-* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
+- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
The following built-in CSS styles helped us achieve this Action Strip layout:
-* [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme)
+- [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme)
Additional components and/or directives that can be used within the Action Strip:
-* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
-* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
-* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
-* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
+- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
+- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
+- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
+- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
@@ -36,15 +36,17 @@ import { IgxAvatarModule } from 'igniteui-angular';
})
export class AppModule {}
```
+
The Avatar can be either square or circular, with three size options (small, medium and large). It can be used for displaying initials, images or icons.
-####Avatar displaying initials
+#### Avatar displaying initials
To get a simple avatar with [`initials`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#initials) (i.e. JS for 'Jack Sock'), add the following code inside the component template:
```html
```
+
Let's enhance our avatar by making it circular and bigger in size. We can also change the background through the [`bgColor`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#bgcolor) property or set a color on the initials through the [`color`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#color) property. All of these are input properties and can be bound to some component properties.
```html
@@ -55,6 +57,7 @@ Let's enhance our avatar by making it circular and bigger in size. We can also c
[color]="color">
```
+
```typescript
// avatar.component.ts
...
@@ -63,14 +66,15 @@ Let's enhance our avatar by making it circular and bigger in size. We can also c
public isCircular = true;
```
+
If all went well, you should see something like the following in the browser:
-####Avatar displaying image
-To get an avatar that dispalays an image, all you have to do is setting the image source via the [`src`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#src) property.
+#### Avatar displaying image
+To get an avatar that displays an image, all you have to do is setting the image source via the [`src`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#src) property.
```html
-####Avatar displaying icon
+#### Avatar displaying icon
Analogically, the avatar can display an icon via the [`icon`]({environment:angularApiUrl}/classes/igxavatarcomponent.html#icon) property. Currently all icons from the material icon set are supported.
```html
@@ -103,11 +108,11 @@ Analogically, the avatar can display an icon via the [`icon`]({environment:angul
## API References
-* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
-* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme)
+- [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
+- [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme)
## Additional Resources
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/components/badge.md b/docs/angular/src/content/kr/components/badge.md
index 9c095d2fc3..a56754c544 100644
--- a/docs/angular/src/content/kr/components/badge.md
+++ b/docs/angular/src/content/kr/components/badge.md
@@ -5,14 +5,14 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w
_language: kr
---
-##Badge
+## Badge
The Ignite UI for Angular Avatar component helps adding images, material icons, or initials to your application.
The Ignite UI for Angular Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when visual notification is needed. Badges usually are designed as icons with a predefined style to communicate information, success, warnings, or errors.
The Ignite UI for Angular Circular Progress Indicator component provides a visual indicator of an application’s process as it changes. The circular indicator updates its appearance as its state changes.
- State: {{ display[key] }}
- Region: {{ display.region }}
-
-
+ State: {{ display[key] }}
+ Region: {{ display.region }}
+
+
-* If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible:
+- If there are 6 columns with column width set to `200px` they will fit in our window and all will be visible:
-* If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario:
+- If there are more columns or ones with bigger width that go out of the browser's view, they will all still render. Let's have the same amount of columns but each with column width of `300px`. Since they don't all fit in the browser view area, it will create a scrollbar natively. The next example displays this exact scenario:
-* If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example.
+- If the grid has a parent element of any sort and it doesn't have any overflow set, it will still render all columns visible. Otherwise if the parent element has overflow `auto` or `scroll`, a scrollbar for that parent element will be rendered natively. The parent has bigger height for easier visualization in the following example.
@@ -64,11 +64,11 @@ The grid's `width` can accepts value of `null`, which when set, renders all colu
When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content:
-* When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered.
+- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid `width`. Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered.
-* For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations:
+- For scenarios where the grid has a parent element, it depends on the parent styling if it will render scrollbar or not. Everything else related to the grid itself is still retained. If the parent element width is smaller than the grid's width and has overflow style set to `auto` or `scroll`, it will render scrollbar natively. For example, if the parent has `width` set to `1000px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` is still `1200px`, it will look similar to the following illustrations:
@@ -78,15 +78,15 @@ When the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `
When the `width` of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) is set to percentages it will size the grid according to the parent element's width. If the parent element does not have width specified the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) will size relative to the browser window.
-* For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly.
+- For example, if we set the grid `width` input to `100%` and there is no parent element it will fill 100% of the available width of the browser window. If it is resized the grid will resize as well accordingly.
-* If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`.
+- If we set grid's width to `100%` and there is a parent element that has specific width of `1200px`, this will mean that the grid will size relative to that element and his final width will be `1200px`.
-* If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own.
+- If we have a parent element with `width` of `1000px` and have the grid's `width` set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own.
@@ -102,15 +102,15 @@ By default if no height is defined for the [**@@igxName**]({environment:angularA
The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway.
-* If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid.
+- If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid.
-* If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows.
+- If we have 24 rows instead, the grid will still render all rows but since they are too many, they exceed the browser boundaries. That's why the browser itself will render vertical scrollbar by default so the user can scroll down to the rest of the rows.
-* If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected:
+- If there is a parent element with defined `height`, the grid will still render all rows and not be affected. Let's say the parent has `height` of `650px`. If he has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected:
@@ -122,15 +122,15 @@ The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `heigh
Setting the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how `width` is set in pixels.
-* If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area.
+- If we set, for example, the height `500px` with 4 rows for our data the grid will sit to that size and since 4 rows are not enough to fill the visible area it is expected to have some empty area.
-* If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way:
+- If the number of rows exceeds the visible area of the grid when `height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way:
-* If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar.
+- If there is a parent element with `height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar.
@@ -145,25 +145,25 @@ When the parent element does not have defined height, the browser does not assig
Let's have `width` set to `1200px` and the parent element not having any size applied to it:
-* If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid.
+- If there are less than 10 rows the grid will try to fit all rows in the `visible area without having an empty space between the last row and the bottom of the visible area. For example, let's have the grid data to consist of 7 rows. The grid will render all 7 rows without vertical scrollbar and without empty space inside the grid.
-* If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14.
+- If there are more than 10 rows a vertical scrollbar will be rendered for the rest of the rows and only 10 rows can be visible at any time. In the next example only the row number is increased to 14.
-* If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`.
+- If we set the parent element height to `800px` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) to `100%` height this means that the grid will be sized to 100 percentages of `800px`.
-* If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size.
+- If the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size.
-* If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized.
+- If we want the grid to be sized to `100%` from the browser window we would need to set both `body` and parent grid element heights to `100%`. In this case, the parent element can be sized and the grid will size accordingly if the browser is resized.
@@ -178,23 +178,23 @@ By default when a column doesn't have a specified width it will try to autosize,
When the grid is resized in these scenarios, the column width is also updated to reflect the changes, so it fills any new empty space available.
-* If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`.
+- If a column does not have specified `width` and the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) has `width` set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with `width` `null` and 6 columns that don't have width, each column will be sized to `136px`.
-* When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`.
+- When there are multiple autosized columns they will divide the available space between each other equally. This means that if we have 6 columns and there is empty area of `1200px`, each will size to `200px`.
-* If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`.
+- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid `width` set to `1000px`.
-* If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest.
+- If a column does not have `width` specified, but all other columns have either `width` in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have `width` of `100px`, the first will fill the rest.
-* Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`.
+- Same applies if multiple columns does not have `width` specified, all will divide the available space between each other equally. In the next illustration the first column has `width` set to `100px`.
@@ -205,11 +205,11 @@ When the grid is resized in these scenarios, the column width is also updated to
When columns have set specific `width` in pixels, they stick to that size, unless they are resized manually. Since the combined `width` of the columns is static, it can be less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` or exceed it.
-* If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width.
+- If the combined `width` of all columns is less than the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, there would be an empty are inside the grid that the columns wouldn't be able to fill. This is the expected behavior of the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html). In the next example the columns have `150px` width.
-* If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds.
+- If the combined `width` of all columns is bigger than the actual [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width`, a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds.
@@ -218,19 +218,19 @@ When columns have set specific `width` in pixels, they stick to that size, unles
When columns have set `width` in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly.
-* If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover.
+- If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover.
-* If the combined width is exactly `100%`, the columns will fill all available space of the grid.
+- If the combined width is exactly `100%`, the columns will fill all available space of the grid.
-* If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered.
+- If the combined width exceeds `100%` in order for the user to be able to see the columns out of view, a horizontal scrollbar is rendered.
-* If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`:
+- If columns are set in percentages and the grid `width` is set to `null`, it would apply`width` of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have `width` itself and relies on its content to be sized when its `width` is `null`. In the following example all 6 columns have `width` set to `50%`:
@@ -238,7 +238,7 @@ When columns have set `width` in percentages, their size is calculated relativel
---
### Child Grid Sizing
-Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them.
+Because the [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) usually contains children, they can also have their `width` and `height` specified, in order to accommodate different scenarios. Since the children are defined using `row island` template, this means that all children in the same level and island will have the same `width` and `height` property applied to them.
#### Width
@@ -261,16 +261,16 @@ The difference is that for the child grid, when `height` is set to percentages,
## API References
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+@@if (igxName !== 'IgxTreeGrid') {_[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {_ [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
## Additional Resources
-* [@@igComponent overview](@@igMainTopic.md)
-* [Virtualization and Performance](virtualization.md)
+- [@@igComponent overview](@@igMainTopic.md)
+- [Virtualization and Performance](virtualization.md)
Our community is active and always welcoming to new ideas.
-* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **Forums**](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/kr/grids_templates/sorting.md b/docs/angular/src/content/kr/grids_templates/sorting.md
index 219fa64a4a..ab7ec410a7 100644
--- a/docs/angular/src/content/kr/grids_templates/sorting.md
+++ b/docs/angular/src/content/kr/grids_templates/sorting.md
@@ -28,24 +28,24 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column
@@if (igxName === 'IgxGrid') {
-…` link to a specific type or member.
### URL Resolution
For **classes** (default kind):
+
```
{docRoot}/classes/{PrefixType}#{member}
```
For **non-class kinds** (interface, enum, type, etc.):
+
```
{docRoot}/{kind}s/{PrefixType}#{member}
```
@@ -99,7 +101,7 @@ This means `- Satellite Map Style
- Satellite Map with Labels Style
- Road Map Style
- Satellite Map Style
- Road Map Style
- Satellite Map Style
- Road Map Style
+
@@ -131,6 +132,7 @@ public onResize(event) {
string nWidth = args.Detail.NewWidth;
}
}
+
```
@@ -147,6 +149,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
@@ -195,6 +199,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
@@ -214,6 +219,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
}
}
```
+
@@ -248,6 +254,7 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
@@ -261,6 +268,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
<{ComponentSelector} id="hierarchicalGrid" autoGenerate={false} onColumnResized={onResize}>
@@ -279,6 +287,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
}
}
```
+
@@ -629,8 +638,9 @@ You can also auto-size a column dynamically using the exposed
@@ -661,6 +672,7 @@ column.autosize();
column.Autosize(false);
}
}
+
```
@@ -673,6 +685,7 @@ column.autosize();
let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0];
column.autosize();
```
+
@@ -702,6 +715,7 @@ column.autosize();
column.Autosize(false);
}
}
+
```
@@ -715,6 +729,7 @@ Each column can be set to auto-size on initialization by setting
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
index a179ea216f..262948f634 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
@@ -67,6 +67,7 @@ public formatOptions = this.options;
@code {
private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs() { DigitsInfo = "1.4-4" };
}
+
```
@@ -75,6 +76,7 @@ public formatOptions = this.options;
```
+
@@ -89,6 +91,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatOptions;
}
+
```
@@ -100,6 +103,7 @@ const formatOptions : IgrColumnPipeArgs = {
@@ -177,6 +183,7 @@ const formatOptions : IgrColumnPipeArgs = {
};
@@ -210,6 +217,7 @@ public timeFormats = [
{ format: 'fullTime', eq: 'h:mm:ss a zzzz' },
];
```
+
@@ -389,6 +397,7 @@ public formatOptions = this.options;
Display = "symbol-narrow"
};
}
+
```
@@ -397,6 +406,7 @@ public formatOptions = this.options;
```
+
@@ -412,6 +422,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatOptions;
}
+
```
@@ -424,12 +435,14 @@ const formatOptions : IgrColumnPipeArgs = {
| currencyCode | ISO 4217 currency code |
@@ -483,15 +496,16 @@ public formatPercentOptions = this.options;
private IgbColumnPipeArgs formatPercentOptions = new IgbColumnPipeArgs()
{
/**
- * Decimal representation options, specified by a string in the following format:
+ *Decimal representation options, specified by a string in the following format:
* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
- * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
+ *`minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
- * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
+ *`maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
*/
DigitsInfo = "2.2-3"
};
}
+
```
@@ -500,6 +514,7 @@ public formatPercentOptions = this.options;
```
+
@@ -521,6 +536,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatPercentOptions;
}
+
```
@@ -539,6 +555,7 @@ const formatOptions : IgrColumnPipeArgs = {
@@ -585,6 +602,7 @@ constructor() {
public editCellTemplate = (ctx: IgcCellTemplateContext) => {
return html``;
}
+
```
@@ -602,6 +620,7 @@ const editCellTemplate = (ctx: IgrCellTemplateContext) => {
@@ -640,6 +659,7 @@ constructor() {
public formatCurrency(value: number) {
return `$ ${value.toFixed(0)}`;
}
+
```
@@ -653,6 +673,7 @@ const formatCurrency = (value: number) => {
@@ -665,6 +686,7 @@ const formatCurrency = (value: number) => {
igRegisterScript("CurrencyFormatter", (value) => {
return `$ ${value.toFixed(0)}`;
}, false);
+
```
@@ -684,6 +706,7 @@ public init(column: IgxColumnComponent) {
return;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
index 73732db890..a6bd183078 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
@@ -56,6 +56,7 @@ constructor() {
grid.rowClasses = this.rowClasses;
}
```
+
@@ -74,6 +75,7 @@ public rowClasses = {
};
public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
+
```
```scss
@@ -86,6 +88,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.
}
}
```
+
@@ -252,6 +255,7 @@ public rowStyles = {
'border-color': (row: RowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null,
color: (row: RowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};
+
```
@@ -270,6 +274,7 @@ public rowStyles = {
color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};
```
+
@@ -328,6 +333,7 @@ constructor() {
treeGrid.rowStyles = this.rowStyles;
}
```
+
@@ -357,6 +363,7 @@ public rowStyles = {
public childRowStyles = {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
+
```
@@ -371,6 +378,7 @@ const childRowStyles = {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
```
+
@@ -387,6 +395,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
}, true);
+
```
@@ -398,6 +407,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => {
```
+
@@ -548,6 +558,7 @@ constructor() {
unitPrice.cellClasses = this.unitPriceCellClasses;
}
```
+
@@ -585,6 +596,7 @@ public beatsPerMinuteClasses = {
downFont: this.downFontCondition,
upFont: this.upFontCondition
};
+
```
@@ -603,6 +615,7 @@ const beatsPerMinuteClasses = {
upFont: upFontCondition
};
```
+
@@ -629,6 +642,7 @@ igRegisterScript("CellClassesHandler", () => {
color: red;
}
}
+
```
@@ -683,6 +697,7 @@ igRegisterScript("GrammyNominationsCellClassesHandler", () => {
color: red !important;
}
```
+
@@ -701,6 +716,7 @@ public unitPriceCellClasses = {
downPrice: this.downPriceCondition,
upPrice: this.upPriceCondition
};
+
```
@@ -713,6 +729,7 @@ igRegisterScript("UnitPriceCellClassesHandler", () => {
};
}, true);
```
+
@@ -729,6 +746,7 @@ const unitPriceCellClasses = {
downPrice: downPriceCondition,
upPrice: upPriceCondition
};
+
```
@@ -744,6 +762,7 @@ const unitPriceCellClasses = {
}
}
```
+
```css
@@ -804,6 +823,7 @@ public evenColStyles = {
color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
animation: '0.75s popin'
};
+
```
@@ -826,6 +846,7 @@ igRegisterScript("WebGridCellStylesHandler", () => {
};
}, true);
```
+
@@ -929,6 +950,7 @@ Define a `popin` animation
}
}
```
+
@@ -950,6 +972,7 @@ constructor() {
col1.cellStyles = this.webGridCellStylesHandler;
}
```
+
@@ -985,6 +1008,7 @@ constructor() {
col1.cellStyles = this.webTreeGridCellStylesHandler;
}
```
+
@@ -1145,6 +1169,7 @@ Define a `popin` animation
}
}
```
+
@@ -1166,6 +1191,7 @@ constructor() {
col1.cellStyles = this.cellStylesHandler;
}
```
+
@@ -1233,6 +1259,7 @@ constructor() {
Col3.cellClasses = this.backgroundClasses;
}
```
+
@@ -1255,6 +1282,7 @@ const editDone = (event: IgrGridEditEventArgs) => {
@@ -158,6 +159,7 @@ function SortingHandler() {
grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);
+
```
@@ -171,6 +173,7 @@ function onSorting(args: IgrSortingEventArgs) {
<{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}>
```
+
## API References
diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
index 48872400e2..1db87b3cb0 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
@@ -308,6 +308,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`
`
}, false);
+
```
@@ -322,6 +323,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html``
}
```
+
@@ -342,6 +344,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
<{ComponentSelector} autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter"
excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}>
+
```
@@ -372,6 +375,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
```
+
@@ -656,12 +660,14 @@ In order to configure the Excel style filtering component, you should set its
+
```
```razor
add snippet for blazor
```
+
@@ -688,12 +694,14 @@ add snippet for blazor
+
```
```razor
Add snippet for blazor
```
+
@@ -709,12 +717,14 @@ Add snippet for blazor
+
```
```razor
Add snippet for blazor
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
index d0a736d30e..05661f82a6 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
@@ -93,6 +93,7 @@ To initiate an export, you can use the handler of a button in your component's t
```
+
@@ -172,6 +173,7 @@ constructor() {
public webGridExportEventFreezeHeaders(args: any): void {
args.detail.options.freezeHeaders = true;
}
+
```
@@ -188,6 +190,7 @@ public webGridExportEventFreezeHeaders(args: CustomEvent): voi
args.detail.options.freezeHeaders = true;
}
```
+
@@ -223,6 +226,7 @@ function exportEventFreezeHeaders(args: IgrExporterEventArgs) {
igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => {
ev.detail.options.freezeHeaders = false;
}, false);
+
```
@@ -244,6 +248,7 @@ igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => {
ev.detail.options.freezeHeaders = false;
}, false);
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
index 43f2b09fb7..49ebb1358d 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
@@ -257,6 +257,7 @@ priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);
this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree;
+
```
@@ -305,6 +306,7 @@ this.@@igObjectRef.clearFilter('ProductName');
// Clears the filtering state from all columns
this.@@igObjectRef.clearFilter();
+
```
@@ -316,6 +318,7 @@ this.grid.clearFilter('ProductName');
// Clears the filtering state from all columns
this.grid.clearFilter();
```
+
@@ -343,6 +346,7 @@ public ngAfterViewInit() {
this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree;
this.cdr.detectChanges();
}
+
```
@@ -369,6 +373,7 @@ constructor() {
this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}
```
+
@@ -408,6 +413,7 @@ constructor() {
public IgbFilteringExpressionsTree filteringExpressions;
}
+
```
@@ -440,6 +446,7 @@ return (
);
```
+
### Filtering logic
@@ -457,6 +464,7 @@ The
@@ -473,6 +482,7 @@ this.grid.filteringLogic = FilteringLogic.OR;
import { FilteringLogic } from "igniteui-react-grids";
<{ComponentName} filteringLogic={FilteringLogic.Or}>
+
```
@@ -633,10 +643,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
- 
+
+
```
@@ -657,6 +668,7 @@ constructor() {
discontinued.filters = this.booleanFilteringOperand;
}
```
+
@@ -670,10 +682,11 @@ constructor() {
- 
+
+
```
@@ -686,6 +699,7 @@ constructor() {
collapses the current node.
-- ALT + → or ALT + ↓ -
+- ALT + → or ALT + ↓ -
over Group Row - expands the group.
expands the row island.
@@ -205,6 +205,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
// 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
}
}, false);
+
```
@@ -213,6 +214,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
<{ComponentSelector} id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>
```
+
```ts
@@ -240,6 +242,7 @@ const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
// 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
}
}
+
```
@@ -293,6 +296,7 @@ Based on the event arg values we identified two cases, where to provide our own
return;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
index 1b66afe8db..7c9c856326 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
@@ -68,6 +68,7 @@ public void OnStart()
grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks);
}, null, startTimeSpan, periodTimeSpan);
}
+
```
@@ -83,6 +84,7 @@ public startUpdate() {
(document.getElementById('chartButton') as IgcButtonComponent).disabled = true;
}
```
+
@@ -96,6 +98,7 @@ const startUpdate = () => {
setIsStopButtonDisabled(false);
setIsChartButtonDisabled(true);
}
+
```
A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
@@ -105,6 +108,7 @@ A change in the data field value or a change in the data object/data collection
A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
diff --git a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
index e3e1edc345..920ff61d28 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
@@ -598,6 +598,7 @@ If you want to re-use a single template for several column groups, you could set
```
+
@@ -631,6 +632,7 @@ If you want to re-use a single template for several column groups, you could set
};
}
```
+
@@ -677,6 +679,7 @@ public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
@@ -723,6 +726,7 @@ If a header is re-templated and the corresponding column group is movable, you h
return @
@@ -734,6 +738,7 @@ public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
index ed808dac48..e7c675909d 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
@@ -142,6 +142,7 @@ constructor() {
paginator.selectOptions = selectOptions;
}
```
+
@@ -152,6 +153,7 @@ const selectOptions = [5, 15, 20, 50];
+
```
@@ -175,6 +177,7 @@ const selectOptions = [5, 15, 20, 50];
diff --git a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
index 3d6222febf..a6fc963a5c 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
@@ -86,7 +86,7 @@ The first
### Remote Virtualization Demo
-{/* NOTE: this sample is differed */}
+{/*NOTE: this sample is differed*/}
@@ -175,6 +176,7 @@ public handlePreLoad() {
}
}
```
+
@@ -253,6 +255,7 @@ public handlePreLoad() {
}
}
}
+
```
@@ -554,6 +557,7 @@ export class RemotePagingService {
);
}
}
+
```
@@ -589,6 +593,7 @@ export class RemotePagingService {
}
}
```
+
@@ -606,6 +611,7 @@ As Blazor Server is already a remote instance, unlike the demos in the other pla
return Task.FromResult(items.Count);
}
```
+
@@ -638,6 +644,7 @@ export class RemoteService {
return `${qS}`;
}
}
+
```
@@ -720,6 +727,7 @@ export class RemotePagingService {
return `${qS}`;
}
}
+
```
@@ -777,6 +785,7 @@ export class RemoteService {
return `${qS}`;
}
}
+
```
@@ -810,6 +819,7 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy
}
}
```
+
@@ -1040,6 +1050,7 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit,
}
}
}
+
```
@@ -1247,6 +1258,7 @@ For further reference please check the full demo bellow:
+
```
then set up the state:
@@ -1288,6 +1300,7 @@ next set up the method for loading the data:
})
}
```
+
@@ -1324,6 +1337,7 @@ and finally set up the behaviour for the RowIslands:
const onOrdersGridCreatedHandler = (e: IgrGridCreatedEventArgs) => {
gridCreated(e, "Orders")
};
+
```
@@ -1474,7 +1488,7 @@ BLAZOR CODE SNIPPET HERE
@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
private _perPage = 15;
-private _dataLengthSubscriber: { unsubscribe: () => void; } | undefined;
+private_dataLengthSubscriber: { unsubscribe: () => void; } | undefined;
constructor(private remoteService: RemotePagingService) { }
@@ -1497,12 +1511,14 @@ public perPageChange(perPage: number) {
this.remoteService.getData(skip, top);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
@@ -1530,12 +1546,14 @@ public ngAfterViewInit() {
}
);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
@@ -1548,12 +1566,14 @@ public paginate(page: number) {
this.remoteService.getData(skip, top);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx
index b8cb4a9906..3c57167950 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx
@@ -31,6 +31,7 @@ import { IgxActionStripModule } from 'igniteui-angular';
imports: [..., IgxActionStripModule],
})
```
+
The predefined actions UI components are:
@@ -52,6 +53,7 @@ They are added inside the
+
```
@@ -69,6 +71,7 @@ They are added inside the
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
index 636013b832..156275b39c 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
@@ -45,6 +45,7 @@ import { {ComponentModule} } from 'igniteui-angular';
})
export class AppModule {}
```
+
Then define a
@@ -98,6 +101,7 @@ Then define a
@@ -116,6 +120,7 @@ Then define a
@@ -171,6 +176,7 @@ Then define a
@@ -98,6 +99,7 @@ ModuleManager.register(
IgcDragDropModule
);
```
+
@@ -161,6 +163,7 @@ public dragHereTemplate = (ctx: IgcGridEmptyTemplateContext) => {
return html`Drop a row to add it to the grid`;
}
```
+
@@ -210,12 +213,14 @@ export class {ComponentName}RowDragComponent {
The **changeGhostIcon** **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the **igx-grid__drag-indicator** class that is applied to the drag-indicator container), changing the element's inner text to the passed one.
The icons themselves are from the [**material** font set](https://material.io/tools/icons/) and are defined in a separate **enum**:
+
```typescript
enum DragIcon {
DEFAULT = 'drag_indicator',
ALLOW = 'remove'
}
```
+
```typescript
@@ -228,6 +233,7 @@ enum DragIcon {
Next, we have to define what should happen when the user actually drops the row inside of the drop-area.
+
```typescript
export class {ComponentName}RowDragComponent {
@@ -253,6 +259,7 @@ export class {ComponentName}RowDragComponent {
this.sourceGrid.deleteRow(args.dragData.key);
}
}
+
```
We define a reference to each of our grids via the **ViewChild** decorator and the handle the drop as follows:
@@ -277,6 +284,7 @@ export class {ComponentName}RowDragComponent {
}
}
```
+
@@ -299,6 +307,7 @@ The drag ghost can be templated using the `RowDragGhost` directive, applied to a
```
+
@@ -315,6 +324,7 @@ constructor() {
public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => {
return html`arrow_right_alt `;
}
+
```
@@ -341,6 +351,7 @@ The drag ghost can be templated on every grid level, making it possible to have
```
+
+
```
@@ -379,6 +391,7 @@ private RenderFragment dragIndicatorIconTemplate =
;
};
```
+
${ctx.cell.column.header}
`;
}
+
```
@@ -775,6 +787,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
);
}
```
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
index 3f049d14b5..a6b2308583 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
@@ -114,6 +114,7 @@ public onResize(event) {
}
```
+
`
}, false);
+
```
@@ -322,6 +323,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html``
}
```
+
-
+
-
+ |(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__||||||||||||||||| +|**Grids**||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|__Other__||||||||||*||||||| +|**Other**||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -114,11 +114,11 @@ The table above is relevant only to the **Default theme** of Ignite UI for {Plat |**Component/Guideline**|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
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|__Grids__|||||||||||||| +|**Grids**|||||||||||||| | - Grid|||||||*||||*||| | - HierarchicalGrid|||||||*||||*||| | - TreeGrid|||||||*||||*||| -|__Other__|||||||*||||||| +|**Other**|||||||*||||||| | - Avatar|||||||||||*||| | - Badge|||||||||||*||| | - Banner||||||*|*||||*||| diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx index 0f56347433..e9cdd37ad0 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx @@ -16,7 +16,7 @@ import dockmanagerElectronApp from '@xplat-images/dockmanager-electron-app.gif'; The Infragistics {Platform} Dock Manager component can be used in a multi-window [Electron](https://www.electronjs.org/) desktop application to manage the layout of each window, drag panes outside of a window in order to create a new window and drag/drop panes from one window to another. You could find a sample implementation of such application in the following repository https://github.com/IgniteUI/dock-manager-electron-app. -{/* TODO: Add a gif of the application and a link to download the exe */} +{/*TODO: Add a gif of the application and a link to download the exe*/}
+
## ピン固定の制限
-- 列幅をパーセンテージ (%) で設定した場合にピン固定列があると `{ComponentName}` 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、`{ComponentName}` によって自動的に割り当てる必要があります。
+- 列幅をパーセンテージ (%) で設定した場合にピン固定列があると `{ComponentName}` 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、`{ComponentName}` によって自動的に割り当てる必要があります。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx
index 788fe92511..5cbf707946 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx
@@ -116,6 +116,7 @@ public onResize(event) {
}
```
+
@@ -133,6 +134,7 @@ public onResize(event) {
string nWidth = args.Detail.NewWidth;
}
}
+
```
@@ -149,6 +151,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
@@ -183,6 +186,7 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
@@ -197,6 +201,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
@@ -216,6 +221,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
}
}
```
+
@@ -250,6 +256,7 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
@@ -263,6 +270,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
<{ComponentSelector} id="hierarchicalGrid" autoGenerate={false} onColumnResized={onResize}>
@@ -281,6 +289,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
}
}
```
+
@@ -631,8 +640,9 @@ const onResize = (event: IgrColumnResizeEventArgs) => {
```typescript
@ViewChild('@@igObjectRef') @@igObjectRef: {ComponentName};
-let column = this.@@igObjectRef.columnList.filter(c => c.field === 'ID')[0];
+let column = this.@@igObjectRef.columnList.filter[c => c.field === 'ID'](0);
column.autosize();
+
```
@@ -643,6 +653,7 @@ constructor() {
id.autosize();
}
```
+
@@ -663,6 +674,7 @@ column.autosize();
column.Autosize(false);
}
}
+
```
@@ -675,6 +687,7 @@ column.autosize();
let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0];
column.autosize();
```
+
@@ -704,6 +717,7 @@ column.autosize();
column.Autosize(false);
}
}
+
```
@@ -717,6 +731,7 @@ column.autosize();
```html
```
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx
index 5edee378e4..791cc94147 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx
@@ -69,6 +69,7 @@ public formatOptions = this.options;
@code {
private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs() { DigitsInfo = "1.4-4" };
}
+
```
@@ -77,6 +78,7 @@ public formatOptions = this.options;
```
+
@@ -91,6 +93,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatOptions;
}
+
```
@@ -102,6 +105,7 @@ const formatOptions : IgrColumnPipeArgs = {
@@ -180,6 +186,7 @@ const formatOptions : IgrColumnPipeArgs = {
};
@@ -213,6 +220,7 @@ public timeFormats = [
{ format: 'fullTime', eq: 'h:mm:ss a zzzz' },
];
```
+
@@ -265,7 +273,7 @@ const timeFormats = [
### Boolean (ブール値)
-デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。*false* 値には 'clear' アイコン、*true* 値には 'check' アイコンを使用します。編集テンプレートは
```html
@@ -334,7 +342,7 @@ const timeFormats = [
デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。通貨記号の位置と数値の書式設定は、提供された Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) または {ComponentTitle} の
@@ -400,6 +409,7 @@ public formatOptions = this.options;
```
+
@@ -415,6 +425,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatOptions;
}
+
```
@@ -427,12 +438,14 @@ const formatOptions : IgrColumnPipeArgs = {
| パラメーター | 説明 |
|---------------------------| ------------------------- |
| digitsInfo | 通貨値の 10 進数表現を表します。 |
| display* | 狭義または広義の記号で値を表示します。 |
+
| currencyCode | ISO 4217 通貨コード |
@@ -488,15 +501,16 @@ public formatPercentOptions = this.options;
private IgbColumnPipeArgs formatPercentOptions = new IgbColumnPipeArgs()
{
/**
- * Decimal representation options, specified by a string in the following format:
+ *Decimal representation options, specified by a string in the following format:
* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
- * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
+ *`minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
- * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
+ *`maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
*/
DigitsInfo = "2.2-3"
};
}
+
```
@@ -505,6 +519,7 @@ public formatPercentOptions = this.options;
```
+
@@ -526,6 +541,7 @@ constructor() {
var column = document.getElementById('column') as IgcColumnComponent;
column.pipeArgs = this.formatPercentOptions;
}
+
```
@@ -544,6 +560,7 @@ const formatOptions : IgrColumnPipeArgs = {
@@ -590,6 +607,7 @@ constructor() {
public editCellTemplate = (ctx: IgcCellTemplateContext) => {
return html``;
}
+
```
@@ -607,6 +625,7 @@ const editCellTemplate = (ctx: IgrCellTemplateContext) => {
@@ -645,6 +664,7 @@ constructor() {
public formatCurrency(value: number) {
return `$ ${value.toFixed(0)}`;
}
+
```
@@ -658,6 +678,7 @@ const formatCurrency = (value: number) => {
@@ -670,6 +691,7 @@ const formatCurrency = (value: number) => {
igRegisterScript("CurrencyFormatter", (value) => {
return `$ ${value.toFixed(0)}`;
}, false);
+
```
@@ -689,6 +711,7 @@ public init(column: IgxColumnComponent) {
return;
}
```
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx
index 04554e205a..dc5ca15257 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx
@@ -56,6 +56,7 @@ constructor() {
grid.rowClasses = this.rowClasses;
}
```
+
@@ -74,6 +75,7 @@ public rowClasses = {
};
public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
+
```
```scss
@@ -86,6 +88,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.
}
}
```
+
@@ -250,6 +253,7 @@ public rowStyles = {
'border-color': (row: RowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null,
color: (row: RowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};
+
```
@@ -268,6 +272,7 @@ public rowStyles = {
color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};
```
+
@@ -326,6 +331,7 @@ constructor() {
treeGrid.rowStyles = this.rowStyles;
}
```
+
@@ -355,6 +361,7 @@ public rowStyles = {
public childRowStyles = {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
+
```
@@ -369,6 +376,7 @@ const childRowStyles = {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
```
+
@@ -385,6 +393,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => {
'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
}, true);
+
```
@@ -396,6 +405,7 @@ igRegisterScript("WebGridChildRowStylesHandler", () => {
```
+
@@ -543,6 +553,7 @@ constructor() {
unitPrice.cellClasses = this.unitPriceCellClasses;
}
```
+
@@ -579,6 +590,7 @@ public beatsPerMinuteClasses = {
downFont: this.downFontCondition,
upFont: this.upFontCondition
};
+
```
@@ -597,6 +609,7 @@ const beatsPerMinuteClasses = {
upFont: upFontCondition
};
```
+
@@ -623,6 +636,7 @@ igRegisterScript("CellClassesHandler", () => {
color: red;
}
}
+
```
@@ -665,6 +679,7 @@ igRegisterScript("GrammyNominationsCellClassesHandler", () => {
```html
@@ -682,6 +697,7 @@ public unitPriceCellClasses = {
downPrice: this.downPriceCondition,
upPrice: this.upPriceCondition
};
+
```
@@ -694,6 +710,7 @@ igRegisterScript("UnitPriceCellClassesHandler", () => {
};
}, true);
```
+
@@ -710,6 +727,7 @@ const unitPriceCellClasses = {
downPrice: downPriceCondition,
upPrice: upPriceCondition
};
+
```
@@ -725,6 +743,7 @@ const unitPriceCellClasses = {
}
}
```
+
```ts
@@ -779,6 +798,7 @@ public evenColStyles = {
color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
animation: '0.75s popin'
};
+
```
@@ -801,6 +821,7 @@ igRegisterScript("WebGridCellStylesHandler", () => {
};
}, true);
```
+
@@ -904,6 +925,7 @@ Define a `popin` animation
}
}
```
+
@@ -924,6 +946,7 @@ constructor() {
col1.cellStyles = this.webGridCellStylesHandler;
}
```
+
@@ -959,6 +982,7 @@ constructor() {
col1.cellStyles = this.webTreeGridCellStylesHandler;
}
```
+
@@ -1119,6 +1143,7 @@ Define a `popin` animation
}
}
```
+
@@ -1139,6 +1164,7 @@ constructor() {
col1.cellStyles = this.cellStylesHandler;
}
```
+
@@ -1204,6 +1230,7 @@ constructor() {
Col3.cellClasses = this.backgroundClasses;
}
```
+
@@ -1226,6 +1253,7 @@ const editDone = (event: IgrGridEditEventArgs) => {
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx
index 3b4964a5bd..6c0487fb94 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx
@@ -44,7 +44,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
すべての利用可能な列データ型は、公式の[列タイプトピック](column-types.md#デフォルトのテンプレート)にあります。
@@ -144,6 +143,7 @@ public onSorting(event: IgcSortingEventArgs) {
grid.endEdit(true);
}
```
+
@@ -159,6 +159,7 @@ function SortingHandler() {
grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);
+
```
@@ -172,6 +173,7 @@ function onSorting(args: IgrSortingEventArgs) {
<{ComponentSelector} data={localData} primaryKey="ProductID" onSorting={onSorting}>
```
+
## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx
index 91abfc6edd..2e622b4883 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx
@@ -305,6 +305,7 @@ igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
var html = window.igTemplating.html;
return html``
}, false);
+
```
@@ -319,6 +320,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html``
}
```
+
@@ -339,6 +341,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
<{ComponentSelector} autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter"
excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}>
+
```
@@ -369,6 +372,7 @@ const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
```
+
@@ -639,12 +643,14 @@ In order to configure the Excel style filtering component, you should set its
+
```
```razor
add snippet for blazor
```
+
@@ -671,12 +677,14 @@ add snippet for blazor
+
```
```razor
Add snippet for blazor
```
+
@@ -692,12 +700,14 @@ Add snippet for blazor
+
```
```razor
Add snippet for blazor
```
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx
index 94022c6cfa..7a0c2bce09 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx
@@ -82,6 +82,7 @@ public exportButtonHandler() {
this.excelExportService.exportData(this.localData, new ExcelExporterOptions('ExportedDataFile'));
}
```
+
@@ -144,6 +145,7 @@ this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventAr
}
});
this.excelExportService.export(this.{ComponentTitle}, new ExcelExporterOptions('ExportedDataFile'));
+
```
@@ -159,6 +161,7 @@ public webGridExportEventFreezeHeaders(args: any): void {
args.detail.options.freezeHeaders = true;
}
```
+
@@ -173,6 +176,7 @@ constructor() {
public webGridExportEventFreezeHeaders(args: CustomEvent): void {
args.detail.options.freezeHeaders = true;
}
+
```
@@ -190,6 +194,7 @@ function exportEventFreezeHeaders(args: IgrExporterEventArgs) {
```
+
@@ -209,6 +214,7 @@ function exportEventFreezeHeaders(args: IgrExporterEventArgs) {
igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => {
ev.detail.options.freezeHeaders = false;
}, false);
+
```
@@ -230,6 +236,7 @@ igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => {
ev.detail.options.freezeHeaders = false;
}, false);
```
+
@@ -266,6 +273,7 @@ this.excelExportService.export(this.{ComponentTitle}, new ExcelExporterOptions('
|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。|
|ピン固定列された列のエクスポート|エクスポートされた Excel ファイルでは、ピン固定列は固定されませんが、グリッドに表示されるのと同じ順序で表示されます。|
|幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
+
## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx
index c19a0411a3..5e1d696ae1 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx
@@ -121,7 +121,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## インタラクション
-特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。*number* と **date** 列には、Equals がデフォルトで選択されます。*string* には 'Contains'、*boolean* には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。
+特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。_number_ と **date** 列には、Equals がデフォルトで選択されます。_string_ には 'Contains'、_boolean_ には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。
列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルター アイコンが表示されます。フィルター行を開くためにクリックできます。
@@ -203,11 +203,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- `Filter` - 単一の列または複数の列をフィルターします。
以下の 5 つのフィルタリング オペランド クラスが公開されます。
- -
@@ -384,6 +389,7 @@ constructor() {
public IgbFilteringExpressionsTree filteringExpressions;
}
+
```
@@ -416,6 +422,7 @@ return (
);
```
+
### フィルター ロジック
@@ -433,6 +440,7 @@ return (
import { FilteringLogic } from 'igniteui-angular';
this.@@igObjectRef.filteringLogic = FilteringLogic.OR;
+
```
@@ -442,6 +450,7 @@ import { FilteringLogic } from "igniteui-webcomponents-grids/grids";
this.grid.filteringLogic = FilteringLogic.OR;
```
+
@@ -449,6 +458,7 @@ this.grid.filteringLogic = FilteringLogic.OR;
import { FilteringLogic } from "igniteui-react-grids";
<{ComponentName} filteringLogic={FilteringLogic.Or}>
+
```
@@ -609,10 +619,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
-
+
+
```
@@ -633,6 +644,7 @@ constructor() {
discontinued.filters = this.booleanFilteringOperand;
}
```
+
@@ -646,10 +658,11 @@ constructor() {
-
+
+
```
@@ -662,6 +675,7 @@ constructor() {
collapses the current node.
-- ALT + → or ALT + ↓ -
+- ALT + → or ALT + ↓ -
over Group Row - expands the group.
expands the row island.
@@ -229,6 +229,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
// 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
}
}, false);
+
```
@@ -237,6 +238,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
<{ComponentSelector} id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>
```
+
```ts
@@ -264,6 +266,7 @@ const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
// 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
}
}
+
```
@@ -317,6 +320,7 @@ public customKeydown(args: : CustomEvent) {
return;
}
```
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx
index 459152dfee..d74dc9a2cd 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx
@@ -70,6 +70,7 @@ public void OnStart()
grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks);
}, null, startTimeSpan, periodTimeSpan);
}
+
```
@@ -85,6 +86,7 @@ public startUpdate() {
(document.getElementById('chartButton') as IgcButtonComponent).disabled = true;
}
```
+
@@ -98,6 +100,7 @@ const startUpdate = () => {
setIsStopButtonDisabled(false);
setIsChartButtonDisabled(true);
}
+
```
データ フィールド値の変更またはデータ オブジェクト / データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは、[複雑なデータ オブジェクト](../data-grid.md#complex-data-binding)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:
@@ -107,6 +110,7 @@ const startUpdate = () => {
データ フィールド値の変更またはデータ オブジェクト/データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは[複合データ オブジェクト](../data-grid.md#複雑なデータ-バインディング)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:
@@ -181,7 +185,7 @@ As you can see the igxGrid component handles with ease the high-frequency update
### ハブ接続の開始
-signal-r.service は公開された管理可能なパラメーター - *frequency*、*volume* および *live-update 状態のトグル* (開始/停止) - の接続と更新を処理します。
+signal-r.service は公開された管理可能なパラメーター - _frequency_、_volume_ および _live-update 状態のトグル_ (開始/停止) - の接続と更新を処理します。
```ts
this.hubConnection = new signalR.HubConnectionBuilder()
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx
index e0149bdc4b..5093b045b9 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx
@@ -597,6 +597,7 @@ columns と column groups 間の移動は、それらが階層内の同じレベ
```
+
@@ -630,6 +631,7 @@ columns と column groups 間の移動は、それらが階層内の同じレベ
};
}
```
+
@@ -676,6 +678,7 @@ public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
@@ -722,6 +725,7 @@ const groupHeaderTemplate = (e: IgrColumnTemplateContext) => {
return @
@@ -733,6 +737,7 @@ public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
`;
}
```
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx
index 925d6430ae..1cf103e375 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx
@@ -140,6 +140,7 @@ constructor() {
paginator.selectOptions = selectOptions;
}
```
+
@@ -150,6 +151,7 @@ const selectOptions = [5, 15, 20, 50];
+
```
@@ -173,6 +175,7 @@ const selectOptions = [5, 15, 20, 50];
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx
index 1d147ef328..69016f46e4 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx
@@ -85,7 +85,7 @@ The first
### Remote Virtualization Demo
-{/* NOTE: this sample is differed */}
+{/*NOTE: this sample is differed*/}
@@ -145,6 +146,7 @@ public processData(reset) {
```razor
BLAZOR CODE SNIPPET HERE
```
+
@@ -223,6 +225,7 @@ BLAZOR CODE SNIPPET HERE
}
}
}
+
```
@@ -555,6 +558,7 @@ export class RemotePagingService {
);
}
}
+
```
@@ -590,6 +594,7 @@ export class RemotePagingService {
}
}
```
+
@@ -607,6 +612,7 @@ As Blazor Server is already a remote instance, unlike the demos in the other pla
return Task.FromResult(items.Count);
}
```
+
@@ -639,6 +645,7 @@ export class RemoteService {
return `${qS}`;
}
}
+
```
@@ -721,6 +728,7 @@ export class RemotePagingService {
return `${qS}`;
}
}
+
```
@@ -778,6 +786,7 @@ export class RemoteService {
return `${qS}`;
}
}
+
```
@@ -813,6 +822,7 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy
}
}
```
+
@@ -1043,6 +1053,7 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit,
}
}
}
+
```
@@ -1250,6 +1261,7 @@ For further reference please check the full demo bellow:
+
```
then set up the state:
@@ -1291,6 +1303,7 @@ next set up the method for loading the data:
})
}
```
+
@@ -1327,6 +1340,7 @@ next set up the method for loading the data:
const onOrdersGridCreatedHandler = (e: IgrGridCreatedEventArgs) => {
gridCreated(e, "Orders")
};
+
```
@@ -1465,7 +1479,7 @@ BLAZOR CODE SNIPPET HERE
@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
private _perPage = 15;
-private _dataLengthSubscriber: { unsubscribe: () => void; } | undefined;
+private_dataLengthSubscriber: { unsubscribe: () => void; } | undefined;
constructor(private remoteService: RemotePagingService) { }
@@ -1488,12 +1502,14 @@ public perPageChange(perPage: number) {
this.remoteService.getData(skip, top);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
@@ -1521,12 +1537,14 @@ public ngAfterViewInit() {
}
);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
@@ -1539,12 +1557,14 @@ public paginate(page: number) {
this.remoteService.getData(skip, top);
}
+
```
```razor
BLAZOR CODE SNIPPET HERE
```
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx
index 9bb0d935b2..165df7c135 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx
@@ -33,6 +33,7 @@ import { IgxActionStripModule } from 'igniteui-angular';
imports: [..., IgxActionStripModule],
})
```
+
事前定義された操作 (actions) UI コンポーネントは次のとおりです:
@@ -54,6 +55,7 @@ import { IgxActionStripModule } from 'igniteui-angular';
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx
index 646a2398e7..88eb8a595c 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx
@@ -45,6 +45,7 @@ import { {ComponentModule} } from 'igniteui-angular';
})
export class AppModule {}
```
+
次に、バインドしたデータ ソースに
@@ -98,6 +101,7 @@ export class AppModule {}
@@ -116,6 +120,7 @@ export class AppModule {}
```
+
@@ -171,6 +176,7 @@ export class AppModule {}
@@ -109,6 +110,7 @@ export class {ComponentName}RowDragComponent {
}
}
```
+
@@ -172,6 +174,7 @@ public dragHereTemplate = (ctx: IgcGridEmptyTemplateContext) => {
return html`Drop a row to add it to the grid`;
}
```
+
@@ -208,12 +211,14 @@ enum DragIcon {
The **changeGhostIcon** **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the **igx-grid__drag-indicator** class that is applied to the drag-indicator container), changing the element's inner text to the passed one.
The icons themselves are from the [**material** font set](https://material.io/tools/icons/) and are defined in a separate **enum**:
+
```typescript
enum DragIcon {
DEFAULT = 'drag_indicator',
ALLOW = 'remove'
}
```
+
```typescript
@@ -226,6 +231,7 @@ enum DragIcon {
Next, we have to define what should happen when the user actually drops the row inside of the drop-area.
+
```typescript
export class {ComponentName}RowDragComponent {
@@ -251,6 +257,7 @@ export class {ComponentName}RowDragComponent {
this.sourceGrid.deleteRow(args.dragData.key);
}
}
+
```
We define a reference to each of our grids via the **ViewChild** decorator and the handle the drop as follows:
@@ -275,6 +282,7 @@ export class {ComponentName}RowDragComponent {
}
}
```
+
@@ -302,6 +310,7 @@ When using row data from the event arguments (**args.dragData.data**) or any oth
```
+
@@ -318,6 +327,7 @@ constructor() {
public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => {
return html`arrow_right_alt `;
}
+
```
@@ -344,6 +354,7 @@ The drag ghost can be templated on every grid level, making it possible to have
```
+
+
```
@@ -381,6 +393,7 @@ private RenderFragment dragIndicatorIconTemplate =
;
};
```
+
${ctx.cell.column.header}
`;
}
+
```
@@ -779,6 +790,7 @@ const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
);
}
```
+
@@ -928,7 +940,7 @@ The sample will not be affected by the selected global theme from **Change Theme
`
}, false);
+
```
@@ -319,6 +320,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html``
}
```
+
-
+
-
+ |(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
| |:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--| -|*グリッド*||||||||||||||||| +|_グリッド_||||||||||||||||| | - Grid||||||||||*||||||| | - HierarchicalGrid||||||||||*||||||| | - TreeGrid||||||||||*||||||| -|*その他*||||||||||*||||||| +|_その他_||||||||||*||||||| | - Avatar||||||||||||||||| | - Badge||||||||||||||||| | - Bottom navigation||||||||||*||||||| @@ -115,11 +115,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' |**コンポーネント/ガイドライン**|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||||||*|*||||*||| diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx index eb22fd1ec2..878b10d9ef 100644 --- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx @@ -872,10 +872,10 @@ const images = [ ### WAI-ARIA の役割、状態、およびプロパティ - * カルーセルの基本要素の役割は [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) です。これは、ユーザーが簡単にナビゲートできるようにしたい特定の目的に関連するコンテンツを含むセクションです。 - * カルーセル インジケーターの役割は [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) です。これは、ユーザーに描画されるタブ コンテンツを選択するためのメカニズムを提供するグループ化ラベルです。 - * タブのセット (カルーセル インジケーター) 役割のコンテナーとして機能する要素は、[`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist) に設定されます。 - * 各スライド要素には、[`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) の役割が設定されています。 +- カルーセルの基本要素の役割は [`region`](https://www.w3.org/TR/wai-aria-1.1/#region) です。これは、ユーザーが簡単にナビゲートできるようにしたい特定の目的に関連するコンテンツを含むセクションです。 +- カルーセル インジケーターの役割は [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab) です。これは、ユーザーに描画されるタブ コンテンツを選択するためのメカニズムを提供するグループ化ラベルです。 +- タブのセット (カルーセル インジケーター) 役割のコンテナーとして機能する要素は、[`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist) に設定されます。 +- 各スライド要素には、[`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) の役割が設定されています。 ### ARIA のサポート diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx index 8de14721d6..116674967d 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx @@ -99,6 +99,7 @@ this.dockManager.layout = { ] } }; + ```