diff --git a/.github/skills/xplat-docs-api-links/SKILL.md b/.github/skills/xplat-docs-api-links/SKILL.md index 346fcb8dd3..55e37a58af 100644 --- a/.github/skills/xplat-docs-api-links/SKILL.md +++ b/.github/skills/xplat-docs-api-links/SKILL.md @@ -75,8 +75,6 @@ Each JSON file is a TypeDoc reflection tree. Top-level `children` contains all e | `prefixed` | no | Default `true` — adds `Igr`/`Igx`/`Igc`/`Igb` automatically. Set `false` when `type` contains `{ComponentName}` or the name is already fully-qualified. **Always `false` for excel types.** | | `suffix` | no | Default `true` — appends `Component` suffix for Angular DV packages. Set `false` for utility classes (FilteringOperand, SortingStrategy, SummaryOperand, all excel types). | | `exclude` | no | Comma-separated platform list (`"Angular"`, `"Blazor"`, etc.). On listed platforms the symbol renders as inline code (backticks) instead of a link. Use when the type/member genuinely **does not exist** on those platforms. **Preferred over wrapping a single `` in a ``** for the sole purpose of platform-omission. | -| `excludeSuffixFor` | no | Comma-separated platform list. On listed platforms the package `classSuffix` (e.g. `Component`) is **not** appended, overriding the per-package default. Use when the same type is a plain class on some platforms (e.g. `IgxChartSelection`) but a `Component`-suffixed class on others. **Generates a real link — combine with `exclude` if the type is also absent on other platforms.** | -| `excludePrefixFor` | no | Comma-separated platform list. On listed platforms the platform prefix (`Igr`/`Igx`/`Igc`/`Igb`) is **not** prepended. Use when a type has no prefix on certain platforms. **Generates a real link — combine with `exclude` if needed.** | | `label` | no | Override display text. | > **Critical rule:** NEVER replace an existing `` with backtick text. If a URL is broken on certain platforms, add `exclude="Platform"` to the tag. Only backtick text is acceptable when the type has no TypeDoc page on *any* platform AND has never been an ApiLink in the content history. When in doubt, keep the ApiLink — the broken link will be caught by `check-api-links.mjs` and fixed via `apply-excludes.mjs`. @@ -258,29 +256,62 @@ Angular's `grids` package appends `Component` to all **UI component** class name ``` -### Use `excludeSuffixFor=` when only some platforms use the suffix +### Use PlatformBlock when only some platforms use the suffix or prefix -When the suffix causes a 404 on **specific platforms only** (not globally), use `excludeSuffixFor` to remove it just for those platforms while keeping the link alive: +When `suffix={false}` or `prefixed={false}` is correct for **specific platforms only**, do **not** put that prop on a shared top-level ApiLink. Wrap each variant in a `PlatformBlock` so every platform gets exactly the ApiLink shape it needs: ```mdx - + ``` -The `check-mdx-links.mjs` script automatically suggests this fix when it detects a broken link that resolves correctly after stripping the suffix — look for `→ FIX: excludeSuffixFor="..."` in the output. - -Similarly, `excludePrefixFor` removes the platform prefix (`Igr`/`Igx`/`Igc`/`Igb`) for the listed platforms only: +Use the same pattern when only some platforms need `prefixed={false}`: ```mdx - + ``` +> **Do not use `excludeSuffixFor` or `excludePrefixFor` in MDX.** They should be migrated to explicit `PlatformBlock` variants. + > **Decision guide**: > - Symbol **doesn't exist** on a platform → `exclude="Platform"` -> - Symbol exists but URL has wrong suffix on those platforms → `excludeSuffixFor="Platform"` -> - Symbol exists but URL has wrong prefix on those platforms → `excludePrefixFor="Platform"` +> - Symbol exists but URL has wrong suffix on some platforms → `PlatformBlock` variants with `suffix={false}` only in the affected platform block +> - Symbol exists but URL has wrong prefix on some platforms → `PlatformBlock` variants with `prefixed={false}` only in the affected platform block > - `suffix={false}` / `prefixed={false}` → removes suffix/prefix globally (all platforms) +### When to use PlatformBlock for ApiLinks with different attributes + +When two platforms require **different attribute values** (including `suffix`, `prefixed`, `kind`, `pkg`, or `type` differences), wrap **both** ApiLinks in their own `` blocks. + +#### Anti-pattern (BUG — produces duplicate output on Blazor) + +```mdx + + +``` + +The `exclude="Blazor"` prop causes the first ApiLink to render as **backtick text** on Blazor (not hidden — just degraded to inline code). The PlatformBlock then renders the second ApiLink as a real link. Result: on Blazor the user sees both a broken inline-code snippet and a working link side by side. + +#### Correct pattern — both in PlatformBlocks + +```mdx + + +``` + +#### When to use which approach + +| Difference between platforms | Solution | +|---|---| +| Only `suffix` differs (e.g. one platform has no `Component` suffix) | Two ``-wrapped `` variants; put `suffix={false}` only in the affected block | +| Only `prefix` differs | Two ``-wrapped `` variants; put `prefixed={false}` only in the affected block | +| Type doesn't exist on a platform at all | Single `` with `exclude="Platform"` | +| `kind` differs (e.g. `interface` on Angular/React/WC, `class` on Blazor) | Two ``-wrapped `` tags | +| `kind` AND `suffix` differ | Two ``-wrapped `` tags | +| Any combination of multiple attribute differences | Two ``-wrapped `` tags | + +> **Rule:** Never combine `exclude="Platform"` on one ApiLink with a `` wrapping another ApiLink for the **same type**. The `exclude` prop does NOT hide the tag — it degrades it to inline code, producing duplicate visible output. + ### Classes that NEED `suffix={false}` - All `*FilteringOperand` classes: `BooleanFilteringOperand`, `NumberFilteringOperand`, `StringFilteringOperand`, `DateFilteringOperand`, `DateTimeFilteringOperand`, `TimeFilteringOperand` diff --git a/.github/skills/xplat-docs-platform-block/SKILL.md b/.github/skills/xplat-docs-platform-block/SKILL.md index 16203ffab0..096eec12a3 100644 --- a/.github/skills/xplat-docs-platform-block/SKILL.md +++ b/.github/skills/xplat-docs-platform-block/SKILL.md @@ -341,6 +341,57 @@ Typical full-coverage pattern: | Wrong platform name (e.g. `"Webcomponents"`, `"blazor"`) | Content never shown (silently filtered out) | Use exact casing: `WebComponents`, `Blazor`, `Angular`, `React` | | CSS inside PlatformBlock when it applies to all platforms | CSS hidden from unlisted platforms | Move CSS outside the PlatformBlock | | JSX `{500}` inside `{/* */}` MDX comment | Parse error: `Cannot read properties of undefined (reading 'start')` | Change numeric JSX props to strings: `height="500"` | +| **Inline PlatformBlock mid-sentence** with blank lines around content | Content renders as separate block-level paragraph, breaking sentence flow | Move the entire sentence into each PlatformBlock (duplicate shared text) | + +--- + +## CRITICAL: Never Use PlatformBlock for Inline Text + +`` is a **block-level** component. When its content has blank lines around it, MDX renders it as a separate paragraph. **Never** split a sentence across PlatformBlock boundaries. + +### Wrong — breaks sentence flow: + +```mdx +The component gives flexibility through the {Platform} Button + + +OnClick event + + + + + +clicked callback + + +, toggle the button, and more. +``` + +This renders "OnClick event" as a standalone paragraph, with `, toggle the button` orphaned below it. + +### Correct — duplicate shared text into each block: + +```mdx + + +The component gives flexibility through the {Platform} Button OnClick event, toggle the button, and more. + + + + + +The component gives flexibility through the {Platform} Button clicked callback, toggle the button, and more. + + +``` + +### Also correct — inline on same line (no blank lines): + +```mdx +The component uses for rendering. +``` + +This works because the PlatformBlock tags and content are all on the **same line** — MDX treats same-line components as inline elements. --- @@ -379,9 +430,27 @@ This renders a normal link on Angular/React/WebComponents and renders `MyType.so | Situation | Use | |---|---| | The same `` references something missing on N platforms (broken URL) | `exclude="P1,P2"` on the ApiLink | +| Only `suffix` or `prefix` differs on some platforms | One `` per ApiLink variant; use `suffix={false}` or `prefixed={false}` only in the affected platform block | | Different platforms need genuinely **different** ApiLinks (different `type`, `kind`, `member`, etc.) | One `` per variant (each containing its own ``) | | Surrounding **prose or code** also differs per platform | `` (regular usage) | +### Critical anti-pattern: `exclude` + PlatformBlock for the same type + +**Never** combine `exclude="Platform"` on one ApiLink with a `` wrapping another ApiLink for the **same type**. The `exclude` prop does NOT hide the tag — it degrades it to inline code (backticks). This produces duplicate visible output on the excluded platform (inline code + a link). + +```mdx + + +``` + +**Correct pattern** — wrap both variants in their own PlatformBlocks: + +```mdx + +``` + +This ensures each platform sees exactly one link. + ### Migration script `scripts/migrate-platformblock-to-exclude.mjs` automatically rewrites the anti-pattern (a `` containing only a single `` whose `for=` covers exactly N-1 of the 4 platforms) into ``. diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx index 60f331ceb4..01d153eb73 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx @@ -76,7 +76,7 @@ This example demonstrates another series type via the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. +Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. The matcher is ideal for using in charts, such as the when you do not have access to the actual series, like the . In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the collection using a matcher with the following properties set diff --git a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx index 9f2f7c2708..ef6051fcc5 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx @@ -19,7 +19,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; In Ignite UI for Angular, you can annotate the with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. -This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. +This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. @@ -30,7 +30,7 @@ This feature is designed to support X and Y axes and does not currently support ## Using the User Annotations with the Toolbar -The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`. +The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`. The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the . This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart. @@ -40,19 +40,19 @@ You can delete the annotations that you have previously added by selecting the " Angular user-annotation-delete -When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added. +When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added. The table below details the different configurable properties on : | Property | Type | Description | |------------|---------|-------------| -||`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.| +||`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.| ||`string`|This read-only property returns the unique string ID of the user annotation.| ||`string`|This property gets or sets the color to use for the badge in the user annotation.| ||`string`|This property gets or sets a path to an image to use for the badge in the user annotation.| ||`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.| ||`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.| -||`string`|This property gets or sets the label to be shown in the user annotation.| +||`string`|This property gets or sets the label to be shown in the user annotation.| ||`string`|This property gets or sets the color to be used to fill the background of the user annotation.| After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the method on the to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling and passing the of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area. diff --git a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx index bff420bb9f..cedee95782 100644 --- a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx @@ -111,7 +111,7 @@ The pie chart has 4 events associated with selection: The events that end in "Changing" are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it. -For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice. +For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice. diff --git a/docs/angular/src/content/en/components/dashboard-tile.mdx b/docs/angular/src/content/en/components/dashboard-tile.mdx index 60669f2bd3..f2e859eaf2 100644 --- a/docs/angular/src/content/en/components/dashboard-tile.mdx +++ b/docs/angular/src/content/en/components/dashboard-tile.mdx @@ -15,7 +15,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; # Angular Dashboard Tile -The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways. +The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways. A wide variety of visualizations may be selected for display depending on the shape of the provided data including, but not limited to: Category Charts, Radial and Polar Charts, Scatter Charts, Geographic Maps, Radial and Linear Gauges, Financial Charts and Stacked Charts. @@ -96,7 +96,7 @@ You are not locked into a single visualization when you bind the `DataSource`, a -The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: +The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: Dashboard Tile Toolbar @@ -121,7 +121,7 @@ This demo demonstrates dashboard tile integration with the Angular Geographic Ma -
+



diff --git a/docs/angular/src/content/en/components/general-changelog-dv.mdx b/docs/angular/src/content/en/components/general-changelog-dv.mdx index 5aa2329b33..31ba84f116 100644 --- a/docs/angular/src/content/en/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/en/components/general-changelog-dv.mdx @@ -80,7 +80,7 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti In Ignite UI for Angular, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. -This is directly integrated with the available tools of the . +This is directly integrated with the available tools of the . Angular user-annotation-create @@ -252,9 +252,9 @@ For more details please visit: #### Toolbar -- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. -- Added new property on called which controls the horizontal alignment of the title text. -- Added new property on called which controls the spacing between items inside the panel. +- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. +- Added new property on called which controls the horizontal alignment of the title text. +- Added new property on called which controls the spacing between items inside the panel. ### Bug Fixes @@ -296,7 +296,7 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools - [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. -- +- - New ToolActionCheckboxList A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. @@ -323,7 +323,7 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools - [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### igniteui-angular-gauges (Gauges) @@ -362,7 +362,7 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools ### igniteui-angular - Toolbar - - Save tool action has been added to save the chart to an image via the clipboard. -- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ## **16.1.0 (June 2023)** @@ -521,7 +521,7 @@ for example: #### Chart Legend -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added property - Enables series highlighting when hovering over legend items ### igniteui-angular-maps (GeoMap) diff --git a/docs/angular/src/content/en/components/menus/toolbar.mdx b/docs/angular/src/content/en/components/menus/toolbar.mdx index eccb663c94..00c95a2b5d 100644 --- a/docs/angular/src/content/en/components/menus/toolbar.mdx +++ b/docs/angular/src/content/en/components/menus/toolbar.mdx @@ -30,7 +30,7 @@ npm install igniteui-angular-charts npm install igniteui-angular-core ``` -The following modules are required when using the with the component and it's features. +The following modules are required when using the with the component and it's features. @@ -70,29 +70,29 @@ export class AppModule {} ### Tool Actions -The following is a list of the different items that you can add to the Toolbar. +The following is a list of the different items that you can add to the Toolbar. -- -- -- -- -- -- -- -- +- +- +- +- +- +- +- +- -Each of these tools exposes an `OnCommand` event that is triggered by mouse click. Note, the is a wrapper for other tools that can also be wrapped inside a . +Each of these tools exposes an `OnCommand` event that is triggered by mouse click. Note, the is a wrapper for other tools that can also be wrapped inside a . -New and existing tools can be repositioned and marked hidden using the , and properties on the object. ToolActions also expose a property. +New and existing tools can be repositioned and marked hidden using the , and properties on the object. ToolActions also expose a property. -The following example demonstrates a couple of features. First you can group tools together in the including hiding built in tools such as the **ZoomReset** and **AnalyzeMenu** menu tool actions. In this example a new instance of the **ZoomReset** tool action within the **ZoomMenu** by using the the property and assigning that to **ZoomOut** to be precise with it's placement. It is also highlighted via the property on the tool. +The following example demonstrates a couple of features. First you can group tools together in the including hiding built in tools such as the **ZoomReset** and **AnalyzeMenu** menu tool actions. In this example a new instance of the **ZoomReset** tool action within the **ZoomMenu** by using the the property and assigning that to **ZoomOut** to be precise with it's placement. It is also highlighted via the property on the tool. ### Angular Data Chart Integration -The Angular Toolbar contains a property. This is used to link a component, such as the as shown in the code below: +The Angular Toolbar contains a property. This is used to link a component, such as the as shown in the code below: @@ -121,47 +121,47 @@ The Angular Toolbar contains a items and menus become available when the is linked with the Toolbar. Here is a list of the built-in Angular Tool Actions and their associated : +Several pre-existing items and menus become available when the is linked with the Toolbar. Here is a list of the built-in Angular Tool Actions and their associated : Zooming Actions -- `ZoomMenu`: A that exposes three items to invoke the and methods on the chart for increasing/decreasing the chart's zoom level including `ZoomReset`, a that invokes the method on the chart to reset the zoom level to it's default position. +- `ZoomMenu`: A that exposes three items to invoke the and methods on the chart for increasing/decreasing the chart's zoom level including `ZoomReset`, a that invokes the method on the chart to reset the zoom level to it's default position. Trend Actions -- `AnalyzeMenu`: A that contains several options for configuring different options of the chart. +- `AnalyzeMenu`: A that contains several options for configuring different options of the chart. - `AnalyzeHeader`: A sub section header. - `LinesMenu`: A sub menu containing various tools for showing different dashed horizontal lines on the chart. - `LinesHeader`: A sub menu section header for the following three tools: - - `MaxValue`: A that displays a dashed horizontal line along the yAxis at the maximum value of the series. - - `MinValue`: A that displays a dashed horizontal line along the yAxis at the minimum value of the series. - - : A that displays a dashed horizontal line along the yAxis at the average value of the series. + - `MaxValue`: A that displays a dashed horizontal line along the yAxis at the maximum value of the series. + - `MinValue`: A that displays a dashed horizontal line along the yAxis at the minimum value of the series. + - : A that displays a dashed horizontal line along the yAxis at the average value of the series. - `TrendsMenu`: A sub menu containing tools for applying various trendlines to the plot area. - `TrendsHeader`: A sub menu section header for the following three tools: - - **Exponential**: A that sets the on each series in the chart to **ExponentialFit**. - - **Linear**: A that sets the on each series in the chart to **LinearFit**. - - **Logarithmic**: A that sets the on each series in the the chart to **LogarithmicFit**. + - **Exponential**: A that sets the on each series in the chart to **ExponentialFit**. + - **Linear**: A that sets the on each series in the chart to **LinearFit**. + - **Logarithmic**: A that sets the on each series in the the chart to **LogarithmicFit**. - `HelpersHeader`: A sub section header. - - `SeriesAvg`: A that adds or removes a to the chart's series collection using the of type . + - `SeriesAvg`: A that adds or removes a to the chart's series collection using the of type . - `ValueLabelsMenu`: A sub menu containing various tools for showing different annotations on the 's plot area. - `ValueLabelsHeader`: A sub menu section header for the following tools: - - `ShowValueLabels`: A that toggles data point values by using a . - - `ShowLastValueLabel`: A that toggles final value axis annotations by using a . -- `ShowCrosshairs`: A that toggles mouse-over crosshair annotations via the chart's property. -- `ShowGridlines`: A that toggles extra gridlines by applying a `MajorStroke` to the X-Axis. + - `ShowValueLabels`: A that toggles data point values by using a . + - `ShowLastValueLabel`: A that toggles final value axis annotations by using a . +- `ShowCrosshairs`: A that toggles mouse-over crosshair annotations via the chart's property. +- `ShowGridlines`: A that toggles extra gridlines by applying a `MajorStroke` to the X-Axis. Save to Image Action -- `CopyAsImage`: A that exposes an option to copy the chart to the clipboard. +- `CopyAsImage`: A that exposes an option to copy the chart to the clipboard. - `CopyHeader`: A sub section header. ### SVG Icons -When adding tools manually, icons can be assigned using the `RenderIconFromText` method. There are three parameters to pass in this method. The first is the icon collection name defined on the tool eg. . The second is the name of the icon defined on the tool eg. , followed by adding the SVG string. +When adding tools manually, icons can be assigned using the `RenderIconFromText` method. There are three parameters to pass in this method. The first is the icon collection name defined on the tool eg. . The second is the name of the icon defined on the tool eg. , followed by adding the SVG string. ### Data URL Icons -Similarly to adding svg, you can also add an Icon image from a URL via the . The method's third parameter would be used to enter a string URL. +Similarly to adding svg, you can also add an Icon image from a URL via the . The method's third parameter would be used to enter a string URL. The following snippet shows both methods of adding an Icon. @@ -220,7 +220,7 @@ public toolbarCustomIconOnViewInit(): void { ### Vertical Orientation -By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. +By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. @@ -274,7 +274,7 @@ The following example demonstrates styling the Angular Data Chart series brush w {/* ## Styling/Theming -The icon component can be styled by using it's property directly to the . +The icon component can be styled by using it's property directly to the . @@ -297,7 +297,7 @@ The icon component can be styled by using it's
+

## Additional Resources diff --git a/docs/angular/src/content/en/components/spreadsheet-activation.mdx b/docs/angular/src/content/en/components/spreadsheet-activation.mdx index 61ec86b12c..fafed27895 100644 --- a/docs/angular/src/content/en/components/spreadsheet-activation.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-activation.mdx @@ -25,15 +25,15 @@ The Angular Spreadsheet component exposes properties that allow you to determine ## Activation Overview -The activation of the Angular control is split up between the cells, panes, and worksheets of the current of the spreadsheet. The three "active" properties are described below: +The activation of the Angular control is split up between the cells, panes, and worksheets of the current of the spreadsheet. The three "active" properties are described below: -- : Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of and pass in information about that cell, such as the column and row or the string address of the cell. +- : Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of and pass in information about that cell, such as the column and row or the string address of the cell. - : Returns the active pane in the currently active worksheet of the spreadsheet control. - : Returns or sets the active worksheet in the of the spreadsheet control. This can be set by setting it to an existing worksheet in the attached to the spreadsheet. ## Code Snippet -The following code snippet shows setting activation of the cell and worksheet in the control: +The following code snippet shows setting activation of the cell and worksheet in the control: ```ts this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1); @@ -44,6 +44,7 @@ this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ## API References -
-
+ +
+

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 1464b4b735..5925239757 100644 --- a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Spreadsheet Chart Adapter -The Angular Spreadsheet component allows displaying charts in your . +The Angular Spreadsheet component allows displaying charts in your . ## Angular Spreadsheet Chart Adapter Example @@ -22,7 +22,9 @@ The Angular Spreadsheet component allows displaying charts in your you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance. +Using + +you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance. In order to add a WorksheetChart to a worksheet, you must use the method of the worksheet’s Shapes collection. You can find more detail of adding charts in Excel below. @@ -109,7 +111,7 @@ import { WorksheetCell } from 'igniteui-angular-excel'; ## Code Snippet -The following code snippet demonstrates how to add charts to the currently viewed worksheet in the control: +The following code snippet demonstrates how to add charts to the currently viewed worksheet in the control: ```typescript this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter(); @@ -166,6 +168,7 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). ## API References -
-
+ +
+

diff --git a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx index ef73e010c9..87543ac470 100644 --- a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx @@ -44,7 +44,7 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; ## Usage -The following code snippet shows how you can execute commands related to the clipboard in the Angular control: +The following code snippet shows how you can execute commands related to the clipboard in the Angular control: ```ts public cut(): void { @@ -64,4 +64,4 @@ public paste(): void { ## API References `SpreadsheetAction`
-
+
diff --git a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx index ea7848c211..c149040edc 100644 --- a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx @@ -162,11 +162,13 @@ this.spreadsheet.activeWorksheet.unprotect(); The control allows you to configure the type of selection allowed in the control then modifier keys (SHIFT or CTRL) are pressed by the user. This is done by setting the property of the spreadsheet to one of the following values: -- `AddToSelection`: New cell ranges are added to the object's collection without needing to hold down the CTRL key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing SHIFT + F8. -- `ExtendSelection`: The selection range in the object's collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. +- `AddToSelection`: New cell ranges are added to the object's collection without needing to hold down the CTRL key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing SHIFT + F8. +- `ExtendSelection`: The selection range in the object's collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. - `Normal`: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the CTRL key and using the mouse and one may alter the selection range containing the active cell by holding the SHIFT key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys. -The object mentioned in the descriptions above can be obtained by using the property of the control. +The + +object mentioned in the descriptions above can be obtained by using the property of the control. The following code snippets demonstrate configuration of the selection mode: @@ -190,9 +192,13 @@ The following code snippets demonstrate configuration of the selection mode: this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection; ``` -The selection of the control can also be set or obtained programmatically. For single selection, you can set the property Multiple selection is done through the object that is returned by the control's property. +The selection of the control can also be set or obtained programmatically. For single selection, you can set the property Multiple selection is done through the + +object that is returned by the control's property. -The object has an `AddCellRange()` method that allows you to programmatically add a range of cells to the selection of the spreadsheet in the form of a new object. +The + +object has an `AddCellRange()` method that allows you to programmatically add a range of cells to the selection of the spreadsheet in the form of a new object. The following code snippet demonstrates adding a cell range to the spreadsheet's selection: @@ -241,7 +247,8 @@ this.spreadsheet.zoomLevel = 200; ## API References -
-
+ +
+


diff --git a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx index c5fbbb28bb..947c77dad0 100644 --- a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx @@ -43,3 +43,7 @@ import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel'; + +## API References + + diff --git a/docs/angular/src/content/en/grids_templates/column-types.mdx b/docs/angular/src/content/en/grids_templates/column-types.mdx index 433d9b93c4..20e30b93ad 100644 --- a/docs/angular/src/content/en/grids_templates/column-types.mdx +++ b/docs/angular/src/content/en/grids_templates/column-types.mdx @@ -115,12 +115,16 @@ Available timezones: | India Standard Time |‘UTC+4’ | -The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format]( - -../grid/ + + +The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](grid.md#custom-display-format). + + + +The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](../grid/grid.md#custom-display-format). -grid.md#custom-display-format). + As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the _time_ portion of the date object: diff --git a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx index 257bca25a4..089eff54fb 100644 --- a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx @@ -355,14 +355,15 @@ The list items inside the Excel Style Filtering dialog represent the unique valu ## Formatted Values Filtering Strategy -By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. + +By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. In order to do that you can use the . + -In order to do that you can use the . +The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values: + + +By default, the {ComponentTitle} component filters the data based on the original cell values, however in some cases you may want to filter the data based on the formatted values. In order to do that you can use the . The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values: - - In order to do that you can use the . - - The following sample demonstrates how to format the numeric values of a column as strings and filter the {ComponentTitle} based on the string values: diff --git a/docs/angular/src/content/en/grids_templates/filtering.mdx b/docs/angular/src/content/en/grids_templates/filtering.mdx index 2651fa74b7..464bf13790 100644 --- a/docs/angular/src/content/en/grids_templates/filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/filtering.mdx @@ -42,9 +42,11 @@ IgniteUI for [Angular {ComponentTitle} component](https://www.infragistics.com/p ## Angular {ComponentTitle} Filtering Example -The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. -API method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. +The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. API method is used to apply _contains_ condition on the _ProductName column_ through external _igxInputGroup component_. + + +The sample below demonstrates {ComponentTitle}'s **Quick filtering** user experience. diff --git a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx index d88e19916b..efb54a2a34 100644 --- a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx +++ b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx @@ -90,16 +90,14 @@ When the **{ComponentName}** body is focused, the following key combinations are ### Key Combination -- Arrow Up- navigates one cell up - -, or one level up the grid hierarchy if necessary + +- Arrow Up- navigates one cell up (no wrapping) +- Arrow Down navigates one cell down (no wrapping) -(no wrapping) -- Arrow Down navigates one cell down -, or one level down the grid hierarchy if necessary +- Arrow Up- navigates one cell up, or one level up the grid hierarchy if necessary +- Arrow Down navigates one cell down, or one level down the grid hierarchy if necessary -(no wrapping) - Arrow Left navigates one cell left (no wrapping between lines) - Arrow Right - navigates one cell right (no wrapping between lines) - Ctrl + Arrow Left navigates to the leftmost cell in the row @@ -118,34 +116,27 @@ When the **{ComponentName}** body is focused, the following key combinations are - Tab available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row - Shift + Tab - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When **Row Editing** is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row - Space - selects the row, if Row Selection is enabled -- Alt + Arrow Left or Alt + Arrow Up - - -over Group Row - collapses the group - - -collapses the row island - - -collapses the current node - -- Alt + Arrow Right or Alt + Arrow Down - -over Group Row - expands the group - - -expands the row island - - -expands the current node - - +- Alt + Arrow Left or Alt + Arrow Up - over Group Row - collapses the group +- Alt + Arrow Right or Alt + Arrow Down - over Group Row - expands the group - Alt + Arrow Left or Alt + Arrow Up - over Master Detail Row - collapses the details view - Alt + Arrow Right or Alt + Arrow Down - over Master Detail Row - expands the details view - - - Space - over Group Row - selects all rows in the group, if rowSelection property is set to multiple + + + + +- Alt + Arrow Left or Alt + Arrow Up - collapses the row island +- Alt + Arrow Right or Alt + Arrow Down - expands the row island + + + + +- Alt + Arrow Left or Alt + Arrow Up - collapses the current node +- Alt + Arrow Right or Alt + Arrow Down - expands the current node + Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through. diff --git a/docs/angular/src/content/en/grids_templates/row-adding.mdx b/docs/angular/src/content/en/grids_templates/row-adding.mdx index f9eb8e092c..d12bde3bce 100644 --- a/docs/angular/src/content/en/grids_templates/row-adding.mdx +++ b/docs/angular/src/content/en/grids_templates/row-adding.mdx @@ -186,11 +186,12 @@ The internal is automat {ComponentTitle} allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported. -Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. + +Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. + -The second parameter controls if the row is added as a child to the context row or as a sibling. +Using `beginAddRowById` requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. The second parameter controls if the row is added as a child to the context row or as a sibling. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. - You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. diff --git a/docs/angular/src/content/en/grids_templates/row-selection.mdx b/docs/angular/src/content/en/grids_templates/row-selection.mdx index d572497881..8a0116dc7e 100644 --- a/docs/angular/src/content/en/grids_templates/row-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/row-selection.mdx @@ -79,12 +79,16 @@ public handleRowSelection(event: IRowSelectionEventArgs) { ## Setup -In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following -three modes: **none**, **single** and **multiple** + +In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following three modes: **none**, **single** and **multiple**. Below we will take a look at each of them in more detail. + -four modes: **none**, **single**, **multiple** and **multipleCascade**. Below we will take a look at each of them in more detail. + +In order to setup row selection in the , you just need to set the **rowSelection** property. This property accepts **GridSelectionMode** enumeration. **GridSelectionMode** exposes the following four modes: **none**, **single**, **multiple** and **multipleCascade**. Below we will take a look at each of them in more detail. + + ### None Selection diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx index d617e0f335..6a364373d0 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx @@ -77,7 +77,7 @@ Angular データ チャートの Ignite UI for Angular 選択機能を使用す ## プログラムによる選択 -チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、 の `SelectedSeriesCollection` に項目を追加することで実現できます。 オブジェクトの プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される `ValueMemberPath` を使用できます。 +チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、 の `SelectedSeriesCollection` に項目を追加することで実現できます。 オブジェクトの プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される `ValueMemberPath` を使用できます。 マッチャーは、 のように実際のシリーズにアクセスできない場合、 などのチャートで使用するのに最適です。この場合、データ ソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを コレクションに追加できます。 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx index 9dc9005b2b..800364996c 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx @@ -21,7 +21,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; Ignite UI for Angular では、ユーザー注釈機能を使用して、実行時に にスライス注釈、ストリップ注釈、ポイント注釈を追加できます。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりするなど、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 -これは、 のデフォルトのツールと統合されています。このトピックでは、 を使用してチャートのプロット領域にユーザー注釈を追加する方法と、これらのユーザー注釈をプログラムから追加する方法を、例と共に解説します。 +これは、 のデフォルトのツールと統合されています。このトピックでは、 を使用してチャートのプロット領域にユーザー注釈を追加する方法と、これらのユーザー注釈をプログラムから追加する方法を、例と共に解説します。 @@ -32,7 +32,7 @@ Ignite UI for Angular では、ユーザー注釈機能を使用して、実行 ## Toolbar でユーザー注釈を使用する - には、「Annotate Chart」 と 「Delete Note」 という 2 つのツールを含む Annotations メニュー項目が用意されています。このメニュー項目を表示するには、対象のチャートで プロパティを **true** に設定する必要があります。 + には、「Annotate Chart」 と 「Delete Note」 という 2 つのツールを含む Annotations メニュー項目が用意されています。このメニュー項目を表示するには、対象のチャートで プロパティを **true** に設定する必要があります。 開いた後に表示される 「Annotate Chart」 オプションを使用すると、 のプロット領域に注釈を付けることができます。追加できる注釈はスライス注釈、ストリップ注釈、ポイント注釈です。X 軸または Y 軸のラベルをクリックすると、スライス注釈を追加できます。プロット領域をクリックしてドラッグすることで、ストリップ注釈を追加できます。また、チャートにプロットされたシリーズ内のポイントをクリックして、ポイント注釈を追加することもできます。 @@ -42,19 +42,19 @@ Ignite UI for Angular では、ユーザー注釈機能を使用して、実行 Angular user-annotation-delete - を使用してこれらのユーザー注釈を追加すると、 は `UserAnnotationInformationRequested` イベントを発生させ、そこでユーザー注釈に関する追加情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な オブジェクトを返します。 + を使用してこれらのユーザー注釈を追加すると、 は `UserAnnotationInformationRequested` イベントを発生させ、そこでユーザー注釈に関する追加情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な オブジェクトを返します。 以下の表は、 で構成可能なさまざまなプロパティの詳細を示しています。 | プロパティ | タイプ | 説明 | |------------|---------|-------------| -||`string`|このプロパティは、ユーザー注釈に追加情報を提供するためのものです。このプロパティは、`UserAnnotationToolTipContentUpdating` イベントと組み合わせて使用され、注釈のツールチップに追加情報を表示するよう設計されています。| +||`string`|このプロパティは、ユーザー注釈に追加情報を提供するためのものです。このプロパティは、`UserAnnotationToolTipContentUpdating` イベントと組み合わせて使用され、注釈のツールチップに追加情報を表示するよう設計されています。| ||`string`|この読み取り専用プロパティは、ユーザー注釈の一意の文字列 ID を返します。| ||`string`|このプロパティは、ユーザー注釈のバッジに使用する色を取得または設定します。| ||`string`|このプロパティは、ユーザー注釈のバッジに使用する画像へのパスを取得または設定します。| ||`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 X 座標を取得します。| ||`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 Y 座標を取得します。| -||`string`|このプロパティは、ユーザー注釈に表示するラベルを取得または設定します。| +||`string`|このプロパティは、ユーザー注釈に表示するラベルを取得または設定します。| ||`string`|このプロパティは、ユーザー注釈の背景を塗りつぶすために使用する色を取得または設定します。| `UserAnnotationInformationRequested` イベントで注釈情報を更新した後、 の メソッドを呼び出して注釈の作成を完了し、変更を確定する必要があります。あるいは、 を呼び出して注釈の を渡すことで注釈の作成をキャンセルすることもできます。注釈の は、前述のように、`UserAnnotationInformationRequested` イベントの引数の AnnotationInfo パラメーターから取得できます。これにより、プロット領域から注釈が削除されます。 diff --git a/docs/angular/src/content/jp/components/charts/types/pie-chart.mdx b/docs/angular/src/content/jp/components/charts/types/pie-chart.mdx index 947ad9d9ce..8fc44916a2 100644 --- a/docs/angular/src/content/jp/components/charts/types/pie-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/pie-chart.mdx @@ -123,7 +123,7 @@ Angular 円チャートは、データを解析するためのビューアー 「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ `Cancel` を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。 -「その他」スライスをクリックすると、 オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。 +「その他」スライスをクリックすると、 オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。 diff --git a/docs/angular/src/content/jp/components/dashboard-tile.mdx b/docs/angular/src/content/jp/components/dashboard-tile.mdx index 942f7cca6b..0908c9c30c 100644 --- a/docs/angular/src/content/jp/components/dashboard-tile.mdx +++ b/docs/angular/src/content/jp/components/dashboard-tile.mdx @@ -17,7 +17,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; # Angular Dashboard Tile (ダッシュボード タイル) -Angular Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。 +Angular Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。 提供されたデータの形状に応じて、以下を含む多種多様な視覚化が選択可能です。これには以下が含まれますが、これらに限定されません: カテゴリ チャート、`ラジアル チャートと極座標チャート、散布図、地理マップ、ラジアル ゲージとリニア ゲージ、ファイナンシャル チャート、積層型チャート。 @@ -97,7 +97,7 @@ export class AppModule {} -視覚化または視覚化のプロパティも、コントロールの上部にある を使用して構成できます。この には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。 +視覚化または視覚化のプロパティも、コントロールの上部にある を使用して構成できます。この には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。 Dashboard Tile Toolbar @@ -122,7 +122,7 @@ export class AppModule {} -
+



diff --git a/docs/angular/src/content/jp/components/general-changelog-dv.mdx b/docs/angular/src/content/jp/components/general-changelog-dv.mdx index 6dba9a0263..b4a8713ce6 100644 --- a/docs/angular/src/content/jp/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/jp/components/general-changelog-dv.mdx @@ -82,7 +82,7 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と Ignite UI for Angular では、ユーザー注釈機能により、実行時に にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 -これは、 のデフォルトのツールと統合されています。 +これは、 のデフォルトのツールと統合されています。 Angular user-annotation-create @@ -254,9 +254,9 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 #### Toolbar -- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 -- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 -- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 +- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 +- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 +- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 ### バグ修正 @@ -298,7 +298,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - [比例カテゴリ角度軸](charts/types/radial-chart.md) - スライスをプロットするための、 のラジアル円シリーズの新しい軸。円チャートに似ており、データ ポイントが円グラフ内のセグメントとして表されます。 -- +- - 新しい ToolActionCheckboxList 選択用のチェックボックスを備えた項目のコレクションを表示する新しい CheckboxList ToolAction。ToolAction CheckboxList 内のグリッドの高さは 5 項目まで大きくなり、その後スクロールバーが表示されます。 @@ -326,7 +326,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#angular-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。 で切り替えることができ、`FillBrushes` でスタイルを設定できます。 -- - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい オプション。 +- - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい オプション。 ### igniteui-angular-gauges (ゲージ) @@ -358,7 +358,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### **17.2.0 (January 2024)** - Save tool action has been added to save the chart to an image via the clipboard. -- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ## igniteui-angular-charts (チャート) @@ -370,7 +370,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### igniteui-angular - Toolbar - - クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 -- ツールバーの プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 +- ツールバーの プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 - ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 - It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart. 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 f6b60e527b..9a9d500f3b 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 @@ -11,14 +11,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular シェープ ファイルを地理的データにバインディング -Ignite UI for Angular Map コンポーネントの クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを オブジェクトのコレクションに変換します。 +Ignite UI for Angular Map コンポーネントの クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを オブジェクトのコレクションに変換します。 ## Angular シェープ ファイルを地理的データにバインディングの例 -以下の表は、シェイプ ファイルを読み込むための クラスのプロパティを説明します。 +以下の表は、シェイプ ファイルを読み込むための クラスのプロパティを説明します。 | プロパティ | 型 | 概要 | |----------|------|---------------| @@ -28,17 +28,17 @@ Ignite UI for Angular Map コンポーネントの オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、 は オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、`ImportCompleted` イベントが起動されます。 +両方のソース プロパティが null 以外の値に設定されると、 オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、 は オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、`ImportCompleted` イベントが起動されます。 ## シェープファイルの読み込み -以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として `ImportCompleted` イベントを処理する方法も示します。 +以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として `ImportCompleted` イベントを処理する方法も示します。 ## シェープファイルをバインド -Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる プロパティがあります。 は オブジェクトのリストを含むため、このような配列の例です。 +Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる プロパティがあります。 は オブジェクトのリストを含むため、このような配列の例です。 クラスは、以下の表にリストする地理的データを保存するためのプロパティを提供します。 @@ -50,8 +50,8 @@ Map コンポーネントでは、Geographic Series は、シェイプ ファイ このデータ構造は、適切なデータ列がマップされている限り、ほとんどの地理的シリーズでの使用に適しています。 ## コード スニペット -このコード例は、シェープ ファイルが を使用して読み込まれたことを前提としています。 -以下のコードは、マップ コンポーネント内の を にバインドし、すべての オブジェクトの `Points` プロパティをマップします。 +このコード例は、シェープ ファイルが を使用して読み込まれたことを前提としています。 +以下のコードは、マップ コンポーネント内の を にバインドし、すべての オブジェクトの `Points` プロパティをマップします。 @@ -153,4 +153,4 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { ## API リファレンス
-
+
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 aab00c229f..893a085c47 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 @@ -27,7 +27,7 @@ Angular は、Micr ## Angular Azure Maps からの画像の表示 - コード例 -以下のコード スニペットは、 クラスを使用して Angular で Azure Maps からの地理的画像タイルを表示する方法を示します。 +以下のコード スニペットは、 クラスを使用して Angular で Azure Maps からの地理的画像タイルを表示する方法を示します。 @@ -81,7 +81,7 @@ this.map.backgroundContent = tileSource; ## Azure Maps からの画像オーバーレイ - コード例 -次のコード スニペットは、 クラスと クラスを使用して、Angular の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。 +次のコード スニペットは、 クラスと クラスを使用して、Angular の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。 diff --git a/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx index 946cc4d439..b299d3a12a 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx @@ -32,7 +32,7 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png'; ## コード スニペット -以下のコード スニペットは、 を使用して Angular で Bing Maps からの地理的画像を表示する方法を示します。 +以下のコード スニペットは、 を使用して Angular で Bing Maps からの地理的画像を表示する方法を示します。 diff --git a/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx index df8eac9590..90223050dd 100644 --- a/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx +++ b/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx @@ -24,7 +24,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## コード スニペット -以下のコード スニペットは、 クラスを使用して で Esri 画像サーバーからの Angular 地理的画像タイルを表示する方法を示します。 +以下のコード スニペットは、 クラスを使用して で Esri 画像サーバーからの Angular 地理的画像タイルを表示する方法を示します。 @@ -85,8 +85,6 @@ this.geoMap.backgroundContent = tileSource; - - ## API リファレンス
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 664f07e478..ab0634eb95 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 @@ -24,13 +24,18 @@ Ignite UI for Angular マップ コントロールには、Shape ファイルを - がそのシェイプ ファイルを読み込むと、そのデータを オブジェクトに変換します。これらのオブジェクトは、 の `GetPointData()` メソッドから取得でき、 プロパティに割り当てられた で オブジェクトを使用してヒートマップを作成するために使用できます。この は、 ソースとして で使用できます。 + がそのシェイプ ファイルを読み込むと、そのデータを オブジェクトに変換します。これらのオブジェクトは、 の `GetPointData()` メソッドから取得でき、 - オブジェクトは、、、 の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、 を経度、 を緯度、 を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。 + -ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、 プロパティと プロパティを の プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、 に、マップに表示される値に使用する色がわかります。、、 プロパティを使用して、 コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。 - は対数スケールも使用できます。これを使用する場合は、 プロパティを **true** に設定できます。 +プロパティに割り当てられた で オブジェクトを使用してヒートマップを作成するために使用できます。この は、 ソースとして で使用できます。 + + オブジェクトは、、、 の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、 を経度、 を緯度、 を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。 + +ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、 プロパティと プロパティを の プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、 に、マップに表示される値に使用する色がわかります。、、 プロパティを使用して、 コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。 + + は対数スケールも使用できます。これを使用する場合は、 プロパティを **true** に設定できます。 ## Web Worker @@ -174,14 +179,10 @@ constructor() { - - - - ## API リファレンス
-
+



diff --git a/docs/angular/src/content/jp/components/geo-map-resources-esri.mdx b/docs/angular/src/content/jp/components/geo-map-resources-esri.mdx index 187b10214a..9c90df3ed0 100644 --- a/docs/angular/src/content/jp/components/geo-map-resources-esri.mdx +++ b/docs/angular/src/content/jp/components/geo-map-resources-esri.mdx @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Esri ユーティリティ -リソース トピックは、Esri Maps が で提供する の使用に役立つユーティリティの実装を提供します。 +リソース トピックは、Esri Maps が で提供する の使用に役立つユーティリティの実装を提供します。 ## コード スニペット @@ -83,8 +83,6 @@ export enum EsriStyle { ``` - - ## API リファレンス
diff --git a/docs/angular/src/content/jp/components/grids-and-lists.mdx b/docs/angular/src/content/jp/components/grids-and-lists.mdx index 012c07ef67..a7921cf436 100644 --- a/docs/angular/src/content/jp/components/grids-and-lists.mdx +++ b/docs/angular/src/content/jp/components/grids-and-lists.mdx @@ -250,7 +250,6 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo - [ARIA/a11y サポート](interactivity/accessibility-compliance.md) -
diff --git a/docs/angular/src/content/jp/components/menus/toolbar.mdx b/docs/angular/src/content/jp/components/menus/toolbar.mdx index 791b57c6bb..13c8c96f0e 100644 --- a/docs/angular/src/content/jp/components/menus/toolbar.mdx +++ b/docs/angular/src/content/jp/components/menus/toolbar.mdx @@ -32,7 +32,7 @@ npm install igniteui-angular-charts npm install igniteui-angular-core ``` - コンポーネントとその機能とともに を使用する場合、次のモジュールが必要です。 + コンポーネントとその機能とともに を使用する場合、次のモジュールが必要です。 @@ -72,29 +72,29 @@ export class AppModule {} ### ツール操作 -以下は、ツールバーに追加できるさまざまな 項目のリストです。 +以下は、ツールバーに追加できるさまざまな 項目のリストです。 -- -- -- -- -- -- -- -- +- +- +- +- +- +- +- +- -これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注: は、 内にラップすることもできる他のツールのラッパーです。 +これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注: は、 内にラップすることもできる他のツールのラッパーです。 - オブジェクトの 、、および プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は プロパティも公開します。 + オブジェクトの 、、および プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は プロパティも公開します。 -次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、 でツールをグループ化できます。この例では、 プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの プロパティによってもハイライト表示されます。 +次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、 でツールをグループ化できます。この例では、 プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの プロパティによってもハイライト表示されます。 ### Angular データ チャートの統合 -Angular ツールバーには、 プロパティが含まれています。これは、以下のコードに示すように、 などのコンポーネントをリンクするために使用されます。 +Angular ツールバーには、 プロパティが含まれています。これは、以下のコードに示すように、 などのコンポーネントをリンクするために使用されます。 @@ -123,47 +123,47 @@ Angular ツールバーには、 が Toolbar にリンクされると、いくつかの既存の 項目とメニューが使用可能になります。以下は、組み込みの Angular ツール操作とそれに関連付けられた のリストです。 + が Toolbar にリンクされると、いくつかの既存の 項目とメニューが使用可能になります。以下は、組み込みの Angular ツール操作とそれに関連付けられた のリストです。 ズーム操作 -- `ZoomMenu`: チャートのズーム レベルを増減するための および メソッドを呼び出す 3 つの 項目を公開する には、チャートの メソッドを呼び出してズーム レベルをデフォルトの位置にリセットする `ZoomReset` が含まれます。 +- `ZoomMenu`: チャートのズーム レベルを増減するための および メソッドを呼び出す 3 つの 項目を公開する には、チャートの メソッドを呼び出してズーム レベルをデフォルトの位置にリセットする `ZoomReset` が含まれます。 トレンド操作 -- `AnalyzeMenu`: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む 。 +- `AnalyzeMenu`: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む 。 - `AnalyzeHeader`: サブ セクションのヘッダー。 - `LinesMenu`: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブ メニュー。 - `LinesHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー: - - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する 。 - - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する 。 - - : シリーズの平均値で yAxis に沿って水平破線を表示する 。 + - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する 。 + - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する 。 + - : シリーズの平均値で yAxis に沿って水平破線を表示する 。 - `TrendsMenu`: さまざまな近似曲線を プロット領域に適用するためのツールを含むサブ メニュー。 - `TrendsHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー: - - **Exponential**: チャート内の各シリーズの を **ExponentialFit** に設定する 。 - - **Linear**: チャート内の各シリーズの を **LinearFit** に設定する 。 - - **Logarithmic**: チャート内の各シリーズの を **LogarithmicFit** に設定する 。 + - **Exponential**: チャート内の各シリーズの を **ExponentialFit** に設定する 。 + - **Linear**: チャート内の各シリーズの を **LinearFit** に設定する 。 + - **Logarithmic**: チャート内の各シリーズの を **LogarithmicFit** に設定する 。 - `HelpersHeader`: サブ セクションのヘッダー。 - - `SeriesAvg`: タイプの を使用して、チャートのシリーズ コレクションに を追加または削除する 。 + - `SeriesAvg`: タイプの を使用して、チャートのシリーズ コレクションに を追加または削除する 。 - `ValueLabelsMenu`: のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。 - `ValueLabelsHeader`: 次のツールのサブ メニュー セクション ヘッダー: - - `ShowValueLabels`: を使用してデータ ポイント値を切り替える 。 - - `ShowLastValueLabel`: を使用して最終値軸の注釈を切り替える 。 -- `ShowCrosshairs`: チャートの プロパティを介してマウスオーバー十字線の注釈を切り替える 。 -- `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える 。 + - `ShowValueLabels`: を使用してデータ ポイント値を切り替える 。 + - `ShowLastValueLabel`: を使用して最終値軸の注釈を切り替える 。 +- `ShowCrosshairs`: チャートの プロパティを介してマウスオーバー十字線の注釈を切り替える 。 +- `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える 。 画像に保存アクション -- `CopyAsImage`: チャートをクリップボードにコピーするオプションを公開する 。 +- `CopyAsImage`: チャートをクリップボードにコピーするオプションを公開する 。 - `CopyHeader`: サブ セクションのヘッダー。 ### SVG アイコン -ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: )。2 つ目は、ツールで定義されたアイコンの名前 (例: ) で、その後に SVG 文字列を追加します。 +ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: )。2 つ目は、ツールで定義されたアイコンの名前 (例: ) で、その後に SVG 文字列を追加します。 ### データ URL アイコン -svg を追加するのと同様に、 を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。 +svg を追加するのと同様に、 を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。 次のスニペットは、アイコンを追加する両方の方法を示しています。 @@ -222,7 +222,7 @@ public toolbarCustomIconOnViewInit(): void { ### Vertical Orientation -By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. +By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. @@ -276,7 +276,7 @@ The following example demonstrates styling the Angular Data Chart series brush w {/* ## Styling/Theming -The icon component can be styled by using it's property directly to the . +The icon component can be styled by using it's property directly to the . @@ -299,7 +299,7 @@ The icon component can be styled by using it's
+

## Additional Resources diff --git a/docs/angular/src/content/jp/components/spreadsheet-activation.mdx b/docs/angular/src/content/jp/components/spreadsheet-activation.mdx index 79a5c33084..15dcb68a64 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-activation.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-activation.mdx @@ -30,15 +30,15 @@ Angular Spreadsheet コンポーネントは、コントロールで現在アク ## アクティベーションの概要 -Angular コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。 +Angular コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。 -- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。 +- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。 - : スプレッドシート コントロールの現在アクティブなワークシートのアクティブ ペインを返します。 - : スプレッドシート コントロールの 内のアクティブ ワークシートを返すか、設定します。これは、スプレッドシートに添付されている 内の既存のワークシートに設定することで設定できます。 ## コード スニペット -次のコード スニペットは、 コントロールのセルとワークシートのアクティブ化の設定を示しています。 +次のコード スニペットは、 コントロールのセルとワークシートのアクティブ化の設定を示しています。 ```ts this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1); @@ -49,6 +49,7 @@ this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ## API リファレンス -
-
+ +
+

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 e4c0f94cec..b4b28cff92 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Spreadsheet チャート アダプター -Angular Spreadsheet コンポーネントを使用して にチャートを表示できます。 +Angular Spreadsheet コンポーネントを使用して にチャートを表示できます。 ## Angular Spreadsheet チャート アダプターの例 @@ -110,7 +110,7 @@ import { WorksheetCell } from 'igniteui-angular-excel'; ## コード スニペット -以下のコード スニペットは、 コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。 +以下のコード スニペットは、 コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。 ```typescript this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter(); @@ -167,6 +167,7 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). ## API リファレンス -
-
+ +
+

diff --git a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx index bea7070e2f..08e9631382 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx @@ -44,7 +44,7 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet'; ## 使用方法 -次のコード スニペットは、Angular コントロールでクリップボードに関連するコマンドを実行する方法を示しています。 +次のコード スニペットは、Angular コントロールでクリップボードに関連するコマンドを実行する方法を示しています。 ```ts public cut(): void { @@ -64,4 +64,4 @@ public paste(): void { ## API リファレンス `SpreadsheetAction`
-
+
diff --git a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx index bf9728ab00..dba9da7b1f 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx @@ -163,11 +163,13 @@ this.spreadsheet.activeWorksheet.unprotect(); コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (SHIFT または CTRL) を押します。これは、スプレッドシートの プロパティを次のいずれかの値に設定することによって行われます。 -- `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が オブジェクトの コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。 -- `ExtendSelection`: オブジェクトの コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。 +- `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が オブジェクトの コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。 +- `ExtendSelection`: オブジェクトの コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。 - `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。CTRL キーを押したままマウスを使用することで新しい範囲を追加できます。また、SHIFT キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。 -上記の説明で述べた オブジェクトは、 コントロールの プロパティを使用して取得できます。 +上記の説明で述べた + +オブジェクトは、 コントロールの プロパティを使用して取得できます。 次のコード スニペットは、選択モードの設定を示しています。 @@ -191,9 +193,12 @@ this.spreadsheet.activeWorksheet.unprotect(); this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection; ``` - コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、 プロパティを設定できます。複数選択は、 コントロールの プロパティによって返される オブジェクトを介して行われます。 + コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、 プロパティを設定できます。複数選択は、 コントロールの プロパティによって返される + +オブジェクトを介して行われます。 - オブジェクトには、新しい オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる `AddCellRange()` メソッドがあります。 + +オブジェクトには、新しい オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる `AddCellRange()` メソッドがあります。 次のコード スニペットは、スプレッドシートの選択範囲にセル範囲を追加する方法を示しています。 @@ -242,7 +247,8 @@ this.spreadsheet.zoomLevel = 200; ## API リファレンス -
-
+ +
+


diff --git a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx index bcaf7449b0..9652867993 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx @@ -45,3 +45,9 @@ import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel'; + +## API References + +
+ + diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx index 1d26c02395..bee5aba7f2 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx @@ -76,7 +76,7 @@ This example demonstrates another series type via the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. +Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. The matcher is ideal for using in charts, such as the when you do not have access to the actual series, like the . In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the collection using a matcher with the following properties set diff --git a/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx index 5a8fdc0825..18abbe9bd4 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx @@ -19,7 +19,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; In {ProductName}, you can annotate the with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. -This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. +This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically. @@ -30,7 +30,7 @@ This feature is designed to support X and Y axes and does not currently support ## Using the User Annotations with the Toolbar -The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`. +The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`. The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the . This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart. @@ -40,19 +40,19 @@ You can delete the annotations that you have previously added by selecting the " {Platform} user-annotation-delete -When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added. +When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added. The table below details the different configurable properties on : | Property | Type | Description | |------------|---------|-------------| -||`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.| +||`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.| ||`string`|This read-only property returns the unique string ID of the user annotation.| ||`string`|This property gets or sets the color to use for the badge in the user annotation.| ||`string`|This property gets or sets a path to an image to use for the badge in the user annotation.| ||`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.| ||`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.| -||`string`|This property gets or sets the label to be shown in the user annotation.| +||`string`|This property gets or sets the label to be shown in the user annotation.| ||`string`|This property gets or sets the color to be used to fill the background of the user annotation.| After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the method on the to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling and passing the of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area. diff --git a/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx b/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx index 09dfd3339d..ae61501e6a 100644 --- a/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx +++ b/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx @@ -111,7 +111,7 @@ The pie chart has 4 events associated with selection: The events that end in "Changing" are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it. -For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice. +For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice. diff --git a/docs/xplat/src/content/en/components/dashboard-tile.mdx b/docs/xplat/src/content/en/components/dashboard-tile.mdx index 92577a0297..f07fe85867 100644 --- a/docs/xplat/src/content/en/components/dashboard-tile.mdx +++ b/docs/xplat/src/content/en/components/dashboard-tile.mdx @@ -16,7 +16,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; # {Platform} Dashboard Tile -The {Platform} Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways. +The {Platform} Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways. A wide variety of visualizations may be selected for display depending on the shape of the provided data including, but not limited to: Category Charts, Radial and Polar Charts, Scatter Charts, Geographic Maps, Radial and Linear Gauges, Financial Charts and Stacked Charts. @@ -155,7 +155,7 @@ You are not locked into a single visualization when you bind the `DataSource`, a -The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: +The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: Dashboard Tile Toolbar @@ -180,7 +180,7 @@ This demo demonstrates dashboard tile integration with the {Platform} Geographic -
+



diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx index 2a19874d75..c210a79bc4 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx @@ -246,17 +246,17 @@ col.Pinned = true; ### General #### Added -- +- #### Changed - Updated the readonly styles of most form associated components across all themes to better signify when a component is in a readonly state. -- - - Behavioral change: default placement is "bottom" now. - - Behavioral change: will not render an arrow indicator by default unless with-arrow is set. - - Breaking change: events will no longer return its anchor target in its detail property. You can still access it at event.target.anchor. +- + - Behavioral change: default placement is "bottom" now. + - Behavioral change: will not render an arrow indicator by default unless with-arrow is set. + - Breaking change: events will no longer return its anchor target in its detail property. You can still access it at event.target.anchor. #### Deprecated -- - is deprecated. Use to render an arrow indicator. +- - is deprecated. Use to render an arrow indicator. ### Bug Fixes @@ -272,7 +272,12 @@ col.Pinned = true; **Breaking Changes** -- `AzureMapsMapImagery` was renamed to +- `AzureMapsMapImagery` was renamed to + + + + + - `AzureMapsImageryStyle.Imagery` was renamed to `AzureMapsImageryStyle.Satellite` - The following enum values were renamed to include the Overlay suffix: - , @@ -397,15 +402,15 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft ### General The following properties of these components are now nullable: -- : -- : , -- : , , -- : , , -- `DateTimePicker`: , , -- : -- : , , , , , -- : , -- : , +- : +- : , +- : , , +- : , , +- `DateTimePicker`: , , +- : +- : , , , , , +- : , +- : , - : , , ## **{PackageVerChanges-25-1-JULY}** @@ -451,7 +456,7 @@ For more details please visit: - [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart. ### General -- component provides a way to display a tooltip for a specific element. To use, set content as desired and link via the property to the target element's id: +- component provides a way to display a tooltip for a specific element. To use, set content as desired and link via the property to the target element's id: @@ -464,25 +469,25 @@ For more details please visit: - The tooltip can be further customized with `Show/HideDelay`, around the target and customizable `Show/HideTriggers` events. + The tooltip can be further customized with `Show/HideDelay`, around the target and customizable `Show/HideTriggers` events. ### Changes - A number of enumerations have been renamed and/or merged with others. Renames (with affected components): - - `BaseAlertLikePosition` ( and ) has been renamed to `AbsolutePosition` - - `ButtonGroupAlignment` (), `CalendarOrientation` (), `CardActionsOrientation` (), `DatePickerOrientation` (), `RadioGroupAlignment` () have been merged and renamed to `ContentOrientation` - - `CalendarBaseSelection` () has been renamed to `CalendarSelection` - - `CarouselAnimationType` () and `StepperHorizontalAnimation` () have been merged and renamed to `HorizontalTransitionAnimation` - - `CheckboxBaseLabelPosition` ( and ) and `RadioLabelPosition` () have been merged and renamed to `ToggleLabelPosition` - - `DatePickerMode` () has been renamed to `PickerMode` - - `DatePickerHeaderOrientation` () has been renamed to/merged with `CalendarHeaderOrientation` - - `DropdownPlacement` ( and ) has been renamed to `PopoverPlacement` - - `DropdownScrollStrategy` () and `SelectScrollStrategy` () have been merged and renamed to `PopoverScrollStrategy` - - `SliderBaseTickOrientation` ( and ) has been renamed to `SliderTickOrientation` - - ( and ) has been renamed to `SliderTickLabelRotation` -- - - Simplified configuration by removing the need to define separate panel and linking the panel and tab header. The `Panel` property and the `IgbTabPanel` itself have been removed. Content can be now assigned directly to the and header text can be set conveniently via the new property or by projecting an element to `slot="label"` for more involved customization. + - `BaseAlertLikePosition` ( and ) has been renamed to `AbsolutePosition` + - `ButtonGroupAlignment` (), `CalendarOrientation` (), `CardActionsOrientation` (), `DatePickerOrientation` (), `RadioGroupAlignment` () have been merged and renamed to `ContentOrientation` + - `CalendarBaseSelection` () has been renamed to `CalendarSelection` + - `CarouselAnimationType` () and `StepperHorizontalAnimation` () have been merged and renamed to `HorizontalTransitionAnimation` + - `CheckboxBaseLabelPosition` ( and ) and `RadioLabelPosition` () have been merged and renamed to `ToggleLabelPosition` + - `DatePickerMode` () has been renamed to `PickerMode` + - `DatePickerHeaderOrientation` () has been renamed to/merged with `CalendarHeaderOrientation` + - `DropdownPlacement` ( and ) has been renamed to `PopoverPlacement` + - `DropdownScrollStrategy` () and `SelectScrollStrategy` () have been merged and renamed to `PopoverScrollStrategy` + - `SliderBaseTickOrientation` ( and ) has been renamed to `SliderTickOrientation` + - ( and ) has been renamed to `SliderTickLabelRotation` +- + + Simplified configuration by removing the need to define separate panel and linking the panel and tab header. The `Panel` property and the `IgbTabPanel` itself have been removed. Content can be now assigned directly to the and header text can be set conveniently via the new property or by projecting an element to `slot="label"` for more involved customization. Before: @@ -527,16 +532,31 @@ For more details please visit: ``` -- - - & are now `double` instead of `string` -- - - `ActiveStepChangingArgsEventArgs` has been renamed to - - `ActiveStepChangedArgsEventArgs` has been renamed to +- + - & are now `double` instead of `string` +- + - `ActiveStepChangingArgsEventArgs` has been renamed to + + + + + + - `ActiveStepChangedArgsEventArgs` has been renamed to + + + + + - `StepperTitlePosition` now defaults to `Auto` to correctly reflect the default behavior -- - - `TreeSelectionChangeEventArgs` has been renamed to -- - - & are now `string` properties instead of explicit enums +- + - `TreeSelectionChangeEventArgs` has been renamed to + + + + + +- + - & are now `string` properties instead of explicit enums ### {PackageGrids} (Grids) @@ -545,7 +565,17 @@ For more details please visit: - - Added events: `GroupingExpressionsChange`, `GroupingExpansionStateChange` - - - Added new parameter in args for `GridCreated` event + - Added new parameter + + + + + in + + + + + args for `GridCreated` event - , , - Added property - - represents a list of key-value pairs [row ID, expansion state]. - Added event: `ExpansionStatesChange` @@ -595,15 +625,20 @@ For more details please visit: ### Enhancements #### List -- Added new property on called +- Added new property on called #### Accordion -- Added new events and `Close` +- Added new events and `Close` ### {PackageGrids} - **All Grids** - - Allow applying initial filtering through property + - Allow applying initial filtering through + + + + + property ### Bug Fixes @@ -635,9 +670,9 @@ For more details please visit: #### Toolbar -- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. -- Added new property on called which controls the horizontal alignment of the title text. -- Added new property on called which controls the spacing between items inside the panel. +- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. +- Added new property on called which controls the horizontal alignment of the title text. +- Added new property on called which controls the spacing between items inside the panel. ### Bug Fixes @@ -691,7 +726,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t ### General - New [Carousel](layouts/carousel.md) component. -- +- - Changed `change` event argument type from to ## **{PackageVerChanges-24-1-SEP}** @@ -719,46 +754,71 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - New [Banner](notifications/banner.md) component. - New [DatePicker](scheduling/date-picker.md) component. -- New component. -- - - Added method. This allows to register and replace icons by SVG files. +- New component. +- + - Added method. This allows to register and replace icons by SVG files. - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates. -- , , , , , , , , **IgbSelectComponent** - - Toggle methods , , methods return **true** now on success. Otherwise **false**. -- - - Added and properties. also supports two-way binding. +- , , , , , , , , **IgbSelectComponent** + - Toggle methods , , methods return **true** now on success. Otherwise **false**. +- + - Added and properties. also supports two-way binding. **Breaking Changes** - Renamed old **IgbDatePicker** to **IgbXDatePicker**. -- Removed component. Use native form instead. +- Removed component. Use native form instead. - Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: - - , ,, , , , , , , , , , -- , , , - - Renamed property type to `StyleVariant`. -- - - Renamed property type to `WeekDays`. -- , - - Changed `Change` event argument type from to . -- - - The `IgbCombo` is now of generic type and the type is now of type `T[]`. This means that either you need to specify `T` or it will be inferred by the assigned type. - - Removed , , properties. + - , ,, , , , , , , , , , +- , , , + - Renamed property type to `StyleVariant`. +- + - Renamed property type to `WeekDays`. +- , + - Changed `Change` event argument type from to + + + + +. +- + - The `IgbCombo` is now of generic type and the type is now of type `T[]`. This means that either you need to specify `T` or it will be inferred by the assigned type. + - Removed + + + + +, , properties. - **IgbSelectComponent** - - Removed , , properties. -- - - Removed `MaxValue` and `MinValue` properties. Use and instead. -- - - Removed property. -- - - Removed old named `Maxlength` and `Minlength` properties. Use and . - - Removed old named `Readonly` and `Inputmode` properties. Use and . - - Changed type also to `string`. -- - - Changed `Change` event argument type from to . -- - - Removed `AriaThumbLower` and `AriaThumbUpper` properties. Use and instead. -- - - Renamed `Readonly` property to . + - Removed + + + + +, , properties. +- + - Removed `MaxValue` and `MinValue` properties. Use and instead. +- + - Removed + + + + + property. +- + - Removed old named `Maxlength` and `Minlength` properties. Use and . + - Removed old named `Readonly` and `Inputmode` properties. Use and . + - Changed type also to `string`. +- + - Changed `Change` event argument type from to + + + + +. +- + - Removed `AriaThumbLower` and `AriaThumbUpper` properties. Use and instead. +- + - Renamed `Readonly` property to . ### {PackageGrids} @@ -766,9 +826,24 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - Added `GetColumns` / `GetColumnsAsync` methods, which return the grid columns collection. - Added new `RowClick` event. - - - Added property for a . + - Added property for a + + + + +. - Added horizontal layout. Can be enabled inside the new property as `RowLayout` `Horizontal`. - - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting to **true**. + - Added row dimension summaries for horizontal layout only. Can be enabled for each + + + + + by setting + + + + + to **true**. - Added `HorizontalSummariesPosition` property to the , configuring horizontal summaries position. - Added row headers for the row dimensions. Can be enabled inside the new property as `ShowHeaders` **true**. - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers. @@ -779,9 +854,49 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - - Removed `DisplayDensity` deprecated property. - Renamed , , `ContentColumns` properties to , and `ContentColumnList`. Recommended to use the new `GetColumns` method instead. - - Renamed `RowDelete` and `RowAdd` event argument type to . - - Renamed `ContextMenu` event argument type to . - - Removed , , events `RowID` and properties. Use `RowKey` instead. + - Renamed `RowDelete` and `RowAdd` event argument type to + + + + + + + +. + - Renamed `ContextMenu` event argument type to + + + + + + + +. + - Removed + + + + + + + +, + + + + + + + +, + + + + + + + + events `RowID` and properties. Use `RowKey` instead. - - removed `ShowPivotConfigurationUI` property. Use and set inside it the new `ShowConfiguration` option. - @@ -795,15 +910,30 @@ The following table lists the bug fixes made for the {ProductName} toolset for t ## **{PackageVerChanges-24-1-JUN}** ### General -- , - exposed to enable validation rules being enforced without restricting user input. -- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. +- , - exposed to enable validation rules being enforced without restricting user input. +- - + + + + + property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. - - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead. ### {PackageGrids} - `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more. -- - The type of Columns, Rows, Filters from option is now array of IgbPivotDimension - `IgbPivotDimension[]`, it was `IgbPivotDimensionCollection` previously. +- - The type of Columns, Rows, Filters from + + + + + option is now array of IgbPivotDimension - `IgbPivotDimension[]`, it was `IgbPivotDimensionCollection` previously. -The type of Values from option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously. +The type of Values from + + + + + option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously. ### {PackageCharts} (Charts) @@ -818,7 +948,7 @@ The type of Values from . Can be toggled via and styled via . -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### {PackageGauges} (Gauges) @@ -856,11 +986,11 @@ Data Filtering via the property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges. - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`. - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`. -- +- - Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. -- +- - `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. -- , +- , - exposed `selectedItem`, `items` and `groups` getters - - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position. @@ -872,11 +1002,11 @@ Data Filtering via the , , , - - `Readonly` has been renamed to -- - - `Maxlength` has been renamed to - - `Minlength` has been renamed to +- , , , + - `Readonly` has been renamed to +- + - `Maxlength` has been renamed to + - `Minlength` has been renamed to ### Deprecations @@ -886,18 +1016,18 @@ Data Filtering via the - - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead. -- - - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead. +- + - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead. +- + - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead. ### Removed - Removed our own `dir` attribute which shadowed the default one. This is a non-breaking change. -- - `ariaLabel` shadowed property. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabel` shadowed property. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. ## **{PackageVerChanges-23-2-JAN}** @@ -914,7 +1044,7 @@ Data Filtering via the - Save tool action has been added to save the chart to an image via the clipboard. -- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ### {PackageGrids} (Grid) @@ -945,7 +1075,12 @@ Data Filtering via the has been introduced to `IgbRowDataEventArgs` from , and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to null. +- A new argument has been introduced to `IgbRowDataEventArgs` from + + + + +, and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to null. - `RowSelectionChanging` event arguments are changed. Now, the `OldSelection`, `NewSelection`, `Added` and `Removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted. - When the grid is working with remote data and a primary key has been set, the selected rows that are not currently part of the grid view will be emitted for a partial row data object. - When selected row is deleted from the grid component `RowSelectionChanging` event will no longer be emitted. @@ -961,8 +1096,8 @@ Data Filtering via the property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded. -- `IgbAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is . +- `IgbBadge` added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded. +- `IgbAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is . ### {PackageDockManager} (DockManager) @@ -1069,7 +1204,7 @@ The following breaking changes were introduced ### {PackageInputs} (Inputs) -- A new `ValueChanged` event supports 2-way binding and should only be handled if you have not bound the property. In order to read the Value field from the control without data binding the `ValueChanged` event should be handled, otherwise if your data is not bound you should use GetCurrentValueAsync to read the controls Value. +- A new `ValueChanged` event supports 2-way binding and should only be handled if you have not bound the property. In order to read the Value field from the control without data binding the `ValueChanged` event should be handled, otherwise if your data is not bound you should use GetCurrentValueAsync to read the controls Value. #### Date Picker - Changed `ValueChanged` event to `SelectedValueChanged`. @@ -1200,7 +1335,7 @@ for example: #### Chart Legend -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added property - Enables series highlighting when hovering over legend items #### Geographic Map @@ -1232,13 +1367,13 @@ These features are CTP #### Date Picker -- - Toggles Today button visibility -- - Adds a label above the date value -- property - adds custom text when no value is selected -- - Customize input date string e.g. (`yyyy-MM-dd`) -- - Specifies whether to display selected dates as LongDate or ShortDate -- - Specifies first day of week -- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) -- - Toggles Week number visibility -- & - Date limits, specifying a range of available selectable dates. +- - Toggles Today button visibility +- - Adds a label above the date value +- property - adds custom text when no value is selected +- - Customize input date string e.g. (`yyyy-MM-dd`) +- - Specifies whether to display selected dates as LongDate or ShortDate +- - Specifies first day of week +- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) +- - Toggles Week number visibility +- & - Date limits, specifying a range of available selectable dates. - Added Accessibility diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx index 7fa8282f15..b81fa9b257 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx @@ -31,7 +31,7 @@ All notable changes for each version of {ProductName} are documented on this pag #### Changed - : Updated to use the latest `igniteui-dockmanager@2.1.0` with new `minResizeWidth` and `minResizeHeight` properties, `paneFlyoutToggle` event; additional `layoutChange` event detail and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-dockmanager/blob/master/CHANGELOG.md#210). -- Updated to use the latest `igniteui-webcomponents@7.1.0` including new and `Highlight` container components and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md#710---2026-03-19). +- Updated to use the latest `igniteui-webcomponents@7.1.0` including new and `Highlight` container components and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md#710---2026-03-19). #### New Features @@ -104,8 +104,8 @@ All notable changes for each version of {ProductName} are documented on this pag **Localization(i18n)** -- , , , , , , , , , , , - - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for , , and . +- , , , , , , , , , , , + - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for , , and . - New localization implementation for the currently supported languages for all components that have resource strings in the currently supported languages. - New public localization API and package named `igniteui-i18n-resources` containing the new resources that are used in conjunction. @@ -527,11 +527,11 @@ With 19.0.0 the React product introduces many breaking changes done to improve a [Update Guide](update-guide.md) ### Removed -- removed, use instead. -- removed, use instead. -- removed, use instead. -- `ActiveStepChangingArgs` removed, use instead. -- `ActiveStepChangedArgs` removed, use instead. +- removed, use instead. +- removed, use instead. +- removed, use instead. +- `ActiveStepChangingArgs` removed, use instead. +- `ActiveStepChangedArgs` removed, use instead. ### Enhancements @@ -556,7 +556,7 @@ igr-tab-panel component is removed. The igr-tab now encompasses both the tab hea - Added new property on called #### Accordion -- Added new events and `Close` +- Added new events and `Close` ### {PackageGrids} @@ -572,10 +572,10 @@ igr-tab-panel component is removed. The igr-tab now encompasses both the tab hea | Bug Number | Control | Description | |------------|---------|------------------| |25602 | `DataGrid` | Loading a layout with one of the date-specific filter operators results in a TypeError console error| -|28480 | | Undefined reference error is thrown when a datasource is replaced| +|28480 | | Undefined reference error is thrown when a datasource is replaced| |30319 | `DataGrid` | Records are sorted despite no value changed| |32598 | `DataGrid` | Multi-selection is not working correctly -|36374 | | A previous value was bound when a form was submitted on any touch device| +|36374 | | A previous value was bound when a form was submitted on any touch device| ## **{PackageVerChanges-24-2-MAR}** @@ -602,9 +602,9 @@ The following table lists the bug fixes made for the {ProductName} toolset for t #### Toolbar -- Added new `groupHeaderTextStyle` property to and . If set, it will apply to all actions. -- Added new property on called which controls the horizontal alignment of the title text. -- Added new property on called `itemSpacing` which controls the spacing between items inside the panel. +- Added new `groupHeaderTextStyle` property to and . If set, it will apply to all actions. +- Added new property on called which controls the horizontal alignment of the title text. +- Added new property on called `itemSpacing` which controls the spacing between items inside the panel. ### Bug Fixes @@ -653,7 +653,7 @@ DashboardTile ### General - New [Carousel](layouts/carousel.md) component. -- +- - Changed `change` event argument type from to ## **{PackageVerChanges-24-1-SEP}** @@ -681,45 +681,45 @@ DashboardTile - New [Banner](notifications/banner.md) component. - New [DatePicker](scheduling/date-picker.md) component. -- New component. +- New component. - Added support for native events to all components. -- +- - Added `setIconRef` method. This allows to register and replace icons by SVG files. - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates. -- , , , , , , , , **IgrSelectComponent** +- , , , , , , , , **IgrSelectComponent** - Toggle methods `show`, `hide`, `toggle` methods return **true** now on success, otherwise **false**. -- **IgrButtonComponent**, , , , , , , , , **IgrSelectComponent**, +- **IgrButtonComponent**, , , , , , , , , **IgrSelectComponent**, - Deprecated custom `focus` and `blur` events. Use the native `onFocus` and `onBlur` events instead -- - - Added and properties. +- + - Added and properties. **Breaking Changes** - Renamed old **IgrDatePicker** to **IgrXDatePicker**. -- Removed component. Use native form instead. +- Removed component. Use native form instead. - Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: - - , **IgrButtonComponent**, , , , , , , , , , , -- , , , - - Renamed property type to `StyleVariant`. -- - - Renamed property type to `WeekDays`. -- , - - Changed `change` event argument type from to . -- , **IgrSelectComponent** + - , **IgrButtonComponent**, , , , , , , , , , , +- , , , + - Renamed property type to `StyleVariant`. +- + - Renamed property type to `WeekDays`. +- , + - Changed `change` event argument type from to . +- , **IgrSelectComponent** - Removed `positionStrategy`, `flip`, `sameWidth` properties. -- +- - Removed `maxValue` and `minValue` properties. Use `max` and `min` instead. -- +- - Removed `positionStrategy` property. -- +- - Removed old named `maxlength` and `minlength` properties. Use `maxLength` and `minLength`. - Removed old named `readonly` and `inputmode` properties. Use `readOnly` and `inputMode`. - Changed `inputMode` type also to `string`. -- - - Changed `change` event argument type from to . -- +- + - Changed `change` event argument type from to . +- - Removed `ariaThumbLower` and `ariaThumbUpper` properties. Use `thumbLabelLower` and `thumbLabelUpper` instead. -- +- - Renamed `readonly` property to `readOnly`. ### {PackageGrids} @@ -727,9 +727,9 @@ DashboardTile - **All Grids** - Added new `RowClick` event. - - - Added `sortable` property for a . + - Added `sortable` property for a . - Added horizontal layout. Can be enabled inside the new `pivotUI` property as `rowLayout` `horizontal`. - - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting `horizontalSummary` to **true**. + - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting `horizontalSummary` to **true**. - Added `horizontalSummariesPosition` property to the `pivotUI`, configuring horizontal summaries position. - Added row headers for the row dimensions. Can be enabled inside the new `pivotUI` property as `showHeaders` **true**. - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers. @@ -741,9 +741,9 @@ DashboardTile - - Removed `displayDensity` deprecated property. - Renamed `actualColumns`, `contentColumns` properties to `actualColumnList` and `contentColumnList`. Use `columns` or `columnList` property to get all columns now. - - Renamed `rowDelete` and `rowAdd` event argument type to . - - Renamed `contextMenu` event argument type to . - - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead. + - Renamed `rowDelete` and `rowAdd` event argument type to . + - Renamed `contextMenu` event argument type to . + - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead. - - removed `showPivotConfigurationUI` property. Use `pivotUI` and set inside it the new `showConfiguration` option. - @@ -757,8 +757,8 @@ DashboardTile ## **{PackageVerChanges-24-1-JUN}** ### {PackageCommon} -- , - exposed to enable validation rules being enforced without restricting user input. -- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. +- , - exposed to enable validation rules being enforced without restricting user input. +- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. - - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead. ### {PackageGrids} @@ -779,7 +779,7 @@ DashboardTile - [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### {PackageGauges} (Gauges) @@ -813,46 +813,46 @@ DashboardTile ### {PackageCommon} -- New component -- New component +- New component +- New component - - New property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges. - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`. - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`. -- , , , - - `Readonly` has been renamed to -- - - `Maxlength` has been renamed to - - `Minlength` has been renamed to -- +- , , , + - `Readonly` has been renamed to +- + - `Maxlength` has been renamed to + - `Minlength` has been renamed to +- - Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. -- +- - `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. -- , +- , - exposed `selectedItem`, `items` and `groups` getters #### Deprecations -- The component has been deprecated. Please, use the native form element instead. +- The component has been deprecated. Please, use the native form element instead. - The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the avatar component to small: ```css .avatar { --ig-size: var(--ig-size-small); } ``` -- - - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead. -- - - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead. +- + - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead. +- + - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead. #### Removed - Removed our own `dir` attribute which shadowed the default one. This is a non-breaking change. -- - `ariaLabel` shadowed property. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabel` shadowed property. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. ## **{PackageVerChanges-23-2-JAN}** @@ -871,7 +871,7 @@ DashboardTile ### {PackageGrids} - Toolbar - - Save tool action has been added to save the chart to an image via the clipboard. -- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. - [Grid](grids/data-grid.md) - This is a new fully functional cross-platform grid and includes features like filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. @@ -1078,7 +1078,7 @@ for example: #### Chart Legend -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added property - Enables series highlighting when hovering over legend items ### {PackageMaps} (GeoMap) @@ -1111,15 +1111,15 @@ These features are CTP #### Date Picker -- - Toggles Today button visibility -- - Adds a label above the date value -- property - adds custom text when no value is selected -- - Customize input date string e.g. (`yyyy-MM-dd`) -- - Specifies whether to display selected dates as LongDate or ShortDate -- - Specifies first day of week -- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) -- - Toggles Week number visibility -- & - Date limits, specifying a range of available selectable dates. +- - Toggles Today button visibility +- - Adds a label above the date value +- property - adds custom text when no value is selected +- - Customize input date string e.g. (`yyyy-MM-dd`) +- - Specifies whether to display selected dates as LongDate or ShortDate +- - Specifies first day of week +- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) +- - Toggles Week number visibility +- & - Date limits, specifying a range of available selectable dates. - Added Accessibility diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx index 1c6a835875..11cdd1b65e 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx @@ -481,7 +481,12 @@ For more details please visit: ### {PackageGrids} - **All Grids** - - Allow applying initial filtering through property + - Allow applying initial filtering through + + + + + property ### Bug Fixes @@ -499,9 +504,9 @@ For more details please visit: #### Toolbar -- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. -- Added new property on called which controls the horizontal alignment of the title text. -- Added new property on called which controls the spacing between items inside the panel. +- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. +- Added new property on called which controls the horizontal alignment of the title text. +- Added new property on called which controls the spacing between items inside the panel. ### Bug Fixes @@ -567,9 +572,19 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - **All Grids** - Added new `RowClick` event. - - - Added `sortable` property for a . + - Added `sortable` property for a + + + + +. - Added horizontal layout. Can be enabled inside the new `pivotUI` property as `rowLayout` `horizontal`. - - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting `horizontalSummary` to **true**. + - Added row dimension summaries for horizontal layout only. Can be enabled for each + + + + + by setting `horizontalSummary` to **true**. - Added `horizontalSummariesPosition` property to the `pivotUI`, configuring horizontal summaries position. - Added row headers for the row dimensions. Can be enabled inside the new `pivotUI` property as `showHeaders` **true**. - Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers. @@ -580,9 +595,49 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - - Removed `displayDensity` deprecated property. - Renamed `actualColumns`, `contentColumns` properties to `actualColumnList` and `contentColumnList`. Use `column` or `columnList` property to get all columns now. - - Renamed `rowDelete` and `rowAdd` event argument type to . - - Renamed `contextMenu` event argument type to . - - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead. + - Renamed `rowDelete` and `rowAdd` event argument type to + + + + + + + +. + - Renamed `contextMenu` event argument type to + + + + + + + +. + - Removed + + + + + + + +, + + + + + + + +, + + + + + + + + events `rowID` and `primaryKey` properties. Use `rowKey` instead. - - removed `showPivotConfigurationUI` property. Use `pivotUI` and set inside it the new `showConfiguration` option. - @@ -597,8 +652,13 @@ The following table lists the bug fixes made for the {ProductName} toolset for t ## **{PackageVerChanges-24-1-JUN}** ### {PackageCommon} -- , - exposed to enable validation rules being enforced without restricting user input. -- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. +- , - exposed to enable validation rules being enforced without restricting user input. +- - + + + + + property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. - - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead. ### {PackageGrids} @@ -615,7 +675,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### {PackageGauges} @@ -669,7 +729,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - [Toolbar](menus/toolbar.md) - Save tool action has been added to save the chart to an image via the clipboard. - - Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. + - Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. @@ -706,8 +766,8 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - `IgcDateTimeInput`, the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart - `IgcRadio` and `IgcRadioGroup`, added component validation along with styles for invalid state - `IgcMask`, added the capability to escape mask pattern literals. -- `IgcBadge` added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded. -- `IgcAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is . +- `IgcBadge` added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded. +- `IgcAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is . ## **{PackageVerChanges-22-2.1}** @@ -876,15 +936,15 @@ This release introduces a few improvements and simplifications to visual design ### {PackageCharts} - Date Picker: - - - Toggles Today button visibility - - - Adds a label above the date value - - property - adds custom text when no value is selected - - - Customize input date string e.g. (`yyyy-MM-dd`) - - - Specifies whether to display selected dates as LongDate or ShortDate - - - Specifies first day of week - - - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) - - - Toggles Week number visibility - - & - Date limits, specifying a range of available selectable dates. + - - Toggles Today button visibility + - - Adds a label above the date value + - property - adds custom text when no value is selected + - - Customize input date string e.g. (`yyyy-MM-dd`) + - - Specifies whether to display selected dates as LongDate or ShortDate + - - Specifies first day of week + - - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) + - - Toggles Week number visibility + - & - Date limits, specifying a range of available selectable dates. - Added Accessibility @@ -948,7 +1008,7 @@ for example: #### Chart Legend -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added property - Enables series highlighting when hovering over legend items ## **{PackageVerChangedFields}** @@ -1115,44 +1175,44 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc- ### **{PackageCommonVerChanges-5.0.0}** -- +- - Added `setIconRef` method. This allows to register and replace icons by SVG files. - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates. -- +- - Added `name` and `value` properties. **Breaking Changes** -- Removed component. Use native form instead. +- Removed component. Use native form instead. - Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: - - , ,, , , , , , , , , , + - , ,, , , , , , , , , , - Removed custom `igcFocus` and `igcBlur` events. Use the native `focus` and `blur` events instead for the following components: - - , , , , , , , , , **IgcSelectComponent**, -- , , + - , , , , , , , , , **IgcSelectComponent**, +- , , - Changed `igcChange` event arguments from `CustomEvent` to `CustomEvent<{ checked: boolean; value: string | undefined }>` -- , **IgcSelectComponent** +- , **IgcSelectComponent** - Removed `positionStrategy`, `flip`, `sameWidth` properties. -- +- - Renamed The `closeOnEscape` property to `keepOpenOnEscape`. -- +- - Removed `positionStrategy` property. -- +- - Removed `maxlength` and `minlength` properties. Use the native `maxLength` and `minLength` properties or `max` and `min` instead. - Renamed `readonly` and `inputmode` properties to `readOnly` and `inputMode`. -- +- - Renamed `ariaThumbLower`/`ariaThumbUpper` properties to `thumbLabelLower`/`thumbLabelUpper`. -- +- - Renamed `readonly` property to `readOnly`. ### **{PackageCommonVerChanges-4.11.1}** #### Changed -- - Design changes in vertical mode. +- - Design changes in vertical mode. ### **{PackageCommonVerChanges-4.11.0}** #### Changed -- , , - Styling changes in Indigo Theme. +- , , - Styling changes in Indigo Theme. ### **{PackageCommonVerChanges-4.10.0}** @@ -1160,117 +1220,122 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc- - New [Banner](notifications/banner.md) component - New [Divider](layouts/divider.md) component - New [DatePicker](scheduling/date-picker.md) component -- - Bind underlying radio components name and checked state through the radio group. +- - Bind underlying radio components name and checked state through the radio group. #### Deprecated -- `Inputmode` property. Aligned with the native `inputMode` DOM property instead. +- `Inputmode` property. Aligned with the native `inputMode` DOM property instead. #### Fixed -- , - passing `undefined` to value sets the underlying input value to undefined. -- - after a form `reset` call correctly update underlying input value and placeholder state. -- - setting `--ig-size` on the item `indicator` CSS Part will now change the size of the icon. -- - double emit of `igcChange` in certain scenarios. -- - mini variant is not initially rendered when not in an open state. -- : +- , - passing `undefined` to value sets the underlying input value to undefined. +- - after a form `reset` call correctly update underlying input value and placeholder state. +- - setting `--ig-size` on the item `indicator` CSS Part will now change the size of the icon. +- - double emit of `igcChange` in certain scenarios. +- - mini variant is not initially rendered when not in an open state. +- : - Selecting an entry using the ENTER key now correctly works in single selection mode. - - Turning on the option now clears any previously entered search term. + - Turning on the option now clears any previously entered search term. - Entering a search term in single selection mode that already matches the selected item now works correctly. ### **{PackageCommonVerChanges-4.9.0}** #### Added -- - now allows resetting the selection state via the property. -- , - exposed to enable validation rules being enforced without restricting user input. +- - now allows resetting the selection state via the property. +- , - exposed to enable validation rules being enforced without restricting user input. #### Changed -- , and - now use the native `Popover` API. +- , and - now use the native `Popover` API. #### Deprecated -- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. +- - + + + + + property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. #### Fixed -- - Label in Material theme is broken when component is in read-only mode. +- - Label in Material theme is broken when component is in read-only mode. ### **{PackageCommonVerChanges-4.8.2}** #### Fixed -- - resize handle position for non-suffixed textarea. -- - error when dynamically creating and adding a tab group and tabs in a single call stack. -- / - participate in form submission when initially checked. -- - `igcClosed` fired before the component was actually closed/hidden. +- - resize handle position for non-suffixed textarea. +- - error when dynamically creating and adding a tab group and tabs in a single call stack. +- / - participate in form submission when initially checked. +- - `igcClosed` fired before the component was actually closed/hidden. ### **{PackageCommonVerChanges-4.8.1}** #### Fixed -- - is not applied to an already set value. -- , , - apply form validation synchronously. -- , - Unable to select item when clicking on a wrapping element inside the dropdown/select item slot. -- - active state is correctly applied to the correct tree node on click. +- - is not applied to an already set value. +- , , - apply form validation synchronously. +- , - Unable to select item when clicking on a wrapping element inside the dropdown/select item slot. +- - active state is correctly applied to the correct tree node on click. ### **{PackageCommonVerChanges-4.8.0}** #### Added -- can now set to none which shows the groups in the order of the provided data. -- / - updated visual looks across themes, new states. +- can now set to none which shows the groups in the order of the provided data. +- / - updated visual looks across themes, new states. - `NavBar` - added border in Bootstrap theme. #### Changed -- Grouping in no longer sorts the data. property now affects the sorting direction only of the groups. **Behavioral change**: In previous release the sorting directions of the groups sorted the items as well. If you want to achieve this behavior you can pass already sorted data to the . +- Grouping in no longer sorts the data. property now affects the sorting direction only of the groups. **Behavioral change**: In previous release the sorting directions of the groups sorted the items as well. If you want to achieve this behavior you can pass already sorted data to the . #### Deprecated -- - `aria-label-upper` and `aria-label-lower` are deprecated and will be removed in the next major release. Use `thumb-label-upper` and `thumb-label-lower` instead. +- - `aria-label-upper` and `aria-label-lower` are deprecated and will be removed in the next major release. Use `thumb-label-upper` and `thumb-label-lower` instead. #### Fixed -- - Slotted icon size. -- +- - Slotted icon size. +- - Updated Fluent theme look. - Disabled state in Safari. -- / - Style issues. -- +- / - Style issues. +- - Clicks on the slider track now use the track element width as a basis for the calculation. - Input events are no longer emitted while continuously dragging the slider thumb and exceeding upper/lower bounds. - When setting `upper-bound`/`lower-bound` before `min`/`max`, the slider will no longer overwrite the bound properties with the previous values of `min`/`max`. - The `aria-label` bound to the slider thumb is no longer reset on consequent renders. -- +- - Default validators are run synchronously. - Style issues. -- - `setRangeText()` updates underlying value. +- - `setRangeText()` updates underlying value. ### **{PackageCommonVerChanges-4.7.0}** #### Added -- - Added property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. +- - Added property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. -- - added. When enabled selecting the same value will reset the component. **Behavioral change**: In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. +- - added. When enabled selecting the same value will reset the component. **Behavioral change**: In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. #### Changed -- Improved WAI-ARIA compliance for , and . +- Improved WAI-ARIA compliance for , and . #### Fixed -- Active item visual styles for , and . -- - mini variant broken visual style. +- Active item visual styles for , and . +- - mini variant broken visual style. ### **{PackageCommonVerChanges-4.6.0}** #### Added -- `action` slot added to . -- `indicator-expanded` slot added to . -- `toggle-icon-expanded` slot added to . -- , - exposed `selectedItem`, `items` and `groups` getters. +- `action` slot added to . +- `indicator-expanded` slot added to . +- `toggle-icon-expanded` slot added to . +- , - exposed `selectedItem`, `items` and `groups` getters. #### Changed - Updated the package to Lit v3. - Components dark variants are now bound to their shadow root. - Components implement default sizes based on current theme. -- - changed events to non-cancellable. +- - changed events to non-cancellable. - Optimized components CSS and reduced bundle size. -- WAI-ARIA improvements for , , and . +- WAI-ARIA improvements for , , and . #### Fixed -- missing styling parts. +- missing styling parts. - disabled styles. -- removed unnecessary styles. +- removed unnecessary styles. - hover state visual design. -- not keeping focus state when switching views. +- not keeping focus state when switching views. ### **{PackageCommonVerChanges-4.5.0}** @@ -1278,13 +1343,13 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc- - New [Text Area](inputs/text-area.md) component. - New [Button Group](inputs/button-group.md) component. -- New . -- now supports CSS transitions. -- Position attribute for and . +- New . +- now supports CSS transitions. +- Position attribute for and . #### Deprecated -The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the component to small: +The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the component to small: ```css igc-avatar { @@ -1304,83 +1369,83 @@ igc-avatar { #### Added - The following components are now Form Associated Custom Elements. They are automatically associated with a parent `
` and behave like a browser-provided control: - - & - - - - - - - - - - - - - - - - Single - - - - -- now supports animations. + - & + - + - + - + - + - + - + - + - Single + - + - +- now supports animations. #### Changed -- fluent theme colors. -- indicator styles and color schemas. +- fluent theme colors. +- indicator styles and color schemas. #### Deprecated - `IgcForm` component is deprecated. -- : +- : - `minlength` property is deprecated and will be removed in the next major version. Use `minLength` instead. - `maxlength` property is deprecated and will be removed in the next major version. Use `maxLength` instead. - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. -- : +- : - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. -- : +- : - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. - `minValue` property is deprecated and will be removed in the next major version. Use `min` instead. - `maxValue` property is deprecated and will be removed in the next major version. Use `max` instead. -- : +- : - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead. #### Removed - Removed our own `dir` attribute which shadowed the default one. This is a **non-breaking change**. -- - `ariaLabel` shadowed property. This is a **non-breaking change**. -- - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. -- - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. -- - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. +- - `ariaLabel` shadowed property. This is a **non-breaking change**. +- - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. +- - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. +- - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**. #### Fixed -- - outlined variant styling issues and indigo theme issues. -- - outlined variant styling issues -- - `spinUp/spinDown` calls moving the caret when the input is focused. +- - outlined variant styling issues and indigo theme issues. +- - outlined variant styling issues +- - `spinUp/spinDown` calls moving the caret when the input is focused. ### **{PackageCommonVerChanges-4.3.1}** #### Added -- - component animations. +- - component animations. - Components border radius is consumed from their schemas. #### Changed -- , , - schema colors. -- - schema colors. -- - updated theming styles and size. +- , , - schema colors. +- - schema colors. +- - updated theming styles and size. #### Fixed -- - single selection not working in certain scenarios. -- - various styling fixes. -- - border radius with ripple. -- - fixed wrong color in Fluent theme. -- - various styling fixes. +- - single selection not working in certain scenarios. +- - various styling fixes. +- - border radius with ripple. +- - fixed wrong color in Fluent theme. +- - various styling fixes. - - assign closest **igc-tree-item** ancestor as a parent. -- - internal **hidden** styles and custom display property. +- - internal **hidden** styles and custom display property. ### **{PackageCommonVerChanges-4.3.0}** #### Added -- : +- : - `matchDiacritics` to the filtering options property. Defaults to **false**. If set to **true** the filter distinguishes between accented letters and their base letters. Otherwise strings are normalized and then matched. - `selection` property which returns the current selection as an array of data objects. -- : Support explicit height -- : Added animations -- : Added animations -- : Added animations +- : Support explicit height +- : Added animations +- : Added animations +- : Added animations #### Changed -- : +- : - `value` is no longer readonly and can be explicitly set. The value attribute also supports declarative binding, accepting a valid JSON stringified array. - `value` type changed from `string[]` to `ComboValue[]` where @@ -1402,65 +1467,65 @@ interface IgcComboChangeEventArgs { #### Deprecated -- : Deprecated `sameWidth`, `positionStrategy` and `flip`. They will be removed in the next major release. +- : Deprecated `sameWidth`, `positionStrategy` and `flip`. They will be removed in the next major release. #### Fixed -- : `prefix`/`suffix`/`helper-text` slots not being rendered. -- : Nested tabs selection. -- : Backdrop doesn't overlay elements. -- : Listbox position on initial open state. -- : Stretch vertically in parent container. -- : Wrong colors in fluent theme. +- : `prefix`/`suffix`/`helper-text` slots not being rendered. +- : Nested tabs selection. +- : Backdrop doesn't overlay elements. +- : Listbox position on initial open state. +- : Stretch vertically in parent container. +- : Wrong colors in fluent theme. - Animation player throws errors when height is unspecified. -- : Intl.DateTimeFormat issues in Chromium based browsers. +- : Intl.DateTimeFormat issues in Chromium based browsers. ### **{PackageCommonVerChanges-4.2.3}** #### Deprecated -- - Property `closeOnEscape` is deprecated in favor of new property `keepOpenOnEscape`. +- - Property `closeOnEscape` is deprecated in favor of new property `keepOpenOnEscape`. #### Fixed -- - colors in selected focus state. -- - set icon size to match other design system products. -- - removed outline styles for Fluent and Material themes. -- - navigation to date on set value. -- - not taking the full height of their parents. +- - colors in selected focus state. +- - set icon size to match other design system products. +- - removed outline styles for Fluent and Material themes. +- - navigation to date on set value. +- - not taking the full height of their parents. ### **{PackageCommonVerChanges-4.2.2}** #### Deprecated -- - The `prefix`/`suffix` slots are no longer needed and will be removed in the next major release. +- - The `prefix`/`suffix` slots are no longer needed and will be removed in the next major release. #### Fixed -- - UI inconsistencies. -- - Fluent theme inconsistencies. -- - Selection via API doesn't work on a searched list. -- - Fluent theme inconsistency. -- - UI inconsistencies. -- - Fluent theme inconsistency. +- - UI inconsistencies. +- - Fluent theme inconsistencies. +- - Selection via API doesn't work on a searched list. +- - Fluent theme inconsistency. +- - UI inconsistencies. +- - Fluent theme inconsistency. - Components missing in defineAllComponents. -- Wrong host sizes for , , and . +- Wrong host sizes for , , and . ### **{PackageCommonVerChanges-4.2.1}** #### Fixed -- - Matching item not activated on filtering in single selection mode. +- - Matching item not activated on filtering in single selection mode. ### **{PackageCommonVerChanges-4.2.0}** #### Added -- - Single Selection mode via the `single-select` attribute. +- - Single Selection mode via the `single-select` attribute. #### Fixed -- - UI inconsistencies. -- - Doesn't correctly render `igc-icon` and font icons. -- - UI inconsistencies. -- - Can't override item margin. +- - UI inconsistencies. +- - Doesn't correctly render `igc-icon` and font icons. +- - UI inconsistencies. +- - Can't override item margin. ### **{PackageCommonVerChanges-4.1.1}** #### Fixed -- +- - position label based on component size. - material themes don't match design. - do not cache the underlying input. @@ -1473,10 +1538,10 @@ interface IgcComboChangeEventArgs { #### Added - New [Stepper](layouts/stepper.md) component. - New [Combo](inputs/combo/overview.md) component. -- - Skip literal positions when deleting symbols in the component +- - Skip literal positions when deleting symbols in the component #### Fixed -- - Validation state on user input. +- - Validation state on user input. ### **{PackageCommonVerChanges-4.0.0}** @@ -1495,11 +1560,11 @@ interface IgcComboChangeEventArgs { ### **{PackageCommonVerChanges-3.4.1}** #### Changed -- - updated theme with the latest fluent spec. -- - updated weekend days color. +- - updated theme with the latest fluent spec. +- - updated weekend days color. #### Fixed -- `selected` attribute breaks content visibility on init. +- `selected` attribute breaks content visibility on init. ### **{PackageCommonVerChanges-3.4.0}** @@ -1508,22 +1573,22 @@ interface IgcComboChangeEventArgs { - New [Select](inputs/select.md) component. #### Fixed -- - range selection a11y improvements. -- - a11y improvements for choosing range values. -- - improved a11y with assistive software now reading the total number of items. -- - added `role="alert"` to the message container for assistive software to read it without the need of focusing. -- - made remove button accessible with the keyboard. -- `prefix`/`suffix` does not align icons to the button text. +- - range selection a11y improvements. +- - a11y improvements for choosing range values. +- - improved a11y with assistive software now reading the total number of items. +- - added `role="alert"` to the message container for assistive software to read it without the need of focusing. +- - made remove button accessible with the keyboard. +- `prefix`/`suffix` does not align icons to the button text. ### **{PackageCommonVerChanges-3.3.1}** #### Changed -- - Removed theme-specified height. +- - Removed theme-specified height. #### Fixed -- - Dispose of top-level event listeners. -- - Indeterminate animation in Safari. -- - Child radio components auto-registration. +- - Dispose of top-level event listeners. +- - Indeterminate animation in Safari. +- - Child radio components auto-registration. ### **{PackageCommonVerChanges-3.3.0}** @@ -1534,8 +1599,8 @@ interface IgcComboChangeEventArgs { - Typography styles in themes. #### Changed -- - Added support for single selection and empty symbols. -- - Improved slider steps rendering. +- - Added support for single selection and empty symbols. +- - Improved slider steps rendering. - Components will now auto register their dependencies when they are registered in `defineComponents` @@ -1553,11 +1618,11 @@ Check the official [documentation](https://www.infragistics.com/products/ignite- #### Fixed - Remove input helper text container when it is empty. -- not showing in Safari. -- not showing in Safari. -- stretches correctly in flex containers. +- not showing in Safari. +- not showing in Safari. +- stretches correctly in flex containers. - Various theming issues. -- - bug fixes and improvements. +- - bug fixes and improvements. ### **{PackageCommonVerChanges-3.2.0}** @@ -1565,27 +1630,27 @@ Check the official [documentation](https://www.infragistics.com/products/ignite- - New [MaskInput](inputs/mask-input.md) component. - New [ExpansionPanel](layouts/expansion-panel.md) component. - New [Tree](grids/tree.md) component. -- - Added `selected` CSS part and exposed CSS variable to control symbol sizes. -- - Allow slotted content. +- - Added `selected` CSS part and exposed CSS variable to control symbol sizes. +- - Allow slotted content. #### Fixed -- - Various styles fixes. +- - Various styles fixes. - Buttons - Vertical align and focus management. -- - Overflow for `suffix`/`prefix`. -- - Collapse with small sizes. -- - Overflow behavior. +- - Overflow for `suffix`/`prefix`. +- - Collapse with small sizes. +- - Overflow behavior. ### **{PackageCommonVerChanges-3.1.0}** #### Added -- : Added `prefix` and `suffix` slots. -- : Added `toggle` method. +- : Added `prefix` and `suffix` slots. +- : Added `toggle` method. #### Deprecated -- : Previously exposed `start` and `end` slots are replaced by `prefix` and `suffix`. They remain active, but are now deprecated and will be removed in a future version. +- : Previously exposed `start` and `end` slots are replaced by `prefix` and `suffix`. They remain active, but are now deprecated and will be removed in a future version. #### Fixed -- : +- : - Auto load internal icons. - Selected chip is misaligned. - Package: ESM internal import paths. @@ -1599,7 +1664,7 @@ Check the official [documentation](https://www.infragistics.com/products/ignite- #### Added - New [DropDown](inputs/dropdown.md) component. -- : Active date can be set via an attribute. +- : Active date can be set via an attribute. ### **{PackageCommonVerChanges-2.1.1}** @@ -1633,16 +1698,16 @@ Example: - Dark Themes - New [Slider](inputs/slider.md) component. - New [RangeSlider](inputs/slider.md) component. -- Support `required` property in component. +- Support `required` property in component. #### Changed - Fix checkbox/switch validity status -- Split 's `value: Date | Date[]` property into two properties - `value: Date` and `values: Date[]` -- Replaced 's `hasHeader` property & `has-header` attribute with `hideHeader` & `hide-header` respectively. -- Replaced 's `outlined` property with `elevated`. +- Split 's `value: Date | Date[]` property into two properties - `value: Date` and `values: Date[]` +- Replaced 's `hasHeader` property & `has-header` attribute with `hideHeader` & `hide-header` respectively. +- Replaced 's `outlined` property with `elevated`. #### Removed -- Removed `igcOpening`, `igcOpened`, `igcClosing` and `igcClosed` events from component. +- Removed `igcOpening`, `igcOpened`, `igcClosing` and `igcClosed` events from component. ### **{PackageCommonVerChanges-1.0.0}** @@ -1821,7 +1886,7 @@ Initial release of Ignite UI Web Components #### New features - Customizable floating pane header. -- property per pane. +- property per pane. - property which allows content pane to be docked only inside a document host. - property for split and tab group panes which allows displaying empty areas. - property on the dock manager. diff --git a/docs/xplat/src/content/en/components/general-changelog-dv.mdx b/docs/xplat/src/content/en/components/general-changelog-dv.mdx index f861be13a5..4c989409db 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv.mdx @@ -81,7 +81,7 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti In {ProductName}, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three. -This is directly integrated with the available tools of the . +This is directly integrated with the available tools of the . {Platform} user-annotation-create @@ -253,9 +253,9 @@ For more details please visit: #### Toolbar -- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. -- Added new property on called which controls the horizontal alignment of the title text. -- Added new property on called which controls the spacing between items inside the panel. +- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. +- Added new property on called which controls the horizontal alignment of the title text. +- Added new property on called which controls the spacing between items inside the panel. ### Bug Fixes @@ -297,7 +297,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. -- +- - New ToolActionCheckboxList A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. @@ -324,7 +324,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### {PackageGauges} (Gauges) @@ -363,7 +363,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t ### {PackageGrids} - Toolbar - - Save tool action has been added to save the chart to an image via the clipboard. -- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ## **{PackageVerChanges-23-1}** @@ -522,7 +522,7 @@ for example: #### Chart Legend -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added property - Enables series highlighting when hovering over legend items ### {PackageMaps} (GeoMap) 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 63a563e9ac..6175924098 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 @@ -122,7 +122,7 @@ public updateCell() { -Another way to update cell is directly through method of `Cell`: +Another way to update cell is directly through method of `Cell`: 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 e954d7fdbb..98702f709e 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 @@ -42,7 +42,7 @@ Cell merging in the grid is controlled at two levels: ### Grid Merge Mode -The grid exposes a property that accepts values from the enum: +The grid exposes a property that accepts values from the enum: - `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state. - `onSort` - Merges adjacent cells only when the column is sorted **(default value)**. 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 a432382259..866219599d 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 @@ -152,7 +152,7 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => { In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: - - 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 value), which determines whether to place the column before or after the target column. + - 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 value), which determines whether to place the column before or after the target column. diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx index 4c6e7d83a2..5d5bc4672c 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx @@ -43,7 +43,7 @@ The sample below demonstrates the three types of `{ComponentName}`'s **column se ## Basic Usage -The column selection feature can be enabled through the input, which takes values. +The column selection feature can be enabled through the input, which takes values. ## Interactions 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 e74dbfb536..a179ea216f 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 @@ -38,7 +38,7 @@ This column is not chang ### Number -If the is set to **number**, the cell value will be formatted based on application or grid's settings, as well as when property is specified. Then the number format will be changed based on them, for example it might change the: +If the is set to **number**, the cell value will be formatted based on application or grid's settings, as well as when property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` @@ -104,7 +104,7 @@ const formatOptions : IgrColumnPipeArgs = { ### DateTime, Date and Time -The appearance of the date portions will be set (e.g. day, month, year) based on format or input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on format or input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world: @@ -329,7 +329,7 @@ When `AutoGenerate` is used for the columns, the grid analyses the values in the #### Default template -The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) or {ComponentTitle} . +The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) or {ComponentTitle} . **By using LOCALE_ID** diff --git a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx index e19a79bbd2..15897ecc0a 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx @@ -76,14 +76,14 @@ The grid exposes a wide array of events that provide greater control over the ed | Event | Description | Arguments | Cancellable | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | - | | If `RowEditing` is enabled, fires when a row enters edit mode | | **true** | - | | Fires when a cell **enters edit mode** (after ) | | **true** | - | | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing ENTER) | | **true** | - | | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | **false** | - | | Fires when a cell **exits edit mode** | | **false** | - | | If `RowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | **true** | - | | If `RowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | **false** | - | | If `RowEditing` is enabled, fires when a row **exits edit mode** | | **false** | + | | If `RowEditing` is enabled, fires when a row enters edit mode | | **true** | + | | Fires when a cell **enters edit mode** (after ) | | **true** | + | | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing ENTER) | | **true** | + | | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | **false** | + | | Fires when a cell **exits edit mode** | | **false** | + | | If `RowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | **true** | + | | If `RowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | **false** | + | | If `RowEditing` is enabled, fires when a row **exits edit mode** | | **false** | ### Event Cancellation 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 df883f379c..43f2b09fb7 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx @@ -129,7 +129,7 @@ While some filtering conditions have been applied to a column, and the filter ro ## Usage -There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the and the initial properties. +There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the and the initial properties. The filtering feature is enabled for the component by setting the input to **true**. The default is `QuickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the input to **false**. @@ -1024,7 +1024,7 @@ Some browsers such as Firefox fail to parse regional specific decimal separators - - the name of the column to be filtered. - `Value` - the value to be used for filtering. - `ConditionOrExpressionTree` (optional) - this parameter accepts object of type or . If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. - - (optional) - whether the filtering is case sensitive or not. + - (optional) - whether the filtering is case sensitive or not. - `FilteringDone` event now have only one parameter of type which contains the filtering state of the filtered column. - filtering operands: condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an . - `ColumnComponent` now exposes a property, which takes an class reference. diff --git a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx index e97334ea7b..4b7e774e2d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx @@ -153,14 +153,14 @@ Overriding the default behavior for a certain key or keys combination is one of | | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | | | | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | | | | Navigates to a position in the grid, based on provided `Rowindex` and `VisibleColumnIndex`. It can also execute a custom logic over the target element, through a callback function that accepts param of type ```{ targetType: GridKeydownTargetType, target: Object }``` . Usage:
```grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });``` | ```RowIndex: number, VisibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }```) => {} | -| | returns `ICellPosition` object, which defines the next cell by `RowIndex` and `VisibleColumnIndex`. A callback function can be passed as a third parameter of method. The callback function accepts as a param and returns a `boolean` value indication if a given criteria is met:
```const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);``` | ```currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean``` | -| | returns `ICellPosition` object, which defines the previous cell by `RowIndex` and `VisibleColumnIndex`. A callback function can be passed as a third parameter of method. The callback function accepts as a param and returns a `boolean` value indication if a given criteria is met:
```const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);``` | ``` CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean ``` | +| | returns `ICellPosition` object, which defines the next cell by `RowIndex` and `VisibleColumnIndex`. A callback function can be passed as a third parameter of method. The callback function accepts as a param and returns a `boolean` value indication if a given criteria is met:
```const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);``` | ```currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean``` | +| | returns `ICellPosition` object, which defines the previous cell by `RowIndex` and `VisibleColumnIndex`. A callback function can be passed as a third parameter of method. The callback function accepts as a param and returns a `boolean` value indication if a given criteria is met:
```const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);``` | ``` CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean ``` |
-Both and are +Both and are available for the current level and cannot access cells from upper or lower level. 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 8501cf858d..3d6222febf 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 @@ -73,7 +73,7 @@ BLAZOR CODE SNIPPET HERE ``` -When requesting data, you need to utilize the interface, which provides the and properties. +When requesting data, you need to utilize the interface, which provides the and properties. The first will always be 0 and should be determined by you based on the specific application scenario. @@ -98,7 +98,7 @@ The first . -To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the and properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point. +To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the and properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point. 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 1801661a96..636013b832 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 @@ -382,13 +382,29 @@ Then define a wi > **Note**: -> The input controlling the visibility of the add row button may use the action strip context (which is of type to fine tune which records the button shows for. +> The input controlling the visibility of the add row button may use the action strip context (which is of type + + + + + + + + to fine tune which records the button shows for. > **Note**: -> The inputs controlling the visibility of the add row and add child buttons may use the action strip context (which is of type to fine tune which records the buttons show for. +> The inputs controlling the visibility of the add row and add child buttons may use the action strip context (which is of type + + + + + + + + to fine tune which records the buttons show for. @@ -532,7 +548,12 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the . +Customizing the text of the row adding overlay is possible using the + + + + +. @@ -675,4 +696,4 @@ The row adding UI comprises the buttons in the input of the `Row`. Pinned rows are rendered at the top of the by default and stay fixed through vertical scrolling of the unpinned rows in the body. +Row pinning is controlled through the + + + + + input of the `Row`. Pinned rows are rendered at the top of the by default and stay fixed through vertical scrolling of the unpinned rows in the body. ```typescript @@ -131,8 +136,6 @@ gridRef.current.pinRow('ALFKI'); gridRef.current.unpinRow('ALFKI'); ``` - - ```razor this.Grid.PinRowAsync("ALFKI", 0); @@ -142,7 +145,15 @@ this.Grid.UnpinRowAsync("ALFKI"); Note that the row ID is the primary key value, defined by the 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. -A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the event and changing the property of the event arguments to the desired position index. +A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the event and changing the + + + + + + + + property of the event arguments to the desired position index. ```html @@ -700,8 +711,21 @@ The sample will not be affected by the selected global theme from **Change Theme ## API References
-
-
+ + + + + +
+ + + + + + + + +
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx index c56994b8c8..e08a0fa281 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx @@ -37,9 +37,9 @@ The sample below demonstrates the three types of , you just need to set the property. This property accepts values. +In order to setup row selection in the , you just need to set the property. This property accepts values. - exposes the following modes: + exposes the following modes: - **None** - **Single** @@ -226,7 +226,7 @@ In this mode a parent's selection state entirely depends on the selection state - Row selection will trigger event. This event gives you information about the **new selection**, **old selection**, the rows that have been **added** and **removed** from the old selection. Also the event is **cancellable**, so this allows you to prevent selection. -- When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set to **true**. +- When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set to **true**. - When you switch between row selection modes at runtime, this will clear the previous row selection state. @@ -309,7 +309,7 @@ This will add the rows which correspond to the data entries with IDs 1, 2 and 5 ### Deselect Rows -If you need to deselect rows programmatically, you can use the method. +If you need to deselect rows programmatically, you can use the method. ```html @@ -457,7 +457,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => { Another useful API method that provides is . By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. If you call the method with **false** parameter, `SelectAllRows(false)` will always select all data in the grid, even if filtering is applied. -> **Note** Keep in mind that will not select the rows that are deleted. +> **Note** Keep in mind that will not select the rows that are deleted. ### Deselect All Rows @@ -565,14 +565,14 @@ const mySelectedRows = [1,2,3]; You can template header and row selectors in the and also access their contexts which provide useful functionality for different scenarios. -By default, the **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. +By default, the **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row Template -To create a custom row selector template, within the `{ComponentSelector}` you can use the property. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state. +To create a custom row selector template, within the `{ComponentSelector}` you can use the property. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state. -The property shows whether the current row is selected or not while the property can be used to access the row index. +The property shows whether the current row is selected or not while the property can be used to access the row index. ```html @@ -652,7 +652,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { ``` -The property can be used to get a reference of an `{ComponentSelector}` row. This is useful when you implement a `click` handler on the row selector element. +The property can be used to get a reference of an `{ComponentSelector}` row. This is useful when you implement a `click` handler on the row selector element. ```html @@ -689,7 +689,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { ``` -In the above example we are using an and we bind `rowContext.selected` to its property. See this in action in our [Row Numbering Demo](#row-numbering-demo). +In the above example we are using an and we bind `rowContext.selected` to its property. See this in action in our [Row Numbering Demo](#row-numbering-demo). @@ -701,9 +701,9 @@ The `rowContext.select()` and `rowContext.deselect()` methods are exposed in the ### Header Template -To create a custom header selector template, within the , you can use the property. From the template you can access the implicitly provided context variable, with properties that give you information about the header's state. +To create a custom header selector template, within the , you can use the property. From the template you can access the implicitly provided context variable, with properties that give you information about the header's state. -The property shows you how many rows are currently selected while shows you how many rows there are in the in total. +The property shows you how many rows are currently selected while shows you how many rows there are in the in total. ```html @@ -743,7 +743,7 @@ public RenderFragment Template = (context) => ``` -The and properties can be used to determine if the head selector should be checked or indeterminate (partially selected). +The and properties can be used to determine if the head selector should be checked or indeterminate (partially selected). @@ -830,7 +830,7 @@ The `headContext.selectAll()` and `headContext.deselectAll()` methods are expose ### Row Numbering Demo -This demo shows the usage of custom header and row selectors. The latter uses `RowContext.Index` to display row numbers and an bound to `RowContext.Selected`. +This demo shows the usage of custom header and row selectors. The latter uses `RowContext.Index` to display row numbers and an bound to `RowContext.Selected`. @@ -858,9 +858,9 @@ This demo prevents some rows from being selected using the

-
-
-
+
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/search.mdx b/docs/xplat/src/content/en/components/grids/_shared/search.mdx index bab84cb4e5..a5929fc340 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/search.mdx @@ -257,8 +257,8 @@ Now let's create our search input! By binding our `searchText` to the `value` pr Both the `FindNext` and the `FindPrev` methods have three arguments: - `Text`: **string** (the text we are searching for) -- (optional) : **boolean** (should the search be case sensitive or not, default value is false) -- (optional) : **boolean** (should the search be by an exact match or not, default value is false) +- (optional) : **boolean** (should the search be case sensitive or not, default value is false) +- (optional) : **boolean** (should the search be by an exact match or not, default value is false) When searching by an exact match, the search API will highlight as results only the cell values that match entirely the by taking the case sensitivity into account as well. For example the strings '_software_' and '_Software_' are an exact match with a disregard for the case sensitivity. @@ -679,7 +679,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { ### Case Sensitive and Exact Match -Now let's allow the user to choose whether the search should be case sensitive and/or by an exact match. For this purpose we can use simple checkbox inputs by binding our and properties to the inputs' `Checked` properties respectively and handle their `Change` events by toggling our properties and invoking the `FindNext` method. +Now let's allow the user to choose whether the search should be case sensitive and/or by an exact match. For this purpose we can use simple checkbox inputs by binding our and properties to the inputs' `Checked` properties respectively and handle their `Change` events by toggling our properties and invoking the `FindNext` method. @@ -1128,7 +1128,7 @@ public showResults() { -- For displaying a couple of chips that toggle the and the properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. +- For displaying a couple of chips that toggle the and the properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. ```html diff --git a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx index a73dac4ed5..984e24518d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx @@ -284,7 +284,7 @@ hierarchicalGridRef.current.sort([ -Sorting is performed using our algorithm. Any or `ISortingExpression` can use a custom implementation of the as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. +Sorting is performed using our algorithm. Any or `ISortingExpression` can use a custom implementation of the as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. As with the filtering behavior, you can clear the sorting state by using the method: @@ -921,7 +921,7 @@ Then set the related CSS properties to this class: ## API References
-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx index c580a7eb58..cfcc8a2713 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx @@ -45,7 +45,7 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo - **Columns** - Multi column headers - Columns order - - Column properties defined by the interface. + - Column properties defined by the interface. @@ -64,31 +64,31 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo - **Columns** - Multi column headers - Columns order - - Column properties defined by the interface. + - Column properties defined by the interface. -- -- +- +- - - -- -- - - Pivot Configuration properties defined by the interface. +- +- + - Pivot Configuration properties defined by the interface. - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.md#restoring-pivot-strategies) section. -- -- +- +- - - -- -- - - Pivot Configuration properties defined by the interface. +- +- + - Pivot Configuration properties defined by the interface. - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. @@ -250,15 +250,15 @@ gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0]) -The object implements the `IGridStateOptions` interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. method will not put the state of these features in the returned value and method will not restore state for them. +The object implements the `IGridStateOptions` interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. method will not put the state of these features in the returned value and method will not restore state for them. -The object implements the interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. / methods will not put the state of these features in the returned value and / methods will not restore state for them. +The object implements the interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. / methods will not put the state of these features in the returned value and / methods will not restore state for them. -The object implements the interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. `GetStateAsStringAsync` methods will not put the state of these features in the returned value and `ApplyStateFromStringAsync` methods will not restore state for them. +The object implements the interface, i.e. for every key, which is the name of a certain feature, there is the boolean value indicating if this feature state will be tracked. `GetStateAsStringAsync` methods will not put the state of these features in the returned value and `ApplyStateFromStringAsync` methods will not restore state for them. @@ -957,7 +957,7 @@ public onDimensionInit(event: any) { ## Restoring Child Grids -Saving / Restoring state for the child grids is controlled by the property and is enabled by default. will use the same options for saving/restoring features both for the root grid and all child grids down the hierarchy. For example, if we pass the following options: +Saving / Restoring state for the child grids is controlled by the property and is enabled by default. will use the same options for saving/restoring features both for the root grid and all child grids down the hierarchy. For example, if we pass the following options: ``` html @@ -1005,7 +1005,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; -Then the API will return the state for all grids (root grid and child grids) features excluding `Selection` and . If later on the developer wants to restore only the state for all grids, use: +Then the API will return the state for all grids (root grid and child grids) features excluding `Selection` and . If later on the developer wants to restore only the state for all grids, use: ```typescript @@ -1021,7 +1021,7 @@ state.applyState(state, ['filtering', 'rowIslands']); -Then the API will return the state for all grids (root grid and child grids) features excluding `Selection` and . If later on the developer wants to restore only the state for all grids, use: +Then the API will return the state for all grids (root grid and child grids) features excluding `Selection` and . If later on the developer wants to restore only the state for all grids, use: ```razor gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" }); @@ -1169,21 +1169,21 @@ state.applyState(gridState.columnSelection); -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the directive will ignore the columns , , , , , , and properties. +- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the directive will ignore the columns , , , , , , and properties. -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. +- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. +- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the directive will ignore the pivot dimension `MemberFunction`, pivot values , , custom functions, and pivot configuration strategies: and . +- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the directive will ignore the pivot dimension `MemberFunction`, pivot values , , custom functions, and pivot configuration strategies: and . @@ -1194,9 +1194,9 @@ state.applyState(gridState.columnSelection);

-
-
-
+
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx index 873a8f61d0..df6c0182c3 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx @@ -48,7 +48,7 @@ For `date` data type, the following functions are available: All available column data types could be found in the official [Column types topic](column-types.md#default-template). - summaries are enabled per-column by setting property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid and column . + summaries are enabled per-column by setting property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid and column . @@ -510,7 +510,7 @@ If these functions do not fulfill your requirements you can provide a custom sum -In order to achieve this you have to override one of the base classes , or according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. class provides the default implementation only for the method. extends and provides implementation for the , , and . extends and additionally gives you and . +In order to achieve this you have to override one of the base classes , or according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. class provides the default implementation only for the method. extends and provides implementation for the , , and . extends and additionally gives you and . @@ -634,9 +634,9 @@ class PtoSummary { -As seen in the examples, the base classes expose the method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results. +As seen in the examples, the base classes expose the method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results. -The method returns a list of . +The method returns a list of . ```typescript @@ -662,12 +662,12 @@ and take optional parameters for calculating the summaries. See [Custom summaries, which access all data](#custom-summaries-which-access-all-data) section below. -In order to calculate the summary row height properly, the {ComponentTitle} needs the method to always return an array of with the proper length even when the data is empty. +In order to calculate the summary row height properly, the {ComponentTitle} needs the method to always return an array of with the proper length even when the data is empty. -In order to calculate the summary row height properly, the {ComponentTitle} needs the method to always return an array of with the proper length even when the data is empty. +In order to calculate the summary row height properly, the {ComponentTitle} needs the method to always return an array of with the proper length even when the data is empty. @@ -867,7 +867,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { ### Custom summaries, which access all data - Now you can access all {ComponentTitle} data inside the custom column summary. Two additional optional parameters are introduced in the method. + Now you can access all {ComponentTitle} data inside the custom column summary. Two additional optional parameters are introduced in the method. As you can see in the code snippet below the operate method has the following three parameters: - columnData - gives you an array that contains the values only for the current column - allGridData - gives you the whole grid data source @@ -1199,7 +1199,7 @@ At runtime, summaries can also be dynamically disabled using the ## Formatting summaries -By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid and column . When using custom operands, the and are not applied. If you want to change the default appearance of the summary results, you may format them using the property. +By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid and column . When using custom operands, the and are not applied. If you want to change the default appearance of the summary results, you may format them using the property. ```typescript public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { @@ -1284,14 +1284,14 @@ When you have grouped by columns, the property are: -- - Summaries are calculated only for the root level. -- - Summaries are calculated only for the child levels. -- - Summaries are calculated for both root and child levels. This is the default value. +- - Summaries are calculated only for the root level. +- - Summaries are calculated only for the child levels. +- - Summaries are calculated for both root and child levels. This is the default value. The available values of the property are: -- - The summary row appears before the group by row children. -- - The summary row appears after the group by row children. This is the default value. +- - The summary row appears before the group by row children. +- - The summary row appears after the group by row children. This is the default value. The property is boolean. Its default value is set to **false**, which means that the summary row would be hidden when the group row is collapsed. If the property is set to **true** the summary row stays visible when group row is collapsed. @@ -1315,14 +1315,14 @@ The supports sep The available values of the property are: -- - Summaries are calculated only for the root level nodes. -- - Summaries are calculated only for the child levels. -- - Summaries are calculated for both root and child levels. This is the default value. +- - Summaries are calculated only for the root level nodes. +- - Summaries are calculated only for the child levels. +- - Summaries are calculated for both root and child levels. This is the default value. The available values of the property are: -- - The summary row appears before the list of child rows. -- - The summary row appears after the list of child rows. This is the default value. +- - The summary row appears before the list of child rows. +- - The summary row appears after the list of child rows. This is the default value. The property is boolean. Its default value is set to **false**, which means that the summary row would be hidden when the parent row is collapsed. If the property is set to **true** the summary row stays visible when parent row is collapsed. @@ -1560,7 +1560,7 @@ Don't forget to include the themes in the same way as it was demonstrated above.

-
+


 diff --git a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx index cd61877570..982cf05ae3 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx @@ -51,7 +51,7 @@ The following sample demonstrates how to use the prebuilt `Required`, `Email` an ### Configure via Reactive Forms -We expose the that will be used for validation when editing starts on a row/cell via a event. You can modify it by adding your own validators for the related fields: +We expose the that will be used for validation when editing starts on a row/cell via a event. You can modify it by adding your own validators for the related fields: ```html @@ -117,7 +117,7 @@ Invalid states will persis until the validation errors in them are fixed accordi Validation will be triggered in the following scenarios: -- While editing via the cell editor based on the grid's . Either on `Change` while typing in the editor, or on `Blur` when the editor loses focus or closes. +- While editing via the cell editor based on the grid's . Either on `Change` while typing in the editor, or on `Blur` when the editor loses focus or closes. - When updating cells/rows via the API - , , etc. - When using batch editing and the `Undo`/`Redo` API of the transaction service. @@ -202,7 +202,7 @@ The below example demonstrates the above-mentioned customization options. In some scenarios validation of one field may depend on the value of another field in the record. -In that case a custom validator can be used to compare the values in the record via their shared . +In that case a custom validator can be used to compare the values in the record via their shared . The below sample demonstrates a cross-field validation between different field of the same record. It checks the dates validity compared to the current date and between the active and created on date of the record as well as the deals won/lost ration for each employee. All errors are collected in a separate pinned column that shows that the record is invalid and displays the related errors. @@ -257,7 +257,7 @@ public calculateDealsRatio(dealsWon, dealsLost) { ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html @@ -457,7 +457,7 @@ private rowValidator(): ValidatorFn { } ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html -{PackageCommon} package. +To get started with the {Platform} Data Grid, first you need to install the {PackageCommon} package. -`{PackageGrids}` package. +To get started with the {Platform} Data Grid, first you need to install the `{PackageGrids}` package. -`{PackageCommon}` and `{PackageGrids}` packages. +To get started with the {Platform} Data Grid, first you need to install the `{PackageCommon}` and `{PackageGrids}` packages. @@ -574,7 +573,7 @@ function nameCellTemplate(ctx: IgrCellTemplateContext) { -In the snippet above we take a reference to the implicitly provided cell value. This is sufficient if you just want to present some data and maybe apply some custom styling or pipe transforms over the value of the cell. However even more useful is to take the instance itself as shown below: +In the snippet above we take a reference to the implicitly provided cell value. This is sufficient if you just want to present some data and maybe apply some custom styling or pipe transforms over the value of the cell. However even more useful is to take the instance itself as shown below: @@ -753,7 +752,7 @@ If the data in a cell is bound with `[(ngModel)]` and the value change is not ha -When properly implemented, the cell editing template also ensures that the cell's will correctly pass through the grid [editing event cycle](grid/editing.md#event-arguments-and-sequence). +When properly implemented, the cell editing template also ensures that the cell's will correctly pass through the grid [editing event cycle](grid/editing.md#event-arguments-and-sequence). ### Cell Editing Template @@ -854,7 +853,7 @@ function updateValue(event, value) { -Make sure to check the API for the in order to get accustomed with the provided properties you can use in your templates. +Make sure to check the API for the in order to get accustomed with the provided properties you can use in your templates. ### Column Template API @@ -1074,9 +1073,9 @@ The code above will make the **ProductName** column sortable and editable and wi There are optional parameters for formatting: -- - determines what date/time parts are displayed, defaults to `'mediumDate'`, equivalent to **'MMM d, y'** -- - the timezone offset for dates. By default uses the end-user's local system timezone -- - decimal representation objects. Default to **1.0-3** +- - determines what date/time parts are displayed, defaults to `'mediumDate'`, equivalent to **'MMM d, y'** +- - the timezone offset for dates. By default uses the end-user's local system timezone +- - decimal representation objects. Default to **1.0-3** To allow customizing the display format by these parameters, the input is exposed. A column will respect only the corresponding properties for its data type, if is set. Example: @@ -1163,7 +1162,7 @@ const columnPipeArgs: IgrColumnPipeArgs = { -The `OrderDate` column will respect only the and properties, while the `UnitPrice` will only respect the . +The `OrderDate` column will respect only the and properties, while the `UnitPrice` will only respect the . All available column data types could be found in the official [Column types topic](grid/column-types.md#default-template). @@ -1932,7 +1931,7 @@ And the result from this configuration is: ### Working with Flat Data Overview -The flat data binding approach is similar to the one that we already described above, but instead of **cell value** we are going to use the property of the . +The flat data binding approach is similar to the one that we already described above, but instead of **cell value** we are going to use the property of the . Since the {Platform} grid is a component for **rendering**, **manipulating** and **preserving** data records, having access to **every data record** gives you the opportunity to customize the approach of handling it. The `data` property provides you this opportunity. @@ -2437,14 +2436,14 @@ To facilitate your work, apply the comment in the `src/styles.scss` file.

-
+


-
-
-
-
+
+
+
+
## Theming Dependencies diff --git a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx index aae284893e..a2f98d48ae 100644 --- a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx @@ -269,9 +269,9 @@ Up until now, grouping/sorting worked in conjunction with each other. In 13.2 ve ### Expand/Collapse API -In addition to grouping expressions you can also control the expansion states for group rows. They are stored in a separate property of the component which is a collection of . Each expansion state is uniquely defined by the field name it is created for and the value it represents for each level of grouping, i.e. the identifier is a hierarchy array of . +In addition to grouping expressions you can also control the expansion states for group rows. They are stored in a separate property of the component which is a collection of . Each expansion state is uniquely defined by the field name it is created for and the value it represents for each level of grouping, i.e. the identifier is a hierarchy array of . -As with , setting a list of directly to the will change the expansion accordingly. Additionally exposes a method that toggles a group by the group record instance or via the property of the row. +As with , setting a list of directly to the will change the expansion accordingly. Additionally exposes a method that toggles a group by the group record instance or via the property of the row. @@ -409,7 +409,7 @@ this.grid.DeselectRowsInGroup(row.GroupRow); ### Group Row Templates -The group row except for the expand/collapse UI is fully templatable. By default it renders a grouping icon and displays the field name and value it represents. The context to render the template against is of type . +The group row except for the expand/collapse UI is fully templatable. By default it renders a grouping icon and displays the field name and value it represents. The context to render the template against is of type . As an example, the following template would make the group rows summary more verbose: @@ -466,7 +466,7 @@ igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { As mentioned above the group row except for the expand/collapse UI is fully templatable. To create a custom Group By row selector template use . From the template, you can access the implicitly provided context variable, with properties that give you information about the Group By row's state. -The property shows how many of the group records are currently selected while shows how many records belong to the group. +The property shows how many of the group records are currently selected while shows how many records belong to the group. ```html @@ -513,7 +513,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { -The property returns a reference to the group row. +The property returns a reference to the group row. ```html @@ -561,7 +561,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { -The and properties can be used to determine if the Group By row selector should be checked or indeterminate (partially selected). +The and properties can be used to determine if the Group By row selector should be checked or indeterminate (partially selected). diff --git a/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx b/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx index 4d985077a6..a37e9c1a26 100644 --- a/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx @@ -185,4 +185,4 @@ Additional API methods for controlling the expansion states are also exposed:

-
+
diff --git a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx index 177711ea48..b3c43f62a6 100644 --- a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx @@ -63,8 +63,11 @@ Change the selection to see summaries of the currently selected range. ## API References - - + + +
+
+ ## Additional Resources - [Grid overview](../data-grid.md) diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx index 2f0dd3cc07..9bba0bea90 100644 --- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx @@ -30,22 +30,21 @@ In this {Platform} grid example you can see how users can visualize hierarchical ### Dependencies -To get started with the {Platform} hierarchical grid, first you need to install the -{PackageCommon} package. +To get started with the {Platform} hierarchical grid, first you need to install the {PackageCommon} package. -`{PackageGrids}` package. +To get started with the {Platform} hierarchical grid, first you need to install the `{PackageGrids}` package. -`{PackageCommon}` and `{PackageGrids}` packages. +To get started with the {Platform} hierarchical grid, first you need to install the `{PackageCommon}` and `{PackageGrids}` packages. @@ -634,7 +633,7 @@ function buildUrl(dataState) { ## Hide/Show row expand indicators -If you have a way to provide information whether a row has children prior to its expanding, you could use the input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed. +If you have a way to provide information whether a row has children prior to its expanding, you could use the input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed. @@ -672,9 +671,9 @@ If you have a way to provide information whether a row has children prior to its -Note that setting the property is not required. In case you don't provide it, expansion indicators will be displayed for each row. +Note that setting the property is not required. In case you don't provide it, expansion indicators will be displayed for each row. -Additionally if you wish to show/hide the header expand/collapse all indicator you can use the property. +Additionally if you wish to show/hide the header expand/collapse all indicator you can use the property. This UI is disabled by default for performance reasons and it is not recommended to enable it in grids with large data or grids with load on demand. ## Features @@ -1024,4 +1023,4 @@ Then set the `--header-background` and `--header-text-color` CSS properties for


-
+
diff --git a/docs/xplat/src/content/en/components/grids/list.mdx b/docs/xplat/src/content/en/components/grids/list.mdx index 4bb431418a..265f1d9fa7 100644 --- a/docs/xplat/src/content/en/components/grids/list.mdx +++ b/docs/xplat/src/content/en/components/grids/list.mdx @@ -12,11 +12,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} List Overview -The {ProductName} List element is extremely useful when presenting a group of items. You can create a simple list of textual items, or a more complex one, containing an array of different layout elements. The component displays rows of items and supports one or more headers as well. Each list item is completely templatable and will support any valid HTML or other components. +The {ProductName} List element is extremely useful when presenting a group of items. You can create a simple list of textual items, or a more complex one, containing an array of different layout elements. The component displays rows of items and supports one or more headers as well. Each list item is completely templatable and will support any valid HTML or other components. ## {Platform} List Example -The following example represents a list populated with contacts with a name and a phone number properties. The component demonstrated below uses the and elements to enrich the user experience and expose the capabilities of setting avatar picture and buttons for text and call actions. +The following example represents a list populated with contacts with a name and a phone number properties. The component demonstrated below uses the and elements to enrich the user experience and expose the capabilities of setting avatar picture and buttons for text and call actions. @@ -53,7 +53,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the and its necessary CSS, like so: +You will then need to import the and its necessary CSS, like so: ```tsx import { IgrList, IgrListHeader, IgrListItem } from 'igniteui-react'; @@ -64,7 +64,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -Before using the , you need to register it as follows: +Before using the , you need to register it as follows: @@ -81,7 +81,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbListModule)); -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -256,7 +256,7 @@ After implementing the above code, our list component should now look like the f ### Adding Avatar and Buttons -We can use some of our other components in conjunction with the component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add some buttons to the right of them to allow the user to text and call contacts, so let's update our contacts list component to show the avatar and the buttons. We can do that by using some of the list item's slots. +We can use some of our other components in conjunction with the component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add some buttons to the right of them to allow the user to text and call contacts, so let's update our contacts list component to show the avatar and the buttons. We can do that by using some of the list item's slots. @@ -405,9 +405,9 @@ We can use some of our other components in conjunction with the component, will also be provided with a default position and spacing. +The `start` slot is meant to be used for adding some kind of media before all other content of our list items. The target element, in our case the component, will also be provided with a default position and spacing. -The `end` slot is meant to be used for list items that have some kind of action or metadata, represented, for example, by a switch, a button, a checkbox, etc. We will use components. +The `end` slot is meant to be used for list items that have some kind of action or metadata, represented, for example, by a switch, a button, a checkbox, etc. We will use components. Let's also allow the user to change the size of the list using the `--ig-size` CSS variable. We will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the list. @@ -510,7 +510,7 @@ The result of implementing the above code should look like the following: ## Styling -The exposes several CSS parts, giving you full control over its style: +The exposes several CSS parts, giving you full control over its style: |Name|Description| |--|--| @@ -541,20 +541,20 @@ igc-list-item::part(subtitle) { -In this article we covered a lot of ground with the component. First, we created a simple list with text items. Then, we created a list of contact items and added functionality to them by using some additional {ProductName} components, like the and . Finally, we changed the component's appearance through the exposed CSS parts. +In this article we covered a lot of ground with the component. First, we created a simple list with text items. Then, we created a list of contact items and added functionality to them by using some additional {ProductName} components, like the and . Finally, we changed the component's appearance through the exposed CSS parts.
## API References -
-
+
+




-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx index ef03fddd18..03dd9156fb 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx @@ -76,17 +76,24 @@ A filter can also be defined via the **filters** configuration property. It can ### Dimensions Configuration -Each basic dimension configuration requires a that matches a field from the provided **data**. +Each basic dimension configuration requires a + + + + + that matches a field from the provided **data**. Multiple sibling dimensions can be defined, which creates a more complex nested group in the related row or column dimension area. The dimensions can be reordered or moved from one area to another via their corresponding chips using drag & drop. -A dimension can also describe an expandable hierarchy via the property, for example: - - - +A dimension can also describe an expandable hierarchy via the + + + + + property, for example: @@ -104,9 +111,6 @@ const dimension: IgrPivotDimension = { ``` - - - @@ -124,9 +128,6 @@ const dimension: IgrPivotDimension = { ``` - - - @@ -144,14 +145,17 @@ const dimension: IgrPivotDimension = { ``` - - In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the property of the Pivot Grid. ### Predefined Dimensions As part of the Pivot Grid some additional predefined dimensions are exposed for easier configuration: -- +- + + + + + Can be used for date fields. Describes the following hierarchy by default: - All Periods - Years @@ -160,8 +164,6 @@ As part of the Pivot Grid some additional predefined dimensions are exposed for - Full Date It can be set for rows or columns, for example: - - @@ -178,9 +180,6 @@ const pivotConfiguration: IgrPivotConfiguration = { ``` - - - @@ -193,9 +192,6 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` - - - @@ -208,8 +204,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { ``` - - ```razor @@ -227,8 +221,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { It also allows for further customization via the second option parameter in order to enable or disable a particular part of the hierarchy, for example: - - @@ -243,10 +235,6 @@ It also allows for further customization via the second option parameter in orde ``` - - - - @@ -264,9 +252,6 @@ It also allows for further customization via the second option parameter in orde ``` - - - @@ -281,8 +266,6 @@ It also allows for further customization via the second option parameter in orde ``` - - ```razor @@ -305,8 +288,6 @@ It also allows for further customization via the second option parameter in orde ``` - - ### Values Configuration A value configuration requires a **member** that matches a field from the provided **data**, or it can define a custom **aggregator** function for more complex custom scenarios. Out of the box, there are 4 predefined aggregations that can be used depending on the data type of the data field: @@ -320,9 +301,12 @@ A value configuration requires a **member** that matches a field from the provid - `PivotAggregate` - for any other data types. This is the base aggregation. Contains the following aggregation functions: `COUNT`. -The current aggregation function can be changed at runtime using the value chip's drop-down. By default, it displays a list of available aggregations based on the field's data type. A custom list of aggregations can also be set via the property, for example: - - +The current aggregation function can be changed at runtime using the value chip's drop-down. By default, it displays a list of available aggregations based on the field's data type. A custom list of aggregations can also be set via the + + + + + property, for example: @@ -367,9 +351,6 @@ const pivotConfiguration: IgrPivotConfiguration = { ``` - - - @@ -414,9 +395,6 @@ public static totalMax: PivotAggregation = (members, data: any) => { ``` - - - @@ -461,8 +439,6 @@ public static totalMax: PivotAggregation = (members, data: any) => { ``` - - ```razor @@ -484,18 +460,31 @@ public static totalMax: PivotAggregation = (members, data: any) => { -The pivot value also provides a property. It can be used to display a custom name for this value in the column header. +The pivot value also provides a + + + + + property. It can be used to display a custom name for this value in the column header. ### Enable Property is the interface that describes the current state of the component. With it the developer can declare fields of the data as **rows**, **columns**, **filters** or **values**. The configuration allows enabling or disabling each of these elements separately. Only enabled elements are included in the current state of the Pivot Grid. The component utilizes the same configuration and shows a list of all elements - enabled and disabled. For each of them there is a checkbox in the appropriate state. End-users can easily tweak the pivot state by toggling the different elements using these checkboxes. -The `Enable` property controls if a given or is active and takes part in the pivot view rendered by the Pivot Grid. +The `Enable` property controls if a given + + + + + or + + + + + is active and takes part in the pivot view rendered by the Pivot Grid. ### Full Configuration Code Let's take a look at a basic pivot configuration: - - @@ -542,9 +531,6 @@ const pivotConfiguration1: IgrPivotConfiguration = { - - - @@ -582,9 +568,6 @@ const pivotConfiguration1: IgrPivotConfiguration = { ``` - - - @@ -630,8 +613,6 @@ const pivotConfiguration1: IgrPivotConfiguration = { ``` - - ```razor @@ -716,16 +697,31 @@ Using above code will result in the following example which groups the Date uniq The property automatically generates dimensions and values based on the data source fields: - Numeric Fields: - - Created as using `PivotNumericAggregate.sum` aggregator. + - Created as + + + + + using `PivotNumericAggregate.sum` aggregator. - Added to the values collection and enabled by default. - Non-Numeric Fields: - - Created as . + - Created as + + + + +. - Disabled by default. - Added to the columns collection. - Date Fields(only the first `date` field is enabled, the other `date` fields apply non-numeric fields rule): - - Created as + - Created as + + + + + - Enabled by default - added to the rows collection. @@ -793,12 +789,15 @@ The default values are: If you have data field values that contain the default keys, make sure to change the separators that match to any other symbols that you are not currently using. Otherwise could lead to unexpected behavior in calculating and showing the aggregated values. - - -When overriding the in Blazor, currently you will need to define all other keys, since assigning a new PivotKeys object, it replaces completely the default ones: +When overriding the + + + + + in Blazor, currently you will need to define all other keys, since assigning a new PivotKeys object, it replaces completely the default ones: ```razor @code { @@ -816,26 +815,42 @@ When overriding the configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | -| Setting duplicate or property values for dimensions/values. | These properties should be unique for each dimension/value. Duplication may result in loss of data from the final result. | +| Setting duplicate + + + + + or + + + + + property values for dimensions/values. | These properties should be unique for each dimension/value. Duplication may result in loss of data from the final result. | | Row Selection is only supported in **Single** mode. | Multiple selection is currently not supported. | | Merging the dimension members is case sensitive| The Pivot Grid creates groups and merges the same (case sensitive) values. But the dimensions provide `MemberFunction` and this can be changed there, the result of the `MemberFunction` are compared and used as display value.| - - ## API References -
+ + + + + +


-
+ + + + + +

## Additional Resources @@ -844,5 +859,3 @@ Our community is active and always welcoming to new ideas. - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink}) - - diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx index ae511e163a..d8fbd5f2f2 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx @@ -83,14 +83,14 @@ public aggregatedData = [ ``` The Pivot grid provides the object keys fields it uses to do its pivot calculations. -- - Field that stores children for hierarchy building. It represents a map from grouped values and all the pivotGridRecords that are based on that value. It can be utilized in very specific scenarios, where there is a need to do something while creating the hierarchies. No need to change this for common usage. -- - Field that stores reference to the original data records. Can be seen in the example from above - **AllProducts_records**. Avoid setting fields in the data with the same name as this property. If your data records has **records** property, you can specify different and unique value for it using the . -- - Field that stores aggregation values. It's applied while creating the hierarchies and also it should not be changed for common scenarios. -- - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has **level** property, you can specify different and unique value for it using the . -- - Separator used when generating the unique column field values. It is the dash(**-**) from the example from above - **All-Bulgaria**. -- - Separator used when generating the unique row field values. It is the underscore(**_**) from the example from above - **AllProducts_records**. It's used when creating the and field. - -All of these are stored in the property which is part of the and can be used to change the default pivot keys. +- - Field that stores children for hierarchy building. It represents a map from grouped values and all the pivotGridRecords that are based on that value. It can be utilized in very specific scenarios, where there is a need to do something while creating the hierarchies. No need to change this for common usage. +- - Field that stores reference to the original data records. Can be seen in the example from above - **AllProducts_records**. Avoid setting fields in the data with the same name as this property. If your data records has **records** property, you can specify different and unique value for it using the . +- - Field that stores aggregation values. It's applied while creating the hierarchies and also it should not be changed for common scenarios. +- - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has **level** property, you can specify different and unique value for it using the . +- - Separator used when generating the unique column field values. It is the dash(**-**) from the example from above - **All-Bulgaria**. +- - Separator used when generating the unique row field values. It is the underscore(**_**) from the example from above - **AllProducts_records**. It's used when creating the and field. + +All of these are stored in the property which is part of the and can be used to change the default pivot keys. These defaults are: ```typescript @@ -100,7 +100,7 @@ export const = { }; ``` -Setting `NoopPivotDimensionsStrategy` for the and skips the data grouping and aggregation done by the data pipes, but the pivot grid still needs declarations for the rows, columns, values and filters in order to render the pivot view as expected: +Setting `NoopPivotDimensionsStrategy` for the and skips the data grouping and aggregation done by the data pipes, but the pivot grid still needs declarations for the rows, columns, values and filters in order to render the pivot view as expected: diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx index 535e5e8350..5061ea293c 100644 --- a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx @@ -34,22 +34,21 @@ In this example, you can see how users can manipulate hierarchical or flat data. Getting started with our {Platform} Grid library and the {Platform} Tree Grid in particular is the first step to building powerful, data-rich applications that display hierarchical information in a clear and interactive way. The {Platform} Tree Grid allows you to present parent-child data structures in a familiar tabular format, complete with features like row expansion, sorting, filtering, editing, and virtualization for high performance with large datasets. -To get started with the {Platform} tree grid, first you need to install the -{PackageCommon} package. +To get started with the {Platform} tree grid, first you need to install the {PackageCommon} package. -`{PackageGrids}` package. +To get started with the {Platform} tree grid, first you need to install the `{PackageGrids}` package. -`{PackageCommon}` and `{PackageGrids}` packages. +To get started with the {Platform} tree grid, first you need to install the `{PackageCommon}` and `{PackageGrids}` packages. @@ -298,7 +297,7 @@ Now let's start by importing our property to the name of the child collection that is used in each of our data objects. In our case that will be the **Employees** collection. In addition, we can disable the automatic column generation and define them manually by matching them to the actual properties of our data objects. (The **Employees** collection will be automatically used for the hierarchy, so there is no need to include it in the columns' definitions.) -We can now enable the row selection and paging features of the tree grid by using the and add the element. +We can now enable the row selection and paging features of the tree grid by using the and add the element. We can also enable the summaries, the filtering, sorting, editing, moving and resizing features for each of our columns. @@ -426,9 +425,9 @@ const data = [ ``` -In the sample data above, all records have an ID, a ParentID and some additional properties like Name, JobTitle and Age. As mentioned previously, the ID of the records must be unique as it will be our . The ParentID contains the ID of the parent node and could be set as a . If a row has a ParentID that does not match any row in the tree grid, then that means this row is a root row. +In the sample data above, all records have an ID, a ParentID and some additional properties like Name, JobTitle and Age. As mentioned previously, the ID of the records must be unique as it will be our . The ParentID contains the ID of the parent node and could be set as a . If a row has a ParentID that does not match any row in the tree grid, then that means this row is a root row. -The parent-child relation is configured using the tree grid's and properties. +The parent-child relation is configured using the tree grid's and properties. Here is the template of the component which demonstrates how to configure the tree grid to display the data defined in the above flat collection: @@ -557,7 +556,7 @@ Then set the related CSS properties for that class:


-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/tree.mdx b/docs/xplat/src/content/en/components/grids/tree.mdx index 169f957f63..4011441d79 100644 --- a/docs/xplat/src/content/en/components/grids/tree.mdx +++ b/docs/xplat/src/content/en/components/grids/tree.mdx @@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; For end-users this means they can easily navigate across different app pages, use selection, checkboxes, add texts, icons, images and more. -The {ProductName} Tree component allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. The component also provides load on demand capabilities, item activation, multiple and cascade selection of items through built-in checkboxes, built-in keyboard navigation and more. +The {ProductName} Tree component allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. The component also provides load on demand capabilities, item activation, multiple and cascade selection of items through built-in checkboxes, built-in keyboard navigation and more. ## {Platform} Tree Example @@ -44,7 +44,7 @@ First, you need to install the {ProductName} by running the following command: npm install {PackageWebComponents} ``` -Before using the , you need to register it as follows: +Before using the , you need to register it as follows: ```ts import { defineComponents, IgcTreeComponent } from 'igniteui-webcomponents'; @@ -68,7 +68,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the and its necessary CSS, like so: +You will then need to import the and its necessary CSS, like so: ```tsx import { IgrTree, IgrTreeItem } from 'igniteui-react'; @@ -84,7 +84,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -106,10 +106,10 @@ builder.Services.AddIgniteUIBlazor( -The simplest way to start using the is as follows: +The simplest way to start using the is as follows: ### Declaring a tree - is the representation of every item that belongs to the . + is the representation of every item that belongs to the . Items provide , , and properties, which give you opportunity to configure the states of the item as per your requirement. The property can be used to add a reference to the data entry the item represents. @@ -240,7 +240,7 @@ You can provide a custom slot content for each `TreeItem`'s indentation, expansi could be expanded or collapsed: - by clicking on the item expand indicator (default behavior). -- by clicking on the item if the property is set to `true`. +- by clicking on the item if the property is set to `true`. @@ -259,7 +259,7 @@ You can provide a custom slot content for each `TreeItem`'s indentation, expansi -By default, multiple items could be expanded at the same time. In order to change this behavior and allow expanding only single branch at a time, the property could be enabled. This way when an item is expanded, all of the others already expanded branches in the same level will be collapsed. +By default, multiple items could be expanded at the same time. In order to change this behavior and allow expanding only single branch at a time, the property could be enabled. This way when an item is expanded, all of the others already expanded branches in the same level will be collapsed. @@ -281,7 +281,7 @@ By default, multiple items could be expanded at the same time. In order to chang -In addition, the provides the following API methods for item interactions: +In addition, the provides the following API methods for item interactions: - `Tree.Expand` - expands all items. If an items array is passed, expands only the specified items. - `Tree.Collapse` - collapses all items. If an items array is passed, collapses only the specified items. @@ -293,15 +293,15 @@ In addition, the pr ## {Platform} Tree Selection -In order to setup item selection in the {ProductName} Tree component, you just need to set its property. This property accepts the following three modes: **None**, **Multiple** and **Cascade**. Below we will take a look at each of them in more detail. +In order to setup item selection in the {ProductName} Tree component, you just need to set its property. This property accepts the following three modes: **None**, **Multiple** and **Cascade**. Below we will take a look at each of them in more detail. ### None -In the by default item selection is disabled. Users cannot select or deselect an item through UI interaction, but these actions can still be completed through the provided API method. +In the by default item selection is disabled. Users cannot select or deselect an item through UI interaction, but these actions can still be completed through the provided API method. ### Multiple -To enable multiple item selection in the just set the property to **multiple**. This will render a checkbox for every item. Each item has two states - selected or not. This mode supports multiple selection. +To enable multiple item selection in the just set the property to **multiple**. This will render a checkbox for every item. Each item has two states - selected or not. This mode supports multiple selection. @@ -330,7 +330,7 @@ To enable multiple item selection in the ### Cascade -To enable cascade item selection in the , just set the selection property to **cascade**. This will render a checkbox for every item. +To enable cascade item selection in the , just set the selection property to **cascade**. This will render a checkbox for every item. @@ -361,9 +361,9 @@ To enable cascade item selection in the provides a rich variety of keyboard interactions for the user. This functionality is enabled by default and allows users to navigate through the items. +Keyboard navigation in provides a rich variety of keyboard interactions for the user. This functionality is enabled by default and allows users to navigate through the items. -The navigation is compliant with W3C accessibility standards and convenient to use. +The navigation is compliant with W3C accessibility standards and convenient to use. **Key Combinations** @@ -403,7 +403,7 @@ The {ProductName} Tree can be rendered in such way that it requires the minimal After the user clicks the expand icon, it is replaced by a loading indicator. When the loading property resolves to false, the loading indicator disappears and the children are loaded. -You can provide a custom slot content for the loading area using the `loadingIndicator` slot. If such slot is not defined, the is used. +You can provide a custom slot content for the loading area using the `loadingIndicator` slot. If such slot is not defined, the is used. ### Load On Demand With Virtualization @@ -430,7 +430,7 @@ You can change the appearance of the component like this: +Using these CSS parts we can customize thе appearance of the component like this: ```css igc-tree-item { @@ -447,10 +447,10 @@ igc-tree-item { ## API References -
-
+
+

-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/inputs/button.mdx b/docs/xplat/src/content/en/components/inputs/button.mdx index bd2c48b09d..69616e33f5 100644 --- a/docs/xplat/src/content/en/components/inputs/button.mdx +++ b/docs/xplat/src/content/en/components/inputs/button.mdx @@ -12,19 +12,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Button Overview -The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button -OnClick event +The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button OnClick event, toggle the {Platform} button, disable the {Platform} button, and more. -clicked callback +The {Platform} Button Component lets you enable clickable elements that trigger actions in your {Platform} app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the {Platform} Button clicked callback, toggle the {Platform} button, disable the {Platform} button, and more. -, toggle the {Platform} button, disable the {Platform} button, and more. ## {Platform} Button Example diff --git a/docs/xplat/src/content/en/components/inputs/chip.mdx b/docs/xplat/src/content/en/components/inputs/chip.mdx index f95e3bdc71..839bad7223 100644 --- a/docs/xplat/src/content/en/components/inputs/chip.mdx +++ b/docs/xplat/src/content/en/components/inputs/chip.mdx @@ -237,7 +237,7 @@ The {ProductName} chip can be disabled by using the component and their slots, we can add different content before and after the main content of the chip. We provide default select and remove icons but you can customize them using the and `Remove` slots. You can add additional content before or after the main content, using the `Start` and `End` slots. +With the `Prefix` and `Suffix` parts of the component and their slots, we can add different content before and after the main content of the chip. We provide default select and remove icons but you can customize them using the and `Remove` slots. You can add additional content before or after the main content, using the `Start` and `End` slots. diff --git a/docs/xplat/src/content/en/components/inputs/circular-progress.mdx b/docs/xplat/src/content/en/components/inputs/circular-progress.mdx index 985cb953c9..12ded42a58 100644 --- a/docs/xplat/src/content/en/components/inputs/circular-progress.mdx +++ b/docs/xplat/src/content/en/components/inputs/circular-progress.mdx @@ -148,7 +148,7 @@ You can set the type of your indicator, using the property. Also, you can hide the default label of the {ProductName} by setting the property and customize the progress indicator default label via the exposed property. +If you want to track a process that is not determined precisely, you can set the property. Also, you can hide the default label of the {ProductName} by setting the property and customize the progress indicator default label via the exposed property. diff --git a/docs/xplat/src/content/en/components/inputs/combo/features.mdx b/docs/xplat/src/content/en/components/inputs/combo/features.mdx index b05ef7df14..effb98fb01 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/features.mdx @@ -16,14 +16,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The {ProductName} ComboBox component exposes several features such as filtering and grouping. ## Combobox Features Example -The following demo shows some features that are enabled/disabled at runtime: +The following demo shows some features that are enabled/disabled at runtime: -In our sample we are going to use the component, so we have to import them together with the combo: +In our sample we are going to use the component, so we have to import them together with the combo: @@ -50,7 +50,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); ``` -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -182,7 +182,7 @@ switchDisable.addEventListener("igcChange", () => { -Note that grouping is enabled/disabled by setting the property to a corresponding data source field: +Note that grouping is enabled/disabled by setting the property to a corresponding data source field: @@ -253,7 +253,7 @@ Filtering options can be further enhanced by enabling the search case sensitivit #### Filtering Options -The {ProductName} exposes one more filtering property that allows passing configuration of both `FilterKey` and `CaseSensitive` options. The `FilterKey` indicates which data source field should be used for filtering the list of options. The `CaseSensitive` option indicates if the filtering should be case-sensitive or not. +The {ProductName} exposes one more filtering property that allows passing configuration of both `FilterKey` and `CaseSensitive` options. The `FilterKey` indicates which data source field should be used for filtering the list of options. The `CaseSensitive` option indicates if the filtering should be case-sensitive or not. The following code snippet shows how to filter the cities from our data source by country instead of name. We are also making the filtering case-sensitive by default: @@ -291,7 +291,7 @@ const options = { ### Grouping -Defining a option will group the items, according to the provided key: +Defining a option will group the items, according to the provided key: @@ -318,7 +318,7 @@ Defining a -The property will only have effect if your data source consists of complex objects. +The property will only have effect if your data source consists of complex objects. #### Sorting Direction @@ -351,7 +351,7 @@ The ComboBox component also exposes an option for setting whether groups should ### Label -The label can be set easily using the property: +The label can be set easily using the property: @@ -521,7 +521,7 @@ You can disable the ComboBox using the
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx index 1bfc94a390..9e8d2fd204 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx @@ -36,7 +36,7 @@ First, you need to install the {ProductName} by running the following command: npm install {PackageWebComponents} ``` -Before using the component, you need to register it together with its additional components and necessary CSS: +Before using the component, you need to register it together with its additional components and necessary CSS: ```ts import { defineComponents, IgcComboComponent } @@ -57,7 +57,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] -To get started with the component, first we need to register its module as follows: +To get started with the component, first we need to register its module as follows: ```razor @@ -66,7 +66,7 @@ To get started with the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -86,7 +86,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the {Platform} and its necessary CSS: +You will then need to import the {Platform} and its necessary CSS: ```tsx import { IgrCombo } from 'igniteui-react'; @@ -98,7 +98,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -The component doesn't work with the standard `` element. Use `Form` instead. +The component doesn't work with the standard `` element. Use `Form` instead. Then, we will bind an array of objects to the combo data source used for building the list of options. @@ -199,20 +199,20 @@ const cities: City[] = [ When the combo is bound to a list of complex data (i.e. objects), we need to specify a property that the control will use to handle item selection. The component exposes the following properties: -- `T` - **required**, if is omitted, this should be set to "object", otherwise this needs to match the property type of . -- - **Optional**, **required** for complex data object - Determines which field of the data source will be used to make selections. If is omitted, the selection API will use object references to select items. -- - **Optional**, **recommended** for complex data objects - Determines which field in the data source is used as the display value. If no value is specified for , the combo will use the specified (if any). -In our case, we want the combo to display the `name` of each city and use the `id` field for item selection and as the underlying value for each item. Therefore, we provide these properties to the combo's and respectively. +- `T` - **required**, if is omitted, this should be set to "object", otherwise this needs to match the property type of . +- - **Optional**, **required** for complex data object - Determines which field of the data source will be used to make selections. If is omitted, the selection API will use object references to select items. +- - **Optional**, **recommended** for complex data objects - Determines which field in the data source is used as the display value. If no value is specified for , the combo will use the specified (if any). +In our case, we want the combo to display the `name` of each city and use the `id` field for item selection and as the underlying value for each item. Therefore, we provide these properties to the combo's and respectively. -When the data source consists of primitive types (e.g. `strings`, `numbers`, etc.), **do not** specify a and/or . +When the data source consists of primitive types (e.g. `strings`, `numbers`, etc.), **do not** specify a and/or . ### Setting Value The ComboBox component exposes a getter and setter in addition to an attribute, which is also called value. You can use the value attribute to set the selected items on component initialization. -If you want to read the value, i.e. the list of currently selected items, or to update the value use the value getter and setter respectively. The value getter will return a list of all selected items as represented by the . Likewise, if you want to update the list of selected items by using the value setter, you should provide a list of items by their . +If you want to read the value, i.e. the list of currently selected items, or to update the value use the value getter and setter respectively. The value getter will return a list of all selected items as represented by the . Likewise, if you want to update the list of selected items by using the value setter, you should provide a list of items by their . @@ -246,7 +246,7 @@ comboRef.current.value = ['NY01', 'UK01']; The combo component exposes APIs that allow you to change the currently selected items. -Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the and methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a for your combo component, then you should pass the value keys of the items you would like to select/deselect: +Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the and methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a for your combo component, then you should pass the value keys of the items you would like to select/deselect: #### Select/deselect some items @@ -352,7 +352,7 @@ comboRef.current.deselect([]); -If the property is omitted, you will have to list the items you wish to select/deselect as objects references: +If the property is omitted, you will have to list the items you wish to select/deselect as objects references: @@ -387,10 +387,10 @@ comboRef.current.deselect([cities[1], cities[5]]); ### Validation -The {ProductName} component supports most of the properties, such as , , , , etc. The component also exposes two methods bound to its validation: +The {ProductName} component supports most of the properties, such as , , , , etc. The component also exposes two methods bound to its validation: -- - checks for validity and returns true if the component satisfies the validation constraints. -- - a wrapper around reportValidity to comply with the native input API. +- - checks for validity and returns true if the component satisfies the validation constraints. +- - a wrapper around reportValidity to comply with the native input API. ## Keyboard Navigation @@ -409,7 +409,7 @@ When the combo component is focused and the list of options is **visible**: ## Styling -You can change the appearance of the component and its items, by using the exposed CSS parts listed below: +You can change the appearance of the component and its items, by using the exposed CSS parts listed below: | Part name | Description | | -------------------- | ------------------------------------------------------------------------------- | @@ -465,7 +465,7 @@ igc-combo::part(toggle-icon) { ## API References -
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/inputs/date-time-input.mdx b/docs/xplat/src/content/en/components/inputs/date-time-input.mdx index 97c7a5a3b6..2f4e408337 100644 --- a/docs/xplat/src/content/en/components/inputs/date-time-input.mdx +++ b/docs/xplat/src/content/en/components/inputs/date-time-input.mdx @@ -132,7 +132,7 @@ The also accepts [ISO 8601](https://tc39.es/ecm The string can be a full `ISO` string, in the format `YYYY-MM-DDTHH:mm:ss.sssZ` or it could be separated into date-only and time-only portions. #### Date-only -If a date-only string is bound to the property of the component, it needs to be in the format `YYYY-MM-DD`. The is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be `T00:00:00`. +If a date-only string is bound to the property of the component, it needs to be in the format `YYYY-MM-DD`. The is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be `T00:00:00`. #### Time-only Time-only strings are normally not defined in the `ECMA` specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - `HH:mm:ss`. The 12 hour format is not supported. @@ -166,10 +166,10 @@ The has intuitive keyboard navigation that make The supports different display and input formats. -It uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) which allows it to support predefined format options, such as `long` and `short`, `medium` and `full`. Additionally, it can also accept a custom string constructed from supported characters, such as `dd-MM-yy`. Also, if no is provided, the component will use the as such. +It uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) which allows it to support predefined format options, such as `long` and `short`, `medium` and `full`. Additionally, it can also accept a custom string constructed from supported characters, such as `dd-MM-yy`. Also, if no is provided, the component will use the as such. ### Input Format -The table bellow shows formats that are supported by the component's : +The table bellow shows formats that are supported by the component's : |Format|Description| |-------|----------| @@ -187,7 +187,7 @@ The table bellow shows formats that are supported by the component's . This will set both the expected user input format and the `mask`. Additionally, the is locale based, so if none is provided, the editor will default to `dd/MM/yyyy`. +To set a specific input format, pass it as a string to the . This will set both the expected user input format and the `mask`. Additionally, the is locale based, so if none is provided, the editor will default to `dd/MM/yyyy`. @@ -323,7 +323,7 @@ If all went well, the component will be `invalid` if the value is greater or low The exposes public and methods. They increment or decrement a specific `DatePart` of the currently set date and time and can be used in a couple of ways. -In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional `delta` parameter of type number which can be used to set the stepUp/stepDown step. +In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional `delta` parameter of type number which can be used to set the stepUp/stepDown step. diff --git a/docs/xplat/src/content/en/components/inputs/dropdown.mdx b/docs/xplat/src/content/en/components/inputs/dropdown.mdx index 94fd164812..90bbd782db 100644 --- a/docs/xplat/src/content/en/components/inputs/dropdown.mdx +++ b/docs/xplat/src/content/en/components/inputs/dropdown.mdx @@ -125,7 +125,7 @@ The simplest way to start using the is as follows: ### Target -The {Platform} Dropdown list is positioned relatively to its target. The `target` slot allows you to provide a built-in component which toggles the `open` property on click. In some cases you would want to use an external target or use another event to toggle the opening of the Dropdown. You can achieve this using the , and methods which allow you to provide the target as a parameter. By default, the Dropdown list uses `absolute` CSS position. You will need to set the of the {Platform} Dropdown to `fixed` when the target element is inside a fixed container, but the Dropdown is not. The Dropdown list is automatically sized based on its content, if you want the list to have the same width as the target, you should set the property to `true`. +The {Platform} Dropdown list is positioned relatively to its target. The `target` slot allows you to provide a built-in component which toggles the `open` property on click. In some cases you would want to use an external target or use another event to toggle the opening of the Dropdown. You can achieve this using the , and methods which allow you to provide the target as a parameter. By default, the Dropdown list uses `absolute` CSS position. You will need to set the of the {Platform} Dropdown to `fixed` when the target element is inside a fixed container, but the Dropdown is not. The Dropdown list is automatically sized based on its content, if you want the list to have the same width as the target, you should set the property to `true`. @@ -134,7 +134,7 @@ The {Platform} Dropdown list is positioned relatively to its target. The `target ### Position -The preferred placement of the {Platform} Dropdown can be set using the property. The default placement of the Dropdown is `bottom-start`. The property determines whether the placement should be flipped if there is not enough space to display the Dropdown at the specified placement. The distance from the {Platform} Dropdown list to its target can be specified using the property. +The preferred placement of the {Platform} Dropdown can be set using the property. The default placement of the Dropdown is `bottom-start`. The property determines whether the placement should be flipped if there is not enough space to display the Dropdown at the specified placement. The distance from the {Platform} Dropdown list to its target can be specified using the property. @@ -143,7 +143,7 @@ The preferred placement of the {Platform} Dropdown can be set using the emits the `Change` event when the user selects an item. The method of the Dropdown allows you to select an item by its index or value. +The emits the `Change` event when the user selects an item. The method of the Dropdown allows you to select an item by its index or value. ### Item @@ -174,7 +174,7 @@ The {Platform} Dropdown's items can also be grouped using the property determines the behavior of the component during scrolling the container of the target element. The default value is `scroll` which means that the Dropdown will be scrolled with its target. Setting the property to `block` will block the scrolling if the Dropdown is opened. You could also set the property to `close` which means that the Dropdown will be closed automatically on scroll. +The property determines the behavior of the component during scrolling the container of the target element. The default value is `scroll` which means that the Dropdown will be scrolled with its target. Setting the property to `block` will block the scrolling if the Dropdown is opened. You could also set the property to `close` which means that the Dropdown will be closed automatically on scroll. ### Keep Open diff --git a/docs/xplat/src/content/en/components/inputs/file-input.mdx b/docs/xplat/src/content/en/components/inputs/file-input.mdx index 35ba9d864d..132de63f98 100644 --- a/docs/xplat/src/content/en/components/inputs/file-input.mdx +++ b/docs/xplat/src/content/en/components/inputs/file-input.mdx @@ -67,15 +67,15 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] The component offers a variety of properties that allow you to configure its behavior based on specific requirements. These properties give you control over the input’s functionality, appearance, and validation. -- - Sets the current value of the file input field. -- - Disables the file input, preventing user interaction. -- - Marks the input as mandatory. Form submission will be blocked unless a file is selected. -- - Indicates that the input value is invalid, used to trigger visual error states. +- - Sets the current value of the file input field. +- - Disables the file input, preventing user interaction. +- - Marks the input as mandatory. Form submission will be blocked unless a file is selected. +- - Indicates that the input value is invalid, used to trigger visual error states. - `Multiple` - Allows the selection of multiple files. - `Accept` - Defines the types of files that can be selected. The value for this property needs to be a comma-separated list of file formats (e.g., .jpg, .png, .gif). -- - Automatically focuses the file input field when the page loads. -- - Sets the label text associated with the file input element. -- - Provides placeholder text displayed when no file is selected. +- - Automatically focuses the file input field when the page loads. +- - Sets the label text associated with the file input element. +- - Provides placeholder text displayed when no file is selected. @@ -97,8 +97,8 @@ In addition to its configurable properties, there are four useful methods inheri - `Focus` - Sets the focus on the file input element. - `Blur` - Removes the focus from the file input element. -- - Checks the validity of the input and displays a validation message if the input is invalid. -- - Sets a custom validation message. If the provided message is not empty, the input will be marked as invalid. +- - Checks the validity of the input and displays a validation message if the input is invalid. +- - Sets a custom validation message. If the provided message is not empty, the input will be marked as invalid. ### Slots @@ -110,7 +110,7 @@ The component also exposes several - `file-missing-text` - Sets the text shown in the input field when no file has been selected. - `value-missing` - Renders custom content when the required field validation fails. (i.e., when a file is required but not provided). - `invalid` – Allows you to render custom content when the input is in an invalid state. -- `custom-error` - Displays content when a custom validation message is set using the method. +- `custom-error` - Displays content when a custom validation message is set using the method. @@ -130,7 +130,7 @@ The component currently has the fo ## Accessibility & ARIA Support -The component is both focusable and interactive, ensuring full keyboard and screen reader accessibility. The component can be labeled using the attribute, which leverages the native ` options. +The can also be positioned relative to its target element with ease. All you need to do is use the property along with one of the PopoverPlacement options. -If the property is not set, the default value is `Bottom`, which places the below the target element. +If the property is not set, the default value is `Bottom`, which places the below the target element. -Additionally, you can make the "sticky" using the property, which adds a close button and keeps the visible until the user closes it manually - either by clicking the close button or pressing the `Esc` key. This behavior overrides the default hover behavior, preventing the from disappearing when the user stops hovering over the target element. +Additionally, you can make the "sticky" using the property, which adds a close button and keeps the visible until the user closes it manually - either by clicking the close button or pressing the `Esc` key. This behavior overrides the default hover behavior, preventing the from disappearing when the user stops hovering over the target element. -The also includes an optional arrow indicator that can be configured via the property. The arrow visually connects the tooltip to its anchor element and its position automatically adjusts based on the tooltip's . +The also includes an optional arrow indicator that can be configured via the property. The arrow visually connects the tooltip to its anchor element and its position automatically adjusts based on the tooltip's . @@ -409,58 +409,58 @@ The also includes an optional -In the following example, you can see a demonstration of all tooltip placement options, arrow positioning behavior, and the property in action: +In the following example, you can see a demonstration of all tooltip placement options, arrow positioning behavior, and the property in action: ### Triggers -By default, the is triggered only while hovering over the target element. However, you can change this behavior using the and properties, which allow you to control when the appears and disappears. These properties accept event names as values—such as `click`, `focus`, or `keypress`—letting you trigger the in different scenarios. +By default, the is triggered only while hovering over the target element. However, you can change this behavior using the and properties, which allow you to control when the appears and disappears. These properties accept event names as values—such as `click`, `focus`, or `keypress`—letting you trigger the in different scenarios. ### Advanced Example -The integrates seamlessly with other components, allowing you to create advanced tooltips that contain components within them. -In the following example, you can see how we create descriptive tooltips by using the , , , , , and components. +The integrates seamlessly with other components, allowing you to create advanced tooltips that contain components within them. +In the following example, you can see how we create descriptive tooltips by using the , , , , , and components. ### Additional Properties -Apart from the properties we've already covered, the component offers a variety of additional properties that allow you to further configure its behavior, position, and appearance. +Apart from the properties we've already covered, the component offers a variety of additional properties that allow you to further configure its behavior, position, and appearance. |Name|Type|Description| |--|--|--| -| | boolean | Determines whether the tooltip is visible. | -| | boolean | Determines whether to render an arrow indicator for the tooltip. | -| | number | Sets the pixel distance between the tooltip and its . | +| | boolean | Determines whether the tooltip is visible. | +| | boolean | Determines whether to render an arrow indicator for the tooltip. | +| | number | Sets the pixel distance between the tooltip and its . | ### Methods -In addition to its configurable properties, the also exposes three methods that you can use: +In addition to its configurable properties, the also exposes three methods that you can use: |Name|Description| |--|--| -| | Displays the tooltip if it’s not already shown. If a target is provided, it sets the target as a transient . | -| | Hides the tooltip if it’s not already hidden. | -| | Toggles the tooltip between the shown and hidden states. | +| | Displays the tooltip if it’s not already shown. If a target is provided, it sets the target as a transient . | +| | Hides the tooltip if it’s not already hidden. | +| | Toggles the tooltip between the shown and hidden states. | ## Accessibility & ARIA Support -The is built with accessibility in mind and includes the following ARIA attributes: +The is built with accessibility in mind and includes the following ARIA attributes: -- `role` - When the tooltip is in its default behavior, `role="tooltip"` is applied. If the property is enabled, the role changes to `status`. +- `role` - When the tooltip is in its default behavior, `role="tooltip"` is applied. If the property is enabled, the role changes to `status`. - `inert` - Dynamically toggled based on visibility. When the tooltip is hidden, it becomes inert. - `aria-atomic` - Set to true, ensuring that the entire tooltip content is announced when it changes. - `aria-live` - Set to polite, indicating to screen readers that updates should be announced only when the user is idle. ## Styling -The component exposes two CSS parts that you can use for styling: +The component exposes two CSS parts that you can use for styling: |Name|Description| |--|--| @@ -487,14 +487,14 @@ igc-tooltip::part(bottom) { ## API References -
-
-
-
-
+
+
+
+
+

-
-
+
+

## Additional Resources diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx index 0458b41ce7..328cb63068 100644 --- a/docs/xplat/src/content/en/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx @@ -484,19 +484,18 @@ In this setup: This approach gives you full flexibility over the chat input bar, letting you add, remove, or reorder actions without rebuilding the input area from scratch. ### Markdown Rendering -The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the + - `igniteui-webcomponents/extras` +The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the `igniteui-webcomponents/extras` entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. - `igniteui-react/extras` +The Chat component includes built-in support for Markdown content through the `createMarkdownRenderer` helper, which is exported from the `igniteui-react/extras` entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. - entry point of the main package. This allows you to display messages with formatted text, links, lists, and even syntax-highlighted code blocks, while ensuring that all rendered HTML is sanitized for security. To use the Markdown renderer, you need to install the following peer dependencies in your project: diff --git a/docs/xplat/src/content/en/components/layouts/card.mdx b/docs/xplat/src/content/en/components/layouts/card.mdx index bfee08a497..a9f6aa5f51 100644 --- a/docs/xplat/src/content/en/components/layouts/card.mdx +++ b/docs/xplat/src/content/en/components/layouts/card.mdx @@ -217,18 +217,18 @@ Then, to represent the demo card template, we can add the following code: -You will notice a few things above. First, when we want to _tag_ an element as a header title, like the `h3` heading, we place it between the tags and set its slot name to `title`. Conversely, if we wanted to make another heading element a `subtitle` we would name its slot `subtitle`. +You will notice a few things above. First, when we want to _tag_ an element as a header title, like the `h3` heading, we place it between the tags and set its slot name to `title`. Conversely, if we wanted to make another heading element a `subtitle` we would name its slot `subtitle`. -Any image or video we want to show in the card, we wrap inside the tags. The allows us to size the content placed inside so that it maintains its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. +Any image or video we want to show in the card, we wrap inside the tags. The allows us to size the content placed inside so that it maintains its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. -You can place anything inside the tags. Usually text goes there. +You can place anything inside the tags. Usually text goes there. -Finally, the is where you'd place any actionable items, like buttons. +Finally, the is where you'd place any actionable items, like buttons. ### Media, Thumbs, and Avatars If you want to show an image or icon in the card header next to the title and subtitle, you can do it by assigning the element's slot property to `thumbnail`. -Taking the card above as an example, we can edit the contents of the and add an avatar with `slot="thumbnail"`: +Taking the card above as an example, we can edit the contents of the and add an avatar with `slot="thumbnail"`: @@ -367,7 +367,7 @@ Here's an example of an outlined horizontal card: -We are using an additional `div` element to bundle the and together, keeping them aligned vertically, and applying the `.card-horizontal` class to the wrapping `div` element to align the two sections of the card horizontally. +We are using an additional `div` element to bundle the and together, keeping them aligned vertically, and applying the `.card-horizontal` class to the wrapping `div` element to align the two sections of the card horizontally. The styles that `.card-horizontal` class applies are: @@ -399,7 +399,7 @@ If everything went well, our card should look like this: You can get even more creative with the layout of the . -Below is an example showing how you can create a semi-horizontal card, where we have every section of the card laid out vertically, while the appears alongside the vertical sections. +Below is an example showing how you can create a semi-horizontal card, where we have every section of the card laid out vertically, while the appears alongside the vertical sections. @@ -580,7 +580,7 @@ You can also add more content in-between by simply omitting the slot property an ## Styling -Since the card is a container that wraps different elements, styling is done by styling its building blocks - the , , and sub-components. +Since the card is a container that wraps different elements, styling is done by styling its building blocks - the , , and sub-components. ```css igc-card { @@ -617,10 +617,10 @@ In this article we covered a lot of ground with the card component. We created a

-
-
-
-
+
+
+
+



diff --git a/docs/xplat/src/content/en/components/layouts/carousel.mdx b/docs/xplat/src/content/en/components/layouts/carousel.mdx index 8016a4d77c..6cdfc18f7a 100644 --- a/docs/xplat/src/content/en/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/en/components/layouts/carousel.mdx @@ -148,7 +148,7 @@ Use the selector to wrap your slides. The slides may -If you want a slide to be active by default, use the attribute: +If you want a slide to be active by default, use the attribute: @@ -646,7 +646,7 @@ The carousel [animations](carousel.md#animations) are fully supported on touch d ### Automatic transitioning -The can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the property, which determines the amount of time in milliseconds between slides transition. +The can be easily configured to change the slides automatically, without any user interaction. This way you can create your own slideshow by only setting a transition interval to the property, which determines the amount of time in milliseconds between slides transition. @@ -693,7 +693,7 @@ To achieve this goal, we have to do the following configurations to the carousel - enable the property - enable the property - enable the property -- add transition +- add transition - add custom for each slide Our carousel will look like this in the template: @@ -882,7 +882,7 @@ These configurations will have the following result: - **Attributes** - [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) set to "carousel". - - [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: **off** and **polite**. The default setting is **polite** and is set to the element that serves as the container for the set of slides. When the option is set and the carousel is in playing state, the **aria-live** attribute would be set to **off**. + - [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - used to set the priority with which screen reader should treat updates to live regions - the possible settings are: **off** and **polite**. The default setting is **polite** and is set to the element that serves as the container for the set of slides. When the option is set and the carousel is in playing state, the **aria-live** attribute would be set to **off**. - [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) (navigation buttons) - "Previous slide"/"Next slide". #### Slide component diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx index a843f47e02..53ebc4882b 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx @@ -24,7 +24,7 @@ The Infragistics {Platform} Dock Manager provides a means to manage the layout o ## {Platform} Dock Manager Example -This example shows most functionalities and docking options of the that you can use in your application. +This example shows most functionalities and docking options of the that you can use in your application. @@ -89,7 +89,7 @@ Once the Dock Manager is imported, you can add it on the page: Since the Dock Manager component uses ShadowDOM and slots it is not supported on older browsers like Internet Explorer 11 and Edge 18 and below (non-Chromium versions). -The Dock Manager has a property, which describes the layout of the panes. To start defining a layout, you should set the property and add child panes. Here is how you can define a layout with a single content pane: +The Dock Manager has a property, which describes the layout of the panes. To start defining a layout, you should set the property and add child panes. Here is how you can define a layout with a single content pane: ```ts @@ -137,7 +137,7 @@ this.dockManager.layout = { ``` -To load the content of the panes, the Dock Manager uses [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). The [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute of the content element should match the of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to **100%** for predictable response when the end-user is resizing panes. +To load the content of the panes, the Dock Manager uses [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). The [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute of the content element should match the of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to **100%** for predictable response when the end-user is resizing panes. ```html @@ -156,12 +156,12 @@ To load the content of the panes, the Dock Manager uses [slots](https://develope The Dock Manager defines several pane types: -- -- -- -- +- +- +- +- -Each type of pane has a property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the `useFixedSize` of the parent split pane. +Each type of pane has a property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the `useFixedSize` of the parent split pane. For more information on this refer to [Split Panes Fixed Size Mode](dock-manager-customization.md#split-panes-fixed-size-mode) topic. @@ -176,11 +176,11 @@ The end-user can perform the following actions to customize the layout at runtim - Dock a floating pane - Maximize a pane -All of these are reflected in the property of the Dock Manager. +All of these are reflected in the property of the Dock Manager. ### Content Pane -The represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. Here is how a content pane is defined: +The represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. Here is how a content pane is defined: ```ts @@ -202,7 +202,7 @@ const contentPane: IgrContentPane = { ``` -The property is used to provide a text header for the content pane. This text is rendered at several places: the top content pane header, the tab header if the pane is in a tab group and the unpinned header if the pane is unpinned. You can provide a custom slot content for each of these places respectively using the , and properties. If any of these properties is not set, the text is used. Here is how to provide a tab header slot content: +The property is used to provide a text header for the content pane. This text is rendered at several places: the top content pane header, the tab header if the pane is in a tab group and the unpinned header if the pane is unpinned. You can provide a custom slot content for each of these places respectively using the , and properties. If any of these properties is not set, the text is used. Here is how to provide a tab header slot content: ```html @@ -244,7 +244,7 @@ const contentPane: IgrContentPane = { ``` -When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its property to **false**. +When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its property to **false**. ```ts @@ -268,17 +268,17 @@ const contentPane = { ``` -The property affects only content panes that are docked outside a document host. Also, content panes hosted in a floating pane cannot be unpinned. +The property affects only content panes that are docked outside a document host. Also, content panes hosted in a floating pane cannot be unpinned. -By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - `Left`. It is also possible to set the desired destination of the unpinned pane by using the property. +By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - `Left`. It is also possible to set the desired destination of the unpinned pane by using the property. -You can configure which end-user operations are allowed for a content pane using its , , and properties. +You can configure which end-user operations are allowed for a content pane using its , , and properties. -When defining a content pane, you can set the property to true so the pane can be docked only in a document host. +When defining a content pane, you can set the property to true so the pane can be docked only in a document host. -To restrict the user interaction with the content pane and its content, you can set the property to true. This will prevent all user interactions with the pane unless it is a single floating pane. The latter could be moved, maximized or closed (according to the pane's settings for maximizing and closing), so the user can have a look at the elements under it but will not be able to interact with its content. +To restrict the user interaction with the content pane and its content, you can set the property to true. This will prevent all user interactions with the pane unless it is a single floating pane. The latter could be moved, maximized or closed (according to the pane's settings for maximizing and closing), so the user can have a look at the elements under it but will not be able to interact with its content. -By default, when you close a pane it gets removed from the object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the object you can use the property of the content pane. Setting the property to **true** will hide it from the UI, but it will remain in the object. In order to override the default close behavior you can subscribe to the `PaneClose` event like this: +By default, when you close a pane it gets removed from the object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the object you can use the property of the content pane. Setting the property to **true** will hide it from the UI, but it will remain in the object. In order to override the default close behavior you can subscribe to the `PaneClose` event like this: ```ts @@ -304,7 +304,7 @@ this.dockManager.addEventListener('paneClose', ev => { ### Split Pane -The is a container pane which stacks all of its child horizontally or vertically based on its property. Here is how a horizontal split pane with two child content panes is defined: +The is a container pane which stacks all of its child horizontally or vertically based on its property. Here is how a horizontal split pane with two child content panes is defined: ```ts @@ -350,11 +350,11 @@ const splitPane: IgrSplitPane = { The split pane may contain child panes of all pane types including other split panes. -By default, if the split pane is empty it is not displayed. Yet if you would like to change that behavior you can set its property to true and the split pane will be presented in the UI even when there is no panes inside it. +By default, if the split pane is empty it is not displayed. Yet if you would like to change that behavior you can set its property to true and the split pane will be presented in the UI even when there is no panes inside it. ### Tab Group Pane -The displays its child content as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined: +The displays its child content as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined: ```ts @@ -400,11 +400,11 @@ If there is not enough space to display all tab headers, the tab group shows **M The tabs also can be reordered without being detached from the tab group in which they are located. You can click on a tab of your choice and drag it left or right to the position you want it to be. If you drag the selected tab outside of the tabs area it will be detached into a floating pane. -In case you would like the tab group pane to be displayed in the UI when it has no tabs, you can set the property to true. +In case you would like the tab group pane to be displayed in the UI when it has no tabs, you can set the property to true. ### Document Host -The is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. Here is how to define a document host with two document tabs: +The is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. Here is how to define a document host with two document tabs: ```ts @@ -466,7 +466,7 @@ const docHost: IgrDocumentHost = { ### Floating Pane -The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the property of the . Here is how to add a floating pane with a single content pane inside: +The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the property of the . Here is how to add a floating pane with a single content pane inside: ```ts @@ -522,14 +522,14 @@ const layout: IgrDockManagerLayout = { ``` -The , and properties represent absolute dimensions in pixels. Please note that these properties are applied only for the split panes in the array. +The , and properties represent absolute dimensions in pixels. Please note that these properties are applied only for the split panes in the array. -With the and - you can set whether resizing floating panes is allowed. The `allowFloatingPanesResize` is an **IgcDockManagerComponent** property, so if the value is set to **false** none of the floating panes can be resized. The `floatingResizable` property can be applied separately on each split pane in the `floatingPanes` array and if the property value is not set, it defaults to the value of the `allowFloatingPanesResize` property. If the `floatingResizable` property is set for a specific pane, its value takes precedence over the `allowFloatingPanesResize` property value. +With the and + you can set whether resizing floating panes is allowed. The `allowFloatingPanesResize` is an **IgcDockManagerComponent** property, so if the value is set to **false** none of the floating panes can be resized. The `floatingResizable` property can be applied separately on each split pane in the `floatingPanes` array and if the property value is not set, it defaults to the value of the `allowFloatingPanesResize` property. If the `floatingResizable` property is set for a specific pane, its value takes precedence over the `allowFloatingPanesResize` property value. ### Active Pane -The Dock Manager component highlights the content pane which contains the focus and exposes it in its property. You can programmatically change the active pane by setting the property. You can also listen for changes of the property by subscribing to the `ActivePaneChanged` event: +The Dock Manager component highlights the content pane which contains the focus and exposes it in its property. You can programmatically change the active pane by setting the property. You can also listen for changes of the property by subscribing to the `ActivePaneChanged` event: ```ts @@ -555,7 +555,7 @@ When you start dragging a floating pane, different docking indicators will appea #### Root Docking -In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's . Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half. +In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's . Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half. dockmanager-root-docking @@ -630,7 +630,7 @@ this.dockManager.layout = { ...this.dockManager.layout }; ### Save/Load Layout -To restore or persist a layout, you simply have to get/set the value of the property. Here is how to save the layout as a stringified JSON: +To restore or persist a layout, you simply have to get/set the value of the property. Here is how to save the layout as a stringified JSON: ```ts @@ -663,7 +663,7 @@ private loadLayout() { ### Adding Panes At Runtime -Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. +Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. @@ -1057,7 +1057,7 @@ addResourceStrings('fr', dockManagerStringsFr); ``` -The Dock Manager also exposes a property that you can use to modify individual strings directly. When you set the property, the Dock Manager uses the strings you provide regardless of the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on the page. +The Dock Manager also exposes a property that you can use to modify individual strings directly. When you set the property, the Dock Manager uses the strings you provide regardless of the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on the page. @@ -1066,9 +1066,9 @@ The Dock Manager also exposes a
-
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/layouts/splitter.mdx b/docs/xplat/src/content/en/components/layouts/splitter.mdx index 93dd0ba28e..da1e9e6cee 100644 --- a/docs/xplat/src/content/en/components/layouts/splitter.mdx +++ b/docs/xplat/src/content/en/components/layouts/splitter.mdx @@ -86,7 +86,7 @@ Use the `start` and `end` slots to place pane content: ### Orientation -Set the property to control pane direction: +Set the property to control pane direction: - `horizontal` (default): start and end panes are rendered left and right. - `vertical`: start and end panes are rendered top and bottom. @@ -117,9 +117,9 @@ Set the , -- , -- , +- , +- , +- , Values accept CSS length values such as `px` and `%`. @@ -160,10 +160,10 @@ Values accept CSS length values such as `px` and `%`. Use these properties to control interactions: -- : disables pane resizing. -- : disables pane collapsing. -- : hides the drag handle. -- : hides collapse and expand buttons. +- : disables pane resizing. +- : disables pane collapsing. +- : hides the drag handle. +- : hides collapse and expand buttons. You can also collapse or expand panes programmatically: @@ -214,9 +214,9 @@ The event detail includes current `startPanelSize`, `endPanelSize`, and `delta` -- : fired once when resizing starts. -- : fired continuously while resizing. -- : fired once when resizing ends. +- : fired once when resizing starts. +- : fired continuously while resizing. +- : fired once when resizing ends. The event detail includes current `StartPanelSize`, `EndPanelSize`, and `Delta` for ongoing and end events. diff --git a/docs/xplat/src/content/en/components/layouts/stepper.mdx b/docs/xplat/src/content/en/components/layouts/stepper.mdx index 06adb129f5..c327bdcc01 100644 --- a/docs/xplat/src/content/en/components/layouts/stepper.mdx +++ b/docs/xplat/src/content/en/components/layouts/stepper.mdx @@ -41,7 +41,7 @@ First, you need to install the {ProductName} by running the following command: npm install {PackageWebComponents} ``` -Before using the , you need to register it as follows: +Before using the , you need to register it as follows: ```ts import { defineComponents, IgcStepperComponent } from 'igniteui-webcomponents'; @@ -66,7 +66,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the and its necessary CSS, like so: +You will then need to import the and its necessary CSS, like so: ```tsx import { IgrStepper, IgrStep } from 'igniteui-react'; @@ -93,7 +93,7 @@ builder.Services.AddIgniteUIBlazor( -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -103,10 +103,10 @@ You will also need to link an additional CSS file to apply the styling to the -Now you can start with a basic configuration of the {Platform} and its steps. +Now you can start with a basic configuration of the {Platform} and its steps. ## How To Use {Platform} Stepper -The is the representation of every step that belongs to the . Steps provide `Step.Invalid`, `Step.Active`, `Step.Optional`, `Step.Disabled` and `Step.Complete` properties, which give you the ability to configure the step states according to your business requirement. +The is the representation of every step that belongs to the . Steps provide `Step.Invalid`, `Step.Active`, `Step.Optional`, `Step.Disabled` and `Step.Complete` properties, which give you the ability to configure the step states according to your business requirement. ### Declaring {Platform} Stepper Steps can be declared using one of the following approaches. @@ -210,11 +210,11 @@ For each step the user has the ability to configure indicator, title and subtitl -The `Default` slot renders the content of the step. +The `Default` slot renders the content of the step. -The `Default` slot renders the content of the step. +The `Default` slot renders the content of the step. @@ -277,8 +277,8 @@ You can customize the stepper orientation through the exposed orientation property. -When the {Platform} stepper is horizontally orientated you have the opportunity to determine whether the steps' content would be displayed above or below the steps' headers. This could be achieved by setting the boolean property, which default value is **false**. In case it is enabled the steps' content would be displayed above the steps' headers. +**horizontal**is the default value for the orientation property. +When the {Platform} stepper is horizontally orientated you have the opportunity to determine whether the steps' content would be displayed above or below the steps' headers. This could be achieved by setting the boolean property, which default value is **false**. In case it is enabled the steps' content would be displayed above the steps' headers. stepper-contentTop @@ -297,7 +297,7 @@ The sample below demonstrates how stepper orientation and titles position could ### Step States -{Platform} supports five steps states and each of them apply different styles by default: +{Platform} supports five steps states and each of them apply different styles by default: - **active** - Determines whether the step is the currently displayed. By design, if the user does not explicitly set some step’s active attribute to **true**, the initial active step would be the first non-disabled step. - **disabled** - Determines whether the step is intractable. By default, the disabled attribute of a step is set to **false**. @@ -307,7 +307,7 @@ The sample below demonstrates how stepper orientation and titles position could ### Linear {Platform} Stepper -The {Platform} gives you the opportunity to set its steps flow using the property. By default, linear is set to **false** and the user is enabled to select any non-disabled step in the . +The {Platform} gives you the opportunity to set its steps flow using the property. By default, linear is set to **false** and the user is enabled to select any non-disabled step in the . @@ -365,7 +365,7 @@ Optional steps validity is not taken into account in order to move forward. ### Step Interactions - provides the following API methods for step interactions: + provides the following API methods for step interactions: - **navigateTo** – activates the step by given index. - **next** - activates the next non-disabled step. - **prev** – activates the previous non-disabled step. @@ -379,7 +379,7 @@ The reset method would reset the stepper to its initial state, i.e. activates th The {ProductName} Stepper gives you the ability to configure different options for titles, indicators and more. -This could be achieved through the property of the . It takes the following values: +This could be achieved through the property of the . It takes the following values: - Full **(default value)** - Indicator - Title @@ -396,7 +396,7 @@ The user can configure the title position using the is horizontally orientated and the title position **is not defined**, the titles would be displayed **below** the indicators. +When the {Platform} is horizontally orientated and the title position **is not defined**, the titles would be displayed **below** the indicators. When the orientation is set to vertical and the title position **is not defined**, the titles would be displayed **after** the indicators. @@ -440,7 +440,7 @@ igc-stepper { ### Stepper Animations -The {Platform} Animations provide the end-users with a beautiful experience interacting with the defined steps. The available animation options differ depending on the orientation of the stepper. +The {Platform} Animations provide the end-users with a beautiful experience interacting with the defined steps. The available animation options differ depending on the orientation of the stepper. When the stepper is horizontally orientated, it is configured to use the `slide` animation by default. It also supports `fade` as an alternative. The animations are configured through the input. @@ -448,7 +448,7 @@ In a vertically orientated layout, the animation type could be defined using the Setting `none` to both animation type inputs disables stepper animations. -The component also gives you the ability to configure the duration of the transition between the steps. This could be achieved through the `animationDuration` property, which takes a number as an argument and it is common to both orientations. The default value is set to 320ms. +The component also gives you the ability to configure the duration of the transition between the steps. This could be achieved through the `animationDuration` property, which takes a number as an argument and it is common to both orientations. The default value is set to 320ms. @@ -458,7 +458,7 @@ The component also gives you ## Keyboard Navigation The {ProductName} Stepper provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the steps. -The {Platform} navigation is compliant with [W3 accessability standards](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) and convenient to use. +The {Platform} navigation is compliant with [W3 accessability standards](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) and convenient to use. **Key Combinations** @@ -474,7 +474,7 @@ The {Platform} navigation is ## Styling {Platform} Stepper -You can change the appearance of the , by using some of the exposed CSS parts listed below: +You can change the appearance of the , by using some of the exposed CSS parts listed below: | Part name | Description | | ---------|------------ | @@ -497,7 +497,7 @@ You can change the appearance of the component like this: +Using these CSS parts we can customize thе appearance of the component like this: ```css igc-step::part(title) { @@ -538,8 +538,8 @@ igc-step::part(indicator) { ## API References -
-
+
+


diff --git a/docs/xplat/src/content/en/components/layouts/tabs.mdx b/docs/xplat/src/content/en/components/layouts/tabs.mdx index ef19db0f93..c668a9d0e1 100644 --- a/docs/xplat/src/content/en/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/en/components/layouts/tabs.mdx @@ -147,7 +147,7 @@ Simple declaration is done as follows: -Tab text can be set either as simple string using the property or by assigning children to the `label` slot. Any remaining children in the default slot are rendered as the tab content. +Tab text can be set either as simple string using the property or by assigning children to the `label` slot. Any remaining children in the default slot are rendered as the tab content. ### Selection @@ -155,11 +155,11 @@ The emits property. Setting it to `Manual` will focus the next/previous tab on arrow key press, but the tab will be selected only after pressing SPACE or ENTER +The default behavior, which selects a tab when the user is navigating with the arrow keys, could be modified by the property. Setting it to `Manual` will focus the next/previous tab on arrow key press, but the tab will be selected only after pressing SPACE or ENTER ### Disabled Tab -A tab is disabled by setting the attribute: +A tab is disabled by setting the attribute: @@ -187,7 +187,7 @@ A tab is disabled by setting the property controls how {Platform} tabs are positioned. It accepts the following values: +The property controls how {Platform} tabs are positioned. It accepts the following values: - `Start` (default): the width of the tab depends on the content (label, icon, both) and all tabs have equal padding. First tab is aligned to the tabs container's left side. - `Center`: the width of the tab depends on the content and occupies the tabs container's center. @@ -214,11 +214,11 @@ Scroll buttons are shown when the available space is not enough to render all {P |Keys|Description| |----|-----------| -| ← | Selects previous (next in Right-to-Left mode) tab. If is set to `Manual` only focuses the tab. Scrolls to end if on first tab. | -| → | Selects next (previous in Right-to-Left mode) tab. If is set to `Manual` only focuses the tab. Scrolls to start if on last tab. | +| ← | Selects previous (next in Right-to-Left mode) tab. If is set to `Manual` only focuses the tab. Scrolls to end if on first tab. | +| → | Selects next (previous in Right-to-Left mode) tab. If is set to `Manual` only focuses the tab. Scrolls to start if on last tab. | | HOME | Selects the first tab. | | END | Selects the last tab. | -| ENTER / SPACE | Selects the focused tab when is `Manual` | +| ENTER / SPACE | Selects the focused tab when is `Manual` | ### Prefix / Suffix diff --git a/docs/xplat/src/content/en/components/layouts/tile-manager.mdx b/docs/xplat/src/content/en/components/layouts/tile-manager.mdx index f7055058ad..14f86f3e45 100644 --- a/docs/xplat/src/content/en/components/layouts/tile-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/tile-manager.mdx @@ -35,8 +35,8 @@ The - This component represents an individual tile displayed within the Tile Manager. -- - This is the main component that contains all of the tile components, serving as the container for the entire tile layout. +- - This component represents an individual tile displayed within the Tile Manager. +- - This is the main component that contains all of the tile components, serving as the container for the entire tile layout. ### Getting Started @@ -104,7 +104,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule)); ``` -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -724,9 +724,9 @@ The Tile Manager provides methods that help manage the layout of tiles: ## Styling -You can also customize the appearance of the two components - and . -The exposes only one CSS property - `base` which can be used for styling the base wrapper of the Tile Manager. -The exposes several CSS properties we can use: +You can also customize the appearance of the two components - and . +The exposes only one CSS property - `base` which can be used for styling the base wrapper of the Tile Manager. +The exposes several CSS properties we can use: | Part name | Description | | ---------|------------ | @@ -822,14 +822,14 @@ You can also change the icon of the adorners to a custom one using the `side-ado ## API Reference - -- +- - [`Styling & Themes`](../themes/overview.md) ## Additional Resources -- - - +- + + - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink}) diff --git a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx index 0b52fb5b18..e53a28ccd1 100644 --- a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx @@ -17,7 +17,7 @@ The {ProductName} Navigation Drawer provides side navigation that can be expande ## {Platform} Navigation Drawer Example -This sample demonstrates how to create component. +This sample demonstrates how to create component. @@ -50,7 +50,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the , its necessary CSS, and register its module, like so: +You will then need to import the , its necessary CSS, and register its module, like so: ```tsx import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem } from 'igniteui-react'; @@ -61,7 +61,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -Before using the , you need to register it as follows: +Before using the , you need to register it as follows: @@ -82,7 +82,7 @@ builder.Services.AddIgniteUIBlazor( -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -106,7 +106,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] ## Adding Navigation Drawer Items -The simplest way to start using the is as follows: +The simplest way to start using the is as follows: @@ -535,7 +535,7 @@ And here's the result: ## Styling -The exposes several CSS parts - `base`, `main`, and `mini`, giving you full control over their styling. +The exposes several CSS parts - `base`, `main`, and `mini`, giving you full control over their styling. ```scss igc-nav-drawer::part(base) { @@ -570,7 +570,7 @@ igc-nav-drawer-header-item {


-
+



diff --git a/docs/xplat/src/content/en/components/menus/toolbar.mdx b/docs/xplat/src/content/en/components/menus/toolbar.mdx index 7fcd128e22..1784638fe9 100644 --- a/docs/xplat/src/content/en/components/menus/toolbar.mdx +++ b/docs/xplat/src/content/en/components/menus/toolbar.mdx @@ -31,7 +31,7 @@ npm install {PackageCharts} npm install {PackageCore} ``` -The following modules are required when using the with the component and it's features. +The following modules are required when using the with the component and it's features. @@ -108,7 +108,7 @@ Add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file: @using IgniteUI.Blazor.Controls ``` -The following modules are required when using the with the component and it's features. +The following modules are required when using the with the component and it's features. ```razor // in Program.cs file @@ -124,7 +124,7 @@ builder.Services.AddIgniteUIBlazor( ); ``` -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -138,29 +138,29 @@ You will also need to link an additional CSS file to apply the styling to the items that you can add to the Toolbar. +The following is a list of the different items that you can add to the Toolbar. -- -- -- -- -- -- -- -- +- +- +- +- +- +- +- +- -Each of these tools exposes an `OnCommand` event that is triggered by mouse click. Note, the is a wrapper for other tools that can also be wrapped inside a . +Each of these tools exposes an `OnCommand` event that is triggered by mouse click. Note, the is a wrapper for other tools that can also be wrapped inside a . -New and existing tools can be repositioned and marked hidden using the , and properties on the object. ToolActions also expose a property. +New and existing tools can be repositioned and marked hidden using the , and properties on the object. ToolActions also expose a property. -The following example demonstrates a couple of features. First you can group tools together in the including hiding built in tools such as the **ZoomReset** and **AnalyzeMenu** menu tool actions. In this example a new instance of the **ZoomReset** tool action within the **ZoomMenu** by using the the property and assigning that to **ZoomOut** to be precise with it's placement. It is also highlighted via the property on the tool. +The following example demonstrates a couple of features. First you can group tools together in the including hiding built in tools such as the **ZoomReset** and **AnalyzeMenu** menu tool actions. In this example a new instance of the **ZoomReset** tool action within the **ZoomMenu** by using the the property and assigning that to **ZoomOut** to be precise with it's placement. It is also highlighted via the property on the tool. ### {Platform} Data Chart Integration -The {Platform} Toolbar contains a property. This is used to link a component, such as the as shown in the code below: +The {Platform} Toolbar contains a property. This is used to link a component, such as the as shown in the code below: @@ -269,47 +269,47 @@ The {Platform} Toolbar contains a items and menus become available when the is linked with the Toolbar. Here is a list of the built-in {Platform} Tool Actions and their associated : +Several pre-existing items and menus become available when the is linked with the Toolbar. Here is a list of the built-in {Platform} Tool Actions and their associated : Zooming Actions -- `ZoomMenu`: A that exposes three items to invoke the and methods on the chart for increasing/decreasing the chart's zoom level including `ZoomReset`, a that invokes the method on the chart to reset the zoom level to it's default position. +- `ZoomMenu`: A that exposes three items to invoke the and methods on the chart for increasing/decreasing the chart's zoom level including `ZoomReset`, a that invokes the method on the chart to reset the zoom level to it's default position. Trend Actions -- `AnalyzeMenu`: A that contains several options for configuring different options of the chart. +- `AnalyzeMenu`: A that contains several options for configuring different options of the chart. - `AnalyzeHeader`: A sub section header. - `LinesMenu`: A sub menu containing various tools for showing different dashed horizontal lines on the chart. - `LinesHeader`: A sub menu section header for the following three tools: - - `MaxValue`: A that displays a dashed horizontal line along the yAxis at the maximum value of the series. - - `MinValue`: A that displays a dashed horizontal line along the yAxis at the minimum value of the series. - - : A that displays a dashed horizontal line along the yAxis at the average value of the series. + - `MaxValue`: A that displays a dashed horizontal line along the yAxis at the maximum value of the series. + - `MinValue`: A that displays a dashed horizontal line along the yAxis at the minimum value of the series. + - : A that displays a dashed horizontal line along the yAxis at the average value of the series. - `TrendsMenu`: A sub menu containing tools for applying various trendlines to the plot area. - `TrendsHeader`: A sub menu section header for the following three tools: - - **Exponential**: A that sets the on each series in the chart to **ExponentialFit**. - - **Linear**: A that sets the on each series in the chart to **LinearFit**. - - **Logarithmic**: A that sets the on each series in the the chart to **LogarithmicFit**. + - **Exponential**: A that sets the on each series in the chart to **ExponentialFit**. + - **Linear**: A that sets the on each series in the chart to **LinearFit**. + - **Logarithmic**: A that sets the on each series in the the chart to **LogarithmicFit**. - `HelpersHeader`: A sub section header. - - `SeriesAvg`: A that adds or removes a to the chart's series collection using the of type . + - `SeriesAvg`: A that adds or removes a to the chart's series collection using the of type . - `ValueLabelsMenu`: A sub menu containing various tools for showing different annotations on the 's plot area. - `ValueLabelsHeader`: A sub menu section header for the following tools: - - `ShowValueLabels`: A that toggles data point values by using a . - - `ShowLastValueLabel`: A that toggles final value axis annotations by using a . -- `ShowCrosshairs`: A that toggles mouse-over crosshair annotations via the chart's property. -- `ShowGridlines`: A that toggles extra gridlines by applying a `MajorStroke` to the X-Axis. + - `ShowValueLabels`: A that toggles data point values by using a . + - `ShowLastValueLabel`: A that toggles final value axis annotations by using a . +- `ShowCrosshairs`: A that toggles mouse-over crosshair annotations via the chart's property. +- `ShowGridlines`: A that toggles extra gridlines by applying a `MajorStroke` to the X-Axis. Save to Image Action -- `CopyAsImage`: A that exposes an option to copy the chart to the clipboard. +- `CopyAsImage`: A that exposes an option to copy the chart to the clipboard. - `CopyHeader`: A sub section header. ### SVG Icons -When adding tools manually, icons can be assigned using the `RenderIconFromText` method. There are three parameters to pass in this method. The first is the icon collection name defined on the tool eg. . The second is the name of the icon defined on the tool eg. , followed by adding the SVG string. +When adding tools manually, icons can be assigned using the `RenderIconFromText` method. There are three parameters to pass in this method. The first is the icon collection name defined on the tool eg. . The second is the name of the icon defined on the tool eg. , followed by adding the SVG string. ### Data URL Icons -Similarly to adding svg, you can also add an Icon image from a URL via the . The method's third parameter would be used to enter a string URL. +Similarly to adding svg, you can also add an Icon image from a URL via the . The method's third parameter would be used to enter a string URL. The following snippet shows both methods of adding an Icon. @@ -439,7 +439,7 @@ public toolbarCustomIconOnViewInit(): void { ### Vertical Orientation -By default the {Platform} Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. +By default the {Platform} Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. @@ -550,7 +550,7 @@ The following example demonstrates styling the {Platform} Data Chart series brus {/* ## Styling/Theming -The icon component can be styled by using it's property directly to the . +The icon component can be styled by using it's property directly to the . @@ -591,7 +591,7 @@ The icon component can be styled by using it's
+

## Additional Resources diff --git a/docs/xplat/src/content/en/components/notifications/banner.mdx b/docs/xplat/src/content/en/components/notifications/banner.mdx index 5646794131..0994af52ca 100644 --- a/docs/xplat/src/content/en/components/notifications/banner.mdx +++ b/docs/xplat/src/content/en/components/notifications/banner.mdx @@ -32,7 +32,7 @@ First, you need to install the {ProductName} by running the following command: npm install {PackageWebComponents} ``` -You will then need to import the , its necessary CSS, and register its module, like so: +You will then need to import the , its necessary CSS, and register its module, like so: ```ts import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents"; @@ -54,7 +54,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the and its necessary CSS, like so: +You will then need to import the and its necessary CSS, like so: ```tsx import { IgrBanner } from 'igniteui-react'; @@ -68,7 +68,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -Before using the , you need to register it as follows: +Before using the , you need to register it as follows: ```razor // in Program.cs file @@ -76,7 +76,7 @@ Before using the , builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); ``` -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -140,13 +140,13 @@ In order to display the banner component, use its -The includes a default action button `OK`, which closes the banner. +The includes a default action button `OK`, which closes the banner. ## Examples -The component allows templating of its content while still sticking as closely as possible to the material design banner guidelines. +The component allows templating of its content while still sticking as closely as possible to the material design banner guidelines. ### Changing the banner message @@ -184,14 +184,14 @@ Configuring the message displayed in the banner is easy - just change the conten ### Adding an icon -An can be displayed in the banner by using the banner's `prefix` slot. The icon will always be positioned at the beginning of the banner message. +An can be displayed in the banner by using the banner's `prefix` slot. The icon will always be positioned at the beginning of the banner message. -If several elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one directly to the banner. +If several elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one directly to the banner. -To pass an to your banner, use the `prefix` slot: +To pass an to your banner, use the `prefix` slot: @@ -226,7 +226,7 @@ To pass an to your banner, use t -If you want to use an in your banner message, simply insert it in the banner's content: +If you want to use an in your banner message, simply insert it in the banner's content: @@ -263,7 +263,7 @@ If you want to use an in your ba ### Changing the banner button -The exposes the `actions` slot for templating the banner buttons. This allows you to override the default banner button (`OK`) and add user-defined custom actions. +The exposes the `actions` slot for templating the banner buttons. This allows you to override the default banner button (`OK`) and add user-defined custom actions. @@ -481,7 +481,7 @@ Let's create a banner with two custom buttons - one for dismissing the notificat -> According to Google's [Material Design](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The does not explicitly limit the number of elements under the `actions` slot, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. +> According to Google's [Material Design](https://material.io/design/components/banners.html#anatomy) guidelines, a banner should have a maximum of 2 buttons present. The does not explicitly limit the number of elements under the `actions` slot, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. The dismiss option (**Continue Offline**) doesn't need any further logic, so it can just call the method. The confirm action (**Turn On Wifi**), however, requires some additional logic, so we have to define it in the component. Then, we will add an event listener for the `click` event. The last step is to call the `refreshBanner()` method on each change, which will toggle the banner depending on the `wifiState`. @@ -636,7 +636,7 @@ Finally, we will add a , displaying a message about the ## Styling -The component exposes several CSS parts which give you full control over its style: +The component exposes several CSS parts which give you full control over its style: |Name|Description| |--|--| @@ -667,9 +667,9 @@ igc-banner::part(content) { ## API References -
+

-
+



diff --git a/docs/xplat/src/content/en/components/notifications/snackbar.mdx b/docs/xplat/src/content/en/components/notifications/snackbar.mdx index e58e5ed04c..b46deab0d0 100644 --- a/docs/xplat/src/content/en/components/notifications/snackbar.mdx +++ b/docs/xplat/src/content/en/components/notifications/snackbar.mdx @@ -16,7 +16,7 @@ The {ProductName} Snackbar component is used to provide feedback about an operat ## {ProductName} Snackbar Example -This sample demonstrates how to create component. +This sample demonstrates how to create component. @@ -50,7 +50,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the and its necessary CSS, like so: +You will then need to import the and its necessary CSS, like so: ```tsx import { IgrSnackbar } from 'igniteui-react'; @@ -61,7 +61,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -Before using the , you need to register it as follows: +Before using the , you need to register it as follows: @@ -79,7 +79,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule)); -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -166,7 +166,7 @@ By default, the snackbar component is hidden automatically after a period specif ## Styling -The component exposes several CSS parts to give you full control over its styling: +The component exposes several CSS parts to give you full control over its styling: |Name|Description| |--|--| @@ -192,7 +192,7 @@ igc-snackbar::part(base) { ## API References -
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx index 70cae89b62..b4a8ca9f08 100644 --- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx @@ -19,7 +19,7 @@ The Ignite UI for {ProductName} Calendar provides an easy and intuitive way for ## {Platform} Calendar Example -The following {Platform} component example shows a basic calendar with a single day selection mode. See how it works or inspect the code behind. +The following {Platform} component example shows a basic calendar with a single day selection mode. See how it works or inspect the code behind.
@@ -54,7 +54,7 @@ First, you need to the install the corresponding {ProductName} npm package by ru npm install igniteui-react ``` -You will then need to import the {ProductName} and its necessary CSS, like so: +You will then need to import the {ProductName} and its necessary CSS, like so: ```tsx import { IgrCalendar } from 'igniteui-react'; @@ -65,7 +65,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -Before using the , you need to register it as follows: +Before using the , you need to register it as follows: @@ -83,7 +83,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule)); -You will also need to link an additional CSS file to apply the styling to the {ProductName} component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: +You will also need to link an additional CSS file to apply the styling to the {ProductName} component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: ```razor @@ -105,7 +105,7 @@ defineComponents(IgcCalendarComponent); For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic. -The simplest way to start using the {ProductName} is as follows: +The simplest way to start using the {ProductName} is as follows: @@ -133,7 +133,7 @@ The simplest way to start using the {ProductName} is using single selection mode but you can change it by setting the property as shown in this example. +Users can choose from three different selection modes - single selection, multiple selection or range selection. By default, the {ProductName} is using single selection mode but you can change it by setting the property as shown in this example. @@ -205,14 +205,14 @@ The {ProductName} Calendar component allows you to switch between three differen ### Header Options -By default, the {ProductName} Calendar component renders a header area which contains information about the selected dates. You could hide the header by setting the property to **false**. You could also configure `vertical` or `horizontal` orientation of the header using the property. +By default, the {ProductName} Calendar component renders a header area which contains information about the selected dates. You could hide the header by setting the property to **false**. You could also configure `vertical` or `horizontal` orientation of the header using the property. Please note that the {ProductName} Calendar header is not rendered when the is set to multiple. -Please note that the {ProductName} Calendar DOM properties use `camelCase` naming while their corresponding HTML attributes are using `kebab-case`. For example the property corresponds to the `header-orientation` attribute. +Please note that the {ProductName} Calendar DOM properties use `camelCase` naming while their corresponding HTML attributes are using `kebab-case`. For example the property corresponds to the `header-orientation` attribute. The {ProductName} Calendar component exposes a `title` slot which allows you to customize the title of the header. @@ -259,7 +259,7 @@ The following sample demonstrates the above configuration: ### Localization and Formatting -Due to their very nature, localization and formatting are essential to any calendar. In the {ProductName} those are controlled and customized through the following properties - , , . +Due to their very nature, localization and formatting are essential to any calendar. In the {ProductName} those are controlled and customized through the following properties - , , . Let's go ahead and try those along with other customizations. First thing we need to set is the , which controls the starting day of the week. It defaults to `Sunday`, so we will set it to `Monday`. We will also customize the property which specifies the options used to format the months and the weekdays in the Calendar views. Finally, we will set the property to a value, based on the user's location choice: @@ -354,14 +354,14 @@ If everything went well, we should now have a Calendar with customized display, ### Disabled dates -In some cases you would want to have disabled dates in the Calendar which can't be selected by the end user. This functionality is achieved by using the property. The property is an array of objects. Each descriptor has a `Type` and optionally a which is an array of `Date` objects. +In some cases you would want to have disabled dates in the Calendar which can't be selected by the end user. This functionality is achieved by using the property. The property is an array of objects. Each descriptor has a `Type` and optionally a which is an array of `Date` objects. These are the available options for the `Type` property: -- `After` - disables the dates after the first date in the -- `Before` - disables the dates before the first date in the -- `Between` - disables the dates between the first and the second date in the -- `Specific` - disables the dates specified in the array +- `After` - disables the dates after the first date in the +- `Before` - disables the dates before the first date in the +- `Between` - disables the dates between the first and the second date in the +- `Specific` - disables the dates specified in the array - `Weekdays` - disables all weekdays - `Weekends` - disables all weekends @@ -436,7 +436,7 @@ These configurations should have the following result: The property is using almost the same configuration principles as the . The special dates have a highlighted look and feel and unlike the disabled ones can be selected. -Let's add some special dates to our Calendar. In order to do this, we will create a and pass the dates between the 3rd and the 8th of the current month: +Let's add some special dates to our Calendar. In order to do this, we will create a and pass the dates between the 3rd and the 8th of the current month: ```ts const today = new Date(); @@ -545,7 +545,7 @@ The following demo illustrates a Calendar with enabled week numbers: Using the property, you can display more than one month when the Calendar is in `days` view. When multiple months are displayed, you can configure whether you want to stack them vertically or horizontally by using the property. By default, the property is set to `horizontal`. -The Calendar displays leading and trailing dates from the previous and the next months. You could hide these dates by setting the property to **true** or using its corresponding boolean attribute . +The Calendar displays leading and trailing dates from the previous and the next months. You could hide these dates by setting the property to **true** or using its corresponding boolean attribute . @@ -633,7 +633,7 @@ public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) { ## Keyboard navigation -If you traverse the page using the TAB key you should keep in mind that based on [W3 accessability recommendations](https://www.w3.org/TR/wai-aria-practices/#layoutGrid) the introduces the following tab stops: +If you traverse the page using the TAB key you should keep in mind that based on [W3 accessability recommendations](https://www.w3.org/TR/wai-aria-practices/#layoutGrid) the introduces the following tab stops: - Month selection button - Year selection button @@ -641,7 +641,7 @@ If you traverse the page using the TAB key you should keep in mind th - Next button - Active date element -When a **day/month/year** in the component is focused, use: +When a **day/month/year** in the component is focused, use: - PAGE UP key to move to the previous month/year/years page. - PAGE DOWN key to move to the next month/year/years page. @@ -677,7 +677,7 @@ When the **year** button (in the subheader) is focused, use: ## Styling -The component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: +The component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: |Name|Description| |--|--| @@ -718,7 +718,7 @@ The component e | `selected` | Indicates selected state. Applies to date, month and year elements. | | `current` | Indicates current state. Applies to date, month and year elements. | -Using these CSS parts we can customize thе appearance of the component like this: +Using these CSS parts we can customize thе appearance of the component like this: ```css igc-calendar::part(date-inner selected), @@ -760,10 +760,10 @@ The following sample demonstrates the above CSS configuration: ## API References -
+


- + ## Additional Resources diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index d9d3cd432c..1a29601b3a 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -17,23 +17,6 @@ The {ProductName} Date Picker is a feature rich component used for entering a da The {ProductName} Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The {Platform} Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration. - - -The is a brand new component from {ProductName} version - - - -5.0.0 - - - - - -18.7.0 - - -. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" - ## {Platform} Date Picker Example Below you can see a sample that demonstrates how the Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it. @@ -53,7 +36,7 @@ First, you need to install the {ProductName} by running the following command: npm install {PackageWebComponents} ``` -You will then need to import the , its necessary CSS, and register its module, like so: +You will then need to import the , its necessary CSS, and register its module, like so: ```ts import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents'; @@ -74,7 +57,7 @@ First, you need to install the {ProductName} by running the following command: npm install igniteui-react ``` -You will then need to import the , its necessary CSS, and register its module, like so: +You will then need to import the , its necessary CSS, and register its module, like so: ```tsx import { IgrDatePicker } from 'igniteui-react'; @@ -87,7 +70,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -To get started with the component, first we need to register its module as follows: +To get started with the component, first we need to register its module as follows: ```razor // in Program.cs file @@ -95,7 +78,7 @@ To get started with the component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project: ```razor @@ -110,7 +93,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] ### Display Date Picker -To instantiate a in its default `dropdown` state, use the following code: +To instantiate a in its default `dropdown` state, use the following code: @@ -143,7 +126,7 @@ To instantiate a -The can be bound to a `date` or a `string`. +The can be bound to a `date` or a `string`. @@ -151,7 +134,7 @@ The can be boun -The can be bound to a `date`. +The can be bound to a `date`. @@ -329,7 +312,7 @@ The picker's action buttons can be templated using the `actions` slot: ### Keyboard Navigation -The has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse. +The has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse. |Keys|Description| |----|-----------| @@ -348,7 +331,7 @@ The has intuiti ### Dialog Mode -The also supports a `dialog` mode: +The also supports a `dialog` mode: @@ -393,7 +376,7 @@ More information about these can be found in the `IgcDateTimeInput` format secti ### Increment and decrement -The exposes and methods. Both of which come from the `IgcDateTimeInput` and can be used for incrementing and decrementing a specific `DatePart` of the currently set date. +The exposes and methods. Both of which come from the `IgcDateTimeInput` and can be used for incrementing and decrementing a specific `DatePart` of the currently set date. @@ -450,7 +433,7 @@ The exposes could be used in a form element, the component's and properties act as form validators. +The could be used in a form element, the component's and properties act as form validators. @@ -482,13 +465,13 @@ In forms, we can handle the `Change` event of the component and update the value ### Calendar Specific settings -The can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include which allows more than one calendar to be displayed when the picker expands, which determines the starting day of the week, which shows the number for each week in the year and more. +The can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include which allows more than one calendar to be displayed when the picker expands, which determines the starting day of the week, which shows the number for each week in the year and more. ## Internationalization -The localization of the can be controlled through its input. +The localization of the can be controlled through its input. -Here is how a with Japanese locale definition would look like: +Here is how a with Japanese locale definition would look like: @@ -517,7 +500,7 @@ Here is how a ## Styling -The component derives from the and component, so it exposes all available CSS parts. See [Input Styling](../inputs/input.md#styling) and [Calendar Styling](calendar.md#styling) for reference. +The component derives from the and component, so it exposes all available CSS parts. See [Input Styling](../inputs/input.md#styling) and [Calendar Styling](calendar.md#styling) for reference. ```css igc-date-picker::part(header) { @@ -559,7 +542,7 @@ igc-date-picker::part(year-inner selected) {

-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx index fa47117cac..4916381164 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx @@ -16,7 +16,7 @@ The {ProductName} Date Range Picker is a lightweight component that includes a t ## Date Range Picker Example -Below is a sample demonstrating the component in action, where a calendar pop-up allows users to select start and end dates. +Below is a sample demonstrating the component in action, where a calendar pop-up allows users to select start and end dates. @@ -28,13 +28,13 @@ Below is a sample demonstrating the , you first need to install the Ignite UI for Web Components by running the following command: +To start using the , you first need to install the Ignite UI for Web Components by running the following command: ```cmd npm install {PackageWebComponents} ``` -After that, you need to import the , its necessary CSS, and register its module, as follows: +After that, you need to import the , its necessary CSS, and register its module, as follows: ```ts import { defineComponents, IgcDateRangePickerComponent } from 'igniteui-webcomponents'; @@ -52,13 +52,13 @@ defineComponents(IgcDateRangePickerComponent); -To start using the , you first need to install the Ignite UI for React by running the following command: +To start using the , you first need to install the Ignite UI for React by running the following command: ```cmd npm install igniteui-react ``` -After that, you need to import the and its necessary CSS, as follows: +After that, you need to import the and its necessary CSS, as follows: ```tsx import { IgrDateRangePicker } from 'igniteui-react'; @@ -72,7 +72,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -To get started with the component, first we need to register its module as follows: +To get started with the component, first we need to register its module as follows: ```razor // in Program.cs file @@ -80,7 +80,7 @@ To get started with the component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project: +You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project: ```razor @@ -89,19 +89,19 @@ You will also need to link an additional CSS file to apply the styling to the -Now you can start with a basic configuration of the {Platform} . +Now you can start with a basic configuration of the {Platform} . For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic. ## Usage -The allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the end date. The picker offers two modes for displaying date values: single input and two inputs. Both provide editing and masking capabilities. +The allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the end date. The picker offers two modes for displaying date values: single input and two inputs. Both provide editing and masking capabilities. When the calendar is visible, a date range can be selected by choosing both a start and end date. Selecting a date will set both the start and end date, and once a second date is chosen, it will set the end date. If a range is already selected, clicking any other date on the calendar will start a new range selection. ### Display Date Range Picker -To instantiate a in its default single input mode, use the following code: +To instantiate a in its default single input mode, use the following code: @@ -128,7 +128,7 @@ To instantiate a to use two inputs, set the property to `true`. +To switch the to use two inputs, set the property to `true`. @@ -157,7 +157,7 @@ To switch the can also be set using the property. It's important to note that the value must follow the format: **`{ start: startDate, end: endDate }`**, where `startDate` and `endDate` are `Date` objects representing the selected range. +In addition to being selected or typed by the user, the range value of the can also be set using the property. It's important to note that the value must follow the format: **`{ start: startDate, end: endDate }`**, where `startDate` and `endDate` are `Date` objects representing the selected range. @@ -229,7 +229,7 @@ In addition, the value can be set as attribute. In this case it should represent ### Read-only & Non-editable -You can also make the read-only, which disables changing the range value through both typing and calendar selection, disables keyboard navigation, and makes the calendar and clear icons appear visually disabled. This is useful when the range is assigned via the value attribute and is intended to be display-only. To enable this behavior, simply set the property. +You can also make the read-only, which disables changing the range value through both typing and calendar selection, disables keyboard navigation, and makes the calendar and clear icons appear visually disabled. This is useful when the range is assigned via the value attribute and is intended to be display-only. To enable this behavior, simply set the property. @@ -285,7 +285,7 @@ Alternatively, you can use the opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the property to `dialog`. +By default, when clicked, the opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the property to `dialog`. @@ -314,7 +314,7 @@ By default, when clicked, the features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. +The features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. |Keys|Description| |----|-----------| @@ -348,7 +348,7 @@ You can also navigate within the calendar pop-up using the keyboard. The navigat ### Label -You can define a label for the component using the property when it is in single input mode. In two inputs mode, you can use the and properties to define labels for the start and end date input fields, respectively. +You can define a label for the component using the property when it is in single input mode. In two inputs mode, you can use the and properties to define labels for the start and end date input fields, respectively. @@ -531,7 +531,7 @@ You can further customize the pop-up calendar using various properties: ### Min & Max -You can also set the and properties to restrict user input by disabling calendar dates outside the defined range. These properties act as validators, so even if the user manually types a date outside the range, the will become invalid. +You can also set the and properties to restrict user input by disabling calendar dates outside the defined range. These properties act as validators, so even if the user manually types a date outside the range, the will become invalid. @@ -723,7 +723,7 @@ You can also do the same if you want to set one or more special dates in the cal ### Forms -The component can also be used seamlessly with the HTML form element. The , , and properties act as form validators. +The component can also be used seamlessly with the HTML form element. The , , and properties act as form validators. @@ -732,7 +732,7 @@ The compon ### Properties -In addition to the properties we've already covered, the component offers a variety of additional properties that allow you to further configure its behavior. +In addition to the properties we've already covered, the component offers a variety of additional properties that allow you to further configure its behavior. |Name|Type|Description| |--|--|--| @@ -747,7 +747,7 @@ In addition to the properties we've already covered, the component using the available slots. +You also have the ability to add custom content and modify the appearance of the component using the available slots. The `prefix` and `suffix` slots allow you to insert custom content before or after the input field (only available in single input mode): @@ -892,7 +892,7 @@ return ( -In addition to the slots we've already covered, the following slots are also available in the component: +In addition to the slots we've already covered, the following slots are also available in the component: |Name|Description| |--|--| @@ -912,7 +912,7 @@ In addition to the slots we've already covered, the following slots are also ava ### Methods -In addition to the properties and slots, the also exposes few methods that you can use: +In addition to the properties and slots, the also exposes few methods that you can use: |Name|Description| |--|--| @@ -925,7 +925,7 @@ In addition to the properties and slots, the component uses the component, it also inherits the Calendar's CSS parts, allowing you to style both components seamlessly. You can find the full list of exposed Calendar CSS parts here: [Calendar Styling](calendar.md#styling). In addition to the Calendar's CSS parts, the also exposes some unique CSS parts that you can use to customize its appearance: +Since the component uses the component, it also inherits the Calendar's CSS parts, allowing you to style both components seamlessly. You can find the full list of exposed Calendar CSS parts here: [Calendar Styling](calendar.md#styling). In addition to the Calendar's CSS parts, the also exposes some unique CSS parts that you can use to customize its appearance: |Name|Description| |--|--| @@ -978,7 +978,7 @@ igc-date-range-picker::part(clear-icon-end) {

-
+


diff --git a/docs/xplat/src/content/en/components/spreadsheet-activation.mdx b/docs/xplat/src/content/en/components/spreadsheet-activation.mdx index 0e7fc678c4..cb6307438f 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-activation.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-activation.mdx @@ -25,15 +25,15 @@ The {Platform} Spreadsheet component exposes properties that allow you to determ ## Activation Overview -The activation of the {Platform} control is split up between the cells, panes, and worksheets of the current of the spreadsheet. The three "active" properties are described below: +The activation of the {Platform} control is split up between the cells, panes, and worksheets of the current of the spreadsheet. The three "active" properties are described below: -- : Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of and pass in information about that cell, such as the column and row or the string address of the cell. +- : Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of and pass in information about that cell, such as the column and row or the string address of the cell. - : Returns the active pane in the currently active worksheet of the spreadsheet control. - : Returns or sets the active worksheet in the of the spreadsheet control. This can be set by setting it to an existing worksheet in the attached to the spreadsheet. ## Code Snippet -The following code snippet shows setting activation of the cell and worksheet in the control: +The following code snippet shows setting activation of the cell and worksheet in the control: ```ts this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1); @@ -44,6 +44,7 @@ this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ## API References -
-
+ +
+

diff --git a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx index 9b7b231147..72abb1c524 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Spreadsheet Chart Adapter -The {Platform} Spreadsheet component allows displaying charts in your . +The {Platform} Spreadsheet component allows displaying charts in your . ## {Platform} Spreadsheet Chart Adapter Example @@ -23,7 +23,9 @@ The {Platform} Spreadsheet component allows displaying charts in your you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance. +Using + +you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance. In order to add a WorksheetChart to a worksheet, you must use the method of the worksheet’s Shapes collection. You can find more detail of adding charts in Excel below. @@ -162,7 +164,7 @@ ModuleManager.register( ## Code Snippet -The following code snippet demonstrates how to add charts to the currently viewed worksheet in the control: +The following code snippet demonstrates how to add charts to the currently viewed worksheet in the control: ```typescript this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter(); @@ -219,6 +221,7 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). ## API References -
-
+ +
+

diff --git a/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx b/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx index eab3a779fa..bb3117b48a 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx @@ -59,7 +59,7 @@ import { SpreadsheetAction } from 'igniteui-webcomponents-spreadsheet'; ## Usage -The following code snippet shows how you can execute commands related to the clipboard in the {Platform} control: +The following code snippet shows how you can execute commands related to the clipboard in the {Platform} control: ```ts public cut(): void { @@ -79,4 +79,4 @@ public paste(): void { ## API References `SpreadsheetAction`
-
+
diff --git a/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx b/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx index 83644a98bc..6daee7601f 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx @@ -237,11 +237,13 @@ this.spreadsheet.activeWorksheet.unprotect(); The control allows you to configure the type of selection allowed in the control then modifier keys (SHIFT or CTRL) are pressed by the user. This is done by setting the property of the spreadsheet to one of the following values: -- `AddToSelection`: New cell ranges are added to the object's collection without needing to hold down the CTRL key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing SHIFT + F8. -- `ExtendSelection`: The selection range in the object's collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. +- `AddToSelection`: New cell ranges are added to the object's collection without needing to hold down the CTRL key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing SHIFT + F8. +- `ExtendSelection`: The selection range in the object's collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard. - `Normal`: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the CTRL key and using the mouse and one may alter the selection range containing the active cell by holding the SHIFT key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys. -The object mentioned in the descriptions above can be obtained by using the property of the control. +The + +object mentioned in the descriptions above can be obtained by using the property of the control. The following code snippets demonstrate configuration of the selection mode: @@ -289,9 +291,13 @@ import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection; ``` -The selection of the control can also be set or obtained programmatically. For single selection, you can set the property Multiple selection is done through the object that is returned by the control's property. +The selection of the control can also be set or obtained programmatically. For single selection, you can set the property Multiple selection is done through the + +object that is returned by the control's property. -The object has an `AddCellRange()` method that allows you to programmatically add a range of cells to the selection of the spreadsheet in the form of a new object. +The + +object has an `AddCellRange()` method that allows you to programmatically add a range of cells to the selection of the spreadsheet in the form of a new object. The following code snippet demonstrates adding a cell range to the spreadsheet's selection: @@ -352,7 +358,8 @@ this.spreadsheet.zoomLevel = 200; ## API References -
-
+ +
+


diff --git a/docs/xplat/src/content/en/components/spreadsheet-data-validation.mdx b/docs/xplat/src/content/en/components/spreadsheet-data-validation.mdx index 4deb451a9e..e5a266bf9a 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-data-validation.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-data-validation.mdx @@ -144,8 +144,8 @@ this.spreadsheet.workbook.worksheets(0).rows(7).cells(1).dataValidationRule = va this.spreadsheet.workbook.worksheets(0).rows(7).cells(1).value = checkOutDate.toLocaleDateString(); this.spreadsheet.workbook.worksheets(0).rows(7).cells(0).value = "Check Out Date"; ``` - + ## API References - + diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-selection.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-selection.mdx index 98c4f28615..abf048c8e6 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-selection.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-selection.mdx @@ -77,7 +77,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## プログラムによる選択 -チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、 の `SelectedSeriesCollection` に項目を追加することで実現できます。 オブジェクトの プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される `ValueMemberPath` を使用できます。 +チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、 の `SelectedSeriesCollection` に項目を追加することで実現できます。 オブジェクトの プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される `ValueMemberPath` を使用できます。 マッチャーは、 のように実際のシリーズにアクセスできない場合、 などのチャートで使用するのに最適です。この場合、データ ソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを コレクションに追加できます。 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx index 4520c6d848..937cbb60a2 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx @@ -21,7 +21,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; {ProductName} では、ユーザー注釈機能を使用して、実行時に にスライス注釈、ストリップ注釈、ポイント注釈を追加できます。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりするなど、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 -これは、 のデフォルトのツールと統合されています。このトピックでは、 を使用してチャートのプロット領域にユーザー注釈を追加する方法と、これらのユーザー注釈をプログラムから追加する方法を、例と共に解説します。 +これは、 のデフォルトのツールと統合されています。このトピックでは、 を使用してチャートのプロット領域にユーザー注釈を追加する方法と、これらのユーザー注釈をプログラムから追加する方法を、例と共に解説します。 @@ -32,7 +32,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; ## Toolbar でユーザー注釈を使用する - には、「Annotate Chart」 と 「Delete Note」 という 2 つのツールを含む Annotations メニュー項目が用意されています。このメニュー項目を表示するには、対象のチャートで プロパティを **true** に設定する必要があります。 + には、「Annotate Chart」 と 「Delete Note」 という 2 つのツールを含む Annotations メニュー項目が用意されています。このメニュー項目を表示するには、対象のチャートで プロパティを **true** に設定する必要があります。 開いた後に表示される 「Annotate Chart」 オプションを使用すると、 のプロット領域に注釈を付けることができます。追加できる注釈はスライス注釈、ストリップ注釈、ポイント注釈です。X 軸または Y 軸のラベルをクリックすると、スライス注釈を追加できます。プロット領域をクリックしてドラッグすることで、ストリップ注釈を追加できます。また、チャートにプロットされたシリーズ内のポイントをクリックして、ポイント注釈を追加することもできます。 @@ -42,19 +42,19 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; {Platform} user-annotation-delete - を使用してこれらのユーザー注釈を追加すると、 は `UserAnnotationInformationRequested` イベントを発生させ、そこでユーザー注釈に関する追加情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な オブジェクトを返します。 + を使用してこれらのユーザー注釈を追加すると、 は `UserAnnotationInformationRequested` イベントを発生させ、そこでユーザー注釈に関する追加情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な オブジェクトを返します。 以下の表は、 で構成可能なさまざまなプロパティの詳細を示しています。 | プロパティ | タイプ | 説明 | |------------|---------|-------------| -||`string`|このプロパティは、ユーザー注釈に追加情報を提供するためのものです。このプロパティは、`UserAnnotationToolTipContentUpdating` イベントと組み合わせて使用され、注釈のツールチップに追加情報を表示するよう設計されています。| +||`string`|このプロパティは、ユーザー注釈に追加情報を提供するためのものです。このプロパティは、`UserAnnotationToolTipContentUpdating` イベントと組み合わせて使用され、注釈のツールチップに追加情報を表示するよう設計されています。| ||`string`|この読み取り専用プロパティは、ユーザー注釈の一意の文字列 ID を返します。| ||`string`|このプロパティは、ユーザー注釈のバッジに使用する色を取得または設定します。| ||`string`|このプロパティは、ユーザー注釈のバッジに使用する画像へのパスを取得または設定します。| ||`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 X 座標を取得します。| ||`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 Y 座標を取得します。| -||`string`|このプロパティは、ユーザー注釈に表示するラベルを取得または設定します。| +||`string`|このプロパティは、ユーザー注釈に表示するラベルを取得または設定します。| ||`string`|このプロパティは、ユーザー注釈の背景を塗りつぶすために使用する色を取得または設定します。| `UserAnnotationInformationRequested` イベントで注釈情報を更新した後、 の メソッドを呼び出して注釈の作成を完了し、変更を確定する必要があります。あるいは、 を呼び出して注釈の を渡すことで注釈の作成をキャンセルすることもできます。注釈の は、前述のように、`UserAnnotationInformationRequested` イベントの引数の AnnotationInfo パラメーターから取得できます。これにより、プロット領域から注釈が削除されます。 diff --git a/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx index 66325fc247..4c20b143de 100644 --- a/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx @@ -123,7 +123,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ `Cancel` を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。 -「その他」スライスをクリックすると、 オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。 +「その他」スライスをクリックすると、 オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。 diff --git a/docs/xplat/src/content/jp/components/dashboard-tile.mdx b/docs/xplat/src/content/jp/components/dashboard-tile.mdx index 9058a4fdb5..f0aef84a49 100644 --- a/docs/xplat/src/content/jp/components/dashboard-tile.mdx +++ b/docs/xplat/src/content/jp/components/dashboard-tile.mdx @@ -18,7 +18,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; # {Platform} Dashboard Tile (ダッシュボード タイル) -{Platform} Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。 +{Platform} Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。 提供されたデータの形状に応じて、以下を含む多種多様な視覚化が選択可能です。これには以下が含まれますが、これらに限定されません: カテゴリ チャート、`ラジアル チャートと極座標チャート、散布図、地理マップ、ラジアル ゲージとリニア ゲージ、ファイナンシャル チャート、積層型チャート。 @@ -170,7 +170,7 @@ IgrDashboardTileModule.register(); -視覚化または視覚化のプロパティも、コントロールの上部にある を使用して構成できます。この には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。 +視覚化または視覚化のプロパティも、コントロールの上部にある を使用して構成できます。この には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。 Dashboard Tile Toolbar @@ -195,7 +195,7 @@ IgrDashboardTileModule.register(); -
+



diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx index 06372fb1ab..146e21b808 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx @@ -186,14 +186,14 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と ### 変更 - すべてのテーマにわたってフォームに関連付けられたほとんどのコンポーネントの読み取り専用スタイルを更新し、コンポーネントが読み取り専用状態にあることをより適切に示せるようになりました。 -- - - 動作変更: のデフォルトの placement は 「bottom」 になりました。 - - 動作変更: with-arrow が設定されていない限り、 はデフォルトでは矢印インジケーターをレンダリングしません。 - - 重大な変更: イベントは、detail プロパティに anchor ターゲットを返さなくなりました。引き続き event.target.anchor でアクセスできます。 +- + - 動作変更: のデフォルトの placement は 「bottom」 になりました。 + - 動作変更: with-arrow が設定されていない限り、 はデフォルトでは矢印インジケーターをレンダリングしません。 + - 重大な変更: イベントは、detail プロパティに anchor ターゲットを返さなくなりました。引き続き event.target.anchor でアクセスできます。 ### 非推奨 -- - は非推奨です。矢印インジケーターをレンダリングするには、 を使用してください。 +- - は非推奨です。矢印インジケーターをレンダリングするには、 を使用してください。 ### バグ修正 @@ -207,8 +207,18 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と **重大な変更** -- `AzureMapsMapImagery` は に名前が変更されました。 -- は `AzureMapsImageryStyle.Satellite` に名前が変更されました。 +- `AzureMapsMapImagery` は + + + + + に名前が変更されました。 +- + + + + + は `AzureMapsImageryStyle.Satellite` に名前が変更されました。 - 次の 列挙値は、Overlay サフィックスを含むように名前が変更されました。 - - @@ -320,7 +330,7 @@ col.Pinned = true; ### バグ修正 #### 機能拡張 -- +- #### IgbBulletGraph - 新しい プロパティが追加されました。 @@ -338,7 +348,12 @@ col.Pinned = true; **Breaking Changes** -- `AzureMapsMapImagery` was renamed to +- `AzureMapsMapImagery` was renamed to + + + + + - `AzureMapsImageryStyle.Imagery` was renamed to `AzureMapsImageryStyle.Satellite` - The following enum values were renamed to include the Overlay suffix: - , @@ -376,15 +391,15 @@ col.Pinned = true; #### 一般 以下のコンポーネントのプロパティが null 許容になりました。 -- : -- : 、 -- : 、、 -- : 、、 -- `DateTimePicker`: 、、 -- : -- : 、、、、、 -- : 、 -- : 、 +- : +- : 、 +- : 、、 +- : 、、 +- `DateTimePicker`: 、、 +- : +- : 、、、、、 +- : 、 +- : 、 - : 、、 **Breaking Changes** @@ -446,23 +461,23 @@ Please note that the maximum size available for the icons is 24x24. You can prov #### 一般 -- は、特定の要素のツールチップを表示する方法を提供します。使用するには、必要に応じてコンテンツを設定し、 プロパティを介してターゲット要素の ID にリンクします。 +- は、特定の要素のツールチップを表示する方法を提供します。使用するには、必要に応じてコンテンツを設定し、 プロパティを介してターゲット要素の ID にリンクします。 #### 変更内容 - いくつかの列挙は名前が変更され、他の列挙と統合されました。名前の変更 (影響を受けるコンポーネントを含む): - - `BaseAlertLikePosition` ( と ) は `AbsolutePosition` に名前が変更されました。 - - `ButtonGroupAlignment` ()、`CalendarOrientation` ()、`CardActionsOrientation` ()、`DatePickerOrientation` ()、`RadioGroupAlignment` () が統合され、`ContentOrientation` に名前が変更されました。 - - `CalendarBaseSelection` () は `CalendarSelection` に名前が変更されました。 - - `CarouselAnimationType` () と `StepperHorizontalAnimation` () が統合され、`HorizontalTransitionAnimation` に名前が変更されました。 - - `CheckboxBaseLabelPosition` ( と ) と `RadioLabelPosition` () が統合され、`ToggleLabelPosition` に名前が変更されました。 - - `DatePickerMode` () は `PickerMode` に名前が変更されました。 - - `DatePickerHeaderOrientation` () は `CalendarHeaderOrientation` に名前変更/統合されました。 - - `DropdownPlacement` ( と ) は `PopoverPlacement` に名前が変更されました。 - - `DropdownScrollStrategy` () と `SelectScrollStrategy` () が統合され、`PopoverScrollStrategy` に名前が変更されました。 - - `SliderBaseTickOrientation` ( および ) の名前が `SliderTickOrientation` に変更されました。 - - ( と ) の名前が `SliderTickLabelRotation` に変更されました。 -- + - `BaseAlertLikePosition` ( と ) は `AbsolutePosition` に名前が変更されました。 + - `ButtonGroupAlignment` ()、`CalendarOrientation` ()、`CardActionsOrientation` ()、`DatePickerOrientation` ()、`RadioGroupAlignment` () が統合され、`ContentOrientation` に名前が変更されました。 + - `CalendarBaseSelection` () は `CalendarSelection` に名前が変更されました。 + - `CarouselAnimationType` () と `StepperHorizontalAnimation` () が統合され、`HorizontalTransitionAnimation` に名前が変更されました。 + - `CheckboxBaseLabelPosition` ( と ) と `RadioLabelPosition` () が統合され、`ToggleLabelPosition` に名前が変更されました。 + - `DatePickerMode` () は `PickerMode` に名前が変更されました。 + - `DatePickerHeaderOrientation` () は `CalendarHeaderOrientation` に名前変更/統合されました。 + - `DropdownPlacement` ( と ) は `PopoverPlacement` に名前が変更されました。 + - `DropdownScrollStrategy` () と `SelectScrollStrategy` () が統合され、`PopoverScrollStrategy` に名前が変更されました。 + - `SliderBaseTickOrientation` ( および ) の名前が `SliderTickOrientation` に変更されました。 + - ( と ) の名前が `SliderTickLabelRotation` に変更されました。 +- ## {PackageGrids} (グリッド) @@ -530,7 +545,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft - [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart. ### List -- に新しいプロパティ を追加しました。 +- に新しいプロパティ を追加しました。 @@ -543,13 +558,13 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft - The tooltip can be further customized with `Show/HideDelay`, around the target and customizable `Show/HideTriggers` events. + The tooltip can be further customized with `Show/HideDelay`, around the target and customizable `Show/HideTriggers` events. ### Accordion -- 新しいイベント および `Close` を追加しました。 +- 新しいイベント および `Close` を追加しました。 - Simplified configuration by removing the need to define separate panel and linking the panel and tab header. The `Panel` property and the `IgbTabPanel` itself have been removed. Content can be now assigned directly to the and header text can be set conveniently via the new property or by projecting an element to `slot="label"` for more involved customization. + Simplified configuration by removing the need to define separate panel and linking the panel and tab header. The `Panel` property and the `IgbTabPanel` itself have been removed. Content can be now assigned directly to the and header text can be set conveniently via the new property or by projecting an element to `slot="label"` for more involved customization. Before: @@ -594,21 +609,41 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft ``` -- - - & are now `double` instead of `string` -- - - `ActiveStepChangingArgsEventArgs` has been renamed to - - `ActiveStepChangedArgsEventArgs` has been renamed to +- + - & are now `double` instead of `string` +- + - `ActiveStepChangingArgsEventArgs` has been renamed to + + + + + + - `ActiveStepChangedArgsEventArgs` has been renamed to + + + + + - `StepperTitlePosition` now defaults to `Auto` to correctly reflect the default behavior -- - - `TreeSelectionChangeEventArgs` has been renamed to -- - - & are now `string` properties instead of explicit enums +- + - `TreeSelectionChangeEventArgs` has been renamed to + + + + + +- + - & are now `string` properties instead of explicit enums ### {PackageGrids} - **すべてのグリッド** - - プロパティを使用して初期フィルタリングの適用が可能になりました。 + - + + + + + プロパティを使用して初期フィルタリングの適用が可能になりました。 ### バグ修正 @@ -644,9 +679,9 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft ### Toolbar -- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 -- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 -- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 +- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 +- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 +- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 ## バグ修正 @@ -657,7 +692,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft ### {PackageGrids} #### **{PackageVerChanges-24-2-DEC}** -- Added new property on called +- Added new property on called #### {PackageCharts} (チャート) - [Dashboard Tile](dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。 @@ -694,14 +729,19 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft #### **{PackageVerChanges-24-1-JUN}** -- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. -- Added new property on called which controls the horizontal alignment of the title text. -- Added new property on called which controls the spacing between items inside the panel. +- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions. +- Added new property on called which controls the horizontal alignment of the title text. +- Added new property on called which controls the spacing between items inside the panel. ### 一般 -- 、 - ユーザー入力を制限することなく検証ルールを適用できるように を公開しました。 -- - プロパティは非推奨です。ドロップダウンは、ブラウザー ビューポートの最上位レイヤーにコンテナーをレンダリングするために `Popover` API を使用するようになったため、このプロパティは廃止されました。 +- 、 - ユーザー入力を制限することなく検証ルールを適用できるように を公開しました。 +- - + + + + + プロパティは非推奨です。ドロップダウンは、ブラウザー ビューポートの最上位レイヤーにコンテナーをレンダリングするために `Popover` API を使用するようになったため、このプロパティは廃止されました。 - - の は非推奨です。分割ペイン レベルで isMaximized を true に設定しても、分割ペインはコンテナーとしてのみ機能し、最大化されて表示される実際のコンテンツがないため、実際の効果はありません。代わりに、 および/または の プロパティを使用してください。 | Bug Number | Control | Description | @@ -756,7 +796,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft ### **{PackageVerChanges-23-2-MAR}** - New [Carousel](layouts/carousel.md) component. -- +- - Changed `change` event argument type from to ## 新しいコンポーネント @@ -767,11 +807,11 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft - 新しい プロパティ。有効にすると、ドッキング インジケーターは表示されなくなり、エンド ユーザーは、ドラッグしたペインをターゲット ペインの端に近づけてドラッグすることでドッキングできます。 - 新しい プロパティ。フローティング ペインを Dock Manager の境界内に保持するかどうかを決定します。デフォルトは **false** です。 - 新しい プロパティ。ペインのヘッダーをホバー時にのみ表示するか、常に表示するかを決定します。デフォルトは `always` です。 -- +- - ノードをクリックすると展開状態が変更されるかどうかを決定する `toggleNodeOnClick` プロパティが追加されました。デフォルトは **false** です。 -- +- - `allowReset` が追加されました。有効にすると、同じ値を選択するとコンポーネントがリセットされます。**動作の変更** - 以前のリリースでは、これが Rating コンポーネントのデフォルトの動作でした。アプリケーションでこの動作を維持する必要がある場合は、必ず `allowReset` を設定してください。 -- 、 +- 、 - `selectedItem`、`items`、および `groups` ゲッターが公開されました。 - - 新しいタイトル/サブタイトルのプロパティ。、 はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、 など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい により、値を針の位置に対応させることができます。 @@ -788,7 +828,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft - New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph. -- +- - New ToolActionCheckboxList A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed. @@ -803,43 +843,68 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft ### 一般 -- 、、、 - - `Readonly` は に名前が変更されました。 -- - - `Maxlength` は に名前が変更されました。 - - `Minlength` は に名前が変更されました。 +- 、、、 + - `Readonly` は に名前が変更されました。 +- + - `Maxlength` は に名前が変更されました。 + - `Minlength` は に名前が変更されました。 **Breaking Changes** - Renamed old **IgbDatePicker** to **IgbXDatePicker**. -- Removed component. Use native form instead. +- Removed component. Use native form instead. - Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: - - , ,, , , , , , , , , , -- , , , - - Renamed property type to `StyleVariant`. -- - - Renamed property type to `WeekDays`. -- , - - Changed `Change` event argument type from to . -- - - The `IgbCombo` is now of generic type and the type is now of type `T[]`. This means that either you need to specify `T` or it will be inferred by the assigned type. - - Removed , , properties. + - , ,, , , , , , , , , , +- , , , + - Renamed property type to `StyleVariant`. +- + - Renamed property type to `WeekDays`. +- , + - Changed `Change` event argument type from to + + + + +. +- + - The `IgbCombo` is now of generic type and the type is now of type `T[]`. This means that either you need to specify `T` or it will be inferred by the assigned type. + - Removed + + + + +, , properties. - **IgbSelectComponent** - - Removed , , properties. -- - - Removed `MaxValue` and `MinValue` properties. Use and instead. -- - - Removed property. -- - - Removed old named `Maxlength` and `Minlength` properties. Use and . - - Removed old named `Readonly` and `Inputmode` properties. Use and . - - Changed type also to `string`. -- - - Changed `Change` event argument type from to . -- - - Removed `AriaThumbLower` and `AriaThumbUpper` properties. Use and instead. -- - - Renamed `Readonly` property to . + - Removed + + + + +, , properties. +- + - Removed `MaxValue` and `MinValue` properties. Use and instead. +- + - Removed + + + + + property. +- + - Removed old named `Maxlength` and `Minlength` properties. Use and . + - Removed old named `Readonly` and `Inputmode` properties. Use and . + - Changed type also to `string`. +- + - Changed `Change` event argument type from to + + + + +. +- + - Removed `AriaThumbLower` and `AriaThumbUpper` properties. Use and instead. +- + - Renamed `Readonly` property to . ### 非推奨 @@ -854,14 +919,24 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft ## 削除済 ### **{PackageVerChanges-23-2-JAN}** -- , - exposed to enable validation rules being enforced without restricting user input. -- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. +- , - exposed to enable validation rules being enforced without restricting user input. +- - + + + + + property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. - - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead. ### .NET 8.0 のサポート - 2023.2 リリースでは .NET 8 がサポートされます。.NET 8 の詳細については、[Microsoft サイト](https://learn.microsoft.com/ja-jp/dotnet/core/whats-new/dotnet-8)をご確認ください。 -The type of Values from option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously. +The type of Values from + + + + + option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously. ### {PackageCharts} (チャート) @@ -876,7 +951,7 @@ The type of Values from . Can be toggled via and styled via . -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### **{PackageVerChanges-23-2}** @@ -913,11 +988,11 @@ The type of Values from property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges. - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`. - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`. -- +- - Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. -- +- - `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. -- , +- , - exposed `selectedItem`, `items` and `groups` getters - - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position. @@ -938,7 +1013,12 @@ The type of Values from から `IgbRowDataEventArgs` に導入されました。これは、`RowAdded` および `RowDeleted` イベントによって発行されるイベント引数の一部です。グリッドに主キー属性が追加されている場合、発行された primaryKey イベント引数は行 ID を表し、それ以外の場合はデフォルトで null 値になります。 +- 新しい引数 `PrimaryKey` が + + + + + から `IgbRowDataEventArgs` に導入されました。これは、`RowAdded` および `RowDeleted` イベントによって発行されるイベント引数の一部です。グリッドに主キー属性が追加されている場合、発行された primaryKey イベント引数は行 ID を表し、それ以外の場合はデフォルトで null 値になります。 - `RowSelectionChanging` イベント引数が変更されました。現在、グリッドが primaryKey を設定した場合、`OldSelection`、`NewSelection`、`Added` および `Removed` コレクションは、選択された要素の行キーで構成されなくなりましたが、いずれにしても行データが出力されるようになりました。 - グリッドがリモート データを操作していて、主キーが設定されている場合、現在グリッド ビューに含まれていない選択された行に対して、部分的な行データ オブジェクトが発行されます。 - 選択された行がグリッド コンポーネントから削除されると、`RowSelectionChanging` イベントは発生しなくなります。 @@ -952,8 +1032,8 @@ The type of Values from プロパティを追加し、 または `Rounded` のいずれかになります。デフォルトでは、バッジの形状は rounded です。 -- `IgbAvatar`、`RoundShape` プロパティは廃止され、将来のバージョンで削除される予定です。ユーザーは、新しく追加された 属性によってアバターの形状を制御できます。これは、、`Rounded`、または にすることができます。アバターのデフォルトの形状は です。 +- `IgbBadge` は、バッジの形状を制御する プロパティを追加し、 または `Rounded` のいずれかになります。デフォルトでは、バッジの形状は rounded です。 +- `IgbAvatar`、`RoundShape` プロパティは廃止され、将来のバージョンで削除される予定です。ユーザーは、新しく追加された 属性によってアバターの形状を制御できます。これは、、`Rounded`、または にすることができます。アバターのデフォルトの形状は です。 ### {PackageDockManager} (DockManager) @@ -1120,7 +1200,7 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to ### チャート凡例 -- バブル、ドーナツ、および円チャートで使用できる水平方向の プロパティを ItemLegend に追加しました。 +- バブル、ドーナツ、および円チャートで使用できる水平方向の プロパティを ItemLegend に追加しました。 - プロパティの追加 - 凡例項目にホバーした時にシリーズのハイライト表示を有効にします。 ## 地理マップ @@ -1145,18 +1225,18 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to ### {PackageInputs} (入力) -- A new `ValueChanged` event supports 2-way binding and should only be handled if you have not bound the property. In order to read the Value field from the control without data binding the `ValueChanged` event should be handled, otherwise if your data is not bound you should use GetCurrentValueAsync to read the controls Value. +- A new `ValueChanged` event supports 2-way binding and should only be handled if you have not bound the property. In order to read the Value field from the control without data binding the `ValueChanged` event should be handled, otherwise if your data is not bound you should use GetCurrentValueAsync to read the controls Value. #### 日付ピッカー -- - 現在の日付のボタンの表示を切り替えます。 -- - 日付値の上にラベルを追加します。 -- プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 -- - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) -- - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 -- - 週の最初の曜日を指定します。 -- - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 -- - 週番号の表示を切り替えます。 -- & - 使用可能の選択できる日付の範囲を指定する日付制限。 +- - 現在の日付のボタンの表示を切り替えます。 +- - 日付値の上にラベルを追加します。 +- プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 +- - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) +- - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 +- - 週の最初の曜日を指定します。 +- - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 +- - 週番号の表示を切り替えます。 +- & - 使用可能の選択できる日付の範囲を指定する日付制限。 - アクセシビリティの追加 #### Multi-Column ComboBox @@ -1285,7 +1365,7 @@ for example: #### Chart Legend -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added property - Enables series highlighting when hovering over legend items #### Geographic Map @@ -1317,13 +1397,13 @@ These features are CTP #### Date Picker -- - Toggles Today button visibility -- - Adds a label above the date value -- property - adds custom text when no value is selected -- - Customize input date string e.g. (`yyyy-MM-dd`) -- - Specifies whether to display selected dates as LongDate or ShortDate -- - Specifies first day of week -- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) -- - Toggles Week number visibility -- & - Date limits, specifying a range of available selectable dates. +- - Toggles Today button visibility +- - Adds a label above the date value +- property - adds custom text when no value is selected +- - Customize input date string e.g. (`yyyy-MM-dd`) +- - Specifies whether to display selected dates as LongDate or ShortDate +- - Specifies first day of week +- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week) +- - Toggles Week number visibility +- & - Date limits, specifying a range of available selectable dates. - Added Accessibility diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx index 458be2bcb8..1d9c912818 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx @@ -87,8 +87,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; **ローカライゼーション (i18n)** -- 、、、、、、、、、、、 - - グリッド コンポーネントで日付や数値などのデータをフォーマットおよびレンダリングするための新しい `Intl` 実装。、、 の `Intl` 実装を更新しました。 +- 、、、、、、、、、、、 + - グリッド コンポーネントで日付や数値などのデータをフォーマットおよびレンダリングするための新しい `Intl` 実装。、、 の `Intl` 実装を更新しました。 - 現在サポートされているすべての言語のリソース文字列を持つすべてのコンポーネントに対する新しいローカライゼーション実装。 - 新しいパブリック ローカライゼーション API と、新しいリソースを含む `igniteui-i18n-resources` という名前のパッケージ。 @@ -150,8 +150,8 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と **Localization(i18n)** -- , , , , , , , , , , , - - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for , , and . +- , , , , , , , , , , , + - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for , , and . - New localization implementation for the currently supported languages for all components that have resource strings in the currently supported languages. - New public localization API and package named `igniteui-i18n-resources` containing the new resources that are used in conjunction. @@ -595,7 +595,7 @@ With 19.0.0 the React product introduces many breaking changes done to improve a - に新しいプロパティ を追加しました。 #### Accordion -- 新しいイベント および `Close` を追加しました。 +- 新しいイベント および `Close` を追加しました。 igr-tab-panel component is removed. The igr-tab now encompasses both the tab header and the tab content in a single component. @@ -632,9 +632,9 @@ igr-tab-panel component is removed. The igr-tab now encompasses both the tab hea ## 機能拡張 ### Toolbar -- と に新しい `groupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 -- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 -- に、パネル内の項目間の間隔を制御する `itemSpacing` という新しいプロパティを追加しました。 +- と に新しい `groupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 +- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 +- に、パネル内の項目間の間隔を制御する `itemSpacing` という新しいプロパティを追加しました。 | Bug Number | Control | Description | |------------|---------|------------------| @@ -685,7 +685,7 @@ DashboardTile ### 一般 - 新しい [Carousel](layouts/carousel.md) コンポーネント。 -- +- - `change` イベント引数タイプを から に変更しました。 ## **{PackageVerChanges-24-1-SEP}** @@ -700,23 +700,23 @@ DashboardTile - 新しい [Banner](notifications/banner.md) コンポーネント。 - 新しい [DatePicker](scheduling/date-picker.md) コンポーネント。 -- 新しい コンポーネント。 +- 新しい コンポーネント。 - すべてのコンポーネントにネイティブ イベントのサポートが追加されました。 -- +- - `setIconRef` メソッドが追加されました。これにより、アイコンを SVG ファイルで登録および置き換えることができます。 - すべてのコンポーネントが内部的な参照によるアイコンを使用するようになり、カスタム テンプレートを明示的に提供しなくても簡単に置き換えられるようになりました。 -- 、、、、、、、、**IgrSelectComponent** +- 、、、、、、、、**IgrSelectComponent** - トグル メソッドの `show`、`hide`、`toggle` メソッドは、成功した場合に **true** を返すようになりました。そうでない場合は **false**。 -- **IgrButtonComponent**、、、、、、、、、**IgrSelectComponent**、 +- **IgrButtonComponent**、、、、、、、、、**IgrSelectComponent**、 - カスタムの `focus` および `blur` イベントは非推奨になりました。代わりにネイティブの `onFocus` および `onBlur` イベントを使用してください。 -- - - および プロパティを追加しました。 +- + - および プロパティを追加しました。 ## {PackageGrids} ### **{PackageVerChanges-24-1-JUN}** - New [Carousel](layouts/carousel.md) component. -- +- - Changed `change` event argument type from to ## {PackageCommon} @@ -760,9 +760,9 @@ DashboardTile - - Removed `displayDensity` deprecated property. - Renamed `actualColumns`, `contentColumns` properties to `actualColumnList` and `contentColumnList`. Use `columns` or `columnList` property to get all columns now. - - Renamed `rowDelete` and `rowAdd` event argument type to . - - Renamed `contextMenu` event argument type to . - - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead. + - Renamed `rowDelete` and `rowAdd` event argument type to . + - Renamed `contextMenu` event argument type to . + - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead. - - removed `showPivotConfigurationUI` property. Use `pivotUI` and set inside it the new `showConfiguration` option. - @@ -803,26 +803,26 @@ DashboardTile - [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### {PackageCommon} -- 新しい コンポーネント -- 新しい コンポーネント +- 新しい コンポーネント +- 新しい コンポーネント - - 新しい プロパティ。有効にすると、ドッキング インジケーターは表示されなくなり、エンド ユーザーは、ドラッグしたペインをターゲット ペインの端に近づけてドラッグすることでドッキングできます - 新しい プロパティ。フローティング ペインを Dock Manager の境界内に保持するかどうかを決定します。デフォルトは **false** です。 - 新しい プロパティ。ペインのヘッダーをホバー時にのみ表示するか、常に表示するかを決定します。デフォルトは `always` です。 -- 、、、 - - `Readonly` は に名前が変更されました。 -- - - `Maxlength` は に名前が変更されました。 - - `Minlength` は に名前が変更されました。 -- +- 、、、 + - `Readonly` は に名前が変更されました。 +- + - `Maxlength` は に名前が変更されました。 + - `Minlength` は に名前が変更されました。 +- - ノードをクリックすると展開状態が変更されるかどうかを決定する `toggleNodeOnClick` プロパティが追加されました。デフォルトは **false** です。 -- +- - `allowReset` が追加されました。有効にすると、同じ値を選択するとコンポーネントがリセットされます。**動作の変更** - 以前のリリースでは、これが Rating コンポーネントのデフォルトの動作でした。アプリケーションでこの動作を維持する必要がある場合は、必ず `allowReset` を設定してください。 -- 、 +- 、 - `selectedItem`、`items`、および `groups` ゲッターが公開されました。 ## 非推奨 @@ -830,10 +830,10 @@ DashboardTile ### 削除済 - デフォルトの属性を隠していた独自の `dir` 属性が削除されました。これは互換性のある変更です。 -- - `ariaLabel` シャドウ プロパティ。これは互換性のある変更です。 -- - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 -- - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 -- - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 +- - `ariaLabel` シャドウ プロパティ。これは互換性のある変更です。 +- - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 +- - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 +- - `ariaLabelledBy` シャドウ属性。これは互換性のある変更です。 - `RadialChart` - New Label Mode @@ -849,22 +849,22 @@ DashboardTile ### **{PackageVerChanges-23-2-DEC}** -- New component -- New component +- New component +- New component - - New property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges. - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`. - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`. -- , , , - - `Readonly` has been renamed to -- - - `Maxlength` has been renamed to - - `Minlength` has been renamed to -- +- , , , + - `Readonly` has been renamed to +- + - `Maxlength` has been renamed to + - `Minlength` has been renamed to +- - Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`. -- +- - `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. -- , +- , - exposed `selectedItem`, `items` and `groups` getters @@ -876,10 +876,10 @@ DashboardTile #### **{PackageVerChanges-23-2}** - Removed our own `dir` attribute which shadowed the default one. This is a non-breaking change. -- - `ariaLabel` shadowed property. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. -- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabel` shadowed property. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. +- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change. ## {PackageGrids} - Toolbar - @@ -1060,7 +1060,7 @@ Added significant improvements to default behaviors, and refined the Category Ch ## チャート凡例 -- バブル、ドーナツ、および円チャートで使用できる水平方向の プロパティを ItemLegend に追加しました。 +- バブル、ドーナツ、および円チャートで使用できる水平方向の プロパティを ItemLegend に追加しました。 - プロパティの追加 - 凡例項目にホバーした時にシリーズのハイライト表示を有効にします。 ### {PackageMaps} (GeoMap) @@ -1096,15 +1096,15 @@ Added significant improvements to default behaviors, and refined the Category Ch ## {PackageInputs} (入力) ### 日付ピッカー -- - 現在の日付のボタンの表示を切り替えます。 -- - 日付値の上にラベルを追加します。 -- プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 -- - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) -- - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 -- - 週の最初の曜日を指定します。 -- - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 -- - 週番号の表示を切り替えます。 -- & - 使用可能の選択できる日付の範囲を指定する日付制限。 +- - 現在の日付のボタンの表示を切り替えます。 +- - 日付値の上にラベルを追加します。 +- プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 +- - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) +- - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 +- - 週の最初の曜日を指定します。 +- - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 +- - 週番号の表示を切り替えます。 +- & - 使用可能の選択できる日付の範囲を指定する日付制限。 - アクセシビリティの追加 - Changed Bar/Column/Waterfall series to have square corners instead of rounded corners @@ -1151,7 +1151,7 @@ for example: #### **{PackageVerChangedFields}** -- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart +- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart - Added property - Enables series highlighting when hovering over legend items ### {PackageGrids} (データ グリッド) diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx index e1899d4f10..43fa16360b 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx @@ -499,7 +499,12 @@ For more details please visit: ### {PackageGrids} - **すべてのグリッド** - - プロパティを使用して初期フィルタリングの適用が可能になりました。 + - + + + + + プロパティを使用して初期フィルタリングの適用が可能になりました。 - The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure. @@ -529,9 +534,9 @@ For more details please visit: ### 機能拡張 #### Toolbar -- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 -- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 -- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 +- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 +- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 +- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 #### バグ修正 次の表は、このリリースの {ProductName} ツールセットに対して行われたバグ修正を示しています。 @@ -545,7 +550,12 @@ For more details please visit: ### **{PackageVerChanges-24-2-DEC}** - **All Grids** - - Allow applying initial filtering through property + - Allow applying initial filtering through + + + + + property ### {PackageCharts} @@ -564,9 +574,19 @@ For more details please visit: - **すべてのグリッド** - 新しい `RowClick` イベントが追加されました。 - - - に `sortable` プロパティが追加されました。 + - + + + + + に `sortable` プロパティが追加されました。 - 水平レイアウトが追加されました。新しい `pivotUI` プロパティ内で `rowLayout` `horizontal` として有効にできます。 - - 水平レイアウトのみの行ディメンション サマリーが追加されました。`horizontalSummary` を **true** に設定することで、各 に対して有効にできます。 + - 水平レイアウトのみの行ディメンション サマリーが追加されました。`horizontalSummary` を **true** に設定することで、各 + + + + + に対して有効にできます。 - 水平集計の位置を設定するための `horizontalSummariesPosition` プロパティを `pivotUI` に追加しました。 - 行ディメンションの行ヘッダーが追加されました。新しい `pivotUI` プロパティ内で `showHeaders` **true** として有効にできます。 - キーボード ナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。 @@ -577,9 +597,49 @@ For more details please visit: - - `displayDensity` の非推奨のプロパティが削除されました。 - `actualColumns`、`contentColumns` プロパティの名前を、`actualColumnList` および `contentColumnList` に変更しました。すべての列を取得するには、`column` または `columnList` プロパティを使用してください。 - - `rowDelete` および `rowAdd` イベント引数タイプの名前を に変更しました。 - - `contextMenu` イベント引数タイプの名前を に変更しました。 - - 、、 イベントの `rowID` および `primaryKey` プロパティが削除されました。代わりに `rowKey` を使用してください。 + - `rowDelete` および `rowAdd` イベント引数タイプの名前を + + + + + + + + に変更しました。 + - `contextMenu` イベント引数タイプの名前を + + + + + + + + に変更しました。 + - + + + + + + + +、 + + + + + + + +、 + + + + + + + + イベントの `rowID` および `primaryKey` プロパティが削除されました。代わりに `rowKey` を使用してください。 - - `showPivotConfigurationUI` プロパティが削除されました。`pivotUI` を使用して、その中に新しい `showConfiguration` オプションを設定してください。 - @@ -596,8 +656,13 @@ For more details please visit: ### {PackageCommon} -- 、 - ユーザー入力を制限することなく検証ルールを適用できるように を公開しました。 -- - プロパティは非推奨です。ドロップダウンは、ブラウザー ビューポートの最上位レイヤーにコンテナーをレンダリングするために `Popover` API を使用するようになったため、このプロパティは廃止されました。 +- 、 - ユーザー入力を制限することなく検証ルールを適用できるように を公開しました。 +- - + + + + + プロパティは非推奨です。ドロップダウンは、ブラウザー ビューポートの最上位レイヤーにコンテナーをレンダリングするために `Popover` API を使用するようになったため、このプロパティは廃止されました。 - - の は非推奨です。分割ペイン レベルで isMaximized を true に設定しても、分割ペインはコンテナーとしてのみ機能し、最大化されて表示される実際のコンテンツがないため、実際の効果はありません。代わりに、 および/または の プロパティを使用してください。 ## {PackageGrids} @@ -644,8 +709,13 @@ For more details please visit: ## {PackageGauges} ### **{PackageVerChanges-23-2-JAN}** -- , - exposed to enable validation rules being enforced without restricting user input. -- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. +- , - exposed to enable validation rules being enforced without restricting user input. +- - + + + + + property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete. - - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead. ### {PackageCharts} @@ -662,7 +732,7 @@ For more details please visit: - [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`. -- - New option for ToolAction for outlining a border around specific tools of choice. +- - New option for ToolAction for outlining a border around specific tools of choice. ### {PackageGrids} @@ -675,7 +745,7 @@ For more details please visit: - [Toolbar](menus/toolbar.md) - クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 - - ツールバーの プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 + - ツールバーの プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 - ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 @@ -705,8 +775,8 @@ For more details please visit: - `IgcDateTimeInput` で StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date)、DateTimeInputDatePart ではなく DatePart に切り詰められるようになりました。 - `IgcRadio` および `IgcRadioGroup` で、無効な状態のスタイルとともにコンポーネントの検証が追加されました。 - `IgcMask` - マスク パターン リテラルをエスケープする機能が追加されました。 -- `IgcBadge` - バッジの形状を制御する プロパティが追加され、 または `Rounded` のいずれかになります。デフォルトでは、バッジの形状は Rounded です。 -- `IgcAvatar` - `RoundShape` プロパティは非推奨になり、将来のバージョンで削除される予定です。ユーザーは、新しく追加された 属性によってアバターの形状を制御できます。形状属性は、、`Rounded`、または です。アバターの図形はデフォルトで です。 +- `IgcBadge` - バッジの形状を制御する プロパティが追加され、 または `Rounded` のいずれかになります。デフォルトでは、バッジの形状は Rounded です。 +- `IgcAvatar` - `RoundShape` プロパティは非推奨になり、将来のバージョンで削除される予定です。ユーザーは、新しく追加された 属性によってアバターの形状を制御できます。形状属性は、、`Rounded`、または です。アバターの図形はデフォルトで です。 ## **{PackageVerChanges-22-2.1}** @@ -763,8 +833,8 @@ For more details please visit: - `IgcDateTimeInput`, the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart - `IgcRadio` and `IgcRadioGroup`, added component validation along with styles for invalid state - `IgcMask`, added the capability to escape mask pattern literals. -- `IgcBadge` added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded. -- `IgcAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is . +- `IgcBadge` added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded. +- `IgcAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is . ## {PackageGrids} @@ -847,15 +917,15 @@ For more details please visit: ### {PackageCharts} - Date Picker: - - - 現在の日付のボタンの表示を切り替えます。 - - - 日付値の上にラベルを追加します。 - - プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 - - - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) - - - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 - - - 週の最初の曜日を指定します。 - - - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 - - - 週番号の表示を切り替えます。 - - & - 使用可能の選択できる日付の範囲を指定する日付制限。 + - - 現在の日付のボタンの表示を切り替えます。 + - - 日付値の上にラベルを追加します。 + - プロパティ - 値が選択されていない場合にカスタム テキストを追加します。 + - - 入力日付文字列をカスタマイズします。(例: `yyyy-MM-dd`) + - - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。 + - - 週の最初の曜日を指定します。 + - - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。 + - - 週番号の表示を切り替えます。 + - & - 使用可能の選択できる日付の範囲を指定する日付制限。 - アクセシビリティの追加 ## {PackageMaps} @@ -897,7 +967,7 @@ For more details please visit: ### チャート凡例 -- バブル、ドーナツ、および円チャートで使用できる水平方向の プロパティを ItemLegend に追加しました +- バブル、ドーナツ、および円チャートで使用できる水平方向の プロパティを ItemLegend に追加しました - プロパティの追加 - 凡例項目にホバーした時にシリーズのハイライト表示を有効にします ## **{PackageVerChangedFields}** @@ -1189,159 +1259,159 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc- ### 非推奨 #### 修正 -- 、- 値に `undefined` を渡すと、基になる入力値が undefined に設定されます。 -- - フォームの `reset` の呼び出し後、基になる入力値とプレースホルダーの状態が正しく更新されます。 -- - 項目 `indicator` CSS パーツに `--ig-size` を設定すると、アイコンのサイズが変更されるようになりました。 -- - 特定のシナリオで `igcChange` が二重に発行されます。 -- - ミニ バリアントは、開いた状態でない場合、最初は描画されません。 -- : +- 、- 値に `undefined` を渡すと、基になる入力値が undefined に設定されます。 +- - フォームの `reset` の呼び出し後、基になる入力値とプレースホルダーの状態が正しく更新されます。 +- - 項目 `indicator` CSS パーツに `--ig-size` を設定すると、アイコンのサイズが変更されるようになりました。 +- - 特定のシナリオで `igcChange` が二重に発行されます。 +- - ミニ バリアントは、開いた状態でない場合、最初は描画されません。 +- : - ENTER キーを使用してエントリを選択すると、単一選択モードで正しく機能するようになりました。 - - オプションをオンにすると、以前に入力した検索語句がクリアされるようになりました。 + - オプションをオンにすると、以前に入力した検索語句がクリアされるようになりました。 - 単一選択モードで、選択した項目に既に一致する検索語を入力すると、正しく機能するようになりました。 ### **{PackageCommonVerChanges-4.9.0}** -- +- - Added `setIconRef` method. This allows to register and replace icons by SVG files. - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates. -- +- - Added `name` and `value` properties. **Breaking Changes** -- Removed component. Use native form instead. +- Removed component. Use native form instead. - Removed `size` property in favor of the `--ig-size` CSS custom property for the following components: - - , ,, , , , , , , , , , + - , ,, , , , , , , , , , - Removed custom `igcFocus` and `igcBlur` events. Use the native `focus` and `blur` events instead for the following components: - - , , , , , , , , , **IgcSelectComponent**, -- , , + - , , , , , , , , , **IgcSelectComponent**, +- , , - Changed `igcChange` event arguments from `CustomEvent` to `CustomEvent<{ checked: boolean; value: string | undefined }>` -- , **IgcSelectComponent** +- , **IgcSelectComponent** - Removed `positionStrategy`, `flip`, `sameWidth` properties. -- +- - Renamed The `closeOnEscape` property to `keepOpenOnEscape`. -- +- - Removed `positionStrategy` property. -- +- - Removed `maxlength` and `minlength` properties. Use the native `maxLength` and `minLength` properties or `max` and `min` instead. - Renamed `readonly` and `inputmode` properties to `readOnly` and `inputMode`. -- +- - Renamed `ariaThumbLower`/`ariaThumbUpper` properties to `thumbLabelLower`/`thumbLabelUpper`. -- +- - Renamed `readonly` property to `readOnly`. ### 追加 #### 変更 -- 、、 - ネイティブの `Popover` API を使用するようになりました。 +- 、、 - ネイティブの `Popover` API を使用するようになりました。 ### 非推奨 #### 修正 -- - コンポーネントが読み取り専用モードの場合、Material テーマのラベルが壊れます。 +- - コンポーネントが読み取り専用モードの場合、Material テーマのラベルが壊れます。 ### **{PackageCommonVerChanges-4.8.2}** #### 修正 -- - サフィックスのないテキスト領域のサイズ変更ハンドルの位置。 -- - 単一の呼び出しスタックでタブ グループとタブを動的に作成および追加するときにエラーが発生します。 -- / - 最初にチェックしたときにフォームの送信に参加します。 -- - コンポーネントが実際に閉じられる/非表示になる前に `igcClosed` が発生します。 +- - サフィックスのないテキスト領域のサイズ変更ハンドルの位置。 +- - 単一の呼び出しスタックでタブ グループとタブを動的に作成および追加するときにエラーが発生します。 +- / - 最初にチェックしたときにフォームの送信に参加します。 +- - コンポーネントが実際に閉じられる/非表示になる前に `igcClosed` が発生します。 #### **{PackageCommonVerChanges-4.8.1}** -- `Inputmode` property. Aligned with the native `inputMode` DOM property instead. +- `Inputmode` property. Aligned with the native `inputMode` DOM property instead. #### 修正 -- - は、既に設定されている値には適用されません。 -- 、、 - フォーム検証を同期的に適用します。 -- 、 - ドロップダウン/選択項目スロット内のラップ要素をクリックしても項目を選択できません。 -- - アクティブ状態は、クリック時に正しいツリー ノードに正しく適用されます。 +- - は、既に設定されている値には適用されません。 +- 、、 - フォーム検証を同期的に適用します。 +- 、 - ドロップダウン/選択項目スロット内のラップ要素をクリックしても項目を選択できません。 +- - アクティブ状態は、クリック時に正しいツリー ノードに正しく適用されます。 ### **{PackageCommonVerChanges-4.8.0}** #### 追加 -- では、 を none に設定できるようになりました。これにより、提供されたデータの順序でグループが表示されます。 -- / - テーマ間でビジュアルの外観が更新され、新しい状態が追加されました。 +- では、 を none に設定できるようになりました。これにより、提供されたデータの順序でグループが表示されます。 +- / - テーマ間でビジュアルの外観が更新され、新しい状態が追加されました。 - `NavBar` - Bootstrap テーマに境界線が追加されました。 #### 変更 -- でのグループ化ではデータがソートされなくなりました。 プロパティは、グループのソート方向にのみ影響するようになりました。**動作変更**: 以前のリリースでは、グループのソート方向によって項目もソートされていました。この動作を実現したい場合は、既にソートされたデータを に渡すことができます。 +- でのグループ化ではデータがソートされなくなりました。 プロパティは、グループのソート方向にのみ影響するようになりました。**動作変更**: 以前のリリースでは、グループのソート方向によって項目もソートされていました。この動作を実現したい場合は、既にソートされたデータを に渡すことができます。 #### 非推奨 -- - `aria-label-upper` と `aria-label-lower` は非推奨であり、次のメジャー リリースで削除されます。代わりに、`thumb-label-upper` と `thumb-label-lower` を使用してください。 +- - `aria-label-upper` と `aria-label-lower` は非推奨であり、次のメジャー リリースで削除されます。代わりに、`thumb-label-upper` と `thumb-label-lower` を使用してください。 #### 修正 -- - スロットアイコンのサイズ。 -- +- - スロットアイコンのサイズ。 +- - Fluent テーマの外観を更新しました。 - Safari での無効状態。 -- / - スタイルの問題。 -- +- / - スタイルの問題。 +- - スライダー トラックのクリックは、トラック要素の幅を計算の基準として使用します。 - スライダーのつまみを連続的にドラッグし、上限/下限を超えても、入力イベントは発生されません。 - `min`/`max` の前に `upper-bound`/`lower-bound` を設定する場合、スライダーはバインドされたプロパティを `min`/`max` の以前の値で上書きしません。 - スライダーのつまみにバインドされた `aria-label` は結果のレンダリングでリセットされなくなりました。 -- +- - デフォルトの検証は同期的に実行されます。 - スタイルの問題。 -- - `setRangeText()` は基になる値を更新します。 +- - `setRangeText()` は基になる値を更新します。 ### **{PackageCommonVerChanges-4.7.0}** #### 追加 -- - ノードをクリックすると展開状態が変更されるかどうかを決定する プロパティが追加されました。デフォルトは **false** です。 +- - ノードをクリックすると展開状態が変更されるかどうかを決定する プロパティが追加されました。デフォルトは **false** です。 ### 変更 #### 修正 -- 、、および のアクティブ項目のビジュアル スタイル。 -- - ミニ バリアントの壊れたビジュアル スタイル。 +- 、、および のアクティブ項目のビジュアル スタイル。 +- - ミニ バリアントの壊れたビジュアル スタイル。 ### **{PackageCommonVerChanges-4.6.0}** #### 追加 -- に `action` スロットが追加されました。 -- `indicator-expanded` スロットが に追加されました。 -- `toggle-icon-expanded` スロットが に追加されました。 -- 、 - `selectedItem`、`items`、`groups` ゲッターを公開しました。 +- に `action` スロットが追加されました。 +- `indicator-expanded` スロットが に追加されました。 +- `toggle-icon-expanded` スロットが に追加されました。 +- 、 - `selectedItem`、`items`、`groups` ゲッターを公開しました。 #### 変更 - パッケージを Lit v3 に更新しました。 - コンポーネントのダーク バリアントはシャドウ ルートにバインドされるようになりました。 - コンポーネントは現在のテーマに基づいてデフォルトのサイズを実装します。 -- - イベントをキャンセル不可に変更しました。 +- - イベントをキャンセル不可に変更しました。 - コンポーネント CSS を最適化し、バンドル サイズを縮小しました。 -- 、、、 の WAI-ARIA が改善されました。 +- 、、、 の WAI-ARIA が改善されました。 #### 修正 -- にスタイル設定パーツがありません。 +- にスタイル設定パーツがありません。 - の無効なスタイル。 -- の不要なスタイルを削除しました。 +- の不要なスタイルを削除しました。 - ホバー状態のビジュアル デザイン。 -- ビューを切り替えても のフォーカス状態が維持されません。 +- ビューを切り替えても のフォーカス状態が維持されません。 #### **{PackageCommonVerChanges-4.5.0}** -- - Slotted icon size. -- +- - Slotted icon size. +- - Updated Fluent theme look. - Disabled state in Safari. -- / - Style issues. -- +- / - Style issues. +- - Clicks on the slider track now use the track element width as a basis for the calculation. - Input events are no longer emitted while continuously dragging the slider thumb and exceeding upper/lower bounds. - When setting `upper-bound`/`lower-bound` before `min`/`max`, the slider will no longer overwrite the bound properties with the previous values of `min`/`max`. - The `aria-label` bound to the slider thumb is no longer reset on consequent renders. -- +- - Default validators are run synchronously. - Style issues. -- - `setRangeText()` updates underlying value. +- - `setRangeText()` updates underlying value. ### 追加 #### 非推奨 -`size` プロパティと属性は、すべてのコンポーネントで非推奨になりました。代わりに `--ig-size` CSS カスタム プロパティを使用してください。次の例では、 コンポーネントのサイズを小さく設定します: +`size` プロパティと属性は、すべてのコンポーネントで非推奨になりました。代わりに `--ig-size` CSS カスタム プロパティを使用してください。次の例では、 コンポーネントのサイズを小さく設定します: -- - added. When enabled selecting the same value will reset the component. **Behavioral change**: In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. +- - added. When enabled selecting the same value will reset the component. **Behavioral change**: In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application. #### 修正 - Safari でのコンボ項目の位置。 @@ -1350,36 +1420,36 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc- - 遅延データ バインディングを使用したコンボ値と選択状態。 - さまざまなスタイルとテーマの修正と調整 #### **{PackageCommonVerChanges-4.4.0}** -- Active item visual styles for , and . -- - mini variant broken visual style. +- Active item visual styles for , and . +- - mini variant broken visual style. ### 追加 #### 変更 -- - Fluent テーマのカラー。 -- - インジケーターのスタイルとカラー スキーマ。 +- - Fluent テーマのカラー。 +- - インジケーターのスタイルとカラー スキーマ。 #### 非推奨 - `IgcForm` コンポーネントは非推奨です。 -- : +- : - `minlength` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `minLength` を使用してください。 - `maxlength` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `maxLength` を使用してください。 - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 -- : +- : - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 -- : +- : - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 - `minValue` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `min` を使用してください。 - `maxValue` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `max` を使用してください。 -- : +- : - `readonly` プロパティは非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `readOnly` を使用してください。 #### 削除済 - デフォルトの属性を隠していた独自の `dir` 属性が削除されました。これは**互換性のある変更**です。 -- - `ariaLabel` シャドウ プロパティ。これは**互換性のある変更**です。 -- - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 -- - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 -- - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 +- - `ariaLabel` シャドウ プロパティ。これは**互換性のある変更**です。 +- - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 +- - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 +- - `ariaLabelledBy` シャドウ属性。これは**互換性のある変更**です。 ### 修正 @@ -1387,13 +1457,13 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc- - New [Text Area](inputs/text-area.md) component. - New [Button Group](inputs/button-group.md) component. -- New . -- now supports CSS transitions. -- Position attribute for and . +- New . +- now supports CSS transitions. +- Position attribute for and . #### 追加 -- - コンポーネントアニメーション。 +- - コンポーネントアニメーション。 - コンポーネントの境界半径は、そのスキーマから使用されます。 ```css @@ -1403,87 +1473,87 @@ igc-avatar { ``` #### 変更 -- 、、 - スキーマのカラー。 -- - スキーマのカラー。 -- - テーマのスタイルとサイズが更新されました。 +- 、、 - スキーマのカラー。 +- - スキーマのカラー。 +- - テーマのスタイルとサイズが更新されました。 ### 修正 #### **{PackageCommonVerChanges-4.3.0}** - The following components are now Form Associated Custom Elements. They are automatically associated with a parent `` and behave like a browser-provided control: - - & - - - - - - - - - - - - - - - - Single - - - - -- now supports animations. + - & + - + - + - + - + - + - + - + - Single + - + - +- now supports animations. #### 追加 -- : +- : - `matchDiacritics` をフィルタリング オプション プロパティに追加しました。デフォルトは **false** です。**true** に設定すると、フィルターはアクセント付き文字とその基本文字を区別します。それ以外の場合、文字列は正規化されてから照合されます。 - 現在の選択内容をデータ オブジェクトの配列として返す `selection` プロパティ。 -- : 明示的な高さのサポート -- : アニメーションの追加 +- : 明示的な高さのサポート +- : アニメーションの追加 #### 変更 -- : +- : - `value` は読み取り専用ではなくなり、明示的に設定できるようになりました。value 属性は宣言型のバインディングもサポートしており、有効な JSON 文字列化配列を受け入れます。 #### 非推奨 -- : `sameWidth`、`positionStrategy`、`flip` は非推奨になりました。これらは次のメジャー リリースで削除される予定です。 +- : `sameWidth`、`positionStrategy`、`flip` は非推奨になりました。これらは次のメジャー リリースで削除される予定です。 #### 修正 -- : `prefix`/`suffix`/`helper-text` スロットが描画されません。 -- : ネストされたタブの選択。 -- : 背景は要素をオーバーレイしません。 -- : 最初に開いた状態でのリストボックスの位置。 -- : 親コンテナ内で垂直方向に引き伸ばします。 -- : Fluent テーマの間違ったカラー。 +- : `prefix`/`suffix`/`helper-text` スロットが描画されません。 +- : ネストされたタブの選択。 +- : 背景は要素をオーバーレイしません。 +- : 最初に開いた状態でのリストボックスの位置。 +- : 親コンテナ内で垂直方向に引き伸ばします。 +- : Fluent テーマの間違ったカラー。 - 高さが指定されていない場合、アニメーション プレーヤーはエラーを発生します。 -- : Chromium ベースのブラウザーでの Intl.DateTimeFormat の問題。 +- : Chromium ベースのブラウザーでの Intl.DateTimeFormat の問題。 ### **{PackageCommonVerChanges-4.2.3}** #### 非推奨 -- - `closeOnEscape` プロパティは非推奨となり、代わりに新しい `keepOpenOnEscape` プロパティが使用されます。 +- - `closeOnEscape` プロパティは非推奨となり、代わりに新しい `keepOpenOnEscape` プロパティが使用されます。 #### 修正 -- - 選択されたフォーカス状態のカラー。 -- - 他のデザイン システム製品に合わせてアイコンのサイズを設定します。 -- - Fluent および Material テーマのアウトライン スタイルが削除されました。 -- - 設定された値の日付へのナビゲーション。 -- - 親の高さを完全には取得しません。 +- - 選択されたフォーカス状態のカラー。 +- - 他のデザイン システム製品に合わせてアイコンのサイズを設定します。 +- - Fluent および Material テーマのアウトライン スタイルが削除されました。 +- - 設定された値の日付へのナビゲーション。 +- - 親の高さを完全には取得しません。 #### **{PackageCommonVerChanges-4.2.2}** -- - single selection not working in certain scenarios. -- - various styling fixes. -- - border radius with ripple. -- - fixed wrong color in Fluent theme. -- - various styling fixes. +- - single selection not working in certain scenarios. +- - various styling fixes. +- - border radius with ripple. +- - fixed wrong color in Fluent theme. +- - various styling fixes. - - assign closest **igc-tree-item** ancestor as a parent. -- - internal **hidden** styles and custom display property. +- - internal **hidden** styles and custom display property. ### 非推奨 #### 修正 -- - UI の不一致。 -- - Fluent テーマの不一致。 -- - API 経由の選択は検索リストでは機能しません。 -- - Fluent テーマの不一致。 -- - UI の不一致。 -- - Fluent テーマの不一致。 +- - UI の不一致。 +- - Fluent テーマの不一致。 +- - API 経由の選択は検索リストでは機能しません。 +- - Fluent テーマの不一致。 +- - UI の不一致。 +- - Fluent テーマの不一致。 - defineAllComponents にコンポーネントがありません。 -- 、、、 のホスト サイズが間違っています。 +- 、、、 のホスト サイズが間違っています。 #### **{PackageCommonVerChanges-4.2.1}** -- : +- : - `value` is no longer readonly and can be explicitly set. The value attribute also supports declarative binding, accepting a valid JSON stringified array. - `value` type changed from `string[]` to `ComboValue[]` where @@ -1505,52 +1575,52 @@ interface IgcComboChangeEventArgs { #### 修正 -- - 単一選択モードでのフィルタリングでは一致する項目がアクティブ化されません。 +- - 単一選択モードでのフィルタリングでは一致する項目がアクティブ化されません。 #### **{PackageCommonVerChanges-4.2.0}** -- : `prefix`/`suffix`/`helper-text` slots not being rendered. -- : Nested tabs selection. -- : Backdrop doesn't overlay elements. -- : Listbox position on initial open state. -- : Stretch vertically in parent container. -- : Wrong colors in fluent theme. +- : `prefix`/`suffix`/`helper-text` slots not being rendered. +- : Nested tabs selection. +- : Backdrop doesn't overlay elements. +- : Listbox position on initial open state. +- : Stretch vertically in parent container. +- : Wrong colors in fluent theme. - Animation player throws errors when height is unspecified. -- : Intl.DateTimeFormat issues in Chromium based browsers. +- : Intl.DateTimeFormat issues in Chromium based browsers. ### 追加 #### 修正 -- - UI の不一致。 -- - `igc-icon` とフォント アイコンが正しく描画されません。 -- - UI の不一致。 -- - 項目のマージンをオーバーライドできません。 +- - UI の不一致。 +- - `igc-icon` とフォント アイコンが正しく描画されません。 +- - UI の不一致。 +- - 項目のマージンをオーバーライドできません。 #### **{PackageCommonVerChanges-4.1.1}** -- - colors in selected focus state. -- - set icon size to match other design system products. -- - removed outline styles for Fluent and Material themes. -- - navigation to date on set value. -- - not taking the full height of their parents. +- - colors in selected focus state. +- - set icon size to match other design system products. +- - removed outline styles for Fluent and Material themes. +- - navigation to date on set value. +- - not taking the full height of their parents. ### 修正 #### **{PackageCommonVerChanges-4.1.0}** -- - The `prefix`/`suffix` slots are no longer needed and will be removed in the next major release. +- - The `prefix`/`suffix` slots are no longer needed and will be removed in the next major release. #### 追加 - 新しい [Stepper](layouts/stepper.md) コンポーネント。 - 新しい [Combo](inputs/combo/overview.md) コンポーネント。 -- - コンポーネント内のシンボルを削除するときにリテラル位置をスキップします。 +- - コンポーネント内のシンボルを削除するときにリテラル位置をスキップします。 ### 修正 #### **{PackageCommonVerChanges-4.0.0}** -- - Matching item not activated on filtering in single selection mode. +- - Matching item not activated on filtering in single selection mode. ### 変更 #### **{PackageCommonVerChanges-3.4.2}** -- - Single Selection mode via the `single-select` attribute. +- - Single Selection mode via the `single-select` attribute. #### 修正 - `DateRangeType` のインポート エラーを解決しました。 @@ -1558,15 +1628,15 @@ interface IgcComboChangeEventArgs { ### **{PackageCommonVerChanges-3.4.1}** #### 変更 -- - 最新の Fluent 仕様に合わせてテーマを更新しました。 -- - 週末の色を更新しました。 +- - 最新の Fluent 仕様に合わせてテーマを更新しました。 +- - 週末の色を更新しました。 ### 修正 #### **{PackageCommonVerChanges-3.4.0}** - New [Stepper](layouts/stepper.md) component. - New [Combo](inputs/combo/overview.md) component. -- - Skip literal positions when deleting symbols in the component +- - Skip literal positions when deleting symbols in the component #### 追加 - 新しい [Dialog](notifications/dialog.md) コンポーネント。 @@ -1584,9 +1654,9 @@ interface IgcComboChangeEventArgs { ### 変更 #### 修正 -- - トップレベルのイベント リスナーを破棄します。 -- - Safari での不確定なアニメーション。 -- - 子ラジオ コンポーネントの自動登録。 +- - トップレベルのイベント リスナーを破棄します。 +- - Safari での不確定なアニメーション。 +- - 子ラジオ コンポーネントの自動登録。 ### **{PackageCommonVerChanges-3.3.0}** @@ -1597,8 +1667,8 @@ interface IgcComboChangeEventArgs { - テーマのタイポグラフィ スタイル。 #### 変更 -- - 単一選択と空のシンボルのサポートが追加されました。 -- - スライダー ステップの描画を改善しました。 +- - 単一選択と空のシンボルのサポートが追加されました。 +- - スライダー ステップの描画を改善しました。 - コンポーネントは、`defineComponents` で登録されると、その依存関係を自動登録するようになりました。 ### 修正 @@ -1611,29 +1681,29 @@ interface IgcComboChangeEventArgs { - 新しい [MaskInput](inputs/mask-input.md) コンポーネント。 - 新しい [ExpansionPanel](layouts/expansion-panel.md) コンポーネント。 - 新しい [Tree](grids/tree.md) コンポーネント。 -- - シンボルのサイズを制御するために、`selected` CSS パーツと公開された CSS 変数を追加しました。 -- - スロット化されたコンテンツを許可します。 +- - シンボルのサイズを制御するために、`selected` CSS パーツと公開された CSS 変数を追加しました。 +- - スロット化されたコンテンツを許可します。 ### 修正 #### **{PackageCommonVerChanges-3.1.0}** -- - Removed theme-specified height. +- - Removed theme-specified height. #### 追加 -- : `prefix` と `suffix` のスロットを追加しました。 -- : `toggle` メソッドを追加しました。 +- : `prefix` と `suffix` のスロットを追加しました。 +- : `toggle` メソッドを追加しました。 ### 非推奨 #### 修正 -- : +- : - 内部アイコンを自動読み込みます。 - 選択したチップの位置がずれています。 - パッケージ: ESM 内部インポート パス。 #### **{PackageCommonVerChanges-3.0.0}** -- - Added support for single selection and empty symbols. -- - Improved slider steps rendering. +- - Added support for single selection and empty symbols. +- - Improved slider steps rendering. - Components will now auto register their dependencies when they are registered in `defineComponents` @@ -1656,20 +1726,20 @@ Check the official [documentation](https://www.infragistics.com/products/ignite- #### 追加 - 新しい [DropDown](inputs/dropdown.md) コンポーネント。 -- : アクティブ日付は属性を介して設定できます。 +- : アクティブ日付は属性を介して設定できます。 #### **{PackageCommonVerChanges-2.1.1}** -- - Various styles fixes. +- - Various styles fixes. - Buttons - Vertical align and focus management. -- - Overflow for `suffix`/`prefix`. -- - Collapse with small sizes. -- - Overflow behavior. +- - Overflow for `suffix`/`prefix`. +- - Collapse with small sizes. +- - Overflow behavior. ### 追加 #### **{PackageCommonVerChanges-2.1.0}** -- : Added `prefix` and `suffix` slots. -- : Added `toggle` method. +- : Added `prefix` and `suffix` slots. +- : Added `toggle` method. #### 追加 - 新しい [LinearProgress](inputs/linear-progress.md) コンポーネント。 @@ -1681,7 +1751,7 @@ Check the official [documentation](https://www.infragistics.com/products/ignite- - コンポーネントテーマは、`configureTheme(theme: Theme)` 関数を呼び出すことで実行時に変更できます。 #### **{PackageCommonVerChanges-2.0.0}** -- : +- : - Auto load internal icons. - Selected chip is misaligned. - Package: ESM internal import paths. @@ -1690,9 +1760,9 @@ Check the official [documentation](https://www.infragistics.com/products/ignite- #### 変更 - チェックボックス/スイッチの検証状態を修正しました。 -- の `value: Date | Date[]` プロパティを 2 つのプロパティに分割しました: `value: Date` おとび `values: Date[]`。`` -- の `hasHeader` プロパティと `has-header` 属性をそれぞれ `hideHeader` と `hide-header` に置き換えました。 -- の `outlined` プロパティを `elevated` に置き換えました。 +- の `value: Date | Date[]` プロパティを 2 つのプロパティに分割しました: `value: Date` おとび `values: Date[]`。`` +- の `hasHeader` プロパティと `has-header` 属性をそれぞれ `hideHeader` と `hide-header` に置き換えました。 +- の `outlined` プロパティを `elevated` に置き換えました。 ### 削除済 @@ -1727,9 +1797,9 @@ Example: #### **{PackageDockManagerVerChanges-1.14.2}** - Fix checkbox/switch validity status -- Split 's `value: Date | Date[]` property into two properties - `value: Date` and `values: Date[]` -- Replaced 's `hasHeader` property & `has-header` attribute with `hideHeader` & `hide-header` respectively. -- Replaced 's `outlined` property with `elevated`. +- Split 's `value: Date | Date[]` property into two properties - `value: Date` and `values: Date[]` +- Replaced 's `hasHeader` property & `has-header` attribute with `hideHeader` & `hide-header` respectively. +- Replaced 's `outlined` property with `elevated`. #### 修正 - すばやくドラッグして、パネルをドック マネージャーの境界内に制限します。 @@ -1861,7 +1931,7 @@ Initial release of Ignite UI Web Components #### 新機能 - カスタマイズ可能なフローティング ペイン ヘッダー。 -- ペインごとの プロパティ。 +- ペインごとの プロパティ。 - プロパティは、コンテンツ ペインをドキュメント ホスト内にのみドッキングできるようにします。 - 分割ペインとタブ グループ ペインの空の領域を表示できるようにする プロパティ。 - ドック マネージャーの プロパティ。 diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx index 8e7076df8a..b96cc7df5f 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx @@ -83,7 +83,7 @@ DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と {ProductName} では、ユーザー注釈機能により、実行時に にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 -これは、 のデフォルトのツールと統合されています。 +これは、 のデフォルトのツールと統合されています。 {Platform} user-annotation-create @@ -255,9 +255,9 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 #### Toolbar -- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 -- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 -- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 +- と に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての アクションに適用されます。 +- タイトル テキストの水平方向の配置を制御する という新しいプロパティを に追加しました。 +- に、パネル内の項目間の間隔を制御する という新しいプロパティを追加しました。 ### バグ修正 @@ -299,7 +299,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - [比例カテゴリ角度軸](charts/types/radial-chart.md) - スライスをプロットするための、 のラジアル円シリーズの新しい軸。円チャートに似ており、データ ポイントが円グラフ内のセグメントとして表されます。 -- +- - 新しい ToolActionCheckboxList 選択用のチェックボックスを備えた項目のコレクションを表示する新しい CheckboxList ToolAction。ToolAction CheckboxList 内のグリッドの高さは 5 項目まで大きくなり、その後スクロールバーが表示されます。 @@ -327,7 +327,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。 で切り替えることができ、`FillBrushes` でスタイルを設定できます。 -- - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい オプション。 +- - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい オプション。 ### {PackageGauges} (ゲージ) @@ -359,7 +359,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### **{PackageVerChanges-23-2-JAN}** - Save tool action has been added to save the chart to an image via the clipboard. -- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. +- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully. - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation. ## {PackageCharts} (チャート) @@ -371,7 +371,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### {PackageGrids} - Toolbar - - クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 -- ツールバーの プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 +- ツールバーの プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 - ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。 - It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart. diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx index 113069f5b9..30e227cbc7 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx @@ -12,14 +12,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} シェープ ファイルを地理的データにバインディング -{ProductName} Map コンポーネントの クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを オブジェクトのコレクションに変換します。 +{ProductName} Map コンポーネントの クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを オブジェクトのコレクションに変換します。 ## {Platform} シェープ ファイルを地理的データにバインディングの例 -以下の表は、シェイプ ファイルを読み込むための クラスのプロパティを説明します。 +以下の表は、シェイプ ファイルを読み込むための クラスのプロパティを説明します。 | プロパティ | 型 | 概要 | |----------|------|---------------| @@ -29,10 +29,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -両方のソース プロパティが null 以外の値に設定されると、 オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、 は オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、`ImportCompleted` イベントが起動されます。 +両方のソース プロパティが null 以外の値に設定されると、 オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、 は オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、`ImportCompleted` イベントが起動されます。 ## シェープファイルの読み込み -以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として `ImportCompleted` イベントを処理する方法も示します。 +以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として `ImportCompleted` イベントを処理する方法も示します。 ```html @@ -56,7 +56,7 @@ sds.dataBind(); ## シェープファイルをバインド -Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる プロパティがあります。 は オブジェクトのリストを含むため、このような配列の例です。 +Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる プロパティがあります。 は オブジェクトのリストを含むため、このような配列の例です。 クラスは、以下の表にリストする地理的データを保存するためのプロパティを提供します。 @@ -68,8 +68,8 @@ Map コンポーネントでは、Geographic Series は、シェイプ ファイ このデータ構造は、適切なデータ列がマップされている限り、ほとんどの地理的シリーズでの使用に適しています。 ## コード スニペット -このコード例は、シェープ ファイルが を使用して読み込まれたことを前提としています。 -以下のコードは、マップ コンポーネント内の を にバインドし、すべての オブジェクトの `Points` プロパティをマップします。 +このコード例は、シェープ ファイルが を使用して読み込まれたことを前提としています。 +以下のコードは、マップ コンポーネント内の を にバインドし、すべての オブジェクトの `Points` プロパティをマップします。 @@ -285,4 +285,4 @@ onDataLoaded(sds: IgcShapeDataSource, e: any) { ## API リファレンス
-
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx index 39118f6bd5..8c019b5bde 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx @@ -28,7 +28,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro'; ## {Platform} Azure Maps からの画像の表示 - コード例 -以下のコード スニペットは、 クラスを使用して {Platform} で Azure Maps からの地理的画像タイルを表示する方法を示します。 +以下のコード スニペットは、 クラスを使用して {Platform} で Azure Maps からの地理的画像タイルを表示する方法を示します。 @@ -141,7 +141,7 @@ map.backgroundContent = tileSource; ## Azure Maps からの画像オーバーレイ - コード例 -次のコード スニペットは、 クラスと クラスを使用して、{Platform} の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。 +次のコード スニペットは、 クラスと クラスを使用して、{Platform} の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。 diff --git a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx index 2f0fa4aff4..19c56532a6 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx @@ -33,7 +33,7 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png'; ## コード スニペット -以下のコード スニペットは、 を使用して {Platform} で Bing Maps からの地理的画像を表示する方法を示します。 +以下のコード スニペットは、 を使用して {Platform} で Bing Maps からの地理的画像を表示する方法を示します。 diff --git a/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx index 481f86d900..edad3a8fc5 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx @@ -25,7 +25,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## コード スニペット -以下のコード スニペットは、 クラスを使用して で Esri 画像サーバーからの {Platform} 地理的画像タイルを表示する方法を示します。 +以下のコード スニペットは、 クラスを使用して で Esri 画像サーバーからの {Platform} 地理的画像タイルを表示する方法を示します。 @@ -182,8 +182,6 @@ protected override void OnInitialized() ``` - - ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx index e6215067f3..d06162a1e1 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx @@ -25,13 +25,20 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - がそのシェイプ ファイルを読み込むと、そのデータを オブジェクトに変換します。これらのオブジェクトは、 の `GetPointData()` メソッドから取得でき、 プロパティに割り当てられた で オブジェクトを使用してヒートマップを作成するために使用できます。この は、 ソースとして で使用できます。 + がそのシェイプ ファイルを読み込むと、そのデータを オブジェクトに変換します。これらのオブジェクトは、 の `GetPointData()` メソッドから取得でき、 + + + + + + +プロパティに割り当てられた で オブジェクトを使用してヒートマップを作成するために使用できます。この は、 ソースとして で使用できます。 - オブジェクトは、、、 の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、 を経度、 を緯度、 を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。 + オブジェクトは、、、 の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、 を経度、 を緯度、 を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。 -ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、 プロパティと プロパティを の プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、 に、マップに表示される値に使用する色がわかります。、、 プロパティを使用して、 コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。 +ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、 プロパティと プロパティを の プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、 に、マップに表示される値に使用する色がわかります。、、 プロパティを使用して、 コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。 - は対数スケールも使用できます。これを使用する場合は、 プロパティを **true** に設定できます。 + は対数スケールも使用できます。これを使用する場合は、 プロパティを **true** に設定できます。 ## Web Worker @@ -244,8 +251,6 @@ constructor() { ``` - - @@ -403,12 +408,10 @@ public onDataLoaded(csvData: string) { ``` - - ## API リファレンス
-
+



diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx index ee43b56d7c..f2cb1f3837 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx @@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Esri ユーティリティ -リソース トピックは、Esri Maps が で提供する の使用に役立つユーティリティの実装を提供します。 +リソース トピックは、Esri Maps が で提供する の使用に役立つユーティリティの実装を提供します。 ## コード スニペット @@ -134,8 +134,6 @@ public class EsriStyle ``` - - ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx index 125f27eb8e..edccf8107b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx @@ -32,7 +32,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 列の編集を有効にするには、 プロパティが **true** に設定されていることを確認してください。 -列の編集が有効になったら、 を追加することから始めることができます。ここで、単一選択を 1 つだけ使用できるようにするには、 プロパティを設定する必要があることに注意してください。 +列の編集が有効になったら、 を追加することから始めることができます。ここで、単一選択を 1 つだけ使用できるようにするには、 プロパティを設定する必要があることに注意してください。 @@ -124,7 +124,7 @@ public webGridCountryDropDownTemplate: IgcRenderFunction ``` -- `displayKey` - オブジェクト配列に必要 - 項目のテキストに使用されるプロパティを指定します。`displayKey` に値が指定されていない場合、コンボは指定された (存在する場合) を使用します。 +- `displayKey` - オブジェクト配列に必要 - 項目のテキストに使用されるプロパティを指定します。`displayKey` に値が指定されていない場合、コンボは指定された (存在する場合) を使用します。 選択の変更を処理するには、`onChange` イベントが必要です。発行されたイベント引数には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。したがって、前のコンボの選択に基づいて値をフィルタリングします。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx index 9d9a01165f..95d435f9df 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx @@ -44,7 +44,7 @@ Ignite UI for {Platform} {ComponentTitle} には、同じ値を持つ隣接セ ### グリッド結合モード -グリッドは、 列挙型の値を受け入れる `cellMergeMode` プロパティを公開します。 +グリッドは、 列挙型の値を受け入れる `cellMergeMode` プロパティを公開します。 - `always` - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。 - `onSort` - 列がソートされているときのみ隣接セルを結合 **(デフォルト値)**。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx index c9be061f67..4cfb50ec4f 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx @@ -42,7 +42,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 制限 -- カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。**paste** イベント (IE 11) は発生されますが、イベントの プロパティを公開しません。 +- カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。**paste** イベント (IE 11) は発生されますが、イベントの プロパティを公開しません。 IE 11のセルを**コピー**するためには、キーボード選択を使用できます。複数セルを選択するには SHIFT キー を押しながらコピーするには CTRL + C を押します。 @@ -59,23 +59,23 @@ You can use a custom paste handler in order to configure **paste** behavior, hav ## API の使用 -次のオプションを処理する プロパティを公開します。 -- は選択したセルのコピーを有効または無効にします。 -- は、コピー時に関連付けられているヘッダーを含めます。 -- は、既存の列フォーマッタをコピーしたデータに適用します。 -- は、クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは `/t` です。 +次のオプションを処理する プロパティを公開します。 +- は選択したセルのコピーを有効または無効にします。 +- は、コピー時に関連付けられているヘッダーを含めます。 +- は、既存の列フォーマッタをコピーしたデータに適用します。 +- は、クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは `/t` です。 Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。 -- `GridCopy` は、コピー操作が実行されたときに発生します。 を使用してコピー動作が有効になっている場合のみ発生します。 +- `GridCopy` は、コピー操作が実行されたときに発生します。 を使用してコピー動作が有効になっている場合のみ発生します。 ## API リファレンス
-
+
## Additional Resources diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx index 418cdcb0da..600216a2ec 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx @@ -79,7 +79,7 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => { ## 概要 -**列移動**機能は各列レベルで有効にできます。つまり、 に移動可能な列または移動不可の列の両方を含むことができます。 の 入力によって制御されます。 +**列移動**機能は各列レベルで有効にできます。つまり、 に移動可能な列または移動不可の列の両方を含むことができます。 の 入力によって制御されます。 ```html @@ -149,7 +149,7 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => { ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる API メソッドも用意されています。 - - 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 value), which determines whether to place the column before or after the target column. + - 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 value), which determines whether to place the column before or after the target column. ```typescript @@ -172,7 +172,7 @@ grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget); ``` - - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター `Position` (`DropPosition` 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。 + - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター `Position` (`DropPosition` 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。 ```typescript diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx index 7e760c8613..68c6f8704c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx @@ -41,7 +41,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 基本的な使用方法 -列選択機能は、 値を受け取る `ColumnSelection` 入力によって有効にすることができます。 +列選択機能は、 値を受け取る `ColumnSelection` 入力によって有効にすることができます。 ## インタラクション 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 2cab1e6bdb..5edee378e4 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 @@ -40,7 +40,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ### Number (数値) - が **number** に設定されている場合、セル値はアプリケーションまたはグリッドの 設定に基づいて書式設定され、 プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します: + が **number** に設定されている場合、セル値はアプリケーションまたはグリッドの 設定に基づいて書式設定され、 プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します: - 小数点後の桁数。 - `,` または `.` の少数桁の区切り文字 @@ -106,7 +106,7 @@ const formatOptions : IgrColumnPipeArgs = { ### DateTime、Date and Time (日付と時刻) -日付部分の外観は、 の形式または 入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。 +日付部分の外観は、 の形式または 入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。 - **format** - 日付の書式設定のデフォルト値は `'mediumDate'` です。その他の利用可能なオプション `'short'`、`'long'`、`'shortDate'`、`'fullDate'`、`'longTime'`、`'fullTime'` などです。 - **timezone** - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例: @@ -332,7 +332,7 @@ const timeFormats = [ #### デフォルトのテンプレート -デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。通貨記号の位置と数値の書式設定は、提供された Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) または {ComponentTitle} の に基づいています。 +デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。通貨記号の位置と数値の書式設定は、提供された Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) または {ComponentTitle} の に基づいています。 *LOCALE_ID を使用する場合:* 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 0f2c6bd219..3b4964a5bd 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx @@ -78,14 +78,14 @@ All available column data types could be found in the official [Column types top | イベント | 説明 | 引数 | キャンセル可能 | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | - | `RowEditEnter` | `RowEditing` が有効な場合、行が編集モードに入るときに発生します。 | | **true** | - | `CellEditEnter` |セルが**編集モードに入る**ときに発生します。 (`RowEditEnter` の後) | | **true** | - | `CellEdit` | 値が変更された場合、セルの値が**コミットされた前に**発生します。 (ENTER の押下など) | | **true** | - | `CellEditDone` | 値が変更された場合、セルが編集され、セルの値が**コミットされた後に**発生します。 | | **false** | - | `CellEditExit` | セルが**編集モードを終了した**ときに発生します。| | **false** | - | `RowEdit` | が有効な場合、編集モードの値の行が**コミットされた前に**発生します (行編集オーバーレイの [完了] ボタンをクリックなど)。 | | **true** | - | `RowEditDone` | が有効な場合、行が編集され、新しい行の値が**コミットされた後に**発生します。 | | **false** | - | `RowEditExit` | が有効な場合、行が**編集モードを終了した**ときに発生します。 | | **false** | + | `RowEditEnter` | `RowEditing` が有効な場合、行が編集モードに入るときに発生します。 | | **true** | + | `CellEditEnter` |セルが**編集モードに入る**ときに発生します。 (`RowEditEnter` の後) | | **true** | + | `CellEdit` | 値が変更された場合、セルの値が**コミットされた前に**発生します。 (ENTER の押下など) | | **true** | + | `CellEditDone` | 値が変更された場合、セルが編集され、セルの値が**コミットされた後に**発生します。 | | **false** | + | `CellEditExit` | セルが**編集モードを終了した**ときに発生します。| | **false** | + | `RowEdit` | が有効な場合、編集モードの値の行が**コミットされた前に**発生します (行編集オーバーレイの [完了] ボタンをクリックなど)。 | | **true** | + | `RowEditDone` | が有効な場合、行が編集され、新しい行の値が**コミットされた後に**発生します。 | | **false** | + | `RowEditExit` | が有効な場合、行が**編集モードを終了した**ときに発生します。 | | **false** | ### イベントのキャンセル 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 ea5f032eed..c19a0411a3 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx @@ -127,7 +127,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 使用方法 -デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。 には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された に基づいて、適切な**フィルタリング処理**のセットがフィルター UI ドロップダウンに読み込まれます。また、 と最初の プロパティを設定できます。 +デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。 には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された に基づいて、適切な**フィルタリング処理**のセットがフィルター UI ドロップダウンに読み込まれます。また、 と最初の プロパティを設定できます。 フィルタリング機能は、`AllowFiltering` 入力を **true** に設定すると コンポーネントで有効になります。デフォルトの `FilterMode` は `QuickFilter` でランタイムでは**変更できません**。特定の列でこの機能を無効にするには、 入力を **false** に設定します。 @@ -897,7 +897,7 @@ $custom-grid: grid-theme( - - the name of the column to be filtered. - `Value` - the value to be used for filtering. - `ConditionOrExpressionTree` (optional) - this parameter accepts object of type or . If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. - - (optional) - whether the filtering is case sensitive or not. + - (optional) - whether the filtering is case sensitive or not. - `FilteringDone` event now have only one parameter of type which contains the filtering state of the filtered column. - filtering operands: condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an . - `ColumnComponent` now exposes a property, which takes an class reference. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx index 52983313c9..91aae077dd 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx @@ -128,7 +128,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - ALT + ← または ALT + ↑ - マスター/詳細行で詳細ビューを縮小します。 - ALT + → または ALT + ↓ - マスター/詳細行で詳細ビューを展開します。 -- SPACE - グループ行上 - プロパティが複数に設定されている場合、グループ内のすべての行を選択します。 +- SPACE - グループ行上 - プロパティが複数に設定されている場合、グループ内のすべての行を選択します。 以下のデモサンプルで上記のすべての操作を実行できます。ナビゲーション可能なグリッド要素をフォーカスすると、利用可能な操作のリストが表示されます。 @@ -179,14 +179,14 @@ Practice all of the above mentioned actions in the demo sample below. Focus any | `GridKeydown` | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown` イベントを使用します。 | | | `ActiveNodeChange` | アクティブ ノードが変更されたときに発行されるイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。 | | | | 提供された `Rowindex` と `VisibleColumnIndex` に基づいてグリッド内の位置に移動します。```{ targetType: GridKeydownTargetType, target: Object }``` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
```grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });``` | ```RowIndex: number, VisibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }```) => {} | -| | `RowIndex` と `VisibleColumnIndex` で次のセルを定義する `ICellPosition` オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
```const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);``` | ```currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean``` | -| | `RowIndex` と `VisibleColumnIndex` で前のセルを定義する `ICellPosition` オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
```const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);``` | ``` CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean ``` | +| | `RowIndex` と `VisibleColumnIndex` で次のセルを定義する `ICellPosition` オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
```const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);``` | ```currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean``` | +| | `RowIndex` と `VisibleColumnIndex` で前のセルを定義する `ICellPosition` オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
```const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);``` | ``` CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean ``` |
- および は現在のレベルで使用し、上位または下位レベルのセルにアクセスできません。 + および は現在のレベルで使用し、上位または下位レベルのセルにアクセスできません。 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 fa43d0a286..1d147ef328 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 @@ -72,7 +72,7 @@ BLAZOR CODE SNIPPET HERE ``` -When requesting data, you need to utilize the interface, which provides the and properties. +When requesting data, you need to utilize the interface, which provides the and properties. The first will always be 0 and should be determined by you based on the specific application scenario. @@ -98,7 +98,7 @@ The first および プロパティを提供する `IForOfState` インターフェイスを使用できます。 +データを要求する際に および プロパティを提供する `IForOfState` インターフェイスを使用できます。 ```html @@ -138,7 +138,7 @@ public processData(reset) { -最初の は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。 +最初の は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。 @@ -235,7 +235,7 @@ BLAZOR CODE SNIPPET HERE エンドポイントからデータを分割して取得するシナリオの一般的なデザインは、無限スクロールです。データ グリッドの場合、エンドユーザーが一番下までスクロールすることによってトリガーされたロードデータが連続的に増加します。次の段落では、使用可能な API を使用して で無限スクロールを簡単に実現する方法について説明します。 -無限スクロールを実装するには、データを分割してフェッチする必要があります。すでにフェッチされたデータはローカルに保存し、チャンクの長さおよび数を決定する必要があります。また、グリッドで最後に表示されるデータ行インデックスを追跡する必要があります。このように、 と プロパティを使用して、ユーザーが上にスクロールして既にフェッチしたデータを表示するか、下にスクロールしてエンドポイントからさらにデータをフェッチする必要があるかを決定できます。 +無限スクロールを実装するには、データを分割してフェッチする必要があります。すでにフェッチされたデータはローカルに保存し、チャンクの長さおよび数を決定する必要があります。また、グリッドで最後に表示されるデータ行インデックスを追跡する必要があります。このように、 と プロパティを使用して、ユーザーが上にスクロールして既にフェッチしたデータを表示するか、下にスクロールしてエンドポイントからさらにデータをフェッチする必要があるかを決定できます。 ```typescript public ngAfterViewInit() { @@ -361,7 +361,7 @@ BLAZOR CODE SNIPPET HERE ``` -リモート ソートとフィルタリングが提供される場合、グリッドの組み込みのソートとフィルタリングは必要ありません。グリッドの および 入力をそれぞれのインスタンスの `NoopSortingStrategy` および に設定して、無効にできます。 +リモート ソートとフィルタリングが提供される場合、グリッドの組み込みのソートとフィルタリングは必要ありません。グリッドの および 入力をそれぞれのインスタンスの `NoopSortingStrategy` および に設定して、無効にできます。 ```html @@ -407,7 +407,7 @@ When remote data is requested, the filtering operation is case-sensitive. また、**rxjs** `debounceTime` 関数を使用します。この関数は、特定の期間の経過後、別のソースが出力されない場合にのみ、Observable のソースから値を出力します。この方法では、ユーザーが中断することなく指定された時間が経過した場合にのみ、リモート操作がトリガーされます。 -リモート フィルタリングが提供される場合、ツリー グリッドの組み込みのフィルタリングは必要ありません。ツリー グリッドの 入力を `NoopFilteringStrategy` インスタンスに設定して、無効にできます。 +リモート フィルタリングが提供される場合、ツリー グリッドの組み込みのフィルタリングは必要ありません。ツリー グリッドの 入力を `NoopFilteringStrategy` インスタンスに設定して、無効にできます。 リモート フィルタリングは、フラット コレクションで直接実行する必要があります。また、親がフィルターに一致するかどうかにかかわらず、フィルター条件に一致するすべてのレコードにすべての親を含める必要があります (階層をそのままにするためにこれを行います)。結果は以下で確認できます。 @@ -785,7 +785,7 @@ export class RemoteService { - - それぞれの列インスタンス。 -- - フィルタリング式ツリー。各列に基づいて削減されます。 +- - フィルタリング式ツリー。各列に基づいて削減されます。 - `Done` - サーバーから取得されたときに、新しく生成された列値で呼び出されるコールバック。 @@ -1296,7 +1296,7 @@ next set up the method for loading the data: -開発者は、 と 引数によって提供される情報に基づいて、必要な一意の列値を手動で生成し、`Done` コールバックを呼び出すことができます。 +開発者は、 と 引数によって提供される情報に基づいて、必要な一意の列値を手動で生成し、`Done` コールバックを呼び出すことができます。 ```tsx function gridCreated(event: IgrGridCreatedEventArgs, parentKey: string) { 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 be6fc72ff4..646a2398e7 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 @@ -382,13 +382,29 @@ export class AppModule {} > **注**: -> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ を使用して、ボタンが表示するレコードを調整できます。 +> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ + + + + + + + + を使用して、ボタンが表示するレコードを調整できます。 > **注**: -> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。 +> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ + + + + + + + +) を使用して、ボタンが表示するレコードを調整できます。 @@ -652,4 +668,4 @@ igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { コミュニティに参加して新しいアイデアをご提案ください。 - [{ProductName} **フォーラム (英語)**]({ForumsLink}) -- [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file +- [{ProductName} **GitHub (英語)**]({GithubLink}) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx index 1e7f7d5e15..06d0e890df 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx @@ -689,8 +689,21 @@ $custom-grid-theme: grid-theme( ## API リファレンス
-
-
+ + + + + +
+ + + + + + + + +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx index aecb5d29ae..e5e34fd983 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx @@ -39,9 +39,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 設定 -で項目の選択を設定するには、その プロパティを設定する必要があります。このプロパティは、 列挙を受け取ります。 +で項目の選択を設定するには、その プロパティを設定する必要があります。このプロパティは、 列挙を受け取ります。 - exposes the following modes: + exposes the following modes: `GridSelectionMode` は以下のモードを公開します。 @@ -56,11 +56,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ### None 選択 - では、デフォルトで行選択が無効になります。( は None です。)したがって、UI とのインタラクションを通じて行を選択または選択解除することは**できません**が、選択/選択解除する唯一の方法は、提供された API メソッドを使用することです。 + では、デフォルトで行選択が無効になります。( は None です。)したがって、UI とのインタラクションを通じて行を選択または選択解除することは**できません**が、選択/選択解除する唯一の方法は、提供された API メソッドを使用することです。 ### 単一選択 -単一行の選択は、 プロパティ を `Single` に設定することのみで簡単に設定できるようになりました。これにより、**グリッド内の 1 行のみを選択できます**。行のセルにフォーカスするときにセルをクリックするか SPACE キーを押すと行を選択できます。もちろん、行セレクターフィールドをクリックして行を選択できます。行が選択または選択解除されると、`RowSelectionChanging` イベントが生成されます。 +単一行の選択は、 プロパティ を `Single` に設定することのみで簡単に設定できるようになりました。これにより、**グリッド内の 1 行のみを選択できます**。行のセルにフォーカスするときにセルをクリックするか SPACE キーを押すと行を選択できます。もちろん、行セレクターフィールドをクリックして行を選択できます。行が選択または選択解除されると、`RowSelectionChanging` イベントが生成されます。 ```html @@ -130,7 +130,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { ### 複数選択 - で複数の項目を選択できるようにするには、 プロパティを `Multiple` に設定するだけです。これにより、各行および ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用して複数行を選択できます。選択はスクロール、ページング、およびソートとフィルター、などのデータ操作で保持されます。行を選択するには、セルをクリックするか、セルにフォーカスがあるときに SPACE キーを押します。1 つの行を選択し、SHIFT キーを押しながら別の行をクリックすると、行の範囲全体が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。CTRL キーを押しながらクリックすると、行が切り替わり、前の選択が保持されます。 + で複数の項目を選択できるようにするには、 プロパティを `Multiple` に設定するだけです。これにより、各行および ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用して複数行を選択できます。選択はスクロール、ページング、およびソートとフィルター、などのデータ操作で保持されます。行を選択するには、セルをクリックするか、セルにフォーカスがあるときに SPACE キーを押します。1 つの行を選択し、SHIFT キーを押しながら別の行をクリックすると、行の範囲全体が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。CTRL キーを押しながらクリックすると、行が切り替わり、前の選択が保持されます。 ```html @@ -173,7 +173,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { ### カスケード選択 - で複数の項目を選択できるようにするには、 プロパティを `MultipleCascade` に設定するだけです。これにより、各行および ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用すると、ユーザーは複数の行を選択して、下のツリーのすべての子を選択できます。選択は、スクロール、ページング、およびソートやフィルタリングなどのデータ操作を通じて保持されます。行は、セルをクリックするか、セルがフォーカスされているときに SPACE キーを押すことによっても選択できます。1 つの行を選択し、SHIFT キーを押しながら別の行をクリックすると、親レコードの選択を通じて選択した範囲内にない場合でも、そのすべての子が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。CTRL キーを押しながらクリックすると、行とその子が切り替えられ、前の選択が保持されます。 + で複数の項目を選択できるようにするには、 プロパティを `MultipleCascade` に設定するだけです。これにより、各行および ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用すると、ユーザーは複数の行を選択して、下のツリーのすべての子を選択できます。選択は、スクロール、ページング、およびソートやフィルタリングなどのデータ操作を通じて保持されます。行は、セルをクリックするか、セルがフォーカスされているときに SPACE キーを押すことによっても選択できます。1 つの行を選択し、SHIFT キーを押しながら別の行をクリックすると、親レコードの選択を通じて選択した範囲内にない場合でも、そのすべての子が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。CTRL キーを押しながらクリックすると、行とその子が切り替えられ、前の選択が保持されます。 ```html @@ -227,7 +227,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { -- 行選択およびセル選択を正しく実行するには、 にリモート仮想化がある場合、 を設定します。 +- 行選択およびセル選択を正しく実行するには、 にリモート仮想化がある場合、 を設定します。 - でリモート仮想化を使用した場合、ヘッダーのチェックボックスをクリックすると、現在グリッドにあるすべてのレコードが選択/選択解除されます。新しいデータがオンデマンドで にロードされると、新、しく追加された行は選択されない制限があるため、これらの行を選択するには API メソッドを使用して動作を処理する必要があります。 @@ -235,7 +235,7 @@ const handleRowSelection = (args: IgrRowSelectionEventArgs) => { ### コードで行を選択 -以下は、単一または複数の行を同時に選択できるコード例です ( を介して)。さらに、このメソッドの 2 番目のパラメーターは boolean プロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。 +以下は、単一または複数の行を同時に選択できるコード例です ( を介して)。さらに、このメソッドの 2 番目のパラメーターは boolean プロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。 ```html @@ -310,7 +310,7 @@ function onClickSelect() { ### 行選択の解除 -プログラムで行を選択解除する必要がある場合は、 メソッドを使用できます。 +プログラムで行を選択解除する必要がある場合は、 メソッドを使用できます。 ```html @@ -458,7 +458,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => { が提供するもう 1 つの便利な API メソッドが です。このメソッドはデフォルトですべてのデータ行を選択しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみが選択されます。ただし、*false* パラメーターを指定してメソッドを呼び出すと、`SelectAllRows(false)` は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータを選択します。 -> **注:** は削除された行を選択しないことに注意してください。 +> **注:** は削除された行を選択しないことに注意してください。 ### 全行の選択解除 @@ -466,7 +466,7 @@ const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => { ### 選択した行を取得する方法 -現在選択されている行を確認する必要がある場合は、 ゲッターを使用して行 ID を取得できます。 +現在選択されている行を確認する必要がある場合は、 ゲッターを使用して行 ID を取得できます。 ```ts @@ -508,7 +508,7 @@ function getSelectedRows() { ``` -さらに、 に行 ID を割り当てると、グリッドの選択状態を変更できます。 +さらに、 に行 ID を割り当てると、グリッドの選択状態を変更できます。 @@ -566,14 +566,14 @@ const mySelectedRows = [1,2,3]; でヘッダーおよび行セレクターをテンプレート化し、さまざまなシナリオに役立つ機能を提供するコンテキストにアクセスすることもできます。 -デフォルトでは、 は、行セレクターの親コンテナまたは行自体の**すべての行選択操作を処理し**、テンプレートの状態の可視化のみになります。基本機能のオーバーライドは通常、[RowSelectionChanging イベント](#行選択イベント)を使用して実行する必要があります。基本機能をオーバーライドする ハンドラーを使用してカスタムテンプレートを実装する場合、イベントの伝播を停止して、正しい行の状態を保持する必要があります。 +デフォルトでは、 は、行セレクターの親コンテナまたは行自体の**すべての行選択操作を処理し**、テンプレートの状態の可視化のみになります。基本機能のオーバーライドは通常、[RowSelectionChanging イベント](#行選択イベント)を使用して実行する必要があります。基本機能をオーバーライドする ハンドラーを使用してカスタムテンプレートを実装する場合、イベントの伝播を停止して、正しい行の状態を保持する必要があります。 #### 行テンプレート -カスタム行セレクター テンプレートを作成するには、`{ComponentSelector}` 内で プロパティを使用できます。テンプレートから、行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。 +カスタム行セレクター テンプレートを作成するには、`{ComponentSelector}` 内で プロパティを使用できます。テンプレートから、行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。 - プロパティは現在の行が選択されているかどうかを示し、 プロパティは行インデックスにアクセスするために使用できます。 + プロパティは現在の行が選択されているかどうかを示し、 プロパティは行インデックスにアクセスするために使用できます。 ```html @@ -653,7 +653,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { ``` - プロパティを使用して、`{ComponentSelector}` 行の参照を取得できます。行セレクター要素に `click` ハンドラーを実装する場合に便利です。 + プロパティを使用して、`{ComponentSelector}` 行の参照を取得できます。行セレクター要素に `click` ハンドラーを実装する場合に便利です。 ```html @@ -690,7 +690,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { ``` -上の例では、 を使用しており、`rowContext.selected` をその プロパティにバインドしています。[行番号のデモ](#行の番号付けデモ)で実際にこれをご覧ください。 +上の例では、 を使用しており、`rowContext.selected` をその プロパティにバインドしています。[行番号のデモ](#行の番号付けデモ)で実際にこれをご覧ください。 @@ -700,9 +700,9 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { ### ヘッダー テンプレート -カスタム行ヘッダー セレクター テンプレートを作成するには、 内で プロパティを使用します。テンプレートから、ヘッダーの状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。 +カスタム行ヘッダー セレクター テンプレートを作成するには、 内で プロパティを使用します。テンプレートから、ヘッダーの状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。 - プロパティは現在選択されている行数を示し、 は に合計の行数を示します。 + プロパティは現在選択されている行数を示し、 は に合計の行数を示します。 ```html @@ -742,7 +742,7 @@ public RenderFragment Template = (context) => ``` - および プロパティを使用して、ヘッド セレクターをチェックするか、不確定にする（部分的に選択する）かを決定できます。 + および プロパティを使用して、ヘッド セレクターをチェックするか、不確定にする（部分的に選択する）かを決定できます。 @@ -828,7 +828,7 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => { ### 行の番号付けデモ -このデモでは、カスタム ヘッダーと行セレクターの使用方法を示します。後者は、`RowContext.Index` を使用して行番号と、`RowContext.Selected` にバインドされた を表示します。 +このデモでは、カスタム ヘッダーと行セレクターの使用方法を示します。後者は、`RowContext.Index` を使用して行番号と、`RowContext.Selected` にバインドされた を表示します。 @@ -856,9 +856,9 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {

-
-
-
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx index eddd2aa31b..2f3ec1d4c6 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx @@ -286,7 +286,7 @@ hierarchicalGridRef.current.sort([ -Sorting は、 アルゴリズムを使用して実行されます。 または `ISortingExpression` は、代替アルゴリズムとして `ISortingStrategy` のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。 +Sorting は、 アルゴリズムを使用して実行されます。 または `ISortingExpression` は、代替アルゴリズムとして `ISortingStrategy` のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。 フィルター動作と同様に、ソート状態をクリアするには `ClearSort` メソッドを使用します。 @@ -928,7 +928,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { ## API リファレンス
-
+
Our community is active and always welcoming to new ideas. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx index c2ced2af3d..1c3aa5edab 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx @@ -57,25 +57,25 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -- -- +- +- - - -- -- - - Pivot Configuration properties defined by the interface. +- +- + - Pivot Configuration properties defined by the interface. - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.md#restoring-pivot-strategies) section. -- -- +- +- - - -- -- - - Pivot Configuration properties defined by the interface. +- +- + - Pivot Configuration properties defined by the interface. - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. @@ -297,7 +297,7 @@ gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0]) ``` - オブジェクトは、`IGridStateOptions` インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。 メソッドはこれらの機能の状態を戻り値に入れず、`SetState` メソッドはその状態を復元しません。 + オブジェクトは、`IGridStateOptions` インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。 メソッドはこれらの機能の状態を戻り値に入れず、`SetState` メソッドはその状態を復元しません。 ```typescript @@ -669,7 +669,7 @@ public void OnColumnInit(IgbColumnComponentEventArgs args) - `DimensionInit` および `ValueInit` イベントのイベント ハンドラーを割り当てます。 -> `DimensionInit` および `ValueInit` イベントは、 プロパティで定義された値とディメンションごとに発行されます。 +> `DimensionInit` および `ValueInit` イベントは、 プロパティで定義された値とディメンションごとに発行されます。 ```typescript @@ -857,7 +857,7 @@ public onDimensionInit(event: any) { ## 子グリッドの復元 -子グリッドの状態の保存/復元は、 プロパティによって制御され、デフォルトで有効に設定されています。 は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合: +子グリッドの状態の保存/復元は、 プロパティによって制御され、デフォルトで有効に設定されています。 は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合: ``` html @@ -905,7 +905,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; - API は、`Selection` と を除くすべてのグリッド (ルート グリッドと子グリッド) 機能の状態を返します。開発者が後ですべてのグリッドの 状態のみを復元するには、以下を使用します。 + API は、`Selection` と を除くすべてのグリッド (ルート グリッドと子グリッド) 機能の状態を返します。開発者が後ですべてのグリッドの 状態のみを復元するには、以下を使用します。 ```typescript @@ -920,7 +920,7 @@ state.applyState(state, ['filtering', 'rowIslands']); -Then the API will return the state for all grids (root grid and child grids) features excluding `Selection` and . If later on the developer wants to restore only the state for all grids, use: +Then the API will return the state for all grids (root grid and child grids) features excluding `Selection` and . If later on the developer wants to restore only the state for all grids, use: ```razor gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" }); @@ -1068,15 +1068,15 @@ Add snippet for blazor for restore state -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the directive will ignore the columns , , , , , , and properties. +- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the directive will ignore the columns , , , , , , and properties. -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. +- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. +- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. @@ -1092,9 +1092,9 @@ Add snippet for blazor for restore state

-
-
-
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx index 3bcab2a6d9..db6f29c0e8 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx @@ -46,7 +46,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - Earliest - Latest - summaries are enabled per-column by setting property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid and column . + summaries are enabled per-column by setting property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid and column . @@ -506,7 +506,7 @@ const disableSummary = () => { これらの機能が要件を満たさない場合は、カスタム集計を提供できます。 -In order to achieve this you have to override one of the base classes , or according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. class provides the default implementation only for the method. extends and provides implementation for the , , and . extends and additionally gives you and . +In order to achieve this you have to override one of the base classes , or according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. class provides the default implementation only for the method. extends and provides implementation for the , , and . extends and additionally gives you and . @@ -630,9 +630,9 @@ class PtoSummary { -これを実現するには、列のデータ型とニーズに応じて、基本クラス 、、または のいずれかをオーバーライドする必要があります。このように既存の関数を再定義、または新しい関数を追加できます。 クラスは、 メソッドに対してのみデフォルトの実装を提供します。 は を拡張し、、、、および の実装を提供します。 は を拡張し、さらに特定の列の と を提供します。 +これを実現するには、列のデータ型とニーズに応じて、基本クラス 、、または のいずれかをオーバーライドする必要があります。このように既存の関数を再定義、または新しい関数を追加できます。 クラスは、 メソッドに対してのみデフォルトの実装を提供します。 は を拡張し、、、、および の実装を提供します。 は を拡張し、さらに特定の列の と を提供します。 -例で見られるように、基本クラスは メソッドを公開しているため、すべてのデフォルトの集計を取得して結果を変更するか、まったく新しい集計結果を計算するかを選択できます。 +例で見られるように、基本クラスは メソッドを公開しているため、すべてのデフォルトの集計を取得して結果を変更するか、まったく新しい集計結果を計算するかを選択できます。 ```typescript @@ -654,7 +654,7 @@ interface IgcSummaryResult { ``` -このメソッドは のリストを返します。 +このメソッドは のリストを返します。 そして、集計を計算するためのオプションのパラメーターを受け取ります。 以下の[すべてのデータにアクセスするカスタム集計](#すべてのデータにアクセスするカスタム集計)セクションを参照してください。 @@ -855,7 +855,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { ### すべてのデータにアクセスするカスタム集計 -カスタム列集計内のすべての {ComponentTitle} データにアクセスできます。SummaryOperand メソッドには、2 つの追加のオプション パラメーターが導入されています。 +カスタム列集計内のすべての {ComponentTitle} データにアクセスできます。SummaryOperand メソッドには、2 つの追加のオプション パラメーターが導入されています。 以下のコード スニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。 - columnData - 現在の列の値のみを含む配列を提供します。 - allGridData - グリッド データソース全体を提供します。 @@ -1179,7 +1179,7 @@ igRegisterScript("SummaryTemplate", (ctx) => { ## 集計のフォーマット -デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド および列 に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、 と は適用されません。集計結果のデフォルトの外観を変更する場合は、 プロパティを使用してフォーマットできます。 +デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド および列 に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、 と は適用されません。集計結果のデフォルトの外観を変更する場合は、 プロパティを使用してフォーマットできます。 ```typescript public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { @@ -1261,14 +1261,14 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO 以下は使用できる プロパティの値です: -- - ルート レベルのみ集計が計算されます。 -- - 子レベルのみ集計が計算されます。 -- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 +- - ルート レベルのみ集計が計算されます。 +- - 子レベルのみ集計が計算されます。 +- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 以下は使用できる プロパティの値です。 -- - 集計行はグループ列の子の前に表示されます。 -- - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。 +- - 集計行はグループ列の子の前に表示されます。 +- - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。 プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。 @@ -1289,14 +1289,14 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO 以下は使用できる プロパティの値です: -- - ルート レベルのノードのみ集計が計算されます。 -- - 子レベルのみ集計が計算されます。 -- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 +- - ルート レベルのノードのみ集計が計算されます。 +- - 子レベルのみ集計が計算されます。 +- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 以下は使用できる プロパティの値です。 -- - 集計行は子行のリストの前に表示されます。 -- - 集計行は子行のリストの後に表示されます。これがデフォルト値です。 +- - 集計行は子行のリストの前に表示されます。 +- - 集計行は子行のリストの後に表示されます。これがデフォルト値です。 プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、親行が縮小されたときに、集計行は表示されたままになります。 @@ -1520,9 +1520,9 @@ Don't forget to include the themes in the same way as it was demonstrated above.

-
-
-
+
+
+
 ## スタイル設定 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx index 75c1be63db..33ecae9f26 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx @@ -51,7 +51,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ### リアクティブ フォームで構成する -`formGroupCreated` イベントを介して行/セルで編集を開始するときに検証に使用する を公開します。関連するフィールドに独自の検証を追加して変更できます。 +`formGroupCreated` イベントを介して行/セルで編集を開始するときに検証に使用する を公開します。関連するフィールドに独自の検証を追加して変更できます。 ```html @@ -117,7 +117,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 検証は以下のシナリオでトリガーされます。 -- グリッドの に基づくセルエディターでの編集中。エディター入力中の変更時 (`Change`)、またはエディターがフォーカスを失うか (`Blur`) 閉じた場合。 +- グリッドの に基づくセルエディターでの編集中。エディター入力中の変更時 (`Change`)、またはエディターがフォーカスを失うか (`Blur`) 閉じた場合。 - `UpdateRow`、`UpdateCell` などの API を使用してセル / 行を更新する場合 。 - トランザクション サービスの一括編集および `Undo`/`Redo` API を使用する場合。 @@ -196,7 +196,7 @@ export class PhoneFormatDirective extends Validators { 場合によっては、1 つのフィールドの検証がレコード内の別のフィールドの値に依存することがあります。 -その場合、カスタム検証を使用して共有 を介してレコード内の値を比較できます。 +その場合、カスタム検証を使用して共有 を介してレコード内の値を比較できます。 The below sample demonstrates a cross-field validation between different field of the same record. It checks the dates validity compared to the current date and between the active and created on date of the record as well as the deals won/lost ration for each employee. All errors are collected in a separate pinned column that shows that the record is invalid and displays the related errors. @@ -251,7 +251,7 @@ public calculateDealsRatio(dealsWon, dealsLost) { ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html @@ -451,7 +451,7 @@ private rowValidator(): ValidatorFn { } ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html +{Platform} Data Grid を初期化するには、{PackageCommon} パッケージをインストールする必要があります。 + IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 +{Platform} Data Grid を初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。 + - [作業の開始](../general-getting-started-blazor-client.md) - [NuGet パッケージの追加](../general-nuget-feed.md) @@ -58,6 +61,8 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック +{Platform} Data Grid を初期化するには、`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 + また、グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: @@ -540,7 +545,7 @@ function nameCellTemplate(ctx: IgrCellTemplateContext) { -上記のスニペットで暗示的に提供されたセル値への参照を取得します。データを表示し、セルの値にカスタム スタイル設定およびパイプ変換を適用する場合に使用します。ただし、 インスタンスを以下のように使用するとより効果的です。 +上記のスニペットで暗示的に提供されたセル値への参照を取得します。データを表示し、セルの値にカスタム スタイル設定およびパイプ変換を適用する場合に使用します。ただし、 インスタンスを以下のように使用するとより効果的です。 @@ -719,7 +724,7 @@ function formatTitleCase(value) { -適切に実装されると、セル編集テンプレートは、セルの がグリッド[編集イベント サイクル](grid/editing.md#イベントの引数とシーケンス)を正しく渡します。 +適切に実装されると、セル編集テンプレートは、セルの がグリッド[編集イベント サイクル](grid/editing.md#イベントの引数とシーケンス)を正しく渡します。 ### セル編集テンプレート @@ -819,7 +824,7 @@ function updateValue(event, value) { -テンプレートで使用可能なプロパティの詳細については、 の API を参照してください。 +テンプレートで使用可能なプロパティの詳細については、 の API を参照してください。 ### 列テンプレート API @@ -1039,9 +1044,9 @@ function initColumns(event: CustomEvent) { 書式設定のためのオプションのパラメーターがあります: -- - 表示される日付 / 時間部分を決定します。デフォルト `'mediumDate'` です (**'MMM d, y'**)。 -- - 日付のタイムゾーン オフセット。デフォルトでは、エンドユーザーのローカル システムのタイムゾーンを使用します。 -- - 10 進表現オブジェクト。デフォルトの設定は **1.0-3** です。 +- - 表示される日付 / 時間部分を決定します。デフォルト `'mediumDate'` です (**'MMM d, y'**)。 +- - 日付のタイムゾーン オフセット。デフォルトでは、エンドユーザーのローカル システムのタイムゾーンを使用します。 +- - 10 進表現オブジェクト。デフォルトの設定は **1.0-3** です。 これらのパラメーターによって表示形式をカスタマイズできるようにするには、 入力公開します。 が設定されている場合、列はそのデータ型の対応するプロパティのみに遵守します。例: @@ -1128,7 +1133,7 @@ const columnPipeArgs: IgrColumnPipeArgs = { -`OrderDate` 列は および プロパティのみに遵守しますが、`UnitPrice` は のみに遵守します。 +`OrderDate` 列は および プロパティのみに遵守しますが、`UnitPrice` は のみに遵守します。 すべての利用可能な列データ型は、公式の[列タイプ トピック](grid/column-types.md#デフォルトのテンプレート)にあります。 @@ -1895,7 +1900,7 @@ igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => { ### フラット データの操作の概要 -フラット データ バインディングのアプローチは既に説明したものと似ていますが、**セル値**の代わりに、 の プロパティを使用します。 +フラット データ バインディングのアプローチは既に説明したものと似ていますが、**セル値**の代わりに、 の プロパティを使用します。 {Platform} グリッドはデータ レコードを**レンダリング**、**操作**、**保存する**ためのコンポーネントのため、**すべてのデータ レコード**へアクセスすることで、それを処理する方法をカスタマイズすることができます。それには、`data` プロパティを使用します。 @@ -2388,14 +2393,14 @@ platformBrowserDynamic()

-
+


-
-
-
-
+
+
+
+
## テーマの依存関係 diff --git a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx index f1e0043064..4882d4e373 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx @@ -237,9 +237,9 @@ gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ### 展開 / 縮小 API -グループ式の他にグループ行の展開も制御できます。これらは、 のコレクションである、 コンポーネントの別のプロパティ に保存されます。各展開状態は、作成されたフィールド名とグループ化の各レベルで表す値によって一意に定義されます。つまり、識別子は の階層配列です。 +グループ式の他にグループ行の展開も制御できます。これらは、 のコレクションである、 コンポーネントの別のプロパティ に保存されます。各展開状態は、作成されたフィールド名とグループ化の各レベルで表す値によって一意に定義されます。つまり、識別子は の階層配列です。 - で `IGroupByExpandState` のリストを直接 に設定すると展開が変更されます。また、 は、グループ レコード インスタンスまたは行の プロパティによってグループを切り替えるメソッド を公開します。 + で `IGroupByExpandState` のリストを直接 に設定すると展開が変更されます。また、 は、グループ レコード インスタンスまたは行の プロパティによってグループを切り替えるメソッド を公開します。 @@ -364,7 +364,7 @@ this.grid.DeselectRowsInGroup(row.GroupRow); ### グループ行テンプレート -展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートを描画するコンテキストのタイプは です。 +展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートを描画するコンテキストのタイプは です。 たとえば、以下のテンプレートはグループ行集計でより詳細な情報を表示します。 @@ -420,7 +420,7 @@ igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { 上記のように、展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。カスタムの GroupBy 行セレクター テンプレートを作成するには、 ディレクティブを使用します。テンプレートから、Group By 行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。 - プロパティは、現在選択されているグループ レコードの数を示し、 はグループに属するレコードの数を示します。 + プロパティは、現在選択されているグループ レコードの数を示し、 はグループに属するレコードの数を示します。 ```html @@ -467,7 +467,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { - プロパティは、グループ行への参照を返します。 + プロパティは、グループ行への参照を返します。 ```html @@ -515,7 +515,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { - と プロパティを使用して、Group By 行セレクターをチェックするか不確定にする (部分的に選択する) かを決定できます。 + と プロパティを使用して、Group By 行セレクターをチェックするか不確定にする (部分的に選択する) かを決定できます。 @@ -577,7 +577,7 @@ In order to implement custom grouping the data first needs to be sorted appropri -カスタム グループ化を実装するには、まずデータを適切にソートする必要があります。このため、ベース `DefaultSortingStrategy` を拡張するカスタムのソート ストラテジを適用する必要がある場合もあります。データがソートされた後、列または特定のグループ化式に を指定することにより、カスタム グループを決定できます。 +カスタム グループ化を実装するには、まずデータを適切にソートする必要があります。このため、ベース `DefaultSortingStrategy` を拡張するカスタムのソート ストラテジを適用する必要がある場合もあります。データがソートされた後、列または特定のグループ化式に を指定することにより、カスタム グループを決定できます。 ### {Platform} カスタム グループ化の例 diff --git a/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx b/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx index 70f518aca3..7bb026ec71 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx @@ -175,4 +175,4 @@ const masterDetailTemplate = (args: IgrGridMasterDetailContext) => {

-
+
diff --git a/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx index dce4211810..50f35ef500 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx @@ -57,7 +57,7 @@ const dates = data.filter(rec => isDate(rec)); ## API リファレンス
-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx index 87925b1a3f..7105fea962 100644 --- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx @@ -29,15 +29,18 @@ import unfoldLessIconScreenshot from '@xplat-images/unfold_less_icon_screenshot. ### 依存関係 -{Platform} 階層グリッドを初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 +{Platform} 階層グリッドを初期化するには、{PackageCommon} パッケージをインストールする必要があります。 + IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 +{Platform} 階層グリッドを初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。 + - [作業の開始](../../general-getting-started-blazor-client.md) - [NuGet パッケージの追加](../../general-nuget-feed.md) @@ -45,6 +48,8 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック +{Platform} 階層グリッドを初期化するには、`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 + また、階層グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: @@ -609,7 +614,7 @@ function buildUrl(dataState) { ## 行展開インジケーターの表示/非表示 -行がその展開前に子を持つかどうかについての情報を提供する方法がある場合は、 入力プロパティを使用できます。このようにして、展開インジケータを表示するかどうかを示すデータオブジェクトからブール値プロパティを提供できます。 +行がその展開前に子を持つかどうかについての情報を提供する方法がある場合は、 入力プロパティを使用できます。このようにして、展開インジケータを表示するかどうかを示すデータオブジェクトからブール値プロパティを提供できます。 @@ -647,9 +652,9 @@ function buildUrl(dataState) { - プロパティを設定する必要はありません。指定しなかった場合は、各行に展開インジケーターが表示されます。 + プロパティを設定する必要はありません。指定しなかった場合は、各行に展開インジケーターが表示されます。 -さらに、ヘッダーのすべて展開/縮小インジケーターを表示/非表示にする場合は、 プロパティを使用できます。 +さらに、ヘッダーのすべて展開/縮小インジケーターを表示/非表示にする場合は、 プロパティを使用できます。 この UI は、パフォーマンス上の理由からデフォルトで無効になっているため、データが大きいグリッドやロードオンデマンドのグリッドで有効にすることはお勧めしません。 ## 機能 @@ -975,4 +980,4 @@ $custom-theme: grid-theme(


-
+
diff --git a/docs/xplat/src/content/jp/components/grids/list.mdx b/docs/xplat/src/content/jp/components/grids/list.mdx index a94236fd22..1754ce384a 100644 --- a/docs/xplat/src/content/jp/components/grids/list.mdx +++ b/docs/xplat/src/content/jp/components/grids/list.mdx @@ -14,11 +14,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} List (リスト) の概要 -{ProductName} List 要素は、項目のグループを番号の付いた形式または黒丸の付いた形式のいずれかで提示する時に非常に役に立ちます。さまざまなレイアウト要素の配列を含むテキスト アイテムの単純なリスト、またはより複雑なリストを作成できます。 コンポーネントは項目の行を表示し、1 つ以上のヘッダーもサポートします。各リスト項目は完全にテンプレート化可能であり、有効な HTML またはその他のコンポーネントをサポートします。 +{ProductName} List 要素は、項目のグループを番号の付いた形式または黒丸の付いた形式のいずれかで提示する時に非常に役に立ちます。さまざまなレイアウト要素の配列を含むテキスト アイテムの単純なリスト、またはより複雑なリストを作成できます。 コンポーネントは項目の行を表示し、1 つ以上のヘッダーもサポートします。各リスト項目は完全にテンプレート化可能であり、有効な HTML またはその他のコンポーネントをサポートします。 ## {Platform} List の例 -次の例は、名前と電話番号のプロパティを持つ連絡先が入力されたリストを表しています。以下に示す コンポーネントは、 要素と 要素を使用して、ユーザー エクスペリエンスを強化し、テキストと呼び出しアクションのアバター画像とボタンを設定する機能を公開します。 +次の例は、名前と電話番号のプロパティを持つ連絡先が入力されたリストを表しています。以下に示す コンポーネントは、 要素と 要素を使用して、ユーザー エクスペリエンスを強化し、テキストと呼び出しアクションのアバター画像とボタンを設定する機能を公開します。 @@ -54,7 +54,7 @@ npm install {PackageWebComponents} npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrList, IgrListHeader, IgrListItem } from 'igniteui-react'; @@ -65,7 +65,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります。 + を使用する前に、次のように登録する必要があります。 @@ -82,7 +82,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbListModule)); -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -257,7 +257,7 @@ defineComponents(IgcListComponent); ### アバターおよびボタンの追加 -他のコンポーネントのいくつかを コンポーネントと組み合わせて使用して、エクスペリエンスを充実させ、いくつかの機能を追加することができます。名前や電話番号の値の左に画像のアバターを表示できます。さらに、右側にいくつかのボタンを追加して、ユーザーが連絡先にテキスト メッセージを送信したり電話をかけたりできるようにすることができるので、連絡先リスト コンポーネントを更新して、アバターとボタンを表示します。リスト項目のスロットのいくつかを使用することでそれを行うことができます。 +他のコンポーネントのいくつかを コンポーネントと組み合わせて使用して、エクスペリエンスを充実させ、いくつかの機能を追加することができます。名前や電話番号の値の左に画像のアバターを表示できます。さらに、右側にいくつかのボタンを追加して、ユーザーが連絡先にテキスト メッセージを送信したり電話をかけたりできるようにすることができるので、連絡先リスト コンポーネントを更新して、アバターとボタンを表示します。リスト項目のスロットのいくつかを使用することでそれを行うことができます。 @@ -406,9 +406,9 @@ defineComponents(IgcListComponent); -`start` スロットは、リスト項目の他のすべてのコンテンツの前に、ある種のメディアを追加するために使用することを目的としています。ターゲット要素 (この場合は コンポーネント) にも、デフォルトの位置と間隔が提供されます。 +`start` スロットは、リスト項目の他のすべてのコンテンツの前に、ある種のメディアを追加するために使用することを目的としています。ターゲット要素 (この場合は コンポーネント) にも、デフォルトの位置と間隔が提供されます。 -`end` スロットは、switch、button、checkbox などで表される、ある種のアクションまたはメタデータを持つリスト項目に使用することを目的としています。 コンポーネントを使用します。 +`end` スロットは、switch、button、checkbox などで表される、ある種のアクションまたはメタデータを持つリスト項目に使用することを目的としています。 コンポーネントを使用します。 また、ユーザーが `--ig-size` CSS 変数を使用してリストのサイズを変更できるようにしましょう。すべてのサイズ値を表示するために、いくつかのラジオ ボタンを追加します。このようにして、選択されるたびに、リストのサイズを変更します。 @@ -511,7 +511,7 @@ public onRadioChange(e: any) { ## スタイル設定 - はいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。 + はいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。 |名前|説明| |--|--| @@ -542,19 +542,19 @@ igc-list-item::part(subtitle) { -この記事では、 コンポーネントで多くのことを取り上げました。最初に、テキスト項目を含む簡単なリストを作成しました。次に、連絡先項目のリストを作成し、 や などの追加の {ProductName} コンポーネントを使用してそれらに機能を追加しました。最後に、公開された CSS パーツを使用してコンポーネントの外観を変更しました。 +この記事では、 コンポーネントで多くのことを取り上げました。最初に、テキスト項目を含む簡単なリストを作成しました。次に、連絡先項目のリストを作成し、 や などの追加の {ProductName} コンポーネントを使用してそれらに機能を追加しました。最後に、公開された CSS パーツを使用してコンポーネントの外観を変更しました。 ## API リファレンス -
-
+
+




-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx index 0cd3192c7a..f3de1f6f9c 100644 --- a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx @@ -78,17 +78,24 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ### ディメンション構成 -各基本ディメンション構成には、提供された**データ**のフィールドに一致する が必要です。 +各基本ディメンション構成には、提供された**データ**のフィールドに一致する + + + + + が必要です。 複数の兄弟ディメンションを定義できます。これにより、関連する行または列のディメンション領域に、より複雑なネストされたグループが作成されます。 ディメンションは、ドラッグアンドドロップを使用して、対応するチップを介して、ある領域から別の領域に並べ替えたり移動したりできます。 -ディメンションは、 プロパティを介して拡張可能な階層を記述することもできます。例えば: - - - +ディメンションは、 + + + + + プロパティを介して拡張可能な階層を記述することもできます。例えば: @@ -106,9 +113,6 @@ const dimension: IgrPivotDimension = { ``` - - - @@ -126,9 +130,6 @@ const dimension: IgrPivotDimension = { ``` - - - @@ -146,14 +147,17 @@ const dimension: IgrPivotDimension = { ``` - - この場合、ディメンションはグリッドの関連セクション (行または列) にエキスパンダーを描画し、階層の一部として子を展開または縮小ことができます。デフォルトでは、行のディメンションは最初に展開されます。この動作は、ピボット グリッドの プロパティで制御できます。 ### 事前定義されたディメンション ピボット グリッドの一部として、構成を容易にするために、いくつかの追加の事前定義されたディメンションが公開されています: -- +- + + + + + 日付フィールドに使用できます。デフォルトで次の階層を記述します: - すべての期間 - 年 @@ -162,8 +166,6 @@ const dimension: IgrPivotDimension = { - 完全な日付 次のように、行または列に設定できます: - - @@ -180,9 +182,6 @@ const pivotConfiguration: IgrPivotConfiguration = { ``` - - - @@ -195,9 +194,6 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` - - - @@ -210,8 +206,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { ``` - - ```razor @@ -229,8 +223,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { また、階層の特定の部分を有効または無効にするために、2 番目のオプション パラメーターを介してさらにカスタマイズすることもできます。例えば: - - @@ -245,10 +237,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { ``` - - - - @@ -266,9 +254,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { ``` - - - @@ -283,8 +268,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { ``` - - ```razor @@ -307,8 +290,6 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { ``` - - ### 値の構成 値の構成には、提供された**データ**のフィールドに一致する**メンバー**が必要です。または、より複雑なカスタム シナリオ用にカスタム **aggregator** 関数を定義できます。データ フィールドのデータ型に応じて使用できる 4 つの事前定義された集計があります: @@ -322,9 +303,12 @@ public pivotConfigHierarchy: IgcPivotConfiguration = { - `PivotAggregate` - その他のデータ型用。これが基本集計です。 次の集計関数が含まれています: `COUNT`。 -現在の集計関数は、バリューチップのドロップダウンを使用して実行時に変更できます。デフォルトでは、フィールドのデータ型に基づいて使用可能な集計のリストが表示されます。集計のカスタム リストは、 プロパティを介して設定することもできます。例えば: - - +現在の集計関数は、バリューチップのドロップダウンを使用して実行時に変更できます。デフォルトでは、フィールドのデータ型に基づいて使用可能な集計のリストが表示されます。集計のカスタム リストは、 + + + + + プロパティを介して設定することもできます。例えば: @@ -369,9 +353,6 @@ const pivotConfiguration: IgrPivotConfiguration = { ``` - - - @@ -416,9 +397,6 @@ public static totalMax: PivotAggregation = (members, data: any) => { ``` - - - @@ -463,8 +441,6 @@ public static totalMax: PivotAggregation = (members, data: any) => { ``` - - ```razor @@ -486,18 +462,31 @@ public static totalMax: PivotAggregation = (members, data: any) => { -ピボット値は プロパティも提供します。この値のカスタム名を列ヘッダーに表示するために使用できます。 +ピボット値は + + + + + プロパティも提供します。この値のカスタム名を列ヘッダーに表示するために使用できます。 ### プロパティを有効にする は、 コンポーネントの現在の状態を記述するインターフェースです。これを使用すると、開発者はデータのフィールドを **rows**、**columns**、**filters** または **values** (行、列、フィルター、値) として宣言できます。この構成では、これらの各要素を個別に有効または無効にすることができます。ピボット グリッドの現在の状態には、有効な要素のみが含まれます。 コンポーネントは同じ構成を利用し、すべての有効と無効の要素のリストを表示します。それぞれについて、適切な状態のチェックボックスがあります。エンドユーザーは、これらのチェックボックスを使用してさまざまな要素を切り替えることにより、ピボット状態を簡単に調整できます。 -`Enable` プロパティは、特定の または がアクティブであり、ピボット グリッドによって描画されるピボット ビューに参加するかどうかを制御します。 +`Enable` プロパティは、特定の + + + + + または + + + + + がアクティブであり、ピボット グリッドによって描画されるピボット ビューに参加するかどうかを制御します。 ### 完全な構成のコード 基本的なピボット構成を見てみましょう: - - @@ -544,9 +533,6 @@ const pivotConfiguration1: IgrPivotConfiguration = { - - - @@ -584,9 +570,6 @@ const pivotConfiguration1: IgrPivotConfiguration = { ``` - - - @@ -632,8 +615,6 @@ const pivotConfiguration1: IgrPivotConfiguration = { ``` - - ```razor @@ -718,16 +699,31 @@ public PivotDataFlat() プロパティは、データ ソース フィールドに基づいてディメンションと値を自動的に生成します。 - 数値フィールド: - - `PivotNumericAggregate.sum` アグリゲーターを使用して として作成されます。 + - `PivotNumericAggregate.sum` アグリゲーターを使用して + + + + + として作成されます。 - 値のコレクションに追加され、デフォルトで有効になります。 - 数値以外のフィールド: - - として作成されます。 + - + + + + + として作成されます。 - デフォルトで無効です。 - 列コレクションに追加されます。 - 日付フィールド (最初の `date` フィールドのみが有効になり、他の `date` フィールドには非数値フィールドのルールが適用されます): - - として作成されます。 + - + + + + + として作成されます。 - デフォルトで有効です。 - 行コレクションに追加されます。 @@ -795,12 +791,15 @@ public PivotDataFlat() デフォルトのキーを含むデータ フィールド値がある場合は、現在使用していない他の記号に一致する区切り文字を必ず変更してください。そうしないと、集計値の計算と表示で予期しない動作が発生する可能性があります。 - - -Blazor で をオーバーライドする場合、新しい PivotKeys オブジェクトを割り当てるとデフォルトのキーが完全に置き換えられるため、現在は他のすべてのキーを定義する必要があります。 +Blazor で + + + + + をオーバーライドする場合、新しい PivotKeys オブジェクトを割り当てるとデフォルトのキーが完全に置き換えられるため、現在は他のすべてのキーを定義する必要があります。 ```razor @code { @@ -818,26 +817,42 @@ Blazor で - - ## 既知の問題と制限 |制限|説明| |--- |--- | | 列を宣言的に設定することはサポートされていません。 | ピボット グリッドは (列) の構成に基づいて列を生成するため、ベース グリッドのように宣言的に設定することはサポートされていません。このような列は無視されます。 | -| ディメンション / 値に重複した または プロパティ値を設定します。 | これらのプロパティは、各ディメンション / 値に対して一意である必要があります。複製すると、最終結果からデータが失われる可能性があります。 | +| ディメンション / 値に重複した + + + + + または + + + + + プロパティ値を設定します。 | これらのプロパティは、各ディメンション / 値に対して一意である必要があります。複製すると、最終結果からデータが失われる可能性があります。 | | 行選択は、**Single** (単一) モードでのみサポートされます。 | 現在、複数選択はサポートされていません。 | | ディメンション メンバーのマージでは大文字と小文字が区別されます。| ピボット グリッドはグループを作成し、同じ (大文字と小文字を区別する) 値をマージします。ただし、ディメンションは `MemberFunction` を提供し、これはそこで変更できます。`MemberFunction` の結果が比較され、表示値として使用されます。| - - ## API リファレンス -
+ + + + + +


-
+ + + + + +

## その他のリソース @@ -846,5 +861,3 @@ Blazor で - 階層構築のために子を格納するフィールド。これは、グループ化された値と、その値に基づくすべての pivotGridRecords からのマップを表します。これは、階層の作成中に何かを行う必要がある非常に特殊なシナリオで利用できます。一般的な使用法のためにこれを変更する必要はありません。 -- - 元のデータ レコードへの参照を格納するフィールド。上記の例で見ることができます - **AllProducts_records**。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに **records** プロパティがある場合は、 を使用して異なる一意の値を指定できます。 -- - 集計値を格納するフィールド。階層の作成中に適用され 、一般的なシナリオでは変更する必要はありません。 -- - 階層に基づいてディメンション レベルを格納するフィールド。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに **level** プロパティがある場合は、 を使用して異なる一意の値を指定できます。 -- - 一意の列フィールド値を生成するときに使用されるセパレーター。上からの例のダッシュ (**-**) - **All-Bulgaria** です。 -- - 一意の行フィールド値を生成するときに使用されるセパレーター。上記の例のアンダースコア (**_**) - **AllProducts_records** です。 (レコード) と (レベル) フィールド を作成するときに使用されます。 +- - 階層構築のために子を格納するフィールド。これは、グループ化された値と、その値に基づくすべての pivotGridRecords からのマップを表します。これは、階層の作成中に何かを行う必要がある非常に特殊なシナリオで利用できます。一般的な使用法のためにこれを変更する必要はありません。 +- - 元のデータ レコードへの参照を格納するフィールド。上記の例で見ることができます - **AllProducts_records**。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに **records** プロパティがある場合は、 を使用して異なる一意の値を指定できます。 +- - 集計値を格納するフィールド。階層の作成中に適用され 、一般的なシナリオでは変更する必要はありません。 +- - 階層に基づいてディメンション レベルを格納するフィールド。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに **level** プロパティがある場合は、 を使用して異なる一意の値を指定できます。 +- - 一意の列フィールド値を生成するときに使用されるセパレーター。上からの例のダッシュ (**-**) - **All-Bulgaria** です。 +- - 一意の行フィールド値を生成するときに使用されるセパレーター。上記の例のアンダースコア (**_**) - **AllProducts_records** です。 (レコード) と (レベル) フィールド を作成するときに使用されます。 ```typescript public aggregatedData = [ @@ -79,9 +79,9 @@ public aggregatedData = [ ]; ``` -これらはすべて、`Pivo​​tConfiguration` の一部である プロパティに格納され、デフォルトのピボット キーを変更するために使用できます。これらのデフォルトは次のとおりです: +これらはすべて、`Pivo​​tConfiguration` の一部である プロパティに格納され、デフォルトのピボット キーを変更するために使用できます。これらのデフォルトは次のとおりです: - と に `NoopPivotDimensionsStrategy` を設定すると、データ パイプによって行われるデータのグループ化と集計がスキップされますが、ピボット ビューを期待どおりに描画するには、ピボット グリッドで行、列、値、フィルターの宣言が必要です: + と に `NoopPivotDimensionsStrategy` を設定すると、データ パイプによって行われるデータのグループ化と集計がスキップされますが、ピボット ビューを期待どおりに描画するには、ピボット グリッドで行、列、値、フィルターの宣言が必要です: ```typescript export const = { diff --git a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx index af2cfc9def..2a43deb92e 100644 --- a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx @@ -32,15 +32,18 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {Platform} Grid ライブラリ、特に {Platform} Tree Grid の使用を開始することは、階層情報を明確かつインタラクティブに表示する強力なデータ駆動型アプリケーションを構築する最初のステップです。{Platform} Tree Grid を使用して、親子構造のデータを慣れ親しんだ表形式で表示でき、行の展開、ソート、フィルタリング、編集、大規模データセットに対応した仮想化などの機能を備えています。 -{Platform} ツリー グリッドを初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 +{Platform} ツリー グリッドを初期化するには、{PackageCommon} パッケージをインストールする必要があります。 + IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 +{Platform} ツリー グリッドを初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。 + - [作業の開始](../../general-getting-started-blazor-client.md) - [NuGet パッケージの追加](../../general-nuget-feed.md) @@ -48,6 +51,8 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック +{Platform} ツリー グリッドを初期化するには、`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 + また、ツリー グリッドに必要なスタイルを提供するために、アプリケーションの index.html ファイルに次の CSS リンクを含める必要があります: @@ -282,7 +287,7 @@ public class EmployeesItem ツリー グリッドで階層を構築するには、その `childDataKey` プロパティに、各データ オブジェクトで使用される子コレクションの名前を設定する必要があります。このサンプルでは **Employees** コレクションです。 更に自動列生成を無効にしてデータ オブジェクトの実際のプロパティとの一致を手動で定義できます。**Employees** コレクションが階層で自動的に使用されるため、列定義に含める必要はありません。 -ツリーグリッドにおいて、 を使用し、 要素を追加することで、行選択機能とページング機能を有効にできるようになりました。 +ツリーグリッドにおいて、 を使用し、 要素を追加することで、行選択機能とページング機能を有効にできるようになりました。 最初の列に集計機能、各列にはフィルタリング、ソート、編集、サイズ変更機能を有効にします。 @@ -409,9 +414,9 @@ const data = [ ``` -上記のサンプル データでは、すべてのレコードに ID、ParentID、および Name、JobTitle、Age などの追加プロパティがあります。前述のように、レコードの ID は一意である必要があります。これが になります。ParentID には親ノードの ID が含まれており、 として設定できます。行にツリー グリッドのいずれの行にも一致しない ParentID がある場合、行がルート行であることを意味します。 +上記のサンプル データでは、すべてのレコードに ID、ParentID、および Name、JobTitle、Age などの追加プロパティがあります。前述のように、レコードの ID は一意である必要があります。これが になります。ParentID には親ノードの ID が含まれており、 として設定できます。行にツリー グリッドのいずれの行にも一致しない ParentID がある場合、行がルート行であることを意味します。 -親子関係は、ツリー グリッドの プロパティと プロパティを使用して構成されます。 +親子関係は、ツリー グリッドの プロパティと プロパティを使用して構成されます。 上記フラット コレクションで定義されたデータを表示するツリー グリッドを設定する方法を示すコンポーネントのテンプレートです。 @@ -525,7 +530,7 @@ const data = [


-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/tree.mdx b/docs/xplat/src/content/jp/components/grids/tree.mdx index b3c5192384..944429e804 100644 --- a/docs/xplat/src/content/jp/components/grids/tree.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree.mdx @@ -19,7 +19,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; エンドユーザーにとって、これは、さまざまなアプリ ページ間を簡単にナビゲートし、選択、チェックボックスを使用し、テキスト、アイコン、画像などを追加できることを意味します。 -{ProductName} ツリー コンポーネントを使用すると、ユーザーはツリービュー構造で階層データを表現し、親子関係を維持したり、対応するデータ モデルなしで静的ツリービュー構造を定義したりできます。その主な目的は、エンドユーザーが階層データ構造内を視覚化してナビゲートできるようにすることです。 コンポーネントは、ロードオンデマンド機能、項目のアクティブ化、組み込みのチェックボックス、組み込みのキーボード ナビゲーションなどによる項目の複数のカスケード選択も提供します。 +{ProductName} ツリー コンポーネントを使用すると、ユーザーはツリービュー構造で階層データを表現し、親子関係を維持したり、対応するデータ モデルなしで静的ツリービュー構造を定義したりできます。その主な目的は、エンドユーザーが階層データ構造内を視覚化してナビゲートできるようにすることです。 コンポーネントは、ロードオンデマンド機能、項目のアクティブ化、組み込みのチェックボックス、組み込みのキーボード ナビゲーションなどによる項目の複数のカスケード選択も提供します。 ## {Platform} ツリーの例 @@ -45,7 +45,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: ```ts import { defineComponents, IgcTreeComponent } from 'igniteui-webcomponents'; @@ -69,7 +69,7 @@ defineComponents(IgcTreeComponent); npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrTree, IgrTreeItem } from 'igniteui-react'; @@ -85,7 +85,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **BlazorServer** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **BlazorServer** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -107,10 +107,10 @@ builder.Services.AddIgniteUIBlazor( - の使用を開始する最も簡単な方法は次のとおりです: + の使用を開始する最も簡単な方法は次のとおりです: ### ツリーの宣言 - は、 に属するすべての項の表現です。 + は、 に属するすべての項の表現です。 項目は、、、、および プロパティを提供します。これにより、要件に応じて項目の状態を構成できます。 `value` プロパティを使用して、項目が表すデータ エントリへの参照を追加できます。 @@ -227,7 +227,7 @@ builder.Services.AddIgniteUIBlazor( は展開または折り畳むことができます。 - 項目の展開インジケーター *(デフォルトの動作)* をクリックします。 -- の プロパティが **true** に設定されている場合、項目をクリックします。 +- の プロパティが **true** に設定されている場合、項目をクリックします。 @@ -246,7 +246,7 @@ builder.Services.AddIgniteUIBlazor( -デフォルトでは、複数の項目を同時に展開できます。この動作を変更し、一度に 1 つのブランチのみを展開できるようにするには、 プロパティを有効にします。このようにして、項目が展開されると、同じレベル内ですでに展開されている他のすべてのブランチが縮小されます。 +デフォルトでは、複数の項目を同時に展開できます。この動作を変更し、一度に 1 つのブランチのみを展開できるようにするには、 プロパティを有効にします。このようにして、項目が展開されると、同じレベル内ですでに展開されている他のすべてのブランチが縮小されます。 @@ -268,7 +268,7 @@ builder.Services.AddIgniteUIBlazor( - は、項目のインタラクションのために次の API メソッドを提供します: + は、項目のインタラクションのために次の API メソッドを提供します: - `Tree.Expand` - すべての項目を展開します。項目配列が渡されると、指定された項目のみが展開されます。 - `Tree.Collapse` - すべての項目を縮小します。項目配列が渡されると、指定された項目のみが縮小されます。 @@ -280,15 +280,15 @@ builder.Services.AddIgniteUIBlazor( ## {Platform} ツリーの選択 -{ProductName} ツリー コンポーネントで項目の選択を設定するには、その プロパティを設定する必要があります。このプロパティは、次の 3 つのモードを受け入れます: **None**、**Multiple** および **Cascade**。以下で、それぞれについて詳しく説明します。 +{ProductName} ツリー コンポーネントで項目の選択を設定するには、その プロパティを設定する必要があります。このプロパティは、次の 3 つのモードを受け入れます: **None**、**Multiple** および **Cascade**。以下で、それぞれについて詳しく説明します。 ### None - では、デフォルトで項目の選択が無効になっています。ユーザーは UI インタラクションを介して項目を選択または選択解除することはできませんが、これらのアクションは提供された API メソッドを介して実行できます。 + では、デフォルトで項目の選択が無効になっています。ユーザーは UI インタラクションを介して項目を選択または選択解除することはできませんが、これらのアクションは提供された API メソッドを介して実行できます。 ### Multiple - で複数の項目を選択できるようにするには、 プロパティを **multiple** に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。各項目には、選択されているまたは選択されていないの 2 つの状態があります。このモードは複数選択をサポートします。 + で複数の項目を選択できるようにするには、 プロパティを **multiple** に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。各項目には、選択されているまたは選択されていないの 2 つの状態があります。このモードは複数選択をサポートします。 @@ -317,7 +317,7 @@ builder.Services.AddIgniteUIBlazor( ### Cascade - カスケード項目の選択を有効にするには、selection プロパティを **cascade** に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。 + カスケード項目の選択を有効にするには、selection プロパティを **cascade** に設定するだけです。これにより、すべての項目のチェックボックスが表示されます。 @@ -348,9 +348,9 @@ builder.Services.AddIgniteUIBlazor( このモードでは、親の選択状態はその子の選択状態に完全に依存します。親に選択された子と選択解除された子がある場合、そのチェックボックスは不確定な状態になります。 ## キーボード ナビゲーション - のキーボード ナビゲーションは、ユーザーにさまざまなキーボード インタラクションを提供します。この機能はデフォルトで有効になっており、ユーザーは項目間を移動できます。 + のキーボード ナビゲーションは、ユーザーにさまざまなキーボード インタラクションを提供します。この機能はデフォルトで有効になっており、ユーザーは項目間を移動できます。 - ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすいです。 + ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすいです。 **キーの組み合わせ** @@ -390,7 +390,7 @@ builder.Services.AddIgniteUIBlazor( ユーザーが展開アイコンをクリックすると、ロード アイコンに変わります。Loading プロパティが false に解決されると、読み込みインジケーターが消え、子が読み込まれます。 -`loadingIndicator` スロットを使用して、読み込み領域にカスタム スロット コンテンツを提供できます。そのようなスロットが定義されていない場合、 が使用されます。 +`loadingIndicator` スロットを使用して、読み込み領域にカスタム スロット コンテンツを提供できます。そのようなスロットが定義されていない場合、 が使用されます。 ### 仮想化によるロード オン デマンド @@ -417,7 +417,7 @@ builder.Services.AddIgniteUIBlazor( | `text` | ツリー項目の表示テキスト。 | | `select` | 選択が有効になっている場合のツリー項目のチェックボックス。 | -これらの CSS パーツを使用して、次のように コンポーネントの外観をカスタマイズできます: +これらの CSS パーツを使用して、次のように コンポーネントの外観をカスタマイズできます: ```css igc-tree-item { @@ -433,10 +433,10 @@ igc-tree-item { ## API リファレンス -
-
+
+

-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx index a5d8cb7e21..ece806ccf8 100644 --- a/docs/xplat/src/content/jp/components/inputs/button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button.mdx @@ -12,19 +12,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Button (ボタン) の概要 -{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button OnClick イベントクリックされたコールバック、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 -OnClick event +{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button OnClick イベント、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 -clicked callback +{Platform} Button コンポーネントを使用すると、{Platform} アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、{Platform} Button クリックされたコールバック、{Platform} ボタンの切り替え、{Platform} ボタンの無効化などを通じて柔軟性を提供します。 -, toggle the {Platform} button, disable the {Platform} button, and more. ## {Platform} Button の例 diff --git a/docs/xplat/src/content/jp/components/inputs/chip.mdx b/docs/xplat/src/content/jp/components/inputs/chip.mdx index 3cdd20e002..bef754f0d4 100644 --- a/docs/xplat/src/content/jp/components/inputs/chip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/chip.mdx @@ -239,7 +239,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)); ### Prefix / Suffix (プレフィックス / サフィックス) - コンポーネントの `Prefix` と `Suffix` の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、 スロットと `Remove` スロットを使用してカスタマイズできます。`Start` スロットと `End` スロットを使用して、メイン コンテンツの前後にコンテンツを追加できます。 + コンポーネントの `Prefix` と `Suffix` の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、 スロットと `Remove` スロットを使用してカスタマイズできます。`Start` スロットと `End` スロットを使用して、メイン コンテンツの前後にコンテンツを追加できます。 diff --git a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx index 919ab94b01..44056a3f9b 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx @@ -18,14 +18,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {ProductName} コンボボックス コンポーネントは、フィルタリングやグループ化などのいくつかの機能を公開しています。 ## コンボボックス機能の例 -以下のデモは、ランタイムで有効または無効にできるいくつかの 機能を示しています。 +以下のデモは、ランタイムで有効または無効にできるいくつかの 機能を示しています。 -このサンプルでは、 コンポーネントを使用するため、コンボと一緒にインポートする必要があります。 +このサンプルでは、 コンポーネントを使用するため、コンボと一緒にインポートする必要があります。 @@ -52,7 +52,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); ``` -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -184,7 +184,7 @@ switchDisable.addEventListener("igcChange", () => { -グループ化は、 プロパティを対応するデータ ソース フィールドに設定することで有効/無効になることに注意してください。 +グループ化は、 プロパティを対応するデータ ソース フィールドに設定することで有効/無効になることに注意してください。 @@ -255,7 +255,7 @@ groupKey={groupingEnabled ? "country" : undefined} #### フィルタリング オプション -{ProductName} は、`FilterKey` オプションと `CaseSensitive` オプションの両方の構成を渡すことができるフィルター プロパティをもう 1 つ公開しています。`FilterKey` は、オプションのリストをフィルタリングするためにどのデータ ソース フィールドを使用する必要があるかを示します。`CaseSensitive` オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。 +{ProductName} は、`FilterKey` オプションと `CaseSensitive` オプションの両方の構成を渡すことができるフィルター プロパティをもう 1 つ公開しています。`FilterKey` は、オプションのリストをフィルタリングするためにどのデータ ソース フィールドを使用する必要があるかを示します。`CaseSensitive` オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。 次のコード スニペットは、名前ではなく国でデータ ソースから都市をフィルター処理する方法を示しています。また、デフォルトで大文字と小文字を区別するフィルタリングを行います。 @@ -293,7 +293,7 @@ const options = { ### グループ化 - オプションを定義すると、キーに基づいて項目をグループ化します。 + オプションを定義すると、キーに基づいて項目をグループ化します。 @@ -320,7 +320,7 @@ const options = { - プロパティは、データ ソースが複雑なオブジェクトで構成されている場合にのみ有効です。 + プロパティは、データ ソースが複雑なオブジェクトで構成されている場合にのみ有効です。 #### ソートの方向 @@ -353,7 +353,7 @@ const options = { ### ラベル - ラベルは、 プロパティを使用して簡単に設定できます。 + ラベルは、 プロパティを使用して簡単に設定できます。 @@ -523,7 +523,7 @@ required プロパティを設定することで、コンボボックスを必 ## API リファレンス -
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx index 3c418be0f3..3d256da3a6 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx @@ -37,7 +37,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` - コンポーネントを使用する前に、追加のコンポーネントおよび必要な CSS とともに登録する必要があります: + コンポーネントを使用する前に、追加のコンポーネントおよび必要な CSS とともに登録する必要があります: ```ts import { defineComponents, IgcComboComponent } @@ -58,7 +58,7 @@ defineComponents(IgcComboComponent); - コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 + コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 ```razor @@ -67,7 +67,7 @@ defineComponents(IgcComboComponent); builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); ``` -スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります。 +スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります。 ```razor @@ -87,7 +87,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); npm install igniteui-react ``` -次に、以下のように、{Platform} と必要な CSS をインポートする必要があります: +次に、以下のように、{Platform} と必要な CSS をインポートする必要があります: ```tsx import { IgrCombo } from 'igniteui-react'; @@ -99,7 +99,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - コンポーネントは標準の `` 要素では機能しません。代わりに `Form` を使用してください。 + コンポーネントは標準の `` 要素では機能しません。代わりに `Form` を使用してください。 次に、オプションのリストを構築するコンボ データ ソースに、オブジェクトの配列をバインドします。 @@ -200,20 +200,20 @@ const cities: City[] = [ コンボは複雑なデータ (オブジェクト) の配列にバインドされている場合、コントロールが項目の選択を処理するために使用するプロパティを指定する必要があります。コンポーネントは以下のプロパティを公開します: -- `T` - *必須。 が省略されている場合は、これを 「object」 に設定する必要があります。それ以外の場合は、 のプロパティ タイプと一致する必要があります。 -- - オプション、複雑なデータ オブジェクトに**必須** - データ ソースのどのフィールドを選択に使用するかを決定します。 が省略された場合、選択 API はオブジェクト参照を使用して項目を選択します。 -- - オプション、複雑なデータ オブジェクトに**推奨** - データ ソース内のどのフィールドが表示値として使用されるかを決定します。 に値が指定されていない場合、コンボは指定された (存在する場合) を使用します。 -この例では、コンボで各都市の `name` を表示し、項目の選択と各項目の基礎となる値として `id` フィールドを使用するようにします。したがって、これらのプロパティをコンボの と にそれぞれ提供します。 +- `T` - *必須。 が省略されている場合は、これを 「object」 に設定する必要があります。それ以外の場合は、 のプロパティ タイプと一致する必要があります。 +- - オプション、複雑なデータ オブジェクトに**必須** - データ ソースのどのフィールドを選択に使用するかを決定します。 が省略された場合、選択 API はオブジェクト参照を使用して項目を選択します。 +- - オプション、複雑なデータ オブジェクトに**推奨** - データ ソース内のどのフィールドが表示値として使用されるかを決定します。 に値が指定されていない場合、コンボは指定された (存在する場合) を使用します。 +この例では、コンボで各都市の `name` を表示し、項目の選択と各項目の基礎となる値として `id` フィールドを使用するようにします。したがって、これらのプロパティをコンボの と にそれぞれ提供します。 -データ ソースがプリミティブ型 (例: `strings`、`numbers` など) で構成されている場合、 や を**指定しないでください**。 +データ ソースがプリミティブ型 (例: `strings`、`numbers` など) で構成されている場合、 や を**指定しないでください**。 ### 値の設定 ComboBox コンポーネントは、属性 (値とも呼ばれます) に加えて、 ゲッターとセッターを公開します。value 属性を使用して、コンポーネントの初期化時に選択した項目を設定できます。 -値 (現在選択されている項目のリスト) を読み取る場合、または値を更新する場合は、それぞれ値ゲッターとセッターを使用します。値ゲッターは、 で表される選択されたすべての項目のリストを返します。同様に、値セッターを使用して選択した項目のリストを更新する場合は、 によって項目のリストを提供する必要があります。 +値 (現在選択されている項目のリスト) を読み取る場合、または値を更新する場合は、それぞれ値ゲッターとセッターを使用します。値ゲッターは、 で表される選択されたすべての項目のリストを返します。同様に、値セッターを使用して選択した項目のリストを更新する場合は、 によって項目のリストを提供する必要があります。 @@ -247,7 +247,7 @@ comboRef.current.value = ['NY01', 'UK01']; コンボ コンポーネントは、現在選択されている項目を変更できる API を公開します。 -ユーザーの操作によってオプションのリストから項目を選択する以外に、プログラムで項目を選択することもできます。これは、 および メソッドを介して行われます。項目の配列をこれらのメソッドに渡すことができます。メソッドが引数なしで呼び出された場合、呼び出されたメソッドに応じて、すべての項目が選択 / 選択解除されます。コンボ コンポーネントに を指定した場合は、選択 / 選択解除する項目の値キーを渡す必要があります。 +ユーザーの操作によってオプションのリストから項目を選択する以外に、プログラムで項目を選択することもできます。これは、 および メソッドを介して行われます。項目の配列をこれらのメソッドに渡すことができます。メソッドが引数なしで呼び出された場合、呼び出されたメソッドに応じて、すべての項目が選択 / 選択解除されます。コンボ コンポーネントに を指定した場合は、選択 / 選択解除する項目の値キーを渡す必要があります。 #### 一部の項目を選択 / 選択解除: @@ -353,7 +353,7 @@ comboRef.current.deselect([]); - プロパティを省略した場合は、オブジェクト参照として選択 / 選択解除する項目を列挙する必要があります。 + プロパティを省略した場合は、オブジェクト参照として選択 / 選択解除する項目を列挙する必要があります。 @@ -390,8 +390,8 @@ comboRef.current.deselect([cities[1], cities[5]]); {ProductName} Combo コンポーネントは、、、、 など、ほとんどの プロパティをサポートしています。このコンポーネントは、その検証にバインドされた 2 つのメソッドも公開しています。 -- - 有効性をチェックし、コンポーネントが検証の制約を満たしている場合は true を返します。 -- - ネイティブ入力 API に準拠するための reportValidity のラッパー。 +- - 有効性をチェックし、コンポーネントが検証の制約を満たしている場合は true を返します。 +- - ネイティブ入力 API に準拠するための reportValidity のラッパー。 ## キーボード ナビゲーション @@ -410,7 +410,7 @@ comboRef.current.deselect([cities[1], cities[5]]); ## スタイル設定 - コンポーネントとその項目の外観は、以下に示す公開 CSS パーツを使用して変更できます。 + コンポーネントとその項目の外観は、以下に示す公開 CSS パーツを使用して変更できます。 | パーツ名 | 説明 | | -------------------- | ------------------------------------------------------------------------------- | @@ -466,7 +466,7 @@ igc-combo::part(toggle-icon) { ## API リファレンス -
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx index ed779e31c0..d53040366b 100644 --- a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx @@ -134,7 +134,7 @@ input.value = date; 文字列は、`YYYY-MM-DDTHH:mm:ss.sssZ` の形式の完全な `ISO` 文字列にすることも、日付のみと時間のみのパーツに分割することもできます。 #### 日付のみ -日付のみの文字列がコンポーネントの プロパティにバインドされている場合は、`YYYY-MM-DD` の形式である必要があります。 は、入力に値を入力するときに引き続き使用され、同じ形式である必要はありません。さらに、日付のみの文字列をバインドする場合、ディレクティブは時刻を `T00:00:00` に強制することにより、時刻のずれを防ぎます。 +日付のみの文字列がコンポーネントの プロパティにバインドされている場合は、`YYYY-MM-DD` の形式である必要があります。 は、入力に値を入力するときに引き続き使用され、同じ形式である必要はありません。さらに、日付のみの文字列をバインドする場合、ディレクティブは時刻を `T00:00:00` に強制することにより、時刻のずれを防ぎます。 #### 時刻のみ 時刻のみの文字列は通常、`ECMA` 仕様では定義されていませんが、時刻のみのソリューションを必要とするシナリオにディレクティブを統合できるようにするために、24 時間形式 (`HH:mm:ss`) をサポートしています。12 時間形式はサポートされていません。 @@ -168,10 +168,10 @@ input.value = date; は、さまざまな表示形式と入力形式をサポートしています。 -[Intl.DateTimeFormat](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) を使用して、`long` と `short`、`medium` と `full` などの事前定義された書式オプションをサポートできるようにします。さらに、`dd-MM-yy` などのサポートされている文字から構築されたカスタム文字列を受け入れることもできます。また、 が指定されていない場合、コンポーネントは をそのまま使用します。 +[Intl.DateTimeFormat](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) を使用して、`long` と `short`、`medium` と `full` などの事前定義された書式オプションをサポートできるようにします。さらに、`dd-MM-yy` などのサポートされている文字から構築されたカスタム文字列を受け入れることもできます。また、 が指定されていない場合、コンポーネントは をそのまま使用します。 ### 入力書式 -次の表は、コンポーネントの でサポートされている形式を示しています。 +次の表は、コンポーネントの でサポートされている形式を示しています。 |書式|説明| |-------|----------| @@ -189,7 +189,7 @@ input.value = date; | `mm` | 先行ゼロが明示的に設定された分。 | | `tt` | 12 時間形式の AM/PM セクション。 | -特定の入力形式を設定するには、それを文字列として に渡します。これにより、予想されるユーザー入力形式と `mask` の両方が設定されます。さらに、 はロケール ベースであるため、何も指定されていない場合、エディターはデフォルトで `dd/MM/yyyy` になります。 +特定の入力形式を設定するには、それを文字列として に渡します。これにより、予想されるユーザー入力形式と `mask` の両方が設定されます。さらに、 はロケール ベースであるため、何も指定されていない場合、エディターはデフォルトで `dd/MM/yyyy` になります。 @@ -325,7 +325,7 @@ input.min = new Date(2021, 0, 1); は、公開な メソッドと メソッドを公開します。現在設定されている日付と時刻の特定の `DatePart` を増減し、いくつかの方法で使用できます。 -最初のシナリオでは、特定の DatePart がメソッドに渡されない場合、指定した および内部コンポーネントの実装に基づいてデフォルトの DatePart が増減します。2 番目のシナリオでは、さまざまな要件を満たすために操作する DatePart を明示的に指定できます。また、どちらのメソッドも、stepUp/stepDown ステップを設定するために使用できるタイプ番号のオプションの `delta` パラメーターを受け入れます。 +最初のシナリオでは、特定の DatePart がメソッドに渡されない場合、指定した および内部コンポーネントの実装に基づいてデフォルトの DatePart が増減します。2 番目のシナリオでは、さまざまな要件を満たすために操作する DatePart を明示的に指定できます。また、どちらのメソッドも、stepUp/stepDown ステップを設定するために使用できるタイプ番号のオプションの `delta` パラメーターを受け入れます。 diff --git a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx index 700b23c6ed..832a786d3c 100644 --- a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx +++ b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx @@ -127,7 +127,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); ### Target (ターゲット) -{Platform} ドロップダウン リストは、ターゲットに対して相対的に配置されます。`target` スロットを使用すると、クリック時に `open` プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる 、、および メソッドを使用して実現できます。デフォルトでは、ドロップダウン リストは CSS の `absolute` 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、{Platform} ドロップダウンの を `fixed` に設定する必要があります。ドロップダウン リストは、その内容に基づいて自動的にサイズ変更されます。リストの幅をターゲットと同じにする場合は、 プロパティを **true** に設定する必要があります。 +{Platform} ドロップダウン リストは、ターゲットに対して相対的に配置されます。`target` スロットを使用すると、クリック時に `open` プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる 、、および メソッドを使用して実現できます。デフォルトでは、ドロップダウン リストは CSS の `absolute` 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、{Platform} ドロップダウンの を `fixed` に設定する必要があります。ドロップダウン リストは、その内容に基づいて自動的にサイズ変更されます。リストの幅をターゲットと同じにする場合は、 プロパティを **true** に設定する必要があります。 @@ -136,7 +136,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); ### 位置 -{Platform} ドロップダウンの優先配置は、 プロパティを使用して設定できます。ドロップダウンのデフォルトの配置は `bottom-start` です。 プロパティは、指定された配置でドロップダウンを表示するのに十分なスペースがない場合に配置を反転するかどうかを決定します。{Platform} ドロップダウン リストからそのターゲットまでの距離は、 プロパティを使用して指定できます。 +{Platform} ドロップダウンの優先配置は、 プロパティを使用して設定できます。ドロップダウンのデフォルトの配置は `bottom-start` です。 プロパティは、指定された配置でドロップダウンを表示するのに十分なスペースがない場合に配置を反転するかどうかを決定します。{Platform} ドロップダウン リストからそのターゲットまでの距離は、 プロパティを使用して指定できます。 @@ -145,7 +145,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); ### 選択 -ユーザーが項目を選択すると、 は `Change` イベントを発行します。ドロップダウンの メソッドを使用すると、インデックスまたは値で項目を選択できます。 +ユーザーが項目を選択すると、 は `Change` イベントを発行します。ドロップダウンの メソッドを使用すると、インデックスまたは値で項目を選択できます。 ### Item (項目) @@ -176,7 +176,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); ### Scroll Strategy (スクロール方法) - プロパティは、ターゲット要素のコンテナーをスクロールする際のコンポーネントの動作を決定します。デフォルト値は `scroll` です。これは、ドロップダウンがターゲットとともにスクロールされることを意味します。プロパティを `block` に設定すると、ドロップダウンが開いている場合にスクロールがブロックされます。プロパティを `close` ように設定することもできます。これは、スクロール時にドロップダウンが自動的に閉じられることを意味します。 + プロパティは、ターゲット要素のコンテナーをスクロールする際のコンポーネントの動作を決定します。デフォルト値は `scroll` です。これは、ドロップダウンがターゲットとともにスクロールされることを意味します。プロパティを `block` に設定すると、ドロップダウンが開いている場合にスクロールがブロックされます。プロパティを `close` ように設定することもできます。これは、スクロール時にドロップダウンが自動的に閉じられることを意味します。 ### Keep Open (開いたままにする) diff --git a/docs/xplat/src/content/jp/components/inputs/file-input.mdx b/docs/xplat/src/content/jp/components/inputs/file-input.mdx index ddb9178df0..cff06f47e6 100644 --- a/docs/xplat/src/content/jp/components/inputs/file-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/file-input.mdx @@ -68,15 +68,15 @@ defineComponents(IgcFileInputComponent); コンポーネントには、特定の要件に基づいて動作を構成できるさまざまなプロパティが用意されています。これらのプロパティを使用すると、入力の機能、外観、検証を制御できます。 -- - ファイル入力フィールドの現在の値を設定します。 -- - ファイル入力を無効にして、ユーザーによる操作を防止します。 -- - 入力を必須としてマークします。ファイルが選択されない限り、フォームの送信はブロックされます。 -- - 入力値が無効であることを示し、視覚的なエラー状態をトリガーするために使用されます。 +- - ファイル入力フィールドの現在の値を設定します。 +- - ファイル入力を無効にして、ユーザーによる操作を防止します。 +- - 入力を必須としてマークします。ファイルが選択されない限り、フォームの送信はブロックされます。 +- - 入力値が無効であることを示し、視覚的なエラー状態をトリガーするために使用されます。 - `Multiple` - 複数のファイルを選択できます。 - `Accept` - 選択できるファイル タイプを定義します。このプロパティの値は、ファイル形式のコンマ区切りのリストである必要があります (例: .jpg, .png, .gif)。 -- - ページが読み込まれると、ファイル入力フィールドに自動的にフォーカスを当てます。 -- - ファイル入力要素に関連付けられたラベル テキストを設定します。 -- - ファイルが選択されていない場合に表示されるプレースホルダー テキストを提供します。 +- - ページが読み込まれると、ファイル入力フィールドに自動的にフォーカスを当てます。 +- - ファイル入力要素に関連付けられたラベル テキストを設定します。 +- - ファイルが選択されていない場合に表示されるプレースホルダー テキストを提供します。 @@ -98,8 +98,8 @@ defineComponents(IgcFileInputComponent); - `Focus` - ファイル入力要素にフォーカスを設定します。 - `Blur` - ファイル入力要素からフォーカスを削除します。 -- - 入力の有効性をチェックし、入力が無効な場合は検証メッセージを表示します。 -- - カスタム検証メッセージを設定します。提供されたメッセージが空でない場合、入力は無効 (invalid) としてマークされます。 +- - 入力の有効性をチェックし、入力が無効な場合は検証メッセージを表示します。 +- - カスタム検証メッセージを設定します。提供されたメッセージが空でない場合、入力は無効 (invalid) としてマークされます。 ### スロット diff --git a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx index 35dd4e3299..3261cae3bb 100644 --- a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx +++ b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx @@ -195,7 +195,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule)); 進行状況インジケーターのデフォルトのラベルを非表示にするには、 属性を使用します。 - プロパティを使用して、 のデフォルト ラベルをカスタマイズできます。 + プロパティを使用して、 のデフォルト ラベルをカスタマイズできます。 次のサンプルは、上記の構成を示しています: diff --git a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx index 3fa7d20460..8dc151506c 100644 --- a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx @@ -232,7 +232,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule)); ### 値モード -IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために `raw` および `withFormatting` オプションを選択できる プロパティを公開します。デフォルトでは、 は `raw` に設定されています。以下の例をご覧ください: +IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために `raw` および `withFormatting` オプションを選択できる プロパティを公開します。デフォルトでは、 は `raw` に設定されています。以下の例をご覧ください: diff --git a/docs/xplat/src/content/jp/components/inputs/radio.mdx b/docs/xplat/src/content/jp/components/inputs/radio.mdx index f2eb685143..b2011a397f 100644 --- a/docs/xplat/src/content/jp/components/inputs/radio.mdx +++ b/docs/xplat/src/content/jp/components/inputs/radio.mdx @@ -37,7 +37,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` - および を使用する前に、次のように登録する必要があります: + および を使用する前に、次のように登録する必要があります: ```ts import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents'; @@ -62,7 +62,7 @@ defineComponents(IgcRadioComponent, IgcRadioGroupComponent); npm install igniteui-react ``` -次に、以下のように、 および とそれぞれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 および とそれぞれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```tsx import { IgrRadio, IgrRadioGroupComponent } from 'igniteui-react'; @@ -77,7 +77,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - と を使用する前に、次のように登録する必要があります: + と を使用する前に、次のように登録する必要があります: ```razor @@ -89,7 +89,7 @@ builder.Services.AddIgniteUIBlazor( ); ``` -また、追加の CSS ファイルをリンクして、スタイルを および コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを および コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -99,7 +99,7 @@ builder.Services.AddIgniteUIBlazor( - の使用を開始する最も簡単な方法は次のとおりです: + の使用を開始する最も簡単な方法は次のとおりです: @@ -141,14 +141,14 @@ builder.Services.AddIgniteUIBlazor( - コンポーネントは標準の `` 要素では機能しません。代わりに `Form` を使用してください。 + コンポーネントは標準の `` 要素では機能しません。代わりに `Form` を使用してください。 ## 例 ### ラベル - に意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。 + に意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。 @@ -174,7 +174,7 @@ builder.Services.AddIgniteUIBlazor( -`label-position` 属性を設定することにより、 ボタンの前または後にラベルを配置するかどうかを指定できます。許可される値は、`before` と `after` (デフォルト) です。 +`label-position` 属性を設定することにより、 ボタンの前または後にラベルを配置するかどうかを指定できます。許可される値は、`before` と `after` (デフォルト) です。 @@ -200,7 +200,7 @@ builder.Services.AddIgniteUIBlazor( - には、ラジオの外部の要素でラベルを付けることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。 + には、ラジオの外部の要素でラベルを付けることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。 @@ -457,7 +457,7 @@ builder.Services.AddIgniteUIBlazor( ## スタイル設定 - コンポーネントは、いくつかの CSS パーツ (`base`、`control`、および `label`) を公開して、スタイルを完全に制御できるようにします。 + コンポーネントは、いくつかの CSS パーツ (`base`、`control`、および `label`) を公開して、スタイルを完全に制御できるようにします。 ```css igc-radio::part(control) { @@ -486,7 +486,7 @@ igc-radio::part(label) {
-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/rating.mdx b/docs/xplat/src/content/jp/components/inputs/rating.mdx index 9965eb13b3..7f6095b13d 100644 --- a/docs/xplat/src/content/jp/components/inputs/rating.mdx +++ b/docs/xplat/src/content/jp/components/inputs/rating.mdx @@ -50,7 +50,7 @@ npm install igniteui-react - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: @@ -62,7 +62,7 @@ npm install igniteui-react builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule)); ``` -また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -100,7 +100,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - の使用を開始する最も簡単な方法は次のとおりです: + の使用を開始する最も簡単な方法は次のとおりです: @@ -139,7 +139,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; ## カスタム シンボルの使用 - コンポーネントを使用すると、デフォルトの星シンボルの代わりにカスタム シンボルを使用できます。SVG、アイコン、または別の Unicode シンボルなどの別のシンボルを使用する場合は、 の開く括弧と閉じる括弧の間に コンポーネントを配置する必要があります。 + コンポーネントを使用すると、デフォルトの星シンボルの代わりにカスタム シンボルを使用できます。SVG、アイコン、または別の Unicode シンボルなどの別のシンボルを使用する場合は、 の開く括弧と閉じる括弧の間に コンポーネントを配置する必要があります。 @@ -387,7 +387,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; ### Read-Only (読み取り専用) - 属性を使用すると、ユーザーは を読み取り専用モードで設定できます。この属性は、コンポーネントを情報提供のみを目的として使用する場合に役立ちます。 + 属性を使用すると、ユーザーは を読み取り専用モードで設定できます。この属性は、コンポーネントを情報提供のみを目的として使用する場合に役立ちます。 ### Disabled (無効) @@ -409,7 +409,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - コンポーネントは、`igcHover` と `igcChange` の 2 つの個別のイベントを発行します。 + コンポーネントは、`igcHover` と `igcChange` の 2 つの個別のイベントを発行します。 @@ -418,7 +418,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - コンポーネントは、`Hover` と `Change` の 2 つの個別のイベントを発行します。 + コンポーネントは、`Hover` と `Change` の 2 つの個別のイベントを発行します。 @@ -427,7 +427,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - コンポーネントは、`hover` と `change` の 2 つの個別のイベントを発行します。 + コンポーネントは、`hover` と `change` の 2 つの個別のイベントを発行します。 @@ -492,7 +492,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; ## スタイル設定 - コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。 + コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。 |名前|説明| |--|--| @@ -520,7 +520,7 @@ igc-rating::part(empty) { ## API リファレンス -
+

## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/ripple.mdx b/docs/xplat/src/content/jp/components/inputs/ripple.mdx index 2449147d8f..e02da143ef 100644 --- a/docs/xplat/src/content/jp/components/inputs/ripple.mdx +++ b/docs/xplat/src/content/jp/components/inputs/ripple.mdx @@ -34,7 +34,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: ```ts import { defineComponents, IgcRippleComponent } from "igniteui-webcomponents"; @@ -58,7 +58,7 @@ defineComponents(IgcRippleComponent); npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrRipple } from 'igniteui-react'; @@ -73,7 +73,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: ```razor @@ -82,7 +82,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule)); ``` -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -92,7 +92,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule)); - の使用を開始する最も簡単な方法は次のとおりです: + の使用を開始する最も簡単な方法は次のとおりです: @@ -127,7 +127,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule)); -CSS `position` プロパティが `static` 以外の値に設定されている限り、任意の Web 要素に を追加できます。 +CSS `position` プロパティが `static` 以外の値に設定されている限り、任意の Web 要素に を追加できます。 ## 例 @@ -148,7 +148,7 @@ igc-ripple {
-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/select.mdx b/docs/xplat/src/content/jp/components/inputs/select.mdx index bb1a751479..baca88d5a6 100644 --- a/docs/xplat/src/content/jp/components/inputs/select.mdx +++ b/docs/xplat/src/content/jp/components/inputs/select.mdx @@ -37,7 +37,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` - コンポーネントを使用する前に、追加のコンポーネントとともに登録する必要があります: + コンポーネントを使用する前に、追加のコンポーネントとともに登録する必要があります: ```ts import { @@ -61,7 +61,7 @@ defineComponents(IgcSelectComponent); - コンポーネントを使用する前に、追加のコンポーネントとともに登録する必要があります: + コンポーネントを使用する前に、追加のコンポーネントとともに登録する必要があります: ```razor // in Program.cs file @@ -69,7 +69,7 @@ defineComponents(IgcSelectComponent); builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); ``` -スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -90,7 +90,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); npm install igniteui-react ``` -次に、以下のように、 および と必要な CSS をインポートする必要があります: +次に、以下のように、 および と必要な CSS をインポートする必要があります: ```tsx import { IgrSelect, IgrSelectItem } from 'igniteui-react'; @@ -345,8 +345,8 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; 選択がフォーカスされ、オプションのリストが**表示されていない**場合: -- ALT + ↑ ↓ の組み合わせを使用するか、SPACE または ENTER キーをクリックして、 を開きます。 -- ALT + ↑ または ↓ の組み合わせ、または ENTER、SPACE、ESC、 キーのいずれかを使用して、 を閉じます。 +- ALT + ↑ ↓ の組み合わせを使用するか、SPACE または ENTER キーをクリックして、 を開きます。 +- ALT + ↑ または ↓ の組み合わせ、または ENTER、SPACE、ESC、 キーのいずれかを使用して、 を閉じます。 - ← → キーを使用すると、リスト内の前の項目が選択されます。 - ↑ ↓ キーを使用すると、リスト内の次の項目が選択されます。 - HOME キーまたは END キーを使用すると、リストの最初または最後の項目が選択されます。 @@ -360,7 +360,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - HOME キーまたは END キーを使用すると、リストの最初または最後の項目がアクティブになります。 - コンポーネントは、項目の**単一**選択のみをサポートします。 + コンポーネントは、項目の**単一**選択のみをサポートします。 diff --git a/docs/xplat/src/content/jp/components/inputs/slider.mdx b/docs/xplat/src/content/jp/components/inputs/slider.mdx index 414f8587cb..f5a7f7a6c2 100644 --- a/docs/xplat/src/content/jp/components/inputs/slider.mdx +++ b/docs/xplat/src/content/jp/components/inputs/slider.mdx @@ -35,7 +35,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` - と を使用する前に、次のように登録する必要があります: + と を使用する前に、次のように登録する必要があります: ```ts import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from "igniteui-webcomponents"; @@ -60,7 +60,7 @@ defineComponents(IgcSliderComponent, IgcRangeSliderComponent); npm install igniteui-react ``` -次に、以下のように、 および と必要な CSS をインポートする必要があります: +次に、以下のように、 および と必要な CSS をインポートする必要があります: ```tsx import { IgrSlider, IgrRangeSlider } from 'igniteui-react'; @@ -74,7 +74,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - と を使用する前に、次のように登録する必要があります: + と を使用する前に、次のように登録する必要があります: ```razor @@ -90,7 +90,7 @@ builder.Services.AddIgniteUIBlazor( - と の使用を開始する最も簡単な方法は次のとおりです: + と の使用を開始する最も簡単な方法は次のとおりです: @@ -124,7 +124,7 @@ builder.Services.AddIgniteUIBlazor( スライダーと範囲スライダー コンポーネントの主な違いは、スライダー コンポーネントには単一のつまみがあり、範囲スライダー コンポーネントには 2 つのつまみがあることです。スライダー コンポーネントの単一のつまみで、その プロパティが表示されます。範囲スライダー コンポーネントの 2 つのつまみは、 値と 値のプロパティを表示します。 -いずれかの値が変更されると、両方のスライダーが 2 つのイベントを発行します。 イベントは、キーボードまたはドラッグ操作を使用して値が変更されるたびに発行され、`Change` イベントは、値の変更がドラッグエンドまたはキーボード操作でコミットされたときに発行されます。 +いずれかの値が変更されると、両方のスライダーが 2 つのイベントを発行します。 イベントは、キーボードまたはドラッグ操作を使用して値が変更されるたびに発行され、`Change` イベントは、値の変更がドラッグエンドまたはキーボード操作でコミットされたときに発行されます。 @@ -145,7 +145,7 @@ builder.Services.AddIgniteUIBlazor( ### 制約 -スライダーのトラックには、最小値と最大値があり、 と プロパティを使用して構成されます。さらに、 プロパティと プロパティを使用して、つまみのドラッグを制限できます。 +スライダーのトラックには、最小値と最大値があり、 と プロパティを使用して構成されます。さらに、 プロパティと プロパティを使用して、つまみのドラッグを制限できます。 @@ -154,14 +154,14 @@ builder.Services.AddIgniteUIBlazor( ### Step (ステップ) - プロパティは、値が順守するスライダーの精度を指定します。デフォルトでは、スライダー トラックは連続して見えます。スライダーの プロパティを **true** に設定すると、トラックのステップが表示されます。 + プロパティは、値が順守するスライダーの精度を指定します。デフォルトでは、スライダー トラックは連続して見えます。スライダーの プロパティを **true** に設定すると、トラックのステップが表示されます。 - プロパティが `0` に設定されている場合、ステッピングは暗黙指定されず、スライダー範囲内の任意の値が許可されます。この場合、 が **true** に設定されていても、スライダーは連続して見えます。 + プロパティが `0` に設定されている場合、ステッピングは暗黙指定されず、スライダー範囲内の任意の値が許可されます。この場合、 が **true** に設定されていても、スライダーは連続して見えます。 ### Tick Marks (目盛り) @@ -183,7 +183,7 @@ builder.Services.AddIgniteUIBlazor( ### Value Format (値の形式) -つまみと目盛りのラベル値をを書式設定する場合、スライダーは 、、および プロパティを提供します。 を使用すると、指定された を考慮して、小数部と有効桁数、スタイル (10 進数、通貨、パーセント、単位)、表記などを指定できます。 は、書式設定オプションが適用された値に置き換えられる `{0}` 識別子を含む可能性のある文字列です。 +つまみと目盛りのラベル値をを書式設定する場合、スライダーは 、、および プロパティを提供します。 を使用すると、指定された を考慮して、小数部と有効桁数、スタイル (10 進数、通貨、パーセント、単位)、表記などを指定できます。 は、書式設定オプションが適用された値に置き換えられる `{0}` 識別子を含む可能性のある文字列です。 @@ -192,7 +192,7 @@ builder.Services.AddIgniteUIBlazor( ### ラベル -場合によっては、スライダーの値を文字列値として書式設定する必要があります。つまり、値 **[0, 1, 2]** を **['Low', 'Medium', 'High']** にマップします。このシナリオでは、スライダーを使用して、スライダー内に 要素を定義できます。スライダー ラベルのテキスト コンテンツは、つまみラベルと目盛りラベルに使用されます。スライダー ラベルが提供されている場合、、、および プロパティが自動的に計算されるため、提供されたラベルにマップされない値は許可されないことに注意してください。'Low'、'Medium'、および 'High' ラベルの場合、 は `0` に設定され、 は `2` に設定され、 は `1` に設定されます。 +場合によっては、スライダーの値を文字列値として書式設定する必要があります。つまり、値 **[0, 1, 2]** を **['Low', 'Medium', 'High']** にマップします。このシナリオでは、スライダーを使用して、スライダー内に 要素を定義できます。スライダー ラベルのテキスト コンテンツは、つまみラベルと目盛りラベルに使用されます。スライダー ラベルが提供されている場合、、、および プロパティが自動的に計算されるため、提供されたラベルにマップされない値は許可されないことに注意してください。'Low'、'Medium'、および 'High' ラベルの場合、 は `0` に設定され、 は `2` に設定され、 は `1` に設定されます。 @@ -201,7 +201,7 @@ builder.Services.AddIgniteUIBlazor( ## スタイル設定 - コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。 + コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。 |名|説明| |--|--| @@ -228,9 +228,9 @@ builder.Services.AddIgniteUIBlazor( ## API リファレンス -
-
-
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/switch.mdx b/docs/xplat/src/content/jp/components/inputs/switch.mdx index ae7bf28ea1..5326ae847c 100644 --- a/docs/xplat/src/content/jp/components/inputs/switch.mdx +++ b/docs/xplat/src/content/jp/components/inputs/switch.mdx @@ -26,7 +26,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 使用方法 - コンポーネントにより、オン/オフ状態を切り替えることができます。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。 + コンポーネントにより、オン/オフ状態を切り替えることができます。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。 @@ -38,7 +38,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```ts import { defineComponents, IgcSwitchComponent } from "igniteui-webcomponents"; @@ -63,7 +63,7 @@ defineComponents(IgcSwitchComponent); npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrSwitch } from 'igniteui-react'; @@ -87,7 +87,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); ``` -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -97,7 +97,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); - の使用を開始する最も簡単な方法は次のとおりです: + の使用を開始する最も簡単な方法は次のとおりです: @@ -124,7 +124,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); - コンポーネントは標準の `` 要素では機能しません。代わりに `Form` を使用してください。 + コンポーネントは標準の `` 要素では機能しません。代わりに `Form` を使用してください。 ## 例 @@ -361,7 +361,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); ## スタイル設定 - コンポーネントは、いくつかの CSS パーツを公開して、スタイルを完全に制御できるようにします。 + コンポーネントは、いくつかの CSS パーツを公開して、スタイルを完全に制御できるようにします。 |名前|説明| |--|--| @@ -388,7 +388,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); ## API リファレンス -
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx index ea2baf7ec0..552a4f490d 100644 --- a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx @@ -29,13 +29,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - の使用を開始するには、最初に次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。 + の使用を開始するには、最初に次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。 ```cmd npm install {PackageWebComponents} ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```ts import { defineComponents, IgcTooltipComponent } from 'igniteui-webcomponents'; @@ -53,13 +53,13 @@ defineComponents(IgcTooltipComponent); - の使用を開始するには、最初に次のコマンドを実行して Ignite UI for React をインストールする必要があります。 + の使用を開始するには、最初に次のコマンドを実行して Ignite UI for React をインストールする必要があります。 ```cmd npm install igniteui-react ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```tsx import { IgrTooltip } from 'igniteui-react'; @@ -75,7 +75,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: ```razor // in Program.cs file @@ -83,7 +83,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule)); ``` -また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -95,7 +95,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule)); {ProductName} の完全な概要については、[「作業の開始」](../general-getting-started.md)トピックを参照してください。 -これで、{Platform} の基本構成から始めることができます。 +これで、{Platform} の基本構成から始めることができます。 @@ -137,7 +137,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule)); ### ツールチップ ターゲット -目的の要素にツールチップを添付するには、 の プロパティを使用し、それをターゲット要素の ID に設定します。 +目的の要素にツールチップを添付するには、 の プロパティを使用し、それをターゲット要素の ID に設定します。 @@ -227,7 +227,7 @@ tooltip.anchor = anchor; ### ツールチップのコンテンツ -ツールチップのコンテンツは、 の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。 +ツールチップのコンテンツは、 の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。 @@ -263,7 +263,7 @@ tooltip.anchor = anchor; -あるいは、単純なテキストを設定するには、 プロパティを使用できます。 +あるいは、単純なテキストを設定するには、 プロパティを使用できます。 @@ -288,7 +288,7 @@ tooltip.anchor = anchor; -両方の方法 (スロット化されたコンテンツと プロパティ) を使用する場合、スロット化されたコンテンツが優先され、 値は無視されます。 +両方の方法 (スロット化されたコンテンツと プロパティ) を使用する場合、スロット化されたコンテンツが優先され、 値は無視されます。 @@ -319,19 +319,19 @@ tooltip.anchor = anchor; -この例では、スロット化されたコンテンツ「I will be shown!」が プロパティ値の代わりに表示されます。 +この例では、スロット化されたコンテンツ「I will be shown!」が プロパティ値の代わりに表示されます。 - のコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。 + のコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。 ### 設定の表示/非表示 - を表示および非表示にする前の遅延を制御する場合は、 プロパティと プロパティを使用できます。どちらのプロパティも、時間をミリ秒単位で表す数値を受け入れます。 + を表示および非表示にする前の遅延を制御する場合は、 プロパティと プロパティを使用できます。どちらのプロパティも、時間をミリ秒単位で表す数値を受け入れます。 @@ -364,18 +364,18 @@ tooltip.anchor = anchor; -Tooltip API メソッド (、、) では、 プロパティと プロパティが考慮されないことに注意することが重要です。呼び出されるとすぐに動作します。 +Tooltip API メソッド (、、) では、 プロパティと プロパティが考慮されないことに注意することが重要です。呼び出されるとすぐに動作します。 ### 配置 - は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、 プロパティと PopoverPlacement のいずれかの配置オプションとともに使用するだけです。 + は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、 プロパティと PopoverPlacement のいずれかの配置オプションとともに使用するだけです。 - プロパティが設定されていない場合、デフォルト値は `Bottom` となり、 はターゲット要素の下に配置されます。 + プロパティが設定されていない場合、デフォルト値は `Bottom` となり、 はターゲット要素の下に配置されます。 -さらに、 プロパティを使用して を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、`Esc` キーを押して手動で閉じるまで、 が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに が消えないようにします。 +さらに、 プロパティを使用して を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、`Esc` キーを押して手動で閉じるまで、 が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに が消えないようにします。 - には、 プロパティを介して構成できるオプションの矢印インジケータも含まれています。矢印はツールチップをその anchor 要素に視覚的に接続し、その配置はツールチップの に基づいて自動的に調整されます。 + には、 プロパティを介して構成できるオプションの矢印インジケータも含まれています。矢印はツールチップをその anchor 要素に視覚的に接続し、その配置はツールチップの に基づいて自動的に調整されます。 @@ -410,58 +410,58 @@ Tooltip API メソッド ( -次の例では、すべてのツールチップの配置オプション、矢印の配置動作、および プロパティの動作のデモを見ることができます。 +次の例では、すべてのツールチップの配置オプション、矢印の配置動作、および プロパティの動作のデモを見ることができます。 ### トリガー -デフォルトでは、 はターゲット要素の上にマウスを移動したときにのみトリガーされます。ただし、 プロパティと プロパティを使用してこの動作を変更し、 が表示されるタイミングと消えるタイミングを制御できます。これらのプロパティは、`click`、`focus`、`keypress` などのイベント名を値として受け入れ、さまざまなシナリオで をトリガーできるようにします。 +デフォルトでは、 はターゲット要素の上にマウスを移動したときにのみトリガーされます。ただし、 プロパティと プロパティを使用してこの動作を変更し、 が表示されるタイミングと消えるタイミングを制御できます。これらのプロパティは、`click`、`focus`、`keypress` などのイベント名を値として受け入れ、さまざまなシナリオで をトリガーできるようにします。 ### 高度な例 - は他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。 -次の例では、、、、、、、および コンポーネントを使用して説明的なツールチップを作成する方法を示しています。 + は他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。 +次の例では、、、、、、、および コンポーネントを使用して説明的なツールチップを作成する方法を示しています。 ### 追加のプロパティ -これまでに説明したプロパティの他に、 コンポーネントには、動作、配置、外観をさらに構成できるさまざまな追加プロパティが用意されています。 +これまでに説明したプロパティの他に、 コンポーネントには、動作、配置、外観をさらに構成できるさまざまな追加プロパティが用意されています。 |名前|タイプ|説明| |--|--|--| -| | boolean | ツールチップの表示/非表示を決定します。 | -| | boolean | ツールチップの矢印インジケーターをレンダリングするかどうかを決定します。 | -| | number | ツールチップとその 間のピクセル距離を設定します。 | +| | boolean | ツールチップの表示/非表示を決定します。 | +| | boolean | ツールチップの矢印インジケーターをレンダリングするかどうかを決定します。 | +| | number | ツールチップとその 間のピクセル距離を設定します。 | ### メソッド -構成可能なプロパティに加えて、 では次の 3 つのメソッドも使用できます。 +構成可能なプロパティに加えて、 では次の 3 つのメソッドも使用できます。 |名前|説明| |--|--| -| | ツールチップが表示されていない場合は表示します。ターゲットが指定されている場合は、ターゲットを一時的な として設定します。 | -| | ツールチップがまだ非表示になっていない場合は非表示にします。 | -| | ツールチップの表示状態と非表示状態を切り替えます。 | +| | ツールチップが表示されていない場合は表示します。ターゲットが指定されている場合は、ターゲットを一時的な として設定します。 | +| | ツールチップがまだ非表示になっていない場合は非表示にします。 | +| | ツールチップの表示状態と非表示状態を切り替えます。 | ## アクセシビリティと ARIA サポート - はアクセシビリティを考慮して構築されており、次の ARIA 属性が含まれています。 + はアクセシビリティを考慮して構築されており、次の ARIA 属性が含まれています。 -- `role` - ツールチップがデフォルトの動作になっている場合、`role="tooltip"` が適用されます。 プロパティが有効な場合、ロールは `status` に変更されます。 +- `role` - ツールチップがデフォルトの動作になっている場合、`role="tooltip"` が適用されます。 プロパティが有効な場合、ロールは `status` に変更されます。 - `inert` - 可視性に基づいて動的に切り替えられます。ツールチップが非表示になると、ツールチップは非アクティブになります。 - `aria-atomic` - true に設定すると、ツールチップのコンテンツ全体が変更時に通知されるようになります。 - `aria-live` - polite に設定して、ユーザーがアイドル状態のときにのみ更新を通知することをスクリーン リーダーに示します。 ## スタイル設定 - コンポーネントは、スタイル設定に使用できる 2 つの CSS パーツを公開します。 + コンポーネントは、スタイル設定に使用できる 2 つの CSS パーツを公開します。 |名前|説明| |--|--| @@ -487,14 +487,14 @@ igc-tooltip::part(bottom) { ## API リファレンス -
-
-
-
-
+
+
+
+
+

-
-
+
+

## その他のリソース diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx index 2658d2b5fd..ed121a8797 100644 --- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx @@ -469,7 +469,18 @@ const options = { この方法により、チャット入力バーの柔軟性が完全に向上し、入力領域を最初から再構築することなく、アクションを追加、削除、または並べ替えることができます。 ### Markdown レンダリング -Chat コンポーネントは `igniteui-webcomponents/extras` `igniteui-react/extras` からエクスポートされる `createMarkdownRenderer` ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。 + + + +Chat コンポーネントは `igniteui-webcomponents/extras` からエクスポートされる `createMarkdownRenderer` ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。 + + + + + +Chat コンポーネントは `igniteui-react/extras` からエクスポートされる `createMarkdownRenderer` ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。 + + diff --git a/docs/xplat/src/content/jp/components/layouts/card.mdx b/docs/xplat/src/content/jp/components/layouts/card.mdx index 4c668b40bc..a1b0fbe90b 100644 --- a/docs/xplat/src/content/jp/components/layouts/card.mdx +++ b/docs/xplat/src/content/jp/components/layouts/card.mdx @@ -218,18 +218,18 @@ defineComponents(IgcCardComponent ); -上記を確認することができます。まず、`h3` 見出しのように、要素をヘッダー タイトルとしてタグ付けする場合は、要素を タグの間に配置し、そのスロット名を `title` に設定します。逆に、別の見出し要素を `subtitle` にしたい場合は、そのスロットに `subtitle` という名前を付けます。 +上記を確認することができます。まず、`h3` 見出しのように、要素をヘッダー タイトルとしてタグ付けする場合は、要素を タグの間に配置し、そのスロット名を `title` に設定します。逆に、別の見出し要素を `subtitle` にしたい場合は、そのスロットに `subtitle` という名前を付けます。 -カードに表示する画像や動画は、 タグで囲みます。 を使用すると、内部に配置されたコンテンツのサイズを変更して、要素のコンテンツ ボックス全体を埋めながらアスペクト比を維持できます。オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合、オブジェクトは収まるようにクリップされます。 +カードに表示する画像や動画は、 タグで囲みます。 を使用すると、内部に配置されたコンテンツのサイズを変更して、要素のコンテンツ ボックス全体を埋めながらアスペクト比を維持できます。オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合、オブジェクトは収まるようにクリップされます。 - タグ内には何でも配置できます。通常テキストが配置されます。 + タグ内には何でも配置できます。通常テキストが配置されます。 -最後に、 は、ボタンなどのアクション可能な項目を配置する場所です。 +最後に、 は、ボタンなどのアクション可能な項目を配置する場所です。 ### メディア、サムネイル、アバター タイトルとサブタイトルの横のカード ヘッダーに画像またはアイコンを表示する場合は、要素のスロット プロパティを `thumbnail` に割り当てることで実行できます。 -上記のカードを例にとると、 の内容を編集し、`slot="thumbnail"` でアバターを追加できます。 +上記のカードを例にとると、 の内容を編集し、`slot="thumbnail"` でアバターを追加できます。 @@ -368,7 +368,7 @@ defineComponents(IgcCardComponent ); -追加の `div` 要素を使用して と をバンドルし、それらを垂直方向に整列させ、`.card-horizontal` クラスをラッピング `div` 要素に適用して、カードの 2 つのセクションを水平方向に整列させます。 +追加の `div` 要素を使用して と をバンドルし、それらを垂直方向に整列させ、`.card-horizontal` クラスをラッピング `div` 要素に適用して、カードの 2 つのセクションを水平方向に整列させます。 `.card-horizontal` クラスが適用されるスタイルは次のとおりです。 @@ -400,7 +400,7 @@ defineComponents(IgcCardComponent ); のレイアウトを使用すると、創造をさらに発展させることもできます。 -以下は、半水平カードを作成する方法を示す例です。このカードでは、カードのすべてのセクションが垂直に配置され、 が垂直セクションの横に表示されます。 +以下は、半水平カードを作成する方法を示す例です。このカードでは、カードのすべてのセクションが垂直に配置され、 が垂直セクションの横に表示されます。 @@ -581,7 +581,7 @@ defineComponents(IgcCardComponent ); ## スタイル設定 -カードはさまざまな要素をラップするコンテナであるため、スタイル設定は、その基本要素 (、、、および のサブコンポーネント) をスタイル設定することによって行われます。 +カードはさまざまな要素をラップするコンテナであるため、スタイル設定は、その基本要素 (、、、および のサブコンポーネント) をスタイル設定することによって行われます。 ```css igc-card { @@ -618,10 +618,10 @@ igc-icon-button::part(base) {

-
-
-
-
+
+
+
+



diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx index 9d01fa0fb0..eb22fd1ec2 100644 --- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx @@ -150,7 +150,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); -スライドをデフォルトでアクティブにしたい場合は、 属性を使用します。 +スライドをデフォルトでアクティブにしたい場合は、 属性を使用します。 @@ -648,7 +648,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); ### 自動的なトランジション - は、ユーザーの操作なしでスライドを自動的に変更するように簡単に構成できます。この方法では、トランジション間隔 を プロパティに設定するだけで、スライドショーを作成できます。このプロパティは、スライド トランジション間の間隔 (ミリ秒)を決定します。 + は、ユーザーの操作なしでスライドを自動的に変更するように簡単に構成できます。この方法では、トランジション間隔 を プロパティに設定するだけで、スライドショーを作成できます。このプロパティは、スライド トランジション間の間隔 (ミリ秒)を決定します。 カルーセル コンテンツの上にマウスを移動するか、キーボード フォーカスをいずれかのカルーセル コンテンツに移動すると、自動トランジションが一時停止されます。マウスがカルーセルから離れるか、キーボード フォーカスがカルーセル コンテンツから移動すると、自動トランジションが再開されます。 @@ -694,7 +694,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); - プロパティを有効にします。 - プロパティを有効にします。 - プロパティを有効にします。 -- トランジション を追加します。 +- トランジション を追加します。 - 各スライドにカスタム を追加します。 カルーセル テンプレートは以下のようになります。 @@ -883,7 +883,7 @@ const images = [ - **属性** - [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) を 「carousel」 に設定します。 - - [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - スクリーン リーダーがライブ リージョンの更新を処理する優先度を設定するために使用されます。可能な設定は **off** おとび **polite** です。デフォルト設定は **polite** であり、スライド セットのコンテナーとして機能する要素に設定されています。 オプションが設定され、カルーセルが再生状態の場合、**aria-live** 属性は **off** に設定されます。 + - [aria-live](https://www.w3.org/TR/wai-aria-1.1/#aria-live) - スクリーン リーダーがライブ リージョンの更新を処理する優先度を設定するために使用されます。可能な設定は **off** おとび **polite** です。デフォルト設定は **polite** であり、スライド セットのコンテナーとして機能する要素に設定されています。 オプションが設定され、カルーセルが再生状態の場合、**aria-live** 属性は **off** に設定されます。 - [aria-label](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) (ナビゲーション ボタン) - 「前のスライド」/「次のスライド」。 #### Slide コンポーネント 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 d835c07671..8de14721d6 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx @@ -24,7 +24,7 @@ Infragistics {Platform} Dock Manager は、ペインでアプリケーション ## {Platform} ドック マネージャーの例 -この例は、アプリケーションで使用できる のほとんどの機能とドッキング オプションを示しています。 +この例は、アプリケーションで使用できる のほとんどの機能とドッキング オプションを示しています。 @@ -77,7 +77,7 @@ defineComponents(IgcDockManagerComponent); ドック マネージャー コンポーネントは ShadowDOM とスロットを使用するため、Internet Explorer 11 および Edge 18 以前 (Chromium 以外のバージョン) などの古いブラウザーではサポートされません。 -ドック マネージャーにはペインのレイアウトを説明する プロパティがあります。レイアウトの定義するには、 プロパティを設定し、子ペインを追加します。以下は、単一のコンテンツ ペインでレイアウトを定義する方法です。 +ドック マネージャーにはペインのレイアウトを説明する プロパティがあります。レイアウトの定義するには、 プロパティを設定し、子ペインを追加します。以下は、単一のコンテンツ ペインでレイアウトを定義する方法です。 ```ts @@ -125,7 +125,7 @@ this.dockManager.layout = { ``` -ペインのコンテンツをロードするために、ドック マネージャーは[スロット](https://developer.mozilla.org/ja-JP/docs/Web/HTML/Element/slot)を使用します。コンテンツ要素の [slot](https://developer.mozilla.org/ja-JP/docs/Web/HTML/Global_attributes/slot) 属性はレイアウト構成のコンテンツ ペインの と一致する必要があります。エンドユーザーがペインのサイズを変更する場合は、予測可能な応答のために、コンテンツ要素の幅と高さを **100%** に設定することを強くお勧めします。 +ペインのコンテンツをロードするために、ドック マネージャーは[スロット](https://developer.mozilla.org/ja-JP/docs/Web/HTML/Element/slot)を使用します。コンテンツ要素の [slot](https://developer.mozilla.org/ja-JP/docs/Web/HTML/Global_attributes/slot) 属性はレイアウト構成のコンテンツ ペインの と一致する必要があります。エンドユーザーがペインのサイズを変更する場合は、予測可能な応答のために、コンテンツ要素の幅と高さを **100%** に設定することを強くお勧めします。 ```html @@ -144,12 +144,12 @@ this.dockManager.layout = { ドック マネージャーは複数の pane types を定義します。 -- -- -- -- +- +- +- +- -各タイプのペインには プロパティがあります。親の方向に応じて、サイズはペインの幅または高さに影響します。ペインのサイズはその兄弟ペインのサイズに相対し、デフォルトは 100 です。2 つの兄弟ペインがあり、最初のペインのサイズが 200 に設定され、2 番目のペインのサイズが 100 に設定されている場合、最初のペインは 2 番目のペインの 2 倍のサイズになり、これら 2 つのペインが使用可能なスペースをすべて埋めてしまいます。親の絶対サイズが 900px の場合、それぞれ 600px と 300px にサイズ設定されます。特定のペインのサイズをピクセル単位で指定する場合は、使用可能なすべてのスペースの相対的な配分に依存するのではなく、親の分割ペインの `useFixedSize` を設定する必要があります。 +各タイプのペインには プロパティがあります。親の方向に応じて、サイズはペインの幅または高さに影響します。ペインのサイズはその兄弟ペインのサイズに相対し、デフォルトは 100 です。2 つの兄弟ペインがあり、最初のペインのサイズが 200 に設定され、2 番目のペインのサイズが 100 に設定されている場合、最初のペインは 2 番目のペインの 2 倍のサイズになり、これら 2 つのペインが使用可能なスペースをすべて埋めてしまいます。親の絶対サイズが 900px の場合、それぞれ 600px と 300px にサイズ設定されます。特定のペインのサイズをピクセル単位で指定する場合は、使用可能なすべてのスペースの相対的な配分に依存するのではなく、親の分割ペインの `useFixedSize` を設定する必要があります。 For more information on this refer to [Split Panes Fixed Size Mode](dock-manager-customization.md#split-panes-fixed-size-mode) topic. @@ -168,7 +168,7 @@ this.dockManager.layout = { ### コンテンツ ペイン - ヘッダーとコンテンツを含むペインを表します。スプリットされたペインまたはタブ グループ ペイン内でホストできます。以下はコンテンツ ペインの定義方法です。 + ヘッダーとコンテンツを含むペインを表します。スプリットされたペインまたはタブ グループ ペイン内でホストできます。以下はコンテンツ ペインの定義方法です。 ```ts @@ -190,7 +190,7 @@ const contentPane: IgrContentPane = { ``` - プロパティはコンテンツ ペインのテキスト ヘッダーを提供するために使用されます。このテキストは複数の場所で描画されます。トップコンテンツペインヘッダー、ペインがタブグループにある場合はタブヘッダー、ペインが固定解除されている場合は固定解除ヘッダーです。、 および プロパティを使用してそれぞれこれらの場所にカスタム スロット コンテンツを提供できます。これらのプロパティのいずれかが設定されていない場合、 テキストが使用されます。以下は、タブ ヘッダー スロット コンテンツを提供する方法です。 + プロパティはコンテンツ ペインのテキスト ヘッダーを提供するために使用されます。このテキストは複数の場所で描画されます。トップコンテンツペインヘッダー、ペインがタブグループにある場合はタブヘッダー、ペインが固定解除されている場合は固定解除ヘッダーです。、 および プロパティを使用してそれぞれこれらの場所にカスタム スロット コンテンツを提供できます。これらのプロパティのいずれかが設定されていない場合、 テキストが使用されます。以下は、タブ ヘッダー スロット コンテンツを提供する方法です。 ```html @@ -232,7 +232,7 @@ const contentPane: IgrContentPane = { ``` -ペインのピン固定が解除されると、ドック マネージャーのいずれかの端にタブ ヘッダーとして表示されます。エンドユーザーに選択されると、そのコンテンツはドッキングされたピン固定ペインの上に表示されます。コンテンツ ペインのピン固定を解除するには、 プロパティを **false** に設定します。 +ペインのピン固定が解除されると、ドック マネージャーのいずれかの端にタブ ヘッダーとして表示されます。エンドユーザーに選択されると、そのコンテンツはドッキングされたピン固定ペインの上に表示されます。コンテンツ ペインのピン固定を解除するには、 プロパティを **false** に設定します。 ```ts @@ -256,17 +256,17 @@ const contentPane = { ``` - プロパティはドキュメント ホストの外部にドッキングされているコンテンツ ペインのみに影響します。また、フローティング ペインでホストされているコンテンツ ペインのピン固定を解除することはできません。 + プロパティはドキュメント ホストの外部にドッキングされているコンテンツ ペインのみに影響します。また、フローティング ペインでホストされているコンテンツ ペインのピン固定を解除することはできません。 -デフォルトでは、コンテンツ ペインのピン固定解除先は、ドキュメント ホストに対するペインの相対的な位置に基づいて自動的に計算されます。複数のドキュメント ホストが定義されている場合、ピン固定されていないコンテンツ ペインの親階層で最も近いホストが使用されます。ドキュメント ホストが定義されていない場合、デフォルトの場所 `Left` が使用されます。 プロパティを使用してピン固定が解除されたペインの行き先を設定することも可能です。 +デフォルトでは、コンテンツ ペインのピン固定解除先は、ドキュメント ホストに対するペインの相対的な位置に基づいて自動的に計算されます。複数のドキュメント ホストが定義されている場合、ピン固定されていないコンテンツ ペインの親階層で最も近いホストが使用されます。ドキュメント ホストが定義されていない場合、デフォルトの場所 `Left` が使用されます。 プロパティを使用してピン固定が解除されたペインの行き先を設定することも可能です。 -、、 および プロパティを使用して、コンテンツ ペインで許可されるエンドユーザー操作を設定できます。 +、、 および プロパティを使用して、コンテンツ ペインで許可されるエンドユーザー操作を設定できます。 -コンテンツ ペインを定義するときに、 プロパティを true に設定して、ペインをドキュメント ホストにのみドッキングできるようにすることができます。 +コンテンツ ペインを定義するときに、 プロパティを true に設定して、ペインをドキュメント ホストにのみドッキングできるようにすることができます。 -コンテンツ ペインとそのコンテンツに対するユーザーの操作を制限するには、 プロパティを true に設定します。これにより、単一のフローティング ペインでない限り、すべてのユーザーがペインを操作できなくなります。後者は移動、最大化、または閉じることができるため (最大化および閉じるためのペインの設定に従って)、ユーザーはその下の要素を見ることができますが、そのコンテンツを操作することはできません。 +コンテンツ ペインとそのコンテンツに対するユーザーの操作を制限するには、 プロパティを true に設定します。これにより、単一のフローティング ペインでない限り、すべてのユーザーがペインを操作できなくなります。後者は移動、最大化、または閉じることができるため (最大化および閉じるためのペインの設定に従って)、ユーザーはその下の要素を見ることができますが、そのコンテンツを操作することはできません。 -デフォルトでは、ペインを閉じると、 オブジェクトから削除されます。ただし、場合によってはペインを一時的に非表示にして後で表示することもできます。 オブジェクトを変更せずにそれを行うには、コンテンツペインの プロパティを使用できます。プロパティを **true** に設定すると UI から非表示になりますが、 オブジェクトに残ります。デフォルトの閉じる動作をオーバーライドするには、このように `PaneClose` イベントにサブスクライブできます。 +デフォルトでは、ペインを閉じると、 オブジェクトから削除されます。ただし、場合によってはペインを一時的に非表示にして後で表示することもできます。 オブジェクトを変更せずにそれを行うには、コンテンツペインの プロパティを使用できます。プロパティを **true** に設定すると UI から非表示になりますが、 オブジェクトに残ります。デフォルトの閉じる動作をオーバーライドするには、このように `PaneClose` イベントにサブスクライブできます。 ```ts @@ -292,7 +292,7 @@ this.dockManager.addEventListener('paneClose', ev => { ### 分割ペイン - は、 プロパティに基づいてすべての子 を水平または垂直に積み重ねるコンテナー ペインです。以下は、2 つの子コンテンツ ペインを持つ水平の分割ペインの定義方法です。 + は、 プロパティに基づいてすべての子 を水平または垂直に積み重ねるコンテナー ペインです。以下は、2 つの子コンテンツ ペインを持つ水平の分割ペインの定義方法です。 ```ts @@ -338,11 +338,11 @@ const splitPane: IgrSplitPane = { 分割ペインは、他のスプリットされたペインを含むすべてのペイン タイプの子ペインを含むことができます。 -デフォルトでは、分割ペインが空の場合は表示されません。ただし、その動作を変更したい場合は、 プロパティを true に設定すると、内部にペインがない場合でも、分割ペインが UI に表示されます。 +デフォルトでは、分割ペインが空の場合は表示されません。ただし、その動作を変更したい場合は、 プロパティを true に設定すると、内部にペインがない場合でも、分割ペインが UI に表示されます。 ### タブ グループ ペイン - は、その子コンテンツ をタブ コンポーネントのタブとして表示します。以下は、2 つのタブそれぞれにコンテンツ ペインを持つタブ グループ ペインの定義方法です。 + は、その子コンテンツ をタブ コンポーネントのタブとして表示します。以下は、2 つのタブそれぞれにコンテンツ ペインを持つタブ グループ ペインの定義方法です。 ```ts @@ -388,11 +388,11 @@ const tabGroupPane: IgrTabGroupPane = { タブは、それらが配置されているタブ グループから切り離さずに並べ替えることもできます。タブをクリックして、希望の位置まで左または右にドラッグできます。選択したタブをタブ領域の外にドラッグすると、フローティング ペインにデタッチされます。 -タブがないときにタブ グループ ペインを UI に表示する場合は、 プロパティを true に設定します。 +タブがないときにタブ グループ ペインを UI に表示する場合は、 プロパティを true に設定します。 ### ドキュメント ホスト - コード編集やデザイン ビュー用の Visual Studio のタブと同様のドキュメント タブ領域です。以下は、2 つのドキュメント タブを持つドキュメント ホストを定義する方法です。 + コード編集やデザイン ビュー用の Visual Studio のタブと同様のドキュメント タブ領域です。以下は、2 つのドキュメント タブを持つドキュメント ホストを定義する方法です。 ```ts @@ -454,7 +454,7 @@ const docHost: IgrDocumentHost = { ### フローティング ペイン -フローティング ペインは、フローティング ウィンドウで他のペインの上に描画される分割ペインです。フローティング ペインの定義は、 の プロパティに保存されます。以下は、単一のコンテンツ ペインを含むフローティング ペインを追加する方法です。 +フローティング ペインは、フローティング ウィンドウで他のペインの上に描画される分割ペインです。フローティング ペインの定義は、 の プロパティに保存されます。以下は、単一のコンテンツ ペインを含むフローティング ペインを追加する方法です。 ```ts @@ -510,13 +510,13 @@ const layout: IgrDockManagerLayout = { ``` -、 と プロパティは絶対寸法をピクセル単位で表します。これらのプロパティは、 配列の分割ペインにのみ適用されることに注意してください。 +、 と プロパティは絶対寸法をピクセル単位で表します。これらのプロパティは、 配列の分割ペインにのみ適用されることに注意してください。 - と を使用して、フローティング ペインのサイズ変更を許可するかどうかを設定できます。`allowFloatingPanesResize` は **IgcDockManagerComponent** プロパティであるため、値が **false** に設定されている場合、フローティング ペインのサイズを変更することはできません。`floatingResizable` プロパティは、`floatPanes` 配列の各分割ペインに個別に適用できます。プロパティ値が設定されていない場合、デフォルトで `allowFloatingPanesResize` プロパティの値になります。`floatingResizable` プロパティが特定のペインに設定されている場合、その値は `allowFloatingPanesResize` プロパティ値に優先されます。 + と を使用して、フローティング ペインのサイズ変更を許可するかどうかを設定できます。`allowFloatingPanesResize` は **IgcDockManagerComponent** プロパティであるため、値が **false** に設定されている場合、フローティング ペインのサイズを変更することはできません。`floatingResizable` プロパティは、`floatPanes` 配列の各分割ペインに個別に適用できます。プロパティ値が設定されていない場合、デフォルトで `allowFloatingPanesResize` プロパティの値になります。`floatingResizable` プロパティが特定のペインに設定されている場合、その値は `allowFloatingPanesResize` プロパティ値に優先されます。 ### アクティブ ペイン -ドック マネージャー コンポーネントは、フォーカスを含むコンテンツ ペインをハイライト表示し、 プロパティで公開します。プロパティを設定することによってアクティブ ペインをプログラムで変更できます。`ActivePaneChanged` イベントにサブスクライブして、 プロパティの変更をリッスンすることもできます。 +ドック マネージャー コンポーネントは、フォーカスを含むコンテンツ ペインをハイライト表示し、 プロパティで公開します。プロパティを設定することによってアクティブ ペインをプログラムで変更できます。`ActivePaneChanged` イベントにサブスクライブして、 プロパティの変更をリッスンすることもできます。 ```ts @@ -542,7 +542,7 @@ this.dockManager.addEventListener('activePaneChanged', ev => { #### ルート ドッキング -このタイプのドッキングでは、ペインをドラッグしているときに、ドックマネージャーの四隅付近に 4 つの矢印ドッキングインジケーターが表示されます。ペインをドロップすると、Dock Manager の の直接の子要素になります。視覚的には、新しくドッキングされたペインはそれぞれの端にスナップされ、ドック マネージャーの幅または高さの最大半分を占め、他のすべてのコンテンツは残りの半分に移動します。 +このタイプのドッキングでは、ペインをドラッグしているときに、ドックマネージャーの四隅付近に 4 つの矢印ドッキングインジケーターが表示されます。ペインをドロップすると、Dock Manager の の直接の子要素になります。視覚的には、新しくドッキングされたペインはそれぞれの端にスナップされ、ドック マネージャーの幅または高さの最大半分を占め、他のすべてのコンテンツは残りの半分に移動します。 dockmanager-root-docking @@ -617,7 +617,7 @@ this.dockManager.layout = { ...this.dockManager.layout }; ### レイアウトの保存／読み込み -レイアウトを復元または永続化するには、 プロパティの値を取得または設定します。以下は、文字列化された JSON としてレイアウトを保存する方法です。 +レイアウトを復元または永続化するには、 プロパティの値を取得または設定します。以下は、文字列化された JSON としてレイアウトを保存する方法です。 ```ts @@ -650,7 +650,7 @@ private loadLayout() { ### Adding Panes At Runtime -Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. +Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. @@ -661,7 +661,7 @@ Contents and panes can be added to the に追加できます。以下の例では、コンテンツ、ドキュメント、およびフローティング ペインを追加する方法を確認できます。 +コンテンツとペインは、実行時に に追加できます。以下の例では、コンテンツ、ドキュメント、およびフローティング ペインを追加する方法を確認できます。 @@ -1000,13 +1000,13 @@ addResourceStrings('fr', dockManagerStringsFr); ``` -ドック マネージャーは、個々の文字列を直接変更するために使用できる プロパティも公開します。 プロパティを設定すると、ドック マネージャーはページの [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性に関係なく、指定された文字列を使用します。 +ドック マネージャーは、個々の文字列を直接変更するために使用できる プロパティも公開します。 プロパティを設定すると、ドック マネージャーはページの [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性に関係なく、指定された文字列を使用します。 ## API リファレンス -
-
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/layouts/stepper.mdx b/docs/xplat/src/content/jp/components/layouts/stepper.mdx index e756e27363..bf8d967af9 100644 --- a/docs/xplat/src/content/jp/components/layouts/stepper.mdx +++ b/docs/xplat/src/content/jp/components/layouts/stepper.mdx @@ -42,7 +42,7 @@ import stepperContenttop from '@xplat-images/stepper/stepper-contentTop.png'; npm install {PackageWebComponents} ``` - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: ```ts import { defineComponents, IgcStepperComponent } from 'igniteui-webcomponents'; @@ -67,7 +67,7 @@ defineComponents(IgcStepperComponent); npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrStepper, IgrStep } from 'igniteui-react'; @@ -94,7 +94,7 @@ builder.Services.AddIgniteUIBlazor( -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -104,10 +104,10 @@ builder.Services.AddIgniteUIBlazor( -これで、{Platform} とそのパネルの基本構成から始めることができます。 +これで、{Platform} とそのパネルの基本構成から始めることができます。 ## {Platform} ステッパーの使用方法 - は、 に属するすべてのステップの表現です。ステップは `Step.Invalid`、`Step.Active`、`Step.Optional`、`Step.Disabled`、`Step.Complete` プロパティを提供し、ビジネス要件に応じてステップの状態を構成できます。 + は、 に属するすべてのステップの表現です。ステップは `Step.Invalid`、`Step.Active`、`Step.Optional`、`Step.Disabled`、`Step.Complete` プロパティを提供し、ビジネス要件に応じてステップの状態を構成できます。 ### {Platform} ステッパーの宣言 ステップは、以下の方法のいずれかを使用して宣言できます。 @@ -273,8 +273,8 @@ builder.Services.AddIgniteUIBlazor( **水平方向の {Platform} ステッパー** - の orientation プロパティのデフォルト値は **horizontal**です。 -{Platform} ステッパーが水平方向の場合、ステップのコンテンツをステップのヘッダーの上または下に表示するかどうかを決定できます。これは、 の ブール型プロパティを設定することで実現できます。デフォルト値は **false** です。有効な場合、ステップのコンテンツはステップのヘッダーの上に表示されます。 + の orientation プロパティのデフォルト値は **horizontal**です。 +{Platform} ステッパーが水平方向の場合、ステップのコンテンツをステップのヘッダーの上または下に表示するかどうかを決定できます。これは、 の ブール型プロパティを設定することで実現できます。デフォルト値は **false** です。有効な場合、ステップのコンテンツはステップのヘッダーの上に表示されます。 stepper-contentTop @@ -292,7 +292,7 @@ builder.Services.AddIgniteUIBlazor( ### ステップ状態 -{Platform} は 5 つのステップ状態をサポートし、それぞれがデフォルトで異なるスタイルを適用します。 +{Platform} は 5 つのステップ状態をサポートし、それぞれがデフォルトで異なるスタイルを適用します。 - **active** - ステップが現在表示されているかどうかを決定します。設計上、ユーザーが明示的にステップの active 属性を **true** に設定しない場合、最初の有効なステップがアクティブになります。 - **disabled** - ステップが操作可能かどうかを決定します。デフォルトでは、ステップの disabled 属性は **false** に設定されています。 - **invalid** - ステップが有効かどうかを決定します。その値に基づいて、ユーザーがリニア ステッパー モードで前に進むことができるかどうかが決定されます。デフォルト値は **false** です。 @@ -307,7 +307,7 @@ builder.Services.AddIgniteUIBlazor( ### リニア {Platform} ステッパー -{Platform} は、 プロパティを使用してステップ フローを設定できます。デフォルトで、linear は **false** に設定され、ユーザーは で無効にされていないステップを選択できます。 +{Platform} は、 プロパティを使用してステップ フローを設定できます。デフォルトで、linear は **false** に設定され、ユーザーは で無効にされていないステップを選択できます。 @@ -365,8 +365,8 @@ linear プロパティが **true** に設定されている場合、ステッパ ### ステップ操作 - provides the following API methods for step interactions: - は、ステップ操作に以下の API メソッドを提供します。 + provides the following API methods for step interactions: + は、ステップ操作に以下の API メソッドを提供します。 - **navigateTo** – 指定したインデックスでステップをアクティブ化します。 - **next** - 次の無効化されていないステップをアクティブ化します。 - **prev** – 前の無効化されていないステップをアクティブ化します。 @@ -380,7 +380,7 @@ reset メソッドは、ステッパーを初期状態にリセットします {ProductName} ステッパーでは、タイトル、インジケーターなどのさまざまなオプションを構成できます。 -これは、 の プロパティで実現できます。プロパティは以下の値を含みます: +これは、 の プロパティで実現できます。プロパティは以下の値を含みます: - Full (フル、デフォルト値) - Indicator (インジケーター) - Title (タイトル) @@ -397,7 +397,7 @@ reset メソッドは、ステッパーを初期状態にリセットします - bottom - top -{Platform} が水平方向で、タイトルの位置が**定義されていない**場合、タイトルはインジケーターの**下**に表示されます。 +{Platform} が水平方向で、タイトルの位置が**定義されていない**場合、タイトルはインジケーターの**下**に表示されます。 向きが垂直に設定され、タイトルの位置が**定義されていない**場合、タイトルはインジケーターの**後**に表示されます。 @@ -429,7 +429,7 @@ reset メソッドは、ステッパーを初期状態にリセットします ### Stepper のアニメーション -{Platform} の のアニメーションにより、エンドユーザーは、定義されたステップを操作しているときに美しいユーザー操作体験を得ることができます。使用可能なアニメーション オプションは、ステッパーの向きによって異なります。 +{Platform} の のアニメーションにより、エンドユーザーは、定義されたステップを操作しているときに美しいユーザー操作体験を得ることができます。使用可能なアニメーション オプションは、ステッパーの向きによって異なります。 ステッパーが水平方向の場合、デフォルトでは `slide` アニメーションを使用するように設定されています。その他に `fade` アニメーションもサポートされます。アニメーションは、 入力を介して構成されます。 @@ -437,7 +437,7 @@ reset メソッドは、ステッパーを初期状態にリセットします 両方のアニメーション タイプ入力に `none` を設定すると、ステッパー アニメーションが無効になります。 - コンポーネントを使用すると、ステップ間の遷移にかかる時間を設定することもできます。これは、数値を受け取る `animationDuration` プロパティで設定でき、いずれのレイアウト方向でも共通の設定です。デフォルト値は 320ms に設定されています。 + コンポーネントを使用すると、ステップ間の遷移にかかる時間を設定することもできます。これは、数値を受け取る `animationDuration` プロパティで設定でき、いずれのレイアウト方向でも共通の設定です。デフォルト値は 320ms に設定されています。 @@ -446,7 +446,7 @@ reset メソッドは、ステッパーを初期状態にリセットします ## キーボード ナビゲーション {ProductName} ステッパーは、さまざまなキーボード操作をエンドユーザーに提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にステップを移動できます。 -{Platform} ナビゲーションは [W3 アクセシビリティ標準](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)に準拠しており、便利に使用できます。 +{Platform} ナビゲーションは [W3 アクセシビリティ標準](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)に準拠しており、便利に使用できます。 **キーの組み合わせ** @@ -485,7 +485,7 @@ reset メソッドは、ステッパーを初期状態にリセットします | `body` | ステップのコンテンツのラッパー。| | `content` | ステップのコンテンツ。| -これらの CSS パーツを使用して、次のように コンポーネントの外観をカスタマイズできます: +これらの CSS パーツを使用して、次のように コンポーネントの外観をカスタマイズできます: ```css igc-step::part(title) { @@ -525,7 +525,7 @@ igc-step::part(indicator) { ## API リファレンス -
+



diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index b4645a80e7..f5876eb34d 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -149,7 +149,7 @@ defineComponents(IgcTabsComponent); -タブ テキストは、 プロパティを使用して単純な文字列として設定することも、`label` スロットに子要素を割り当てることで設定することもできます。デフォルト スロットの残りの子要素は、タブ コンテンツとしてレンダリングされます。 +タブ テキストは、 プロパティを使用して単純な文字列として設定することも、`label` スロットに子要素を割り当てることで設定することもできます。デフォルト スロットの残りの子要素は、タブ コンテンツとしてレンダリングされます。 ### 選択 @@ -157,11 +157,11 @@ defineComponents(IgcTabsComponent); 選択したタブが初期の読み込み時に指定されていない場合、無効になっていない最初のタブが選択されます。 -ユーザーが矢印キーでナビゲートしているときにタブを選択するデフォルトの動作は、 プロパティによって変更できます。`Manual` に設定すると、矢印キーを押すと次 / 前のタブにフォーカスしますが、タブは SPACE または ENTER を押した後にのみ選択されます。 +ユーザーが矢印キーでナビゲートしているときにタブを選択するデフォルトの動作は、 プロパティによって変更できます。`Manual` に設定すると、矢印キーを押すと次 / 前のタブにフォーカスしますが、タブは SPACE または ENTER を押した後にのみ選択されます。 ### 無効化されたタブ - 属性を設定すると、タブが無効になります: + 属性を設定すると、タブが無効になります: @@ -189,7 +189,7 @@ defineComponents(IgcTabsComponent); ### 配置 - プロパティは、{Platform} タブの配置方法を制御します。プロパティは以下の値を含みます: + プロパティは、{Platform} タブの配置方法を制御します。プロパティは以下の値を含みます: - `Start` (デフォルト): タブの幅はコンテンツ (ラベル、アイコン、両方) に依存し、すべてのタブのパディングは等しくなります。最初のタブは、タブ コンテナーの左側に配置されます。 - `Center`: タブの幅はコンテンツによって異なり、タブ コンテナーの中心を占めます。 @@ -216,11 +216,11 @@ defineComponents(IgcTabsComponent); |キー|説明| |----|-----------| -| ← | 前 (右から左モードでは次) のタブを選択します。 が `Manual` に設定されている場合は、タブのみがフォーカスされます。最初のタブにある場合は最後までスクロールします。 | -| → | 次へ (右から左モードでは前へ) タブを選択します。 が `Manual` に設定されている場合は、タブのみがフォーカスされます。最後のタブにある場合は、スクロールして開始します。 | +| ← | 前 (右から左モードでは次) のタブを選択します。 が `Manual` に設定されている場合は、タブのみがフォーカスされます。最初のタブにある場合は最後までスクロールします。 | +| → | 次へ (右から左モードでは前へ) タブを選択します。 が `Manual` に設定されている場合は、タブのみがフォーカスされます。最後のタブにある場合は、スクロールして開始します。 | | HOME | 最初のタブを選択します。 | | END | 最後のタブを選択します。 | -| ENTER / SPACE | が `Manual` の場合、フォーカスされたタブを選択します。 | +| ENTER / SPACE | が `Manual` の場合、フォーカスされたタブを選択します。 | ### Prefix / Suffix (プレフィックス / サフィックス) diff --git a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx index 560337089c..60f9a985c2 100644 --- a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx @@ -34,11 +34,11 @@ import tileManagerActions from '@xplat-images/tile-manager-actions.png'; は、最大化状態または通常状態でのタイルの配置を管理する基本的なタイル レイアウト動作を提供します。タイルはそれぞれ独立してサイズを設定でき、複雑なレイアウトを構築できます。エンドユーザーはドラッグ アンド ドロップによる直感的な操作で柔軟にタイルを並べ替えることが可能です。 タイル マネージャーでは、使用できる 2 つのコンポーネントが提供されます。 -- - このコンポーネントは、タイル マネージャー内に表示される個々のタイルを表します。 +- - このコンポーネントは、タイル マネージャー内に表示される個々のタイルを表します。 - - これはすべてのタイル コンポーネントを含むメイン コンポーネントであり、タイル レイアウト全体のコンテナーとして機能します。 -- - This component represents an individual tile displayed within the Tile Manager. -- - This is the main component that contains all of the tile components, serving as the container for the entire tile layout. +- - This component represents an individual tile displayed within the Tile Manager. +- - This is the main component that contains all of the tile components, serving as the container for the entire tile layout. ### 作業の開始 @@ -106,7 +106,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule)); ``` -また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、 コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -726,9 +726,9 @@ Tile コンポーネントは、使用できるいくつかのスロットも公 ## スタイル設定 - と の 2 つのコンポーネントの外観をカスタマイズすることもできます。 - は、Tile Manager のベース ラッパーのスタイル設定に使用できる CSS プロパティ `base` のみを公開します。 - は、使用できるいくつかの CSS プロパティを公開します。 + と の 2 つのコンポーネントの外観をカスタマイズすることもできます。 + は、Tile Manager のベース ラッパーのスタイル設定に使用できる CSS プロパティ `base` のみを公開します。 + は、使用できるいくつかの CSS プロパティを公開します。 | パーツ名 | 説明 | | ---------|------------ | @@ -824,13 +824,13 @@ igc-tile:nth-child(n+2)::part(trigger) { ## API リファレンス - -- +- - [スタイル設定 & テーマ](../themes/overview.md) ## その他のリソース -
-
+
+
- [{ProductName} **フォーラム (英語)**]({ForumsLink}) - [{ProductName} **GitHub (英語)**]({GithubLink}) diff --git a/docs/xplat/src/content/jp/components/menus/navbar.mdx b/docs/xplat/src/content/jp/components/menus/navbar.mdx index c73eb6083b..2a78eb61f7 100644 --- a/docs/xplat/src/content/jp/components/menus/navbar.mdx +++ b/docs/xplat/src/content/jp/components/menus/navbar.mdx @@ -14,12 +14,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Navbar の概要 -{Platform} は、アプリ内の現在の位置をユーザーに通知します。ナビゲーション バーは、検索やお気に入りなどのクイック アクションへのリンクを提供することもでき、ユーザーが無効なルートや状態に移動しようとせずに、アプリケーション内をスムーズにナビゲートできるようにします。ナビゲーション バーは、それが配置されているコンテナの上部にあります。 +{Platform} は、アプリ内の現在の位置をユーザーに通知します。ナビゲーション バーは、検索やお気に入りなどのクイック アクションへのリンクを提供することもでき、ユーザーが無効なルートや状態に移動しようとせずに、アプリケーション内をスムーズにナビゲートできるようにします。ナビゲーション バーは、それが配置されているコンテナの上部にあります。 ## {Platform} Navbar の例 -次の例は、アイコンとテキスト ヘッダーのある を表しています: +次の例は、アイコンとテキスト ヘッダーのある を表しています: @@ -39,7 +39,7 @@ npm install {PackageWebComponents} - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: @@ -69,7 +69,7 @@ defineComponents(IgcNavbarComponent); -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -90,7 +90,7 @@ defineComponents(IgcNavbarComponent); npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrNavbar } from 'igniteui-react'; @@ -101,7 +101,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; -次に、 のテンプレートに次のコードを追加して、タイトルのみの基本的な を表示できます。 +次に、 のテンプレートに次のコードを追加して、タイトルのみの基本的な を表示できます。 @@ -136,7 +136,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; ### コンテンツ - コンポーネントを強化するには、 またはその他のコンポーネントを start 位置または end 位置のコンテンツとして追加し、ユーザーがバーから直接主要な位置に移動できるようにします。 + コンポーネントを強化するには、 またはその他のコンポーネントを start 位置または end 位置のコンテンツとして追加し、ユーザーがバーから直接主要な位置に移動できるようにします。 @@ -220,7 +220,7 @@ igc-navbar::part(middle) {
-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx index 12bc037f1d..ec50526c1a 100644 --- a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx @@ -19,7 +19,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## {Platform} Navigation Drawer の例 -このサンプルは、 コンポーネントを作成する方法を示しています。 +このサンプルは、 コンポーネントを作成する方法を示しています。 @@ -52,7 +52,7 @@ npm install {PackageWebComponents} npm install igniteui-react ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```tsx import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem } from 'igniteui-react'; @@ -63,7 +63,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります。 + を使用する前に、次のように登録する必要があります。 @@ -84,7 +84,7 @@ builder.Services.AddIgniteUIBlazor( -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -108,7 +108,7 @@ defineComponents(IgcNavDrawerComponent); ## Navigation Drawer 項目の追加 - の使用を開始する最も簡単な方法は次のとおりです: + の使用を開始する最も簡単な方法は次のとおりです: @@ -572,7 +572,7 @@ igc-nav-drawer-header-item {


-
+



diff --git a/docs/xplat/src/content/jp/components/menus/toolbar.mdx b/docs/xplat/src/content/jp/components/menus/toolbar.mdx index d925bb1d88..c155dfcd77 100644 --- a/docs/xplat/src/content/jp/components/menus/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/menus/toolbar.mdx @@ -33,7 +33,7 @@ npm install {PackageCharts} npm install {PackageCore} ``` - コンポーネントとその機能とともに を使用する場合、次のモジュールが必要です。 + コンポーネントとその機能とともに を使用する場合、次のモジュールが必要です。 @@ -126,7 +126,7 @@ import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategory export class AppModule {} ``` - コンポーネントとその機能とともに を使用する場合、次のモジュールが必要です。 + コンポーネントとその機能とともに を使用する場合、次のモジュールが必要です。 ```ts import { IgxToolbarModule } from 'igniteui-react-layouts'; @@ -141,7 +141,7 @@ IgrDataChartInteractivityModule.register(); IgrDataChartCategoryTrendLineModule.register(); ``` -スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります。 +スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります。 ```ts import { ModuleManager } from 'igniteui-webcomponents-core'; @@ -168,29 +168,29 @@ ModuleManager.register( ### ツール操作 -以下は、ツールバーに追加できるさまざまな 項目のリストです。 +以下は、ツールバーに追加できるさまざまな 項目のリストです。 -- -- -- -- -- -- -- -- +- +- +- +- +- +- +- +- -これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注: は、 内にラップすることもできる他のツールのラッパーです。 +これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注: は、 内にラップすることもできる他のツールのラッパーです。 - オブジェクトの 、、および プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は プロパティも公開します。 + オブジェクトの 、、および プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は プロパティも公開します。 -次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、 でツールをグループ化できます。この例では、 プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの プロパティによってもハイライト表示されます。 +次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、 でツールをグループ化できます。この例では、 プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの プロパティによってもハイライト表示されます。 ### {Platform} データ チャートの統合 -{Platform} ツールバーには、 プロパティが含まれています。これは、以下のコードに示すように、 などのコンポーネントをリンクするために使用されます。 +{Platform} ツールバーには、 プロパティが含まれています。これは、以下のコードに示すように、 などのコンポーネントをリンクするために使用されます。 @@ -299,47 +299,47 @@ ModuleManager.register( - が Toolbar にリンクされると、いくつかの既存の 項目とメニューが使用可能になります。以下は、組み込みの {Platform} ツール操作とそれに関連付けられた のリストです。 + が Toolbar にリンクされると、いくつかの既存の 項目とメニューが使用可能になります。以下は、組み込みの {Platform} ツール操作とそれに関連付けられた のリストです。 ズーム操作 -- `ZoomMenu`: チャートのズーム レベルを増減するための および メソッドを呼び出す 3 つの 項目を公開する には、チャートの メソッドを呼び出してズーム レベルをデフォルトの位置にリセットする `ZoomReset` が含まれます。 +- `ZoomMenu`: チャートのズーム レベルを増減するための および メソッドを呼び出す 3 つの 項目を公開する には、チャートの メソッドを呼び出してズーム レベルをデフォルトの位置にリセットする `ZoomReset` が含まれます。 トレンド操作 -- `AnalyzeMenu`: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む 。 +- `AnalyzeMenu`: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む 。 - `AnalyzeHeader`: サブ セクションのヘッダー。 - `LinesMenu`: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブ メニュー。 - `LinesHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー: - - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する 。 - - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する 。 - - : シリーズの平均値で yAxis に沿って水平破線を表示する 。 + - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する 。 + - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する 。 + - : シリーズの平均値で yAxis に沿って水平破線を表示する 。 - `TrendsMenu`: さまざまな近似曲線を プロット領域に適用するためのツールを含むサブ メニュー。 - `TrendsHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー: - - **Exponential**: チャート内の各シリーズの を **ExponentialFit** に設定する 。 - - **Linear**: チャート内の各シリーズの を **LinearFit** に設定する 。 - - **Logarithmic**: チャート内の各シリーズの を **LogarithmicFit** に設定する 。 + - **Exponential**: チャート内の各シリーズの を **ExponentialFit** に設定する 。 + - **Linear**: チャート内の各シリーズの を **LinearFit** に設定する 。 + - **Logarithmic**: チャート内の各シリーズの を **LogarithmicFit** に設定する 。 - `HelpersHeader`: サブ セクションのヘッダー。 - - `SeriesAvg`: タイプの を使用して、チャートのシリーズ コレクションに を追加または削除する 。 + - `SeriesAvg`: タイプの を使用して、チャートのシリーズ コレクションに を追加または削除する 。 - `ValueLabelsMenu`: のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。 - `ValueLabelsHeader`: 次のツールのサブ メニュー セクション ヘッダー: - - `ShowValueLabels`: を使用してデータ ポイント値を切り替える 。 - - `ShowLastValueLabel`: を使用して最終値軸の注釈を切り替える 。 -- `ShowCrosshairs`: チャートの プロパティを介してマウスオーバー十字線の注釈を切り替える 。 -- `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える 。 + - `ShowValueLabels`: を使用してデータ ポイント値を切り替える 。 + - `ShowLastValueLabel`: を使用して最終値軸の注釈を切り替える 。 +- `ShowCrosshairs`: チャートの プロパティを介してマウスオーバー十字線の注釈を切り替える 。 +- `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える 。 画像に保存アクション -- `CopyAsImage`: チャートをクリップボードにコピーするオプションを公開する 。 +- `CopyAsImage`: チャートをクリップボードにコピーするオプションを公開する 。 - `CopyHeader`: サブ セクションのヘッダー。 ### SVG アイコン -ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: )。2 つ目は、ツールで定義されたアイコンの名前 (例: ) で、その後に SVG 文字列を追加します。 +ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: )。2 つ目は、ツールで定義されたアイコンの名前 (例: ) で、その後に SVG 文字列を追加します。 ### データ URL アイコン -svg を追加するのと同様に、 を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。 +svg を追加するのと同様に、 を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。 次のスニペットは、アイコンを追加する両方の方法を示しています。 @@ -451,7 +451,7 @@ public toolbarCustomIconOnViewInit(): void { ### Vertical Orientation -By default the {Platform} Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. +By default the {Platform} Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property. @@ -562,7 +562,7 @@ The following example demonstrates styling the {Platform} Data Chart series brus {/* ## Styling/Theming -The icon component can be styled by using it's property directly to the . +The icon component can be styled by using it's property directly to the . @@ -603,7 +603,7 @@ The icon component can be styled by using it's
+

## Additional Resources diff --git a/docs/xplat/src/content/jp/components/notifications/banner.mdx b/docs/xplat/src/content/jp/components/notifications/banner.mdx index 811e49dea7..c84687f0f7 100644 --- a/docs/xplat/src/content/jp/components/notifications/banner.mdx +++ b/docs/xplat/src/content/jp/components/notifications/banner.mdx @@ -34,7 +34,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```ts import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents"; @@ -56,7 +56,7 @@ defineComponents(IgcBannerComponent); npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrBanner } from 'igniteui-react'; @@ -70,7 +70,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: ```razor // in Program.cs file @@ -78,7 +78,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); ``` -スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -141,13 +141,13 @@ Banner コンポーネントを表示するには、ボタン クリックで - には、バナーを閉じるデフォルトの `OK` アクション ボタンが含まれています。 + には、バナーを閉じるデフォルトの `OK` アクション ボタンが含まれています。 ## 例 - コンポーネントは、マテリアル デザイン バナー ガイドラインにできるかぎり準拠しながらコンテンツをテンプレート化します。 + コンポーネントは、マテリアル デザイン バナー ガイドラインにできるかぎり準拠しながらコンテンツをテンプレート化します。 ### バナー メッセージの変更 @@ -263,7 +263,7 @@ Banner コンポーネントを表示するには、ボタン クリックで は、バナー ボタンをテンプレート化するための `actions` スロットを公開します。これにより、デフォルトのバナー ボタン (`OK`) をオーバーライドし、ユーザー定義のカスタム操作を追加します。 + は、バナー ボタンをテンプレート化するための `actions` スロットを公開します。これにより、デフォルトのバナー ボタン (`OK`) をオーバーライドし、ユーザー定義のカスタム操作を追加します。 @@ -481,7 +481,7 @@ function handleClosing() { -> Google の[マテリアル デザイン ガイドライン](https://material.io/design/components/banners.html#anatomy)では、バナーはに表示するボタンは 2 つまでです。 は、`actions` スロットの要素数を明示的に制限しませんが、マテリアル デザイン ガイドに従う場合は、最大 2 つの要素を使用することを強くお勧めします。 +> Google の[マテリアル デザイン ガイドライン](https://material.io/design/components/banners.html#anatomy)では、バナーはに表示するボタンは 2 つまでです。 は、`actions` スロットの要素数を明示的に制限しませんが、マテリアル デザイン ガイドに従う場合は、最大 2 つの要素を使用することを強くお勧めします。 閉じるオプション (**Continue Offline**) は詳細なロジックを必要としないため、 のみの呼び出しが可能です。しかし、確認アクション (**Turn On Wifi**) は追加のロジックを必要とするため、コンポーネントで定義する必要があります。次に、`click` イベントのイベント リスナーを追加します。最後に、変更するたびに `refreshBanner()` メソッドを呼び出します。これにより、`wifiState` に基づいてバナーを切り替えます。 @@ -636,7 +636,7 @@ return( ## スタイル設定 - コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。 + コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。 |名前|説明| |--|--| @@ -667,7 +667,7 @@ igc-banner::part(content) { ## API リファレンス -
+



diff --git a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx index 2a00004d53..4f1ba762aa 100644 --- a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx +++ b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx @@ -18,7 +18,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## {ProductName} Snackbar の例 -このサンプルは、 コンポーネントを作成する方法を示しています。 +このサンプルは、 コンポーネントを作成する方法を示しています。 @@ -51,7 +51,7 @@ npm install {PackageWebComponents} npm install igniteui-react ``` -次に、以下のように、 と必要な CSS をインポートする必要があります: +次に、以下のように、 と必要な CSS をインポートする必要があります: ```tsx import { IgrSnackbar } from 'igniteui-react'; @@ -62,7 +62,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります: + を使用する前に、次のように登録する必要があります: @@ -80,7 +80,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule)); -また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -167,7 +167,7 @@ const onShowButtonClicked = () => { ## スタイル設定 - コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。 + コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。 |名前|説明| |--|--| @@ -192,7 +192,7 @@ igc-snackbar::part(base) { ## API リファレンス -
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx index a844559afd..fec67e3216 100644 --- a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx @@ -19,7 +19,7 @@ Ignite UI for {ProductName} Calendar は、日付情報を表示するための ## {Platform} Calendar の例 -次の {Platform} コンポーネントの例は、1 日選択モードの基本的なカレンダーを示しています。それがどのように機能するかを確認するか、コード ビハインドを調べます。 +次の {Platform} コンポーネントの例は、1 日選択モードの基本的なカレンダーを示しています。それがどのように機能するかを確認するか、コード ビハインドを調べます。 @@ -45,7 +45,7 @@ npm install {PackageWebComponents} npm install igniteui-react ``` -次に、以下のように、{ProductName} と必要な CSS をインポートする必要があります: +次に、以下のように、{ProductName} と必要な CSS をインポートする必要があります: ```tsx import { IgrCalendar } from 'igniteui-react'; @@ -55,7 +55,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - を使用する前に、次のように登録する必要があります。 + を使用する前に、次のように登録する必要があります。 @@ -69,7 +69,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule)); -また、追加の CSS ファイルをリンクして、スタイルを {ProductName} コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +また、追加の CSS ファイルをリンクして、スタイルを {ProductName} コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -90,7 +90,7 @@ defineComponents(IgcCalendarComponent); {ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 -{ProductName} の使用を開始する最も簡単な方法は次のとおりです。 +{ProductName} の使用を開始する最も簡単な方法は次のとおりです。 @@ -118,7 +118,7 @@ defineComponents(IgcCalendarComponent); ### 単一モード -ユーザーは、単一選択、複数選択、または範囲選択の 3 つの異なる選択モードから選択できます。デフォルトでは、{ProductName} は単一選択モードを使用していますが、この例に示すように プロパティを設定することで変更できます。 +ユーザーは、単一選択、複数選択、または範囲選択の 3 つの異なる選択モードから選択できます。デフォルトでは、{ProductName} は単一選択モードを使用していますが、この例に示すように プロパティを設定することで変更できます。 @@ -148,7 +148,7 @@ defineComponents(IgcCalendarComponent); ### 範囲選択 -同じ方法に従って、 を範囲モードに切り替えることができます: +同じ方法に従って、 を範囲モードに切り替えることができます: @@ -179,18 +179,18 @@ defineComponents(IgcCalendarComponent); ### Active View と Date -{ProductName} Calendar コンポーネントを使用すると、日、月、年の 3 つの異なるビューを切り替えることができます。コンポーネントの プロパティは、現在のビューを反映します。デフォルトでは、Calendar は最初に読み込まれたときに現在の日付を表示します。これは、 プロパティを設定することで変更できます。 プロパティは、エンド ユーザーが現在表示している日付の変更も反映します。 +{ProductName} Calendar コンポーネントを使用すると、日、月、年の 3 つの異なるビューを切り替えることができます。コンポーネントの プロパティは、現在のビューを反映します。デフォルトでは、Calendar は最初に読み込まれたときに現在の日付を表示します。これは、 プロパティを設定することで変更できます。 プロパティは、エンド ユーザーが現在表示している日付の変更も反映します。 ### ヘッダー オプション -デフォルトでは、{ProductName} Calendar コンポーネントは、選択された日付に関する情報を含むヘッダー領域を描画します。`HasHeader` プロパティを **false** に設定することで、ヘッダーを非表示にできます。 プロパティを使用して、ヘッダーの `vertical` または `horizontal` を構成することもできます。 +デフォルトでは、{ProductName} Calendar コンポーネントは、選択された日付に関する情報を含むヘッダー領域を描画します。`HasHeader` プロパティを **false** に設定することで、ヘッダーを非表示にできます。 プロパティを使用して、ヘッダーの `vertical` または `horizontal` を構成することもできます。 - が複数に設定されている場合、{ProductName} Calendar ヘッダーが描画されないことに注意してください。 + が複数に設定されている場合、{ProductName} Calendar ヘッダーが描画されないことに注意してください。 -{ProductName} Calendar の DOM プロパティは `camelCase` の命名を使用し、対応する HTML 属性は `kebab-case` を使用していることに注意してください。たとえば、 プロパティは `header-orientation` 属性に対応します。 +{ProductName} Calendar の DOM プロパティは `camelCase` の命名を使用し、対応する HTML 属性は `kebab-case` を使用していることに注意してください。たとえば、 プロパティは `header-orientation` 属性に対応します。 {ProductName} Calendar コンポーネントは、ヘッダーのタイトルをカスタマイズできる `title` スロットを公開します。 @@ -233,9 +233,9 @@ defineComponents(IgcCalendarComponent); ### ローカライズおよび書式設定 -カレンダーにおいてローカライズおよび書式設定はとても重要な要素です。{ProductName} では、これらは 、、 のプロパティを介して制御およびカスタマイズされます。 +カレンダーにおいてローカライズおよび書式設定はとても重要な要素です。{ProductName} では、これらは 、、 のプロパティを介して制御およびカスタマイズされます。 -先に進んで、他のカスタマイズと一緒にそれらを試してみましょう。最初に設定する必要があるのは、週の開始日を制御する です。デフォルトは `Sunday` なので、`Monday` に設定します。また、Calendar ビューで月と平日を書式設定するために使用されるオプションを指定する プロパティをカスタマイズします。最後に、ユーザーの場所の選択に基づいて、 プロパティを値に設定します: +先に進んで、他のカスタマイズと一緒にそれらを試してみましょう。最初に設定する必要があるのは、週の開始日を制御する です。デフォルトは `Sunday` なので、`Monday` に設定します。また、Calendar ビューで月と平日を書式設定するために使用されるオプションを指定する プロパティをカスタマイズします。最後に、ユーザーの場所の選択に基づいて、 プロパティを値に設定します: ```html @@ -325,14 +325,14 @@ public onRadioChange(e: any) { ### 日付の無効化 -場合によっては、エンド ユーザーが選択できない Calendar の日付を無効にしたいことがあります。この機能は、 プロパティを使用して実現されます。 プロパティは、 オブジェクトの配列です。各記述子には `Type` があり、オプションで `Date` オブジェクトの配列である があります。 +場合によっては、エンド ユーザーが選択できない Calendar の日付を無効にしたいことがあります。この機能は、 プロパティを使用して実現されます。 プロパティは、 オブジェクトの配列です。各記述子には `Type` があり、オプションで `Date` オブジェクトの配列である があります。 `Type` プロパティで使用できるオプションは次のとおりです: -- `After` - の最初の日付以降の日付を無効にします。 -- `Before` - の最初の日付より前の日付を無効にします。 -- `Between` - の最初の日付と 2 番目の日付の間の日付を無効にします。 -- `Specific` - 配列で指定された日付を無効にします。 +- `After` - の最初の日付以降の日付を無効にします。 +- `Before` - の最初の日付より前の日付を無効にします。 +- `Between` - の最初の日付と 2 番目の日付の間の日付を無効にします。 +- `Specific` - 配列で指定された日付を無効にします。 - `Weekdays` - すべての平日を無効にします。 - `Weekends` - すべての週末を無効にします。 @@ -403,9 +403,9 @@ this.state = { disabledDates }; ### 特定の日付 - プロパティは、 とほぼ同じ構成原則を使用しています。特別な日付はハイライト表示されたルック アンド フィールを持ち、無効な日付とは異なり、選択することができます。 + プロパティは、 とほぼ同じ構成原則を使用しています。特別な日付はハイライト表示されたルック アンド フィールを持ち、無効な日付とは異なり、選択することができます。 -Calendar に特別な日付を追加しましょう。これを行うために、 を作成し、現在の月の 3 日から 8 日までの日付を渡します。 +Calendar に特別な日付を追加しましょう。これを行うために、 を作成し、現在の月の 3 日から 8 日までの日付を渡します。 ```ts const today = new Date(); @@ -475,7 +475,7 @@ this.state = { specialDates }; ### 週番号 - プロパティを使用して、Calendar コンポーネントの週番号を表示できます。これを行うには、対応するブール属性 `show-week-numbers` を次のように使用します: + プロパティを使用して、Calendar コンポーネントの週番号を表示できます。これを行うには、対応するブール属性 `show-week-numbers` を次のように使用します: @@ -507,9 +507,9 @@ this.state = { specialDates }; ### 複数の月 - プロパティを使用すると、Calendar が `days` ビューのときに 1 か月以上表示できます。複数の月が表示されている場合は、 プロパティを使用して、月を垂直方向にスタックするか水平方向にスタックするかを構成できます。デフォルトでは、 プロパティは `horizontal` に設定されています。 + プロパティを使用すると、Calendar が `days` ビューのときに 1 か月以上表示できます。複数の月が表示されている場合は、 プロパティを使用して、月を垂直方向にスタックするか水平方向にスタックするかを構成できます。デフォルトでは、 プロパティは `horizontal` に設定されています。 -Calendar には、前月と翌月の前後の日付が表示されます。これらの日付を非表示にするには、 プロパティを **true** に設定するか、対応するブール属性 を使用します。 +Calendar には、前月と翌月の前後の日付が表示されます。これらの日付を非表示にするには、 プロパティを **true** に設定するか、対応するブール属性 を使用します。 @@ -594,7 +594,7 @@ public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) { - [次へ] ボタン - アクティブな日付要素 - コンポーネントの**日/月/年**がフォーカスされている場合は、次を使用します: + コンポーネントの**日/月/年**がフォーカスされている場合は、次を使用します: - PAGE UP キーを押すと、前の月/年のページに移動します。 - PAGE DOWN キーを押すと、次の月/年のページに移動します。 @@ -610,11 +610,11 @@ public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) { `months` ビュー内の**月**がフォーカスされている場合は、次を使用します: -- SPACE または ENTER キーを押すと、 が現在フォーカスされている月に変更され、`days` ビューに切り替わります。 +- SPACE または ENTER キーを押すと、 が現在フォーカスされている月に変更され、`days` ビューに切り替わります。 `years` ビュー内の**年**がフォーカスされている場合は、次を使用します: -- SPACE または ENTER キーを使用して、 を現在フォーカスされている年に変更し、`months` ビューに切り替えます。 +- SPACE または ENTER キーを使用して、 を現在フォーカスされている年に変更し、`months` ビューに切り替えます。 サブヘッダー内の**前**または**次**のボタンにフォーカスがある場合は、次を使用します: @@ -632,7 +632,7 @@ public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) { ## スタイル設定 - コンポーネントは、その内部要素のほぼすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します: + コンポーネントは、その内部要素のほぼすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します: |名前|説明| |--|--| @@ -673,7 +673,7 @@ public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) { | `selected` | 選択された状態を示します。日付、月、年の要素に適用されます。 | | `current` | 現在の状態を示します。日付、月、年の要素に適用されます。 | -これらの CSS パーツを使用して、次のように コンポーネントの外観をカスタマイズできます: +これらの CSS パーツを使用して、次のように コンポーネントの外観をカスタマイズできます: ```css igc-calendar::part(date-inner selected), @@ -713,10 +713,10 @@ igc-calendar::part(navigation-button):focus { ## API リファレンス -
+


- + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 5e6010f4d7..c19879156f 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -17,22 +17,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {ProductName} Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。{Platform} Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。 - - コンポーネントは、{ProductName} のバージョン 5.0.018.7.0 以降の新しいコンポーネントです。このバージョンより前の古い は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 - - - -5.0.0 - - - - - -18.7.0 - - -. The old prior to this version has been renamed to `XDatePicker` and its respective documentation page can be found under "Deprecated Components" - ## {Platform} Date Picker の例 以下は、ユーザーが手動のテキスト入力で日付を選択し、左側のカレンダー アイコンをクリックしてナビゲートできるようになったときに、Date Picker がどのように機能するかを示すサンプルです。描画する方法は以下のとおりです。 @@ -49,7 +33,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; npm install {PackageWebComponents} ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```ts import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents'; @@ -68,7 +52,7 @@ defineComponents(IgcDatePickerComponent); npm install igniteui-react ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```tsx import { IgrDatePicker } from 'igniteui-react'; @@ -79,7 +63,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 + コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 ```razor // in Program.cs file @@ -87,7 +71,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); ``` -スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -101,7 +85,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); ### 日付ピッカーの表示 -デフォルトの `dropdown` 状態の をインスタンス化するには、以下のコードを使用してください。 +デフォルトの `dropdown` 状態の をインスタンス化するには、以下のコードを使用してください。 @@ -133,13 +117,13 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); - は `date` または `string` にバインドできます。 + は `date` または `string` にバインドできます。 - は `date` にバインドできます。 + は `date` にバインドできます。 @@ -314,7 +298,7 @@ prefix スロットと suffix スロットを使用すると、入力のメイ ### キーボード ナビゲーション - には直感的なキーボード ナビゲーションがあり、マウスに触れることなく、さまざまな DatePart を簡単に増分、減分、またはジャンプできます。 + には直感的なキーボード ナビゲーションがあり、マウスに触れることなく、さまざまな DatePart を簡単に増分、減分、またはジャンプできます。 |キー|説明| |----|-----------| @@ -364,11 +348,11 @@ DatePicker は `dialog` モードもサポートしています。 ### 表示および入力形式 - and are properties which can be set to make the picker's editor follow a specified format. The is locale based, so if none is provided, the picker will default to the one used by the browser. + and are properties which can be set to make the picker's editor follow a specified format. The is locale based, so if none is provided, the picker will default to the one used by the browser. - および は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。 はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。 + および は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。 はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。 - is used to format the picker's input when it is not focused. If no is provided, the picker will use the as its . + is used to format the picker's input when it is not focused. If no is provided, the picker will use the as its . 注意すべき点は、Date Picker コンポーネントが `date` と `month` の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、`d/M/yy` は `dd/MM/yy` になります。これは編集中にのみ適用されます。 @@ -376,7 +360,7 @@ DatePicker は `dialog` モードもサポートしています。 ### 増加および減少 - は、 メソッドと メソッドを公開します。これらは両方とも `IgcDateTimeInput` から取得され、現在設定されている日付の特定の `DatePart` を増加および減少するために使用できます。 + は、 メソッドと メソッドを公開します。これらは両方とも `IgcDateTimeInput` から取得され、現在設定されている日付の特定の `DatePart` を増加および減少するために使用できます。 @@ -433,7 +417,7 @@ DatePicker は `dialog` モードもサポートしています。 ### フォーム - はフォーム要素で使用できます。コンポーネントの プロパティと プロパティはフォーム検証機能として機能します。 + はフォーム要素で使用できます。コンポーネントの プロパティと プロパティはフォーム検証機能として機能します。 @@ -457,13 +441,13 @@ DatePicker は `dialog` モードもサポートしています。 ### カレンダー固有の設定 - は、Date Picker が公開するプロパティを通じて、カレンダーの設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる 、週の開始日を決定する 、年の各週の番号を表示する などが含まれます。 + は、Date Picker が公開するプロパティを通じて、カレンダーの設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる 、週の開始日を決定する 、年の各週の番号を表示する などが含まれます。 ## インターナショナリゼーション - のローカライズは、 入力で制御できます。 + のローカライズは、 入力で制御できます。 -以下は日本ロケール定義を持つ です。 +以下は日本ロケール定義を持つ です。 @@ -492,7 +476,7 @@ DatePicker は `dialog` モードもサポートしています。 ## スタイル設定 - コンポーネントは コンポーネントおよび コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、[Input のスタイル設定](../inputs/input.md#スタイル設定)と [Calendar のスタイル設定](calendar.md#スタイル設定)を参照してください。 + コンポーネントは コンポーネントおよび コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、[Input のスタイル設定](../inputs/input.md#スタイル設定)と [Calendar のスタイル設定](calendar.md#スタイル設定)を参照してください。 ```css igc-date-picker::part(header) { @@ -532,7 +516,7 @@ igc-date-picker::part(year-inner selected) {

-
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx index c0ae74188f..c96a848453 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx @@ -18,7 +18,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## Date Range Picker の例 -以下は、カレンダーのポップアップを使用して開始日と終了日を選択できる コンポーネントのサンプルです。 +以下は、カレンダーのポップアップを使用して開始日と終了日を選択できる コンポーネントのサンプルです。 @@ -30,13 +30,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - の使用を開始するには、最初に次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。 + の使用を開始するには、最初に次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。 ```cmd npm install {PackageWebComponents} ``` -次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: +次に、以下のように、 とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: ```ts import { defineComponents, IgcDateRangePickerComponent } from 'igniteui-webcomponents'; @@ -54,13 +54,13 @@ defineComponents(IgcDateRangePickerComponent); - の使用を開始するには、最初に次のコマンドを実行して Ignite UI for React をインストールする必要があります。 + の使用を開始するには、最初に次のコマンドを実行して Ignite UI for React をインストールする必要があります。 ```cmd npm install igniteui-react ``` -その後、次のように をインポートする必要があります。 +その後、次のように をインポートする必要があります。 ```tsx import { IgrDateRangePicker } from 'igniteui-react'; @@ -74,7 +74,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 + コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。 ```razor // in Program.cs file @@ -82,7 +82,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); ``` -スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: +スタイルを コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: ```razor @@ -91,13 +91,13 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); -これで、{Platform} の基本構成から始めることができます。 +これで、{Platform} の基本構成から始めることができます。 {ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 ## 使用方法 - では、ドロップダウンやカレンダーのポップアップから日付範囲を選択するか、開始日と終了日それぞれの入力フィールドに直接入力することで、日付範囲を指定できます。 + では、ドロップダウンやカレンダーのポップアップから日付範囲を選択するか、開始日と終了日それぞれの入力フィールドに直接入力することで、日付範囲を指定できます。 ピッカーは、日付を表示するために 「シングル インプット モード」 と 「2 インプット モード」 の 2 タイプのモードを提供します。シングル インプット モードでは、フィールドは編集不可で、日付範囲を入力して変更することはできません。一方で 2 インプット モードでは、開始日と終了日を別々の入力欄に入力して編集できます。 @@ -105,7 +105,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); ### Date Range Picker の表示 -デフォルトのシングル インプット モードで をインスタンス化するには、次のコードを使用します: +デフォルトのシングル インプット モードで をインスタンス化するには、次のコードを使用します: @@ -132,7 +132,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); - を 2 つの入力欄を使用するように切り替えるには、 プロパティを **true** に設定します。 + を 2 つの入力欄を使用するように切り替えるには、 プロパティを **true** に設定します。 @@ -161,7 +161,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); ### Value (値) -ユーザーによる選択または入力に加えて、 の範囲値は プロパティを使用して設定することもできます。値は次の形式に従う必要があります: **`{ start: startDate, end: endDate }`**、ここで `startDate` と `endDate` は選択された範囲を表す `Date` オブジェクトです。 +ユーザーによる選択または入力に加えて、 の範囲値は プロパティを使用して設定することもできます。値は次の形式に従う必要があります: **`{ start: startDate, end: endDate }`**、ここで `startDate` と `endDate` は選択された範囲を表す `Date` オブジェクトです。 @@ -233,7 +233,7 @@ return ( ### Read-only (読み取り専用) および Non-editable (編集不可) - を読み取り専用に設定すると、入力やカレンダーでの範囲変更が無効になり、キーボード ナビゲーションも無効になります。また、カレンダーやクリア アイコンも視覚的に無効状態になります。これは、value 属性で範囲を設定し、それを表示専用にしたい場合に便利です。この動作を有効にするには、 プロパティを設定するだけです。 + を読み取り専用に設定すると、入力やカレンダーでの範囲変更が無効になり、キーボード ナビゲーションも無効になります。また、カレンダーやクリア アイコンも視覚的に無効状態になります。これは、value 属性で範囲を設定し、それを表示専用にしたい場合に便利です。この動作を有効にするには、 プロパティを設定するだけです。 @@ -260,7 +260,7 @@ return ( -あるいは、 プロパティを使用することもできます。これは とは異なり、入力欄のタイピングによる編集のみを禁止し、カレンダーからの選択やクリア アイコンでのリセットは可能です。 +あるいは、 プロパティを使用することもできます。これは とは異なり、入力欄のタイピングによる編集のみを禁止し、カレンダーからの選択やクリア アイコンでのリセットは可能です。 @@ -289,7 +289,7 @@ return ( ### ポップアップ モード -デフォルトでは、 をクリックすると、カレンダーのポップアップが `dropdown` モードで表示されます。 プロパティを `dialog` に設定することで、カレンダーを `dialog` モードで開くこともできます。 +デフォルトでは、 をクリックすると、カレンダーのポップアップが `dropdown` モードで表示されます。 プロパティを `dialog` に設定することで、カレンダーを `dialog` モードで開くこともできます。 @@ -318,7 +318,7 @@ return ( ### キーボード ナビゲーション - は直感的なキーボード ナビゲーションに対応しており、マウスを使わずに値の増減や入力マスクのセクション間の移動が可能です。 + は直感的なキーボード ナビゲーションに対応しており、マウスを使わずに値の増減や入力マスクのセクション間の移動が可能です。 使用可能なキーボード ナビゲーション オプションは、コンポーネントがシングル インプット モードか 2 インプット モードかによって異なります。 @@ -361,7 +361,7 @@ return ( ### Label (ラベル) -シングル インプット モードの場合、 プロパティを使用して コンポーネントにラベルを設定できます。2 インプット モードでは、 および プロパティを使用して、それぞれ開始日および終了日の入力フィールドにラベルを設定できます。 +シングル インプット モードの場合、 プロパティを使用して コンポーネントにラベルを設定できます。2 インプット モードでは、 および プロパティを使用して、それぞれ開始日および終了日の入力フィールドにラベルを設定できます。 @@ -415,9 +415,9 @@ return ( ### Format (形式) -入力フィールドに表示される日付形式をカスタマイズすることも可能です。この目的のために使用できるプロパティは、、、および の 3 つです。 +入力フィールドに表示される日付形式をカスタマイズすることも可能です。この目的のために使用できるプロパティは、、、および の 3 つです。 - プロパティでは、使用するロケール識別子を指定でき、地域の慣習に基づいて日付の表示形式が決定されます。 + プロパティでは、使用するロケール識別子を指定でき、地域の慣習に基づいて日付の表示形式が決定されます。 たとえば、日付を日本形式で表示したい場合、locale プロパティを次のように設定します: @@ -445,7 +445,7 @@ return ( -日付形式を手動で定義したい場合は、カスタム形式の文字列を渡して プロパティを使用できます。 +日付形式を手動で定義したい場合は、カスタム形式の文字列を渡して プロパティを使用できます。 @@ -472,7 +472,7 @@ return ( - プロパティはカスタム形式文字列も受け入れますが、入力フィールドがアイドル状態 (つまり、フォーカスされていない状態) の場合にのみ適用されます。フィールドにフォーカスがある場合、形式はデフォルト、または で定義された形式に戻ります (両方のプロパティが使用されている場合)。 + プロパティはカスタム形式文字列も受け入れますが、入力フィールドがアイドル状態 (つまり、フォーカスされていない状態) の場合にのみ適用されます。フィールドにフォーカスがある場合、形式はデフォルト、または で定義された形式に戻ります (両方のプロパティが使用されている場合)。 @@ -544,7 +544,7 @@ return ( ### Min (最小値) および Max (最大値) - および プロパティを使用して、定義した範囲外の日付を無効にすることで、ユーザーの入力を制限することもできます。これらのプロパティはバリデーターとして機能するため、範囲外の日付が手動で入力された場合でも、 は無効になります。 + および プロパティを使用して、定義した範囲外の日付を無効にすることで、ユーザーの入力を制限することもできます。これらのプロパティはバリデーターとして機能するため、範囲外の日付が手動で入力された場合でも、 は無効になります。 @@ -578,7 +578,7 @@ return ( ### カスタムおよび定義済みの日付範囲 - プロパティを使用して、範囲選択を高速化するために、カレンダー ポップアップにカスタム日付範囲チップを追加することもできます。たとえば、現在の日付を終了日とし、今後 7 日間の範囲をすぐに選択できるカスタム日付範囲チップを作成できます。さらに、 プロパティを設定すると、カスタム チップに加えて定義済みの範囲チップも表示されます。 + プロパティを使用して、範囲選択を高速化するために、カレンダー ポップアップにカスタム日付範囲チップを追加することもできます。たとえば、現在の日付を終了日とし、今後 7 日間の範囲をすぐに選択できるカスタム日付範囲チップを作成できます。さらに、 プロパティを設定すると、カスタム チップに加えて定義済みの範囲チップも表示されます。 @@ -671,7 +671,7 @@ return ( ### 無効日と特別な日 -カレンダーで無効な日付を設定して、ユーザーが選択できる日付の範囲を絞り込むこともできます。無効にする日付を設定するには、 プロパティを使用できます。 +カレンダーで無効な日付を設定して、ユーザーが選択できる日付の範囲を絞り込むこともできます。無効にする日付を設定するには、 プロパティを使用できます。 @@ -730,13 +730,13 @@ return ( - プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [無効日](./calendar.md#日付の無効化) + プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [無効日](./calendar.md#日付の無効化) -同様に、カレンダーに 1 日または複数の日付を特別な日として設定したい場合も可能です。この場合は プロパティを使用します。([特別な日](./calendar.md#特定の日付)) +同様に、カレンダーに 1 日または複数の日付を特別な日として設定したい場合も可能です。この場合は プロパティを使用します。([特別な日](./calendar.md#特定の日付)) ### フォーム - コンポーネントは、HTML フォーム要素とシームレスに使用することもできます。、、 プロパティはフォーム検証子として機能します。 + コンポーネントは、HTML フォーム要素とシームレスに使用することもできます。、、 プロパティはフォーム検証子として機能します。 @@ -745,12 +745,12 @@ return ( ### プロパティ -すでに紹介したプロパティに加えて、 コンポーネントには動作をさらに細かく設定できるさまざまなプロパティが用意されています。 +すでに紹介したプロパティに加えて、 コンポーネントには動作をさらに細かく設定できるさまざまなプロパティが用意されています。 |名前|タイプ|説明| |--|--|--| | | boolean | コンポーネントを無効にします。 | -| | boolean | 入力フィールドでの入力を無効にします。 | +| | boolean | 入力フィールドでの入力を無効にします。 | | | string | シングル インプット モード時のプレースホルダー テキスト。 | | | string | 開始日入力 (2 インプット モード) のプレースホルダー テキスト。 | | | string | 終了日入力 (2 インプット モード) のプレースホルダー テキスト。 | @@ -760,7 +760,7 @@ return ( ### スロット - コンポーネントでは、利用可能なスロットを使用して、カスタム コンテンツを追加したり、外観を変更したりすることも可能です。 + コンポーネントでは、利用可能なスロットを使用して、カスタム コンテンツを追加したり、外観を変更したりすることも可能です。 シングル インプット モードでは、`prefix` および `suffix` スロットを使って、入力フィールドの前後にカスタム コンテンツを挿入できます。 @@ -905,7 +905,7 @@ return ( -これまでに説明したスロットに加えて、 コンポーネントでは次のスロットも使用できます。 +これまでに説明したスロットに加えて、 コンポーネントでは次のスロットも使用できます。 |名前|説明| |--|--| @@ -925,7 +925,7 @@ return ( ### メソッド - は、プロパティやスロットに加えて、次のメソッドも公開しています: + は、プロパティやスロットに加えて、次のメソッドも公開しています: |名前|説明| |--|--| @@ -938,7 +938,7 @@ return ( ## スタイル設定 - コンポーネントは コンポーネントを使用しているため、Calendar の CSS パーツも継承されており、両コンポーネントをシームレスにスタイル設定できます。Calendar コンポーネントで使用可能なすべての CSS パーツの一覧はこちらをご覧ください: [カレンダーのスタイル設定](calendar.md#スタイル設定)。Calendar の CSS パーツに加えて、 は以下のような独自の CSS パーツも提供しており、外観をさらにカスタマイズできます: + コンポーネントは コンポーネントを使用しているため、Calendar の CSS パーツも継承されており、両コンポーネントをシームレスにスタイル設定できます。Calendar コンポーネントで使用可能なすべての CSS パーツの一覧はこちらをご覧ください: [カレンダーのスタイル設定](calendar.md#スタイル設定)。Calendar の CSS パーツに加えて、 は以下のような独自の CSS パーツも提供しており、外観をさらにカスタマイズできます: |名前|説明| |--|--| @@ -991,7 +991,7 @@ igc-date-range-picker::part(clear-icon-end) {

-
+


diff --git a/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx b/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx index 667ca9900b..f8bd812979 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx @@ -30,15 +30,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## アクティベーションの概要 -{Platform} コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。 +{Platform} コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。 -- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。 +- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。 - : スプレッドシート コントロールの現在アクティブなワークシートのアクティブ ペインを返します。 - : スプレッドシート コントロールの 内のアクティブ ワークシートを返すか、設定します。これは、スプレッドシートに添付されている 内の既存のワークシートに設定することで設定できます。 ## コード スニペット -次のコード スニペットは、 コントロールのセルとワークシートのアクティブ化の設定を示しています。 +次のコード スニペットは、 コントロールのセルとワークシートのアクティブ化の設定を示しています。 ```ts this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1); @@ -49,6 +49,7 @@ this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ## API リファレンス -
-
+ +
+

diff --git a/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx b/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx index 18cb15302f..7687b7bf29 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx @@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Spreadsheet チャート アダプター -{Platform} Spreadsheet コンポーネントを使用して にチャートを表示できます。 +{Platform} Spreadsheet コンポーネントを使用して にチャートを表示できます。 ## {Platform} Spreadsheet チャート アダプターの例 @@ -163,7 +163,7 @@ ModuleManager.register( ## コード スニペット -以下のコード スニペットは、 コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。 +以下のコード スニペットは、 コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。 ```typescript this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter(); @@ -220,6 +220,7 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). ## API リファレンス -
-
+ +
+

diff --git a/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx b/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx index 9fbe6e6358..02cbabdd5b 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx @@ -59,7 +59,7 @@ import { SpreadsheetAction } from 'igniteui-webcomponents-spreadsheet'; ## 使用方法 -次のコード スニペットは、{Platform} コントロールでクリップボードに関連するコマンドを実行する方法を示しています。 +次のコード スニペットは、{Platform} コントロールでクリップボードに関連するコマンドを実行する方法を示しています。 ```ts public cut(): void { @@ -79,4 +79,4 @@ public paste(): void { ## API リファレンス `SpreadsheetAction`
-
+
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx b/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx index 54042e5620..eb9e04230c 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx @@ -238,11 +238,13 @@ this.spreadsheet.activeWorksheet.unprotect(); コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (SHIFT または CTRL) を押します。これは、スプレッドシートの プロパティを次のいずれかの値に設定することによって行われます。 -- `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が オブジェクトの コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。 -- `ExtendSelection`: オブジェクトの コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。 +- `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が オブジェクトの コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。 +- `ExtendSelection`: オブジェクトの コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。 - `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。CTRL キーを押したままマウスを使用することで新しい範囲を追加できます。また、SHIFT キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。 -上記の説明で述べた オブジェクトは、 コントロールの プロパティを使用して取得できます。 +上記の説明で述べた + +オブジェクトは、 コントロールの プロパティを使用して取得できます。 次のコード スニペットは、選択モードの設定を示しています。 @@ -290,9 +292,12 @@ import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection; ``` - コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、 プロパティを設定できます。複数選択は、 コントロールの プロパティによって返される オブジェクトを介して行われます。 + コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、 プロパティを設定できます。複数選択は、 コントロールの プロパティによって返される + +オブジェクトを介して行われます。 - オブジェクトには、新しい オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる `AddCellRange()` メソッドがあります。 + +オブジェクトには、新しい オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる `AddCellRange()` メソッドがあります。 次のコード スニペットは、スプレッドシートの選択範囲にセル範囲を追加する方法を示しています。 @@ -353,7 +358,8 @@ this.spreadsheet.zoomLevel = 200; ## API リファレンス -
-
+ +
+


diff --git a/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx b/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx index e399943947..f03ca2ef66 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx @@ -146,8 +146,10 @@ this.spreadsheet.workbook.worksheets(0).rows(7).cells(1).dataValidationRule = va this.spreadsheet.workbook.worksheets(0).rows(7).cells(1).value = checkOutDate.toLocaleDateString(); this.spreadsheet.workbook.worksheets(0).rows(7).cells(0).value = "Check Out Date"; ``` - + ## API References - - + +
+ + diff --git a/docs/xplat/src/content/jp/components/update-guide.mdx b/docs/xplat/src/content/jp/components/update-guide.mdx index 6353d509a1..24d48aba37 100644 --- a/docs/xplat/src/content/jp/components/update-guide.mdx +++ b/docs/xplat/src/content/jp/components/update-guide.mdx @@ -86,7 +86,7 @@ Ignite UI for React バージョニング は、最初の数字がコードが -- コンポーネントには、デフォルトで非機能的な `name` プロパティが付与されなくなりました。`name` プロパティは、主に や などのフォーム入力コンポーネントにおいてネイティブの機能を持つため、**igniteui-react** のコンポーネントにのみ残されています。 +- コンポーネントには、デフォルトで非機能的な `name` プロパティが付与されなくなりました。`name` プロパティは、主に や などのフォーム入力コンポーネントにおいてネイティブの機能を持つため、**igniteui-react** のコンポーネントにのみ残されています。 - Ignite UI for React コンポーネントでは、React の[ドキュメント](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)に従って必要な場合を除き、`key` プロパティは不要になりました。 - [IgrDataGrid](./grids/data-grid/overview.md) は、**igniteui-react-grids** パッケージの一部ではなくなりました。より軽量な構成を実現するため、**igniteui-react-data-grids** パッケージに移動されました。 - バージョン **18.9.0** ではクラスとして公開されていたいくつかの型は、現在ではタイプとしてエクスポート されるようになりました。これらは以下のように使用できます: @@ -113,9 +113,9 @@ const pivotConfiguration: IgrPivotConfiguration = { -- +- - **重大な変更** - `clicked` イベントは削除されました。代わりにネイティブの を使用してください。 -- +- - **重大な変更** - `inputOccurred` イベントの名前が に変更されました。 diff --git a/mdx-link-report-angular.md b/mdx-link-report-angular.md index 774c69608e..2f5e3f9539 100644 --- a/mdx-link-report-angular.md +++ b/mdx-link-report-angular.md @@ -1,12 +1,12 @@ # API Link Check Report -_Generated: 2026-05-22 09:34:22 UTC_ +_Generated: 2026-05-28 07:27:01 UTC_ ## Summary | | | |---|---| -| ✅ OK | 2088 | +| ✅ OK | 2087 | | ❌ Not found (type/member missing) | 0 | | ❌ HTTP error | 0 | | ❌ **Total broken** | **0** | diff --git a/mdx-link-report-blazor.md b/mdx-link-report-blazor.md index bde516b903..d633dacddb 100644 --- a/mdx-link-report-blazor.md +++ b/mdx-link-report-blazor.md @@ -1,12 +1,12 @@ # API Link Check Report -_Generated: 2026-05-26 15:22:58 UTC_ +_Generated: 2026-05-28 07:30:39 UTC_ ## Summary | | | |---|---| -| ✅ OK | 1688 | +| ✅ OK | 1736 | | ❌ Not found (type/member missing) | 0 | | ❌ HTTP error | 0 | | ❌ **Total broken** | **0** | diff --git a/mdx-link-report-react.md b/mdx-link-report-react.md index 90e9c85fc7..c52df90fa0 100644 --- a/mdx-link-report-react.md +++ b/mdx-link-report-react.md @@ -1,12 +1,12 @@ # API Link Check Report -_Generated: 2026-05-26 15:20:31 UTC_ +_Generated: 2026-05-28 07:28:17 UTC_ ## Summary | | | |---|---| -| ✅ OK | 1635 | +| ✅ OK | 1687 | | ❌ Not found (type/member missing) | 0 | | ❌ HTTP error | 0 | | ❌ **Total broken** | **0** | diff --git a/mdx-link-report-wc.md b/mdx-link-report-wc.md index 4d29f45074..53554e726c 100644 --- a/mdx-link-report-wc.md +++ b/mdx-link-report-wc.md @@ -1,12 +1,12 @@ # API Link Check Report -_Generated: 2026-05-26 15:22:18 UTC_ +_Generated: 2026-05-28 07:29:01 UTC_ ## Summary | | | |---|---| -| ✅ OK | 1534 | +| ✅ OK | 1663 | | ❌ Not found (type/member missing) | 0 | | ❌ HTTP error | 0 | | ❌ **Total broken** | **0** | diff --git a/scripts/check-mdx-links.mjs b/scripts/check-mdx-links.mjs index 06cb44dc97..5b77b7ca95 100644 --- a/scripts/check-mdx-links.mjs +++ b/scripts/check-mdx-links.mjs @@ -153,47 +153,74 @@ function resolveApiLinkUrl(props, platformName) { } /** - * Given a BROKEN primary URL and its source props, returns up to 3 alternative - * URLs to try (no-suffix, no-prefix, no-both). Only includes variants that differ - * from the primary URL (i.e. where there is something to strip). + * Given a BROKEN primary URL and its source props, returns alternative + * URLs to try. Includes suffix/prefix variants AND kind variants. * - * Used post-check to suggest the cheapest prop fix: - * noSuffix → excludeSuffixFor="Platform" - * noPrefix → excludePrefixFor="Platform" (or prefixed={false} when global) - * noBoth → both of the above + * Variant categories: + * noSuffix → suffix={false} or excludeSuffixFor="Platform" + * noPrefix → prefixed={false} or excludePrefixFor="Platform" + * noBoth → both of the above + * kind: → kind="" (different kind) + * kind:+noSuffix → kind + suffix={false} + * kind:+noPrefix → kind + prefixed={false} + * kind:+noBoth → kind + both */ function resolveVariantUrls(primaryUrl, props, platformName) { const variants = {}; - // no-suffix: disable classSuffix for this platform - const noSuffixUrl = resolveApiLinkUrl( - { ...props, suffix: false, excludeSuffixFor: undefined }, platformName); - if (noSuffixUrl && noSuffixUrl !== primaryUrl) - variants.noSuffix = noSuffixUrl; - - // no-prefix: disable platform prefix for this platform - const noPrefixUrl = resolveApiLinkUrl( - { ...props, prefixed: false, excludePrefixFor: undefined }, platformName); - if (noPrefixUrl && noPrefixUrl !== primaryUrl) - variants.noPrefix = noPrefixUrl; - - // no-both: disable both - const noBothUrl = resolveApiLinkUrl( - { ...props, suffix: false, prefixed: false, excludeSuffixFor: undefined, excludePrefixFor: undefined }, - platformName); - if (noBothUrl && noBothUrl !== primaryUrl - && noBothUrl !== variants.noSuffix && noBothUrl !== variants.noPrefix) - variants.noBoth = noBothUrl; + const seenUrls = new Set([primaryUrl]); + + function addVariant(name, variantProps) { + const url = resolveApiLinkUrl(variantProps, platformName); + if (url && !seenUrls.has(url)) { + seenUrls.add(url); + variants[name] = url; + } + } + + // Suffix/prefix variants (original logic) + addVariant('noSuffix', { ...props, suffix: false, excludeSuffixFor: undefined }); + addVariant('noPrefix', { ...props, prefixed: false, excludePrefixFor: undefined }); + addVariant('noBoth', { ...props, suffix: false, prefixed: false, excludeSuffixFor: undefined, excludePrefixFor: undefined }); + + // Kind variants: try each kind that differs from current + const ALL_KINDS = ['class', 'interface', 'enum', 'type']; + const currentKind = props.kind || 'class'; + for (const altKind of ALL_KINDS) { + if (altKind === currentKind) continue; + const kindProps = { ...props, kind: altKind, excludeSuffixFor: undefined, excludePrefixFor: undefined }; + addVariant(`kind:${altKind}`, kindProps); + addVariant(`kind:${altKind}+noSuffix`, { ...kindProps, suffix: false }); + addVariant(`kind:${altKind}+noPrefix`, { ...kindProps, prefixed: false }); + addVariant(`kind:${altKind}+noBoth`, { ...kindProps, suffix: false, prefixed: false }); + } return variants; } /** Given which variant URLs work, returns a short prop-fix hint string. */ function suggestFix(variantOk, platformName) { + // Prefer simplest fix: suffix/prefix-only changes first const { noSuffix, noPrefix, noBoth } = variantOk ?? {}; if (noSuffix && !noPrefix) return `excludeSuffixFor="${platformName}"`; - if (!noSuffix && noPrefix) return `excludePrefixFor="${platformName}" (or prefixed={false} globally)`; + if (!noSuffix && noPrefix) return `excludePrefixFor="${platformName}"`; if (noSuffix && noPrefix) return `excludeSuffixFor="${platformName}" -or- excludePrefixFor="${platformName}"`; if (noBoth) return `excludeSuffixFor="${platformName}" + excludePrefixFor="${platformName}"`; + + // Then try kind variants (prefer kind-only, then kind+suffix/prefix) + for (const [name, ok] of Object.entries(variantOk ?? {})) { + if (!ok) continue; + if (name.startsWith('kind:')) { + const kindMatch = name.match(/^kind:(\w+)$/); + if (kindMatch) return `kind="${kindMatch[1]}"`; + const kindSuffix = name.match(/^kind:(\w+)\+noSuffix$/); + if (kindSuffix) return `kind="${kindSuffix[1]}" + excludeSuffixFor="${platformName}"`; + const kindPrefix = name.match(/^kind:(\w+)\+noPrefix$/); + if (kindPrefix) return `kind="${kindPrefix[1]}" + excludePrefixFor="${platformName}"`; + const kindBoth = name.match(/^kind:(\w+)\+noBoth$/); + if (kindBoth) return `kind="${kindBoth[1]}" + excludeSuffixFor="${platformName}" + excludePrefixFor="${platformName}"`; + } + } + return `exclude="${platformName}" (no variant resolves — symbol absent)`; } @@ -460,11 +487,13 @@ const targetPlatforms = getPlatforms(); // For Angular: sync generated MDX content into docs/angular before scanning if (PLATFORM === 'angular' && !NO_SYNC) { const syncScript = resolve('docs/angular/scripts/sync-generated.mjs'); - console.log('\n Syncing Angular generated content (sync-generated.mjs)...'); - const r = spawnSync(process.execPath, [syncScript], { stdio: 'inherit' }); - if (r.status !== 0) { - console.error('\n sync-generated.mjs failed — aborting.'); - process.exit(1); + for (const lang of ['en', 'jp']) { + console.log(`\n Syncing Angular generated content (sync-generated.mjs --lang=${lang})...`); + const r = spawnSync(process.execPath, [syncScript, `--lang=${lang}`], { stdio: 'inherit' }); + if (r.status !== 0) { + console.error(`\n sync-generated.mjs --lang=${lang} failed — aborting.`); + process.exit(1); + } } console.log(); } @@ -559,8 +588,8 @@ for (const result of brokenResults) { } // ── Variant URL checking (post-primary-check) ────────────────────────────── -// For every broken (url, platform) pair, compute up to 3 variant URLs and -// batch-check them, then build a suggestion map used in the report. +// For every broken (url, platform) pair, compute variant URLs (suffix/prefix +// toggles + kind alternatives) and batch-check them for fix suggestions. const variantUrlSet = new Set(); @@ -628,14 +657,23 @@ if (brokenResults.length === 0) { if (item.fetchUrl !== item.url) { console.log(` checked as: ${item.fetchUrl}`); } - // Variant hints + // Variant hints — show only working variants to keep output readable const sug = suggestionMap.get(`${item.url}::${platform}`); if (sug) { const TICK = '\u2713', CROSS = '\u2717'; - for (const [name, vUrl] of Object.entries(sug.variants)) { - const ok = sug.variantOk[name]; - const label = name === 'noSuffix' ? 'no-suffix' : name === 'noPrefix' ? 'no-prefix' : 'no-suffix+prefix'; - console.log(` ${ok ? TICK : CROSS} ${label}: ${vUrl}`); + const workingVariants = Object.entries(sug.variants).filter(([n]) => sug.variantOk[n]); + const failedVariants = Object.entries(sug.variants).filter(([n]) => !sug.variantOk[n]); + for (const [name, vUrl] of workingVariants) { + console.log(` ${TICK} ${name}: ${vUrl}`); + } + if (failedVariants.length > 0 && workingVariants.length === 0) { + // Only show failed if nothing works (brief) + for (const [name, vUrl] of failedVariants.slice(0, 3)) { + console.log(` ${CROSS} ${name}: ${vUrl}`); + } + if (failedVariants.length > 3) { + console.log(` ${CROSS} ... and ${failedVariants.length - 3} more variants tried`); + } } console.log(` \u2192 FIX: ${sug.hint}`); } @@ -730,10 +768,17 @@ if (MD_OUTPUT) { const mdSug = suggestionMap.get(`${item.url}::${platform}`); if (mdSug) { const TICK = '\u2705', CROSS = '\u274c'; - for (const [name, vUrl] of Object.entries(mdSug.variants)) { - const ok = mdSug.variantOk[name]; - const label = name === 'noSuffix' ? 'no-suffix' : name === 'noPrefix' ? 'no-prefix' : 'no-suffix+prefix'; - lines.push(` - ${ok ? TICK : CROSS} ${label}: \`${vUrl}\``); + const workingVariants = Object.entries(mdSug.variants).filter(([n]) => mdSug.variantOk[n]); + for (const [name, vUrl] of workingVariants) { + lines.push(` - ${TICK} ${name}: \`${vUrl}\``); + } + if (workingVariants.length === 0) { + // Show a few failed ones for context + const failed = Object.entries(mdSug.variants).filter(([n]) => !mdSug.variantOk[n]); + for (const [name, vUrl] of failed.slice(0, 3)) { + lines.push(` - ${CROSS} ${name}: \`${vUrl}\``); + } + if (failed.length > 3) lines.push(` - ${CROSS} ... and ${failed.length - 3} more variants tried`); } lines.push(` - **FIX**: \`${mdSug.hint}\``); } diff --git a/src/lib/platform-context.ts b/src/lib/platform-context.ts index 4bce5e6ed9..c306c89658 100644 --- a/src/lib/platform-context.ts +++ b/src/lib/platform-context.ts @@ -97,8 +97,10 @@ const PLATFORMS: Record = { grids: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-grids/latest', packageId: 'igniteui-webcomponents-grids', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, gauges: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-gauges/latest', packageId: 'igniteui-webcomponents-gauges', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, maps: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-maps/latest', packageId: 'igniteui-webcomponents-maps', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, - inputs: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-inputs/latest', packageId: 'igniteui-webcomponents-inputs', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, - layouts: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-layouts/latest', packageId: 'igniteui-webcomponents-layouts', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, + // Web Components inputs/layouts are published in the main TypeDoc package. + // Dock Manager is the exception and has its own `dockmanager` package below. + inputs: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents/latest', packageId: 'igniteui-webcomponents', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, + layouts: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents/latest', packageId: 'igniteui-webcomponents', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, excel: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-excel/latest', packageId: 'igniteui-webcomponents-excel', noPackagePrefix: true, preserveCase: true }, spreadsheet: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-spreadsheet/latest', packageId: 'igniteui-webcomponents-spreadsheet', noPackagePrefix: true, preserveCase: true, classSuffix: 'Component' }, datasources: { docRoot: 'https://staging.infragistics.com/api/webcomponents/igniteui-webcomponents-datasources/latest', packageId: 'igniteui-webcomponents-datasources', noPackagePrefix: true, preserveCase: true },