diff --git a/docs/angular/src/content/en/components/accordion.mdx b/docs/angular/src/content/en/components/accordion.mdx index 61cdcddc8b..129a683bdf 100644 --- a/docs/angular/src/content/en/components/accordion.mdx +++ b/docs/angular/src/content/en/components/accordion.mdx @@ -170,7 +170,7 @@ The following snippet demonstrates passing the animation settings to the compone ``` - + If you would like to turn off the animation for the the `animationSettings` could be set to `null`. @@ -199,7 +199,7 @@ Alternatively, you have the ability to set every single and methods you can respectively collapse and expand all of the programmatically. - + If property is set to _true_ calling method would expand only the last . diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx index 521fa2cc29..f78a818a52 100644 --- a/docs/angular/src/content/en/components/action-strip.mdx +++ b/docs/angular/src/content/en/components/action-strip.mdx @@ -129,7 +129,7 @@ The same Action Strip instance can be used in multiple places in the document as The Action Strip can change its parent container, which is possible by changing the . The best way to do so is via the API method and passing the `context` as an argument. The `context` should be an instance of a component and should have an accessible `element` property of the `ElementRef` type. - + The `show` API method uses [Angular Renderer2](https://angular.io/api/core/Renderer2) to append the Action Strip to that `element`. @@ -152,7 +152,7 @@ This can be utilized via grid action components and we are providing two default ``` - + These components inherit and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. @@ -161,7 +161,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row - + More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html). diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx index acc8befaa9..67130fc3d9 100644 --- a/docs/angular/src/content/en/components/ai/theming-mcp.mdx +++ b/docs/angular/src/content/en/components/ai/theming-mcp.mdx @@ -56,7 +56,7 @@ The canonical launch command is: npx -y igniteui-theming igniteui-theming-mcp ``` - + The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. @@ -85,7 +85,7 @@ GitHub Copilot in VS Code supports MCP servers through a workspace-level configu Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available. - + MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. @@ -106,7 +106,7 @@ Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.js The server will be picked up automatically when you open a new Cursor chat session. - + You can also configure MCP servers globally via **Settings → MCP** in Cursor. @@ -178,7 +178,7 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: 5. Click **OK** and restart the AI Assistant. - + MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. @@ -231,7 +231,7 @@ globs: ["**/*.scss", "**/styles/**"] - For dark mode, only the palette changes. Component overrides stay the same. ``` - + Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project. @@ -261,11 +261,11 @@ Here is a brief overview of each tool: | `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | | `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | - + For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. - + If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. diff --git a/docs/angular/src/content/en/components/autocomplete.mdx b/docs/angular/src/content/en/components/autocomplete.mdx index 91978df595..0160f5238a 100644 --- a/docs/angular/src/content/en/components/autocomplete.mdx +++ b/docs/angular/src/content/en/components/autocomplete.mdx @@ -134,7 +134,7 @@ export class AutocompletePipeStartsWith implements PipeTransform { } ``` - + The uses the as a provider for the available options, which means that all capabilities of the dropdown component can be used in the autocomplete. @@ -213,7 +213,7 @@ export class AutocompleteComponent { } ``` - + The default positioning strategy is `AutoPositionStrategy` and the dropdown is opened according to the available space. @@ -233,7 +233,7 @@ If everything went right, you should see this in your browser: - ENTER will confirm the already selected item and will close the dropdown. - ESC will close the dropdown. - + When the Angular autocomplete opens, then the first item on the list is automatically selected. The same is valid when the list is filtered. diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx index 299c7d61ba..85818b166b 100644 --- a/docs/angular/src/content/en/components/avatar.mdx +++ b/docs/angular/src/content/en/components/avatar.mdx @@ -249,7 +249,7 @@ shape="rounded"> ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx index 1d2f43eb15..fe965dacf6 100644 --- a/docs/angular/src/content/en/components/badge.mdx +++ b/docs/angular/src/content/en/components/badge.mdx @@ -67,7 +67,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; export class HomeComponent {} ``` - + This component uses Material Icons. Add the following link to your `index.html`: `` @@ -228,7 +228,7 @@ import { IgxBadgeModule } from 'igniteui-angular/badge'; export class AppModule {} ``` - + The has and inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either `Default`, `Info`, `Success`, `Warning`, or `Error`. Depending on the type, a specific background color is applied. @@ -423,7 +423,7 @@ class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]"> ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx index 0f8403579e..39dac7c2ae 100644 --- a/docs/angular/src/content/en/components/banner.mdx +++ b/docs/angular/src/content/en/components/banner.mdx @@ -91,7 +91,7 @@ In order to display the banner component, use its + The `IgxBannerModule` includes a default banner button `Dismiss`, which closes the banner. @@ -114,7 +114,7 @@ Configuring the message displayed in the banner is easy - just change the conten An [`igx-icon`](/icon) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message. - + If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner. @@ -212,7 +212,7 @@ export class MyBannerComponent { } ``` - + If the changes above are applied, the banner will never open, as the opening event is always cancelled. @@ -232,7 +232,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 `IgxBannerComponent` does not explicitly limit the number of elements under the `igx-banner-actions` tag, but it is strongly recommended to use up to 2 if you want to adhere to the material design guidelines. @@ -272,7 +272,7 @@ $custom-banner-theme: banner-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them. diff --git a/docs/angular/src/content/en/components/button-group.mdx b/docs/angular/src/content/en/components/button-group.mdx index e5740b8f9a..210d0f8838 100644 --- a/docs/angular/src/content/en/components/button-group.mdx +++ b/docs/angular/src/content/en/components/button-group.mdx @@ -459,7 +459,7 @@ class="!light-button-group ![--item-background:#7B9E89]" ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx index 87e275e58a..6dc8167e35 100644 --- a/docs/angular/src/content/en/components/button.mdx +++ b/docs/angular/src/content/en/components/button.mdx @@ -135,7 +135,7 @@ To create an extended FAB, you can add any element prior to the `igx-icon`: ``` - + To get the extended FAB text styled properly, use `` or `
` tags. @@ -652,7 +652,7 @@ In the sample below, you can see how using the button component with customized - + The sample uses the [Bootstrap Light](/themes/sass/schemas#predefined-schemas) schema. @@ -720,7 +720,7 @@ You can find the full list of properties in the [button-theme]({environment:sass
``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/calendar.mdx b/docs/angular/src/content/en/components/calendar.mdx index 9070049a6e..301e6d3c36 100644 --- a/docs/angular/src/content/en/components/calendar.mdx +++ b/docs/angular/src/content/en/components/calendar.mdx @@ -38,7 +38,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The next step is to import the `IgxCalendarModule` in your **app.module.ts** file. - + The also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well: @@ -81,7 +81,7 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Calendar module or directives imported, you can start using the `igx-calendar` component. - + The uses the [Intl Web API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) for localization and formatting of dates. Consider using [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them. @@ -122,7 +122,7 @@ Following the same approach, we can switch to range selection mode: - + Notice that the calendar header is not rendered when the selection is either `multi` or `range`. @@ -327,7 +327,7 @@ If you traverse the page using _Tab key_ you should keep in mind that based on [ In an Angular Calendar that contains more than one selected dates, only the first date will be introduced as a tab stop. For example, when an Angular Calendar multi-select is enabled and you have selected the dates: _13/10/2020_, _17/10/2020_ and _21/10/2020_ only _13/10/2020_ will be accessible during tab navigation; in an Angular Calendar Range Picker, only the first date of the selected range will be part of the _page tab sequence_. - + Behavioral change, from _v10.2.0_ - Tab key navigation in the _days view_ is no longer available. In order to navigate between the dates in the _date view_ you should use the _arrow keys_. @@ -371,7 +371,7 @@ When an `year` inside the decade view is focused, use: - Arrow up and Arrow down keys to navigate through the years, - Enter key to select the currently focused year and close the view. - + Following version 8.2.0, keyboard navigation will not focus days that are outside of current month, but will rather change the month in view. @@ -395,7 +395,7 @@ To do that, use the `[headerOrientation]` property, setting it respectively to ` You can set the view orientation to place the months in the calendar either horizontally(side by side) or vertically(above one another). To do that, use the `[orientation]` property, setting it respectively to `horizontal` or `vertical`. - + You need at least two month view calendar to see that property working. @@ -799,7 +799,7 @@ class="!light-calendar ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/card.mdx b/docs/angular/src/content/en/components/card.mdx index f9f91e1b91..457a390a6c 100644 --- a/docs/angular/src/content/en/components/card.mdx +++ b/docs/angular/src/content/en/components/card.mdx @@ -440,7 +440,7 @@ elevated> ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/carousel.mdx b/docs/angular/src/content/en/components/carousel.mdx index baac3e581c..10aced7d75 100644 --- a/docs/angular/src/content/en/components/carousel.mdx +++ b/docs/angular/src/content/en/components/carousel.mdx @@ -38,7 +38,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The next step is to import the **IgxCarouselModule** in our **app.module.ts** file: - + This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected. @@ -201,7 +201,7 @@ To achieve this we will use the + This component uses Material Icons. Add the following link to your `index.html`: `` @@ -332,7 +332,7 @@ The carousel [animations](/carousel#angular-carousel-animations) are fully suppo The **IgxCarousel** 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 automatic slide transitioning is not entirely user-independent by default. Positioning the mouse pointer over a slide will interrupt the current slide transition until the mouse pointer leaves the slide area. This can be prevented by setting property to `false`. @@ -385,7 +385,7 @@ adding : syncing the components by hooking up on carousel's and list's events: - + As of v15.1.0 `onSlideChanged` was renamed to `slideChanged`. Using `ng update` will automatically migrate your code prior to use the new event name. @@ -759,7 +759,7 @@ You can find the full list of properties in the [carousel-theme]({environment:sa ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx index caec192055..90ed3fc81a 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx @@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis. - + the following examples can be applied to `CategoryChart` as well as `FinancialChart` controls. diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx index 685f96cc7d..9356484f6f 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx @@ -13,7 +13,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below. - + the following examples can be applied to `CategoryChart` as well as `FinancialChart` controls. diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx index 130bbfa97a..e234567660 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx @@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data. - + These features are designed to support cartesian axes and does not currently support radius or angle axes. diff --git a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx index 829ee34fa5..d44246f57f 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx @@ -73,7 +73,7 @@ The following example demonstrates enabling scrollbars. ## Chart Navigation through Code - + Code navigation of the chart can only be used for the control. diff --git a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx index 50313514ca..056c7aeaa2 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx @@ -195,7 +195,7 @@ Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performa Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does. - + The `CategoryChart` already uses ordinal/category axis so there is no need to change its properties. @@ -223,7 +223,7 @@ This code snippet shows how to ordinal/category x-axis in the `FinancialChart` a By default, Angular charts will automatically calculate `YAxisInterval` based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing `YAxisInterval` property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. - + We do not recommend setting axis minor interval as it will decrease chart performance. 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 91f6c753cb..222726cac7 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 @@ -23,7 +23,7 @@ This is directly integrated with the available tools of the `Toolbar`. The follo - + This feature is designed to support X and Y axes and does not currently support radial or angular axes. diff --git a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx index 083fed5580..89de21ac7d 100644 --- a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx @@ -95,7 +95,7 @@ You can style the aggregated Others slice separately from other slices by using These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior. - + The Others slice is only rendered when the chart is configured to create it (for example, with greater than `0` and an appropriate ). If the Others slice is not present, and have no visible effect. diff --git a/docs/angular/src/content/en/components/checkbox.mdx b/docs/angular/src/content/en/components/checkbox.mdx index cc5492932e..6d7c25d0a3 100644 --- a/docs/angular/src/content/en/components/checkbox.mdx +++ b/docs/angular/src/content/en/components/checkbox.mdx @@ -377,7 +377,7 @@ class="!light-checkbox ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/chip.mdx b/docs/angular/src/content/en/components/chip.mdx index dc2cd4aa8a..008308aadd 100644 --- a/docs/angular/src/content/en/components/chip.mdx +++ b/docs/angular/src/content/en/components/chip.mdx @@ -150,7 +150,7 @@ Dragging can be enabled by setting the ``` - + To reorder the chips you need to handle the event using the . @@ -673,7 +673,7 @@ You can find the full list of properties in the [chip-theme]({environment:sassAp ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/circular-progress.mdx b/docs/angular/src/content/en/components/circular-progress.mdx index 41c5d743aa..5eafa594a9 100644 --- a/docs/angular/src/content/en/components/circular-progress.mdx +++ b/docs/angular/src/content/en/components/circular-progress.mdx @@ -85,7 +85,7 @@ To have a better understanding how everything works, let's create a simple examp After that, we should have the demo sample in your browser. - + The **igx-circular-bar** emits event that outputs an object like this `{currentValue: 65, previousValue: 64}` on each step. @@ -100,7 +100,7 @@ If you want to track a process that is not determined precisely, you can set the ``` - + You can hide the text of the circular progress bar by setting the property to `false`. diff --git a/docs/angular/src/content/en/components/combo-features.mdx b/docs/angular/src/content/en/components/combo-features.mdx index 11d4b6b9a1..7dbcf84a40 100644 --- a/docs/angular/src/content/en/components/combo-features.mdx +++ b/docs/angular/src/content/en/components/combo-features.mdx @@ -107,7 +107,7 @@ export class ComboDemo implements OnInit { } ``` - + If the `displayKey` property is omitted then the `valueKey` entity will be used instead. @@ -142,7 +142,7 @@ If everything is set up correctly, the combobox's list will display centered, us
- + The combobox component uses the as a default position strategy. diff --git a/docs/angular/src/content/en/components/combo-remote.mdx b/docs/angular/src/content/en/components/combo-remote.mdx index 8f9c6039b6..4e746cd112 100644 --- a/docs/angular/src/content/en/components/combo-remote.mdx +++ b/docs/angular/src/content/en/components/combo-remote.mdx @@ -215,11 +215,11 @@ export class ComboRemoteComponent implements OnInit { } ``` - + Anytime new data is loaded, we update the `totalItemCount` property, in order to have proper size of the list's scroll bar. In that case, the service returns total size using the property `@odata.count`. - + A service needs to be included as a provider. @@ -227,7 +227,7 @@ A service needs to be included as a provider. When using a combobox bound to remote data loaded in chunks and dealing with a more complex data type (e.g. objects), it is necessary to define a `valueKey`. As stated in the [combobox topic](/combo#data-value-and-display-properties), when no `valueKey` is specified, the combobox will try to handle selection by `equality (===)`. Since the objects that will be marked as selected will not be the same as the object that are continuously loaded, the selection will fail. - + When binding a combobox to remote data, make sure to specify a `valueKey`, representing a property that is unique to each item. diff --git a/docs/angular/src/content/en/components/combo.mdx b/docs/angular/src/content/en/components/combo.mdx index b4e52ab406..03832f69b9 100644 --- a/docs/angular/src/content/en/components/combo.mdx +++ b/docs/angular/src/content/en/components/combo.mdx @@ -116,7 +116,7 @@ In our case, we want the combobox to display the `name` of each city and the com ``` - + When the data source is an array of primitives (e.g. `string[]`, `number[]`), **do not** specify a `valueKey` and `displayKey`. Primitive values will be used for both value and text. @@ -286,7 +286,7 @@ When combobox is opened and search input is focused: - `ArrowDown` will move focus from the search input to the first list item. If the list is empty and custom values are enabled will move it to the Add new item button. - + Any other key stroke will be handled by the input. @@ -415,7 +415,7 @@ The last step is to include the component's theme. } ``` - + The component uses the [`IgxOverlay`](/overlay) service to hold and display the combobox items list container. To properly scope your styles you might have to use an . For more details check the [`IgxOverlay Styling Guide`](/overlay-styling). Also is necessary to use `::ng-deep` when we are styling the components. [!Note] The default `type` of the `IgxCombo` is `box` unlike the [`IgxSelect`](/select) where it is `line`. @@ -457,7 +457,7 @@ class="!light-combo ...> ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. @@ -471,7 +471,7 @@ At the end your combo should look like this: - When the combobox is bound to an array of primitive data which contains `undefined` (i.e. `[ undefined, ...]`), `undefined` is not displayed in the dropdown. When it is bound to an array of complex data (i.e. objects) and the value used for `valueKey` is `undefined`, the item will be displayed in the dropdown, but cannot be selected. - When the combobox is bound to a remote service and there is a predefined selection, its input will remain blank until the requested data is loaded. - + The combobox uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for the combobox. For more details see [`igxForOf Known Issues`](/for-of#known-limitations) section. diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx index 775be26d07..f140773aa8 100644 --- a/docs/angular/src/content/en/components/date-picker.mdx +++ b/docs/angular/src/content/en/components/date-picker.mdx @@ -36,7 +36,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The next step is to import the `IgxDatePickerModule` in your **app.module.ts** file. - + As the picker uses the , it is also dependent on the **BrowserAnimationsModule** and **optionally** on the **HammerModule** for touch interactions, so they need to be added to the module as well: @@ -145,7 +145,7 @@ export class SampleFormComponent { } ``` - + The picker always returns a `Date` value, this means that If it is model bound or two-way bound to a string variable, after a new date has been chosen, it will be of type `Date`. @@ -245,7 +245,7 @@ More information about these can be found in the [`IgxDateTimeEditor`](/date-tim
- + The `IgxDatePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. diff --git a/docs/angular/src/content/en/components/date-range-picker.mdx b/docs/angular/src/content/en/components/date-range-picker.mdx index 4de9267086..63029fa869 100644 --- a/docs/angular/src/content/en/components/date-range-picker.mdx +++ b/docs/angular/src/content/en/components/date-range-picker.mdx @@ -89,7 +89,7 @@ To instantiate a date range picker in its default mode, use the following code: public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, 25) }; ``` - + The Date Range Picker value is of type , which contains a start and an end date. @@ -358,7 +358,7 @@ The `inputFormat` property accepts a constructed format string using characters If the property is not set, the input format will be inferred from the in case it can be parsed as containing numeric date-time parts only. - + The `IgxDateRangePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. diff --git a/docs/angular/src/content/en/components/date-time-editor.mdx b/docs/angular/src/content/en/components/date-time-editor.mdx index ad0cd918a0..bb02a2e8a5 100644 --- a/docs/angular/src/content/en/components/date-time-editor.mdx +++ b/docs/angular/src/content/en/components/date-time-editor.mdx @@ -168,7 +168,7 @@ The table bellow shows formats that are supported by the directive's + The `IgxDateTimeEditorDirective` directive supports IME input. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends. @@ -208,7 +208,7 @@ Additionally, `spinDelta` is an input property of type + If needed, you can revert back to a valid state by handling the `validationFailed` event and changing the `newValue` property of the available arguments. @@ -235,7 +235,7 @@ You can force the component to select all of the input text on focus using ``` - + In order for the component to work properly, it is crucial to set after the directive. The reason for this is both directives operate on the input `focus` event so text selection should happen after the mask is set. diff --git a/docs/angular/src/content/en/components/dialog.mdx b/docs/angular/src/content/en/components/dialog.mdx index ba2b4164ba..8cb0e448a8 100644 --- a/docs/angular/src/content/en/components/dialog.mdx +++ b/docs/angular/src/content/en/components/dialog.mdx @@ -235,7 +235,7 @@ export class HomeComponent { } ``` - + The same approach should be used for the animation settings, use the `openAnimation` and `closeAnimation` properties to define animation params like duration. `params` object example: @@ -310,7 +310,7 @@ $my-dialog-theme: dialog-theme( ); ``` - + In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](/button)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). @@ -331,7 +331,7 @@ Since the dialog window uses the [`IgxOverlayService`](/overlay), in order for o ``` - + In order to learn more about the various options for providing themes to elements that are shown by using the [`IgxOverlayService`](/overlay), you can take a look at the [Overlay styling topic](/overlay-styling). @@ -347,7 +347,7 @@ The last step is to **include** the component theme in our application. } ``` - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles. diff --git a/docs/angular/src/content/en/components/display-density.mdx b/docs/angular/src/content/en/components/display-density.mdx index 7029f9c062..04d4813ed7 100644 --- a/docs/angular/src/content/en/components/display-density.mdx +++ b/docs/angular/src/content/en/components/display-density.mdx @@ -24,7 +24,7 @@ Using the `--ig-size` custom CSS property, you can configure the size on an appl
- + To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the [**installation**](https://www.infragistics.com/products/ignite-ui-angular/getting-started#installation) topic. diff --git a/docs/angular/src/content/en/components/drag-drop.mdx b/docs/angular/src/content/en/components/drag-drop.mdx index 4b57a44c23..ba5d908826 100644 --- a/docs/angular/src/content/en/components/drag-drop.mdx +++ b/docs/angular/src/content/en/components/drag-drop.mdx @@ -90,7 +90,7 @@ Before any actual movement is about to be performed, the event will be emitted. - + Due to the nature of the event, it can be triggered many times in a short period of time, which may cause performance issues for complex operations done when triggered. @@ -139,7 +139,7 @@ The ghost element by default is a copy of the base element the `igxDrag` is used ``` - + This component uses Material Icons. Add the following link to your `index.html`: `` diff --git a/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx b/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx index 54f85e8a8b..7111f248b1 100644 --- a/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx +++ b/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx @@ -36,7 +36,7 @@ Additionally, a way to prevent the drop-down from closing on chip deletion would - + To display the Dropdown component opened initially, it is recommended to set the open method as a callback of the requestAnimationFrame method. This will ensure that the DOM tree is repainted and all elements are correctly positioned. diff --git a/docs/angular/src/content/en/components/drop-down-virtual.mdx b/docs/angular/src/content/en/components/drop-down-virtual.mdx index d298e8b292..2b2163c6ed 100644 --- a/docs/angular/src/content/en/components/drop-down-virtual.mdx +++ b/docs/angular/src/content/en/components/drop-down-virtual.mdx @@ -78,13 +78,13 @@ The additional parameters passed to the `*igxFor` directive are: In order to assure uniqueness of the items, pass `item` inside of the input and `index` inside of the input of the `igx-drop-down-item`. To preserve selection while scrolling, the drop-down item needs to have a reference to the data items it is bound to. - + For the drop-down to work with a virtualized list of items, and inputs **must** be passed to all items. - + It is strongly advised for each item to have an unique value passed to the `[value]` input. Otherwise, it might lead to unexpected results (incorrect selection). - + When the drop-down uses virtualized items, the type of becomes `{ value: any, index: number }`, where `value` is a reference to the data item passed inside of the `[value]` input and `index` is the item's index in the data set diff --git a/docs/angular/src/content/en/components/drop-down.mdx b/docs/angular/src/content/en/components/drop-down.mdx index fcb3651251..2e9b23966c 100644 --- a/docs/angular/src/content/en/components/drop-down.mdx +++ b/docs/angular/src/content/en/components/drop-down.mdx @@ -400,7 +400,7 @@ The result from the above configurations could be seen in the below sample. - + To display the Dropdown component opened initially, it is recommended to set the open method as a callback of the requestAnimationFrame method. This will ensure that the DOM tree is repainted and all elements are correctly positioned. diff --git a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx index 5c25e4b830..fa5d9e2aeb 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx @@ -19,7 +19,7 @@ The Infragistics Angular Excel Engine's - + The XLSX format is required. Other formats are not supported at this time. diff --git a/docs/angular/src/content/en/components/excel-library.mdx b/docs/angular/src/content/en/components/excel-library.mdx index 7dada53cdc..eaf6bac051 100644 --- a/docs/angular/src/content/en/components/excel-library.mdx +++ b/docs/angular/src/content/en/components/excel-library.mdx @@ -107,7 +107,7 @@ The following is a list of the supported versions of Excel.** - Microsoft Excel 2016 - + The Excel Library does not support the Excel Binary Workbook (.xlsb) format at this time. diff --git a/docs/angular/src/content/en/components/expansion-panel.mdx b/docs/angular/src/content/en/components/expansion-panel.mdx index e2e6243b2c..199c02f6aa 100644 --- a/docs/angular/src/content/en/components/expansion-panel.mdx +++ b/docs/angular/src/content/en/components/expansion-panel.mdx @@ -169,7 +169,7 @@ Configuring the position of the header icon can be done through the ``` - + The property works with `RTL` - e.g. an icon set to show up in **right** will show in the leftmost part of the header when RTL is on. @@ -325,7 +325,7 @@ $custom-panel-theme: expansion-panel-theme( ); ``` - + To see all the available parameters for styling trough the [`theming`](/themes/sass/component-themes) engine check the [`API documentation`]({environment:sassApiUrl}/themes#function-expansion-panel-theme) @@ -378,7 +378,7 @@ You can find the full list of properties in the [expansion-panel-theme]({environ ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/exporter-csv.mdx b/docs/angular/src/content/en/components/exporter-csv.mdx index 0854936385..f261783c5e 100644 --- a/docs/angular/src/content/en/components/exporter-csv.mdx +++ b/docs/angular/src/content/en/components/exporter-csv.mdx @@ -40,7 +40,7 @@ import { IgxCsvExporterService } from 'igniteui-angular/grids/core'; export class AppModule {} ``` - + In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. diff --git a/docs/angular/src/content/en/components/exporter-excel.mdx b/docs/angular/src/content/en/components/exporter-excel.mdx index f5c1081775..ff455a5c3c 100644 --- a/docs/angular/src/content/en/components/exporter-excel.mdx +++ b/docs/angular/src/content/en/components/exporter-excel.mdx @@ -41,7 +41,7 @@ import { IgxExcelExporterService } from 'igniteui-angular/grids/core'; export class AppModule {} ``` - + In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. diff --git a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx index c04f5151c5..75d301d54a 100644 --- a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx +++ b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx @@ -12,7 +12,7 @@ This topic provides information about breaking changes in Ignite UI for Angular ## Redesigned Chart Defaults - + These breaking changes were introduce in version **11.2.0** of these packages and components: @@ -67,7 +67,7 @@ These breaking changes were introduce in version **11.2.0** of these packages an Import statements have been simplified to use just package names instead of full paths to API classes and enums. - + These breaking changes were introduce in version **8.2.12** of these packages and components: 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 1261117f4a..de042bb40e 100644 --- a/docs/angular/src/content/en/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/en/components/general-changelog-dv.mdx @@ -18,7 +18,7 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; All notable changes for each version of Ignite UI for Angular are documented on this page. - + This topic discusses changes only for components that are not included in the igniteui-angular package. For changes specific to igniteui-angular components, please see CHANGELOG.MD. @@ -178,7 +178,7 @@ There is a new property called `UseInsetOutlines` to control how outlines on the ### igniteui-angular-maps (Geographic Map) - + As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. For more details please visit: @@ -418,7 +418,7 @@ The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not w ## **13.1.0 (November 2021)** - + Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility. @@ -511,7 +511,7 @@ for example: ### igniteui-angular-maps (GeoMap) - + These features are CTP @@ -528,7 +528,7 @@ These features are CTP Import statements have been simplified to use just package names instead of full paths to API classes and enums. - + These breaking changes were introduce in these packages and components only: diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx index e074c13323..fe051fe26b 100644 --- a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx +++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx @@ -74,7 +74,7 @@ To create an Angular project non-interactively, provide `angular` as the framewo ig new --framework=angular --type=igx-ts --template=side-nav ``` - + As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project with standalone components by default. To use NgModule-based bootstrapping instead, set `--type=igx-ts-legacy`. diff --git a/docs/angular/src/content/en/components/general/data-analysis.mdx b/docs/angular/src/content/en/components/general/data-analysis.mdx index 1bb90121e6..4c30cf821c 100644 --- a/docs/angular/src/content/en/components/general/data-analysis.mdx +++ b/docs/angular/src/content/en/components/general/data-analysis.mdx @@ -19,7 +19,7 @@ import containsFormatting from '../../images/general/contains-formatting.png'; Data analysis is the process of examining, transforming, and arranging data in a specific way to generate useful information based on it. It also allows for reaching certain outcomes and conclusions through analytical and logical reasoning. - + This functionality will be introduced in **Ignite UI for Angular** as external package in order to ease the configuration and limit the required code at minimum @@ -32,7 +32,7 @@ Go ahead and perform a `cell range selection` or `column selection` in order to - + The [Dock Manager Web component](/dock-manager) provides means to manage the layout of the application through panes, and allowing the end-users to customize it further by pinning, resizing, moving and hiding panes. After selecting data, go ahead and create a couple of charts and pin them (by dragging) to the available areas @@ -90,7 +90,7 @@ This section introduces Grid's integration with charting functionality, which al The chart will be shown by selecting a range of cells and by clicking on the show analysis button. - + The chart creation option is only available when there are numeric values in the selected data. diff --git a/docs/angular/src/content/en/components/general/getting-started.mdx b/docs/angular/src/content/en/components/general/getting-started.mdx index 5c6db8cf12..d5dccae4a2 100644 --- a/docs/angular/src/content/en/components/general/getting-started.mdx +++ b/docs/angular/src/content/en/components/general/getting-started.mdx @@ -51,11 +51,11 @@ Or create a project non-interactively: ig new --framework=angular --type=igx-ts --template=side-nav ``` - + As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project that uses standalone components by default. To use NgModule-based bootstrapping instead, set `--type=igx-ts-legacy`. - + At some point during the process you may be asked to [log in to the Infragistics npm registry](ignite-ui-licensing#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already configured. This applies when using components under a [commercial license](./open-source-vs-premium#comparison-table-for-all-components). @@ -91,7 +91,7 @@ SCSS is recommended because the [Ignite UI for Angular Theming Library](../theme ng add igniteui-angular ``` - + `ng add` installs the trial version of `igniteui-angular`. If your project was scaffolded with the Ignite UI CLI, skip this step - the CLI already handles package setup. To switch to the licensed package later, see [Upgrade from Trial to Licensed](#upgrade-from-trial-to-licensed) below. @@ -127,7 +127,7 @@ ng g @igniteui/angular-schematics:component ig add ``` - + The `ig add` command is available in projects created by the Ignite UI CLI or in Angular CLI projects where Ignite UI for Angular was added with `ng add igniteui-angular`. diff --git a/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx b/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx index 9744723356..19de5abc2d 100644 --- a/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx +++ b/docs/angular/src/content/en/components/general/how-to/how-to-customize-theme.mdx @@ -21,7 +21,7 @@ import optimizingAfterModuleLazyload from '../../../images/general/theming-walkt This article will walk you through the details of customizing Ignite UI for Angular application theming and optimizing the size of the produced stylesheet. The article shows details of how the Ignite UI for Angular theming engine works and presents advanced usage of it. The article is very useful for both making full customization of the component styles, such that your Angular application is tailored to match your desired look and feel, and for making your application optimal for deployment by reducing the style sizes down to only what is used by the app. - + This document describes the theming system in Ignite UI for Angular from version 15 forward. Examples include both using the Sass APIs provided by the theming engine and exposed CSS variables. @@ -201,7 +201,7 @@ Then our theme definition will go in the general scope, which we will use for th } ``` - + I have switched the `igx-grid-toolbar` theme override to overriding just two of its variables, instead of reincluding all of the theme variables using [`tokens`]({environment:sassApiUrl}/themes#mixin-tokens). All theme variables can be found in the [corresponding sass api doc]({environment:sassApiUrl}/themes#function-grid-toolbar-theme) and are equivalent to the sass variables, but prefixed with `--` instead of `$`. @@ -214,7 +214,7 @@ And this is how it looks with dark OS theme: Customizing Color Schema Dark - + Full runtime switch, including Ignite UI theme schema preset switch is possible, only if two full themes are built. In the example above, we're switching the color palettes, but the theme schema remains $light-material-schema, so not all of the correct shades from the color palette are used when we switch to the dark color palette. @@ -228,7 +228,7 @@ Ignite UI theming abstracts multiple dimensions of theming and provides for very - [Typography](/themes/sass/typography) (fonts and font sizes) - [Size](/display-density) (the size of information that is fitted on the screen) - + If you really want a fully custom visual design, you will need to modify all of the supported theming dimensions and you will take full advantage of the Sass APIs. If you just need to change things like the fonts and а few colors, then you can just take a look at the section for palettes and typography. In most cases, all you will need is to change a few CSS variables and you won't need the full Sass APIs. We've made this as granular as possible, so modifications can be applied without unexpected side results on the visual design of your applications. @@ -269,7 +269,7 @@ $include: ( ); ``` - + Some component themes depend on other component themes. Even if you exclude certain themes, they will be retained by the build if you use a component theme, which depends on an excluded theme. @@ -412,7 +412,7 @@ $include: ( ); ``` - + You probably want to put all your variables, like color palette values in a separate `_variables.scss` file, which you can include from multiple components to reuse the variables. diff --git a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx index 0689500b19..e38ac34969 100644 --- a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx +++ b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx @@ -132,11 +132,11 @@ this._crudService.delete(event.data).subscribe({ }); ``` - + The above examples are based on the default grid UI for editing actions. Another valid approach is if you provide your own external UI. In such case, responding to user interactions with the UI should work with the grid editing API (**make sure the grid has a primaryKey set**). See [**API**](/general/how-to/how-to-perform-crud#editing-api) section for reference. - + Make sure to follow best practices and prevent any differences in your local data compared to the server database. For example - you may decide to first make a request to the server to delete a record, but if the request fails, do not delete the data on the local grid data: diff --git a/docs/angular/src/content/en/components/general/ignite-ui-licensing.mdx b/docs/angular/src/content/en/components/general/ignite-ui-licensing.mdx index 67d954710f..1de547835b 100644 --- a/docs/angular/src/content/en/components/general/ignite-ui-licensing.mdx +++ b/docs/angular/src/content/en/components/general/ignite-ui-licensing.mdx @@ -21,7 +21,7 @@ It is crucial to understand which license applies to which part of the package. For components under commercial license, it is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) that apply regarding their purchase and use. - + We have updated our license terms and subscription model in fourth quarter of 2025. @@ -41,7 +41,7 @@ Npm is the most popular package manager and is also the default one for the runt Infragistics Ignite UI for Angular is available as an npm package and you can add it as a dependency to your project in a [`few easy steps using the Ignite UI CLI`](/general/cli/step-by-step-guide-using-cli) or [using Ignite UI for Angular Schematics](/general/cli/step-by-step-guide-using-angular-schematics). Choosing this approach will not require configuring npm. If you plan to only use components from Ignite UI for Angular under MIT license, there is nothing else you will need to do. However, if you are using components under a commercial license, downloading the package from npm starts your [trial period](https://www.infragistics.com/products/ignite-ui-angular) of the product. - + What does it mean to start using a trial version? It means that you will be using a version of our product with a **Watermark** part of your web view. It doesn’t mean that you will be using the licensed package for a certain amount of time before it expires. For example, for a month. @@ -53,7 +53,7 @@ The Infragistics Ignite UI Dock Manager Web Component is available as a separate If Ignite UI for Angular has been added to the project using [`ng add`](/general/getting-started) or the project has been created through our [schematics collection](/general/cli/getting-started-with-angular-schematics) or [Ignite UI CLI](/general/cli/getting-started-with-cli), you can use our `upgrade-packages` to automatically upgrade your app to using our licensed packages. Your project package dependencies will include either `@igniteui/angular-schematics` or `igniteui-cli`, with both of them supporting the upgrade command. - + As the process changes the packages, we recommend that you update your project first before switching. This way you will avoid picking up a higher version of Ignite UI Angular and missing on potential update migrations. Follow our [Update Guide](/general/update-guide). @@ -72,7 +72,7 @@ ig upgrade-packages The schematic or command will take care of switching the package dependencies of the project and update source references. You'll be asked to login to our npm registry if not already setup. - + If your project is using [`yarn`](https://yarnpkg.com/), make sure to run `upgrade-packages` with the `--skip-install` flag. Then execute `yarn install` after to properly update your `yarn.lock` as the upgrade command currently uses `npm` for the install. @@ -82,7 +82,7 @@ If your project is using [`yarn`](https://yarnpkg.com/), make sure to run `upgra This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. - + If your account is not licensed (you are still using a Trial account) the private package feed won't be accessible to you e.g. it will return 404 or 403 error message. **Only licensed accounts can access the packages.infragistics private feed.** @@ -113,11 +113,11 @@ npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scop You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. - + `npm` is disallowing the use of the `"@"` symbol inside your username as it is considered as being "not safe for the net". Because your username is actually the email that you use for your Infragistics account it always contains the symbol `"@"`. That's why you must escape this limitation by replacing the `"@"` symbol with `"!!"` (two exclamation marks). For example, if your username is `"username@example.com"` when asked about your username you should provide the following input: `"username!!example.com"`. - + **macOS shell behavior**: If you're using macOS and setting the `:_auth` token manually via `npm config set`, make sure to **wrap the token in double quotes** like this: ```bash @@ -204,7 +204,7 @@ The following information is on how to setup authentication to our private npm r New Token Generated - + Each token is Base64 encoded. diff --git a/docs/angular/src/content/en/components/general/localization.mdx b/docs/angular/src/content/en/components/general/localization.mdx index 2954dbb4b0..a756d04581 100644 --- a/docs/angular/src/content/en/components/general/localization.mdx +++ b/docs/angular/src/content/en/components/general/localization.mdx @@ -5,12 +5,15 @@ keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI w --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; # Localization (i18n) ## Localization (i18n) ->Note: As of 21.1.0 this is the recommended way of applying localization to the Ignite UI for Angular components. + +As of 21.1.0 this is the recommended way of applying localization to the Ignite UI for Angular components. + With our new localization we introduce more features with less requirements for both our localization strings and formatting for all available locales. The formatting is now based on the standards introduced by the `Intl` API. @@ -20,7 +23,9 @@ Currently, Ignite UI for Angular ships with resource strings for the following l ->Note: Hindi (HI) included in the sample is only for illustrational purposes and to emphasize on the possibility to pass a custom localization object. In this sample, it contains only several localized strings for the summary. More details at [Custom localized resource strings](#custom-localized-resource-strings) section below. + +Hindi (HI) included in the sample is only for illustrational purposes and to emphasize on the possibility to pass a custom localization object. In this sample, it contains only several localized strings for the summary. More details at [Custom localized resource strings](#custom-localized-resource-strings) section below. + ### Locale @@ -46,7 +51,9 @@ In general you should register your resources under the languages, regions and s With this approach we have the ability to set localization through the `lang` global attribute of the `HTML` tag. This attribute is being watched and if it is changed, all rendered components will update their resource strings to the currently set language. All rules regarding the tag used apply as described above. -> Note: This works only on root level and will not work for inner elements on the page. + +This works only on root level and will not work for inner elements on the page. + ```html @@ -236,7 +243,9 @@ public resourcesDE = GridResourceStringsDE; If you would like to localize your app, but we do not provide resource strings for the language you use and would like to provide your own translation, you can always provide custom resource string. You can do that globally or per component(using the `resourceStrings` property). ->Note: Feel free to contribute to the [`igniteui-i18n-resources`](https://github.com/IgniteUI/igniteui-i18n/tree/master/projects/igniteui-i18n-resources) package with more languages. The `igniteui-angular-i18n` are based on them. + +Feel free to contribute to the [`igniteui-i18n-resources`](https://github.com/IgniteUI/igniteui-i18n/tree/master/projects/igniteui-i18n-resources) package with more languages. The `igniteui-angular-i18n` are based on them. + You can use the provided `IResourceStrings` type for all components to get typings for the resource stings used: @@ -284,7 +293,9 @@ registerI18n(customResources, 'en'); ``` ->Note: The last examples set only specific resource strings. This means that the rest will default to English, if they are not available for the components in use to get. + +The last examples set only specific resource strings. This means that the rest will default to English, if they are not available for the components in use to get. + ### Available resource strings @@ -311,7 +322,9 @@ registerI18n(customResources, 'en'); ## Legacy Localization (i18n) ->Note: This is an old way of handling localization that was recommended until 21.0.x. We suggest using the new available way above if you are using newer versions. This will still work until further notice. + +This is an old way of handling localization that was recommended until 21.0.x. We suggest using the new available way above if you are using newer versions. This will still work until further notice. + Currently, Ignite UI for Angular ships with resource strings for the following languages and scripts: Bulgarian, Czech, Danish, Dutch, English, French, German, Hungarian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Romanian, Spanish, Swedish, Turkish, Traditional Chinese (zh-Hant) and Simplified Chinese (zh-Hans). These are available via the `igniteui-angular-i18n` package, except for English which comes as a default localization in `igniteui-angular`. @@ -321,7 +334,9 @@ With only a few lines of code, users can easily change the localization strings ->Note: Hindi (HI) included in the sample is only for illustrational purposes and to emphasize on the possibility to pass a custom localization object. In this sample, it contains only several localized strings for the summary. More details at [Utilize own localized resources](#utilize-own-localized-resources) section below. + +Hindi (HI) included in the sample is only for illustrational purposes and to emphasize on the possibility to pass a custom localization object. In this sample, it contains only several localized strings for the summary. More details at [Utilize own localized resources](#utilize-own-localized-resources) section below. + ### Usage @@ -395,7 +410,9 @@ export class AppComponent implements OnInit { } ``` ->Note: Feel free to contribute to the [`igniteui-angular-i18n`](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) package with more languages! + +Feel free to contribute to the [`igniteui-angular-i18n`](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) package with more languages! + #### Utilize own localized resources diff --git a/docs/angular/src/content/en/components/general/update-guide.mdx b/docs/angular/src/content/en/components/general/update-guide.mdx index aaacf629a2..44384a5e2c 100644 --- a/docs/angular/src/content/en/components/general/update-guide.mdx +++ b/docs/angular/src/content/en/components/general/update-guide.mdx @@ -51,7 +51,7 @@ To update the **Angular CLI** package use the following command: ng update @angular/cli ``` - + If the `ng update` command fails because of package dependency mismatches, then revert the update, delete the `node_modules` folder and rerun the update with `--force` flag. @@ -107,7 +107,7 @@ igx-avatar { } ``` - + In scoped mode, the `selector` property in the produced theme map is required to determine the component selector for proper variable scoping. If the mixin is called from the stylesheet root, the generated rule will use the theme's internal `selector` value. If called from within a selector, both that selector and the component selector will receive the variables. @@ -124,7 +124,7 @@ In scoped mode, the `selector` property in the produced theme map is required to // and picks up the global orange value from --ig-avatar-background. ``` - + **Global overrides flow into scoped mode.** Because scoped variables fall back to `--ig-*` tokens, setting a global token at `:root` will propagate to all scoped instances: @@ -1146,7 +1146,7 @@ If for any reason you see Sass compilation errors saying `math.div` is not a kno @include theme(); ``` - + The `core` mixin should always be included first. diff --git a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/angular-pipes.mdx b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/angular-pipes.mdx index 15abebf458..4f31494c4c 100644 --- a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/angular-pipes.mdx +++ b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/angular-pipes.mdx @@ -84,11 +84,11 @@ export class ReplacePipe implements PipeTransform { {{ name | replace:" ":"-" }} ``` - + Note that in order to be able to use the pipe in the component's html template, you have to add it to the module declarations. - + An important difference between the Angular pipe and the WPF converter is that the Angular pipe works only for one-way binding unlike the WPF converter which has [ConvertBack](https://docs.microsoft.com/en-us/dotnet/api/system.windows.data.ivalueconverter.convertback?view=netframework-4.8) method. diff --git a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/create-ui-with-components.mdx b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/create-ui-with-components.mdx index da09bd8a1c..c4bc982f4b 100644 --- a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/create-ui-with-components.mdx +++ b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/create-ui-with-components.mdx @@ -50,7 +50,7 @@ When the command completes, you'll notice a number of things have happened. Firs Sample Component Look at the `sample` folder which contains our newly created component. We can see that all three files that are required for a component are there plus this extra SPEC file. This is actually a test file which we do not need for this article, so we're not going to bother with it now. We also made a modification to the app.module.ts, in which it added the sample component to the `declarations` section of our NgModule. - + This is important - whenever a new component is created, it must be declared in the declarations section of the NG module. This section essentially says what components belong to this module. diff --git a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/layout.mdx b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/layout.mdx index 3cddb1868b..2fdfdaa991 100644 --- a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/layout.mdx +++ b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/layout.mdx @@ -170,7 +170,7 @@ In Angular, we could use the CSS Grid Layout Module, which offers a grid-based l } ``` - + The CSS Grid Layout is [not supported](https://caniuse.com/#feat=css-grid) in older browsers like Internet Explorer 11. diff --git a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/one-way-binding.mdx b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/one-way-binding.mdx index 779c90799a..76d576f14d 100644 --- a/docs/angular/src/content/en/components/general/wpf-to-angular-guide/one-way-binding.mdx +++ b/docs/angular/src/content/en/components/general/wpf-to-angular-guide/one-way-binding.mdx @@ -137,7 +137,7 @@ Property binding in Angular is used to bind values for target properties of HT By using property binding, the input's `disabled` property is bound to a boolean result, **not** a string. The `isDisabled` value is false and running the app would display the input as enabled. - + It is very important to remember that when a binding relies on the data type result, then a `property binding` should be used! If the binding simply relies on a string value, then `interpolation` should be used. diff --git a/docs/angular/src/content/en/components/grid-lite/binding.mdx b/docs/angular/src/content/en/components/grid-lite/binding.mdx index d70cbb9006..40bdfd6689 100644 --- a/docs/angular/src/content/en/components/grid-lite/binding.mdx +++ b/docs/angular/src/content/en/components/grid-lite/binding.mdx @@ -53,7 +53,7 @@ Or just set the respective properties in the html instead of using a `@ViewChild ``` - + The sort/filter states of the Grid Lite component are kept when changing the data source in this manner. Usually you will want to reset them by calling either **`clearSort()`** and/or **`clearFilter()`**. diff --git a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx index 89e520f92e..e806240031 100644 --- a/docs/angular/src/content/en/components/grid-lite/cell-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/cell-template.mdx @@ -111,7 +111,7 @@ defineComponents( ``` - + Keep in mind the more complex and involved the template is, the greater the performance cost. Avoid complex DOM structures if performance is important. diff --git a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx index 99a1983804..02aa6e4f2a 100644 --- a/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx +++ b/docs/angular/src/content/en/components/grid-lite/column-configuration.mdx @@ -53,7 +53,7 @@ The previous snippet will result in the grid automatically creating columns equi Useful for a quick render of some data without any additional customizations. - + This is a one-time operation which is executed when the grid is initially added to the DOM. Passing an empty data source or having a late bound data source (such as a HTTP request) will usually result in empty column configuration for the grid. This property is ignored if any existing column configuration already exists in the grid. See [the data binding topic](/grid-lite/binding) for additional information on auto-generating the column configuration based on the data source. @@ -93,7 +93,7 @@ Each column of the Grid Lite component can be configured to be resizable by sett If a column is set to be resizable, you can drag the right size of the column header to either increase/decrease the column width. Double-clicking on the resize area will trigger auto-sizing of the column where it will try set its width according to the largest content of its cells/header. - + Columns with "fluid" widths (fr, %, etc.) can behave erratically when resizing in the grid is performed as they try to accommodate for the new dimensions. Depending on the application scenario, it may be better to use "hard" units so users don't experience layout shifts. diff --git a/docs/angular/src/content/en/components/grid-lite/header-template.mdx b/docs/angular/src/content/en/components/grid-lite/header-template.mdx index 4a8a855c6f..b5a95fecfa 100644 --- a/docs/angular/src/content/en/components/grid-lite/header-template.mdx +++ b/docs/angular/src/content/en/components/grid-lite/header-template.mdx @@ -23,7 +23,7 @@ By default the column uses the `field` property for label text. To customize the ``` - + When a header template is provided, `header` is ignored. diff --git a/docs/angular/src/content/en/components/grid-lite/sorting.mdx b/docs/angular/src/content/en/components/grid-lite/sorting.mdx index dc69508dde..143a6adf83 100644 --- a/docs/angular/src/content/en/components/grid-lite/sorting.mdx +++ b/docs/angular/src/content/en/components/grid-lite/sorting.mdx @@ -55,7 +55,7 @@ The grid supports both single and multi-column sorting. Multi-column is enabled grid.sortingOptions = { mode: 'single' }; ``` - + The single/multi-column sorting behavior controls how end-users interact with the Grid lite. Sorting through the API with multiple expression will still work when single sorting is enabled. diff --git a/docs/angular/src/content/en/components/grid/grid.mdx b/docs/angular/src/content/en/components/grid/grid.mdx index 29a78bc2ad..40024c5199 100644 --- a/docs/angular/src/content/en/components/grid/grid.mdx +++ b/docs/angular/src/content/en/components/grid/grid.mdx @@ -66,7 +66,7 @@ Boston Marathon 2021 – In this angular grid example, you can see how users can ## Getting Started with Ignite UI for Angular Data Grid - + **This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**. @@ -135,7 +135,7 @@ The property tells the `igx-grid` ## Angular Grid Styling Configuration > - + The uses **css grid layout**, which is **not supported in IE without prefixing**, consequently it will not render properly. @@ -215,7 +215,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1 ... ``` - + Whenever a header template is used along with grouping/moving functionality the _column header area_ becomes **draggable** and you cannot access the custom elements part of the header template until you mark them as **not draggable**. Example below. @@ -271,7 +271,7 @@ In the snippet above we "take" a reference to the implicitly provided cell value When changing data through the **cell template** using `ngModel`, you need to call the appropriate API methods to make sure the value is correctly updated in the Angular grid's underlying data collection. In the snippet above, the `ngModelChange` call passes through the grid's [editing API](/grid/cell-editing#editing-through-api) and goes through the grid's editing pipeline, properly triggering [transactions](/grid/batch-editing)(if applicable) and handling of [summaries](/grid/summaries), [selection](/grid/selection), etc. However, this `ngModelChange` will fire every time the value of the cell changes, not just when the user is done editing, resulting in a lot more API calls. - + The grid exposes a default handling for number, string, date and boolean column types. For example, the column will display `check` or `close` icon, instead of true/false by default, for boolean column type. @@ -803,11 +803,11 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + This is still in experimental feature for the `IgxGridComponent`. This means that there might be some unexpected behaviors in the Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. - + Enabling it can affects other parts of an Angular application that the `IgxGridComponent` is not related to. @@ -823,7 +823,7 @@ Enabling it can affects other parts of an Angular application that the `IgxGridC | Columns have a minimum allowed column width. Depending on the value of [`--ig-size`] CSS variable, they are as follows:
"small": 56px
"medium": 64px
"large ": 80px | If width less than the minimum allowed is set it will not affect the rendered elements. They will render with the minimum allowed width for the corresponding [`--ig-size`]. This may lead to an unexpected behavior with horizontal virtualization and is therefore not supported. | | Row height is not affected by the height of cells that are not currently rendered in view. | Because of virtualization a column with a custom template (that changes the cell height) that is not in the view will not affect the row height. The row height will be affected only while the related column is scrolled in the view. | - + `igxGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxGrid`. For more details see [igxForOf Known Issues](/for-of#known-limitations) section. diff --git a/docs/angular/src/content/en/components/grid/groupby.mdx b/docs/angular/src/content/en/components/grid/groupby.mdx index 07716c4a86..9674ec255c 100644 --- a/docs/angular/src/content/en/components/grid/groupby.mdx +++ b/docs/angular/src/content/en/components/grid/groupby.mdx @@ -65,7 +65,7 @@ During runtime the expressions are gettable and settable from the + Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. @@ -210,7 +210,7 @@ The grouping UI supports the following keyboard interactions: igxGrid allows defining custom grouping per column or per grouping expression, which provides grouping based on a custom condition. This is useful when you need to group by complex objects or for other application specific scenarios. - + In order to implement custom grouping the data first needs to be sorted appropriately. Due to this you may also need to apply a custom sorting strategy that extends the base . After the data is sorted the custom groups can be determined by specifying a for the column or for the specific grouping expression. @@ -453,7 +453,7 @@ In order for the custom theme to affect only specific component, you can move al This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the components which are inside the grid. @@ -474,7 +474,7 @@ In our example, we need to use `::ng-deep` for our chip theme: - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx index b9a7d13a96..b359a5fafb 100644 --- a/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx +++ b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx @@ -38,7 +38,7 @@ const boolData = data.filter(rec => typeof rec === "boolean"); const dates = data.filter(rec => isDate(rec)); ``` - + Bear in mind, that `isDate` is a custom function. diff --git a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx index a0986cdaa2..e6ac6e9b0c 100644 --- a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx +++ b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx @@ -27,7 +27,7 @@ In this angular grid example you can see how users can visualize hierarchical se ## Getting Started with Ignite UI for Angular Hierarchical Data Grid - + **This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**. @@ -144,7 +144,7 @@ Each `igx-row-island` should specify the key of the property that holds the chil ``` - + Note that instead of `data` the user configures only the `key` that the `igx-hierarchical-grid` needs to read to set the data automatically. @@ -305,7 +305,7 @@ See the [Grid Sizing](/hierarchicalgrid/sizing) topic. ## CRUD operations - + An important difference from the flat Data Grid is that each instance for a given row island has the same transaction service instance and accumulates the same transaction log. In order to enable the CRUD functionality users should inject the `IgxHierarchicalTransactionServiceFactory`. @@ -334,7 +334,7 @@ To begin the customization of the hierarchical grid, you need to import the `ind Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. - + There is no specific `sass` hierarchical grid function. @@ -353,7 +353,7 @@ $custom-theme: grid-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -374,7 +374,7 @@ This way, due to Angular's [`ViewEncapsulation`](https://angular.io/api/core/Com - + The sample will not be affected by the selected global theme from `Change Theme`. @@ -388,11 +388,11 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + This is still in experimental feature for the `igxHierarchicalGrid`. This means that there might be some unexpected behaviors in the Hierarchical Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. - + Enabling it can affects other parts of an Angular application that the `igxHierarchicalGrid` is not related to. @@ -402,7 +402,7 @@ Enabling it can affects other parts of an Angular application that the `igxHiera | :--------- | :---------------------------------------------------------- | | Group By | Group By feature is not supported by the hierarchical grid. | - + `igxHierarchicalGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxHierarchicalGrid`. For more details see [igxForOf Known Issues](/for-of#known-limitations) section. diff --git a/docs/angular/src/content/en/components/icon-button.mdx b/docs/angular/src/content/en/components/icon-button.mdx index 5081f2924a..66c844b7c9 100644 --- a/docs/angular/src/content/en/components/icon-button.mdx +++ b/docs/angular/src/content/en/components/icon-button.mdx @@ -461,7 +461,7 @@ You can find the full list of properties in the [icon-button-theme]({environment ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/icon.mdx b/docs/angular/src/content/en/components/icon.mdx index 56efc9156a..9142a7b2ac 100644 --- a/docs/angular/src/content/en/components/icon.mdx +++ b/docs/angular/src/content/en/components/icon.mdx @@ -177,7 +177,7 @@ To learn more about Material Symbols styles please visit their [`official docume ## Server-side Rendering Note - + In case you have implemented server side rendering logic in your application using Angular Universal and have used the `IgxIconService` to register icons, this may cause the following exception:

> `XMLHttpRequest is not defined. Could not fetch SVG from url.` >

In order to avoid this, execute the listed steps: @@ -329,7 +329,7 @@ You can find the full list of properties in the [icon-theme]({environment:sassAp person ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/input-group.mdx b/docs/angular/src/content/en/components/input-group.mdx index ed3f4bc086..a02e60e281 100644 --- a/docs/angular/src/content/en/components/input-group.mdx +++ b/docs/angular/src/content/en/components/input-group.mdx @@ -78,13 +78,13 @@ export class HomeComponent { } ``` - + This component uses Material Icons. Add the following link to your `index.html`: `` Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the `igx-input-group` component. - + To use any of the directives `igxInput`, `igxLabel`, `igx-prefix`, `igx-suffix` or `igx-hint`, you have to wrap them in an `` container. @@ -148,7 +148,7 @@ To set the type, use the + The property has precedence over a , thus a token value can be overridden on a component level if the type property is set explicitly. Most of the `igniteui-angular` form controls use input-group component internally, or allow for a custom template. Setting a global token will affect these components as well. @@ -784,11 +784,11 @@ In the sample below, you can see how using the input group with customized CSS v - + The sample uses the [Indigo Light](/themes/sass/schemas#predefined-schemas) schema. - + If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type.
For example:
@@ -843,7 +843,7 @@ You can find the full list of properties in the [input-group-theme]({environment ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/interactivity/right-to-left-support.mdx b/docs/angular/src/content/en/components/interactivity/right-to-left-support.mdx index 59cb1dcea0..2c9502ce40 100644 --- a/docs/angular/src/content/en/components/interactivity/right-to-left-support.mdx +++ b/docs/angular/src/content/en/components/interactivity/right-to-left-support.mdx @@ -56,11 +56,11 @@ or ``` - + Currently the `Igx-Grid` component only has partial(visual) RTL support. - + ### Breaking Changes in version 13.2.0 diff --git a/docs/angular/src/content/en/components/label-input.mdx b/docs/angular/src/content/en/components/label-input.mdx index 1c659137e9..d8b785d113 100644 --- a/docs/angular/src/content/en/components/label-input.mdx +++ b/docs/angular/src/content/en/components/label-input.mdx @@ -137,7 +137,7 @@ You can add logic to force `focus` on input elements using the + To use the directive, you have to import the . @@ -155,7 +155,7 @@ If you want the text in an input element, marked with `igxInput`, to be selected ``` - + To use the directive, you have to import the . diff --git a/docs/angular/src/content/en/components/layout.mdx b/docs/angular/src/content/en/components/layout.mdx index 85d6aa83ba..c4a189eea0 100644 --- a/docs/angular/src/content/en/components/layout.mdx +++ b/docs/angular/src/content/en/components/layout.mdx @@ -44,7 +44,7 @@ Use + Reverse order using `="true"`. @@ -88,7 +88,7 @@ Use - + The directive affects the flow directions for that container's **immediate** children. diff --git a/docs/angular/src/content/en/components/linear-progress.mdx b/docs/angular/src/content/en/components/linear-progress.mdx index afce4d087f..ec4a922ea1 100644 --- a/docs/angular/src/content/en/components/linear-progress.mdx +++ b/docs/angular/src/content/en/components/linear-progress.mdx @@ -182,7 +182,7 @@ Let's take a look at how this turned out:
- + If the input value is not defined, the progress update is **1% of the value**. In case you want the progress to be faster, the value should be greater than (** * 1%**), respectfully for slower progress the should be less than the default progress update. diff --git a/docs/angular/src/content/en/components/list.mdx b/docs/angular/src/content/en/components/list.mdx index 5c823a4097..9d7a34176e 100644 --- a/docs/angular/src/content/en/components/list.mdx +++ b/docs/angular/src/content/en/components/list.mdx @@ -33,7 +33,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The next step is to import the `IgxListModule` in the **app.module.ts** file. - + **This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**.It can be imported in the root module of the application in order for touch interactions to work as expected.**. @@ -285,7 +285,7 @@ Cool, now let's update the template for our contacts list to show the avatar and ``` - + This component uses Material Icons. Add the following link to your `index.html`: `` @@ -370,7 +370,7 @@ To do this you have to implement the following steps: The following example demonstrates how to handle both left and right panning. The event handler for right panning shows a toast message. The event handler for the left panning deletes an item from the . - + Please note that the list item removal is an application task. The itself cannot remove items from the data source because the does not have reference to the data source. @@ -466,7 +466,7 @@ public leftPanPerformed(args) { ... ``` - + When panning list items there is a threshold which must be reached in order for the panning events to be emitted. You can change the threshold using the 's property. By default this property has a value of 0.5 which means 50% of list item's width. @@ -857,7 +857,7 @@ You can find the full list of properties in the [list-theme]({environment:sassAp ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/mask.mdx b/docs/angular/src/content/en/components/mask.mdx index 317be28a6d..db009ec38e 100644 --- a/docs/angular/src/content/en/components/mask.mdx +++ b/docs/angular/src/content/en/components/mask.mdx @@ -31,7 +31,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The next step is to import the `IgxMaskModule` and `IgxInputGroupModule` in your **app.module.ts** file. - + directive is used on an input of type **text**. @@ -119,7 +119,7 @@ In the following example, we apply a phone number with an extension mask to an i If configured properly, you should see the demo sample in your browser. - + The `IgxMaskDirective` supports IME input and updates the mask when composition ends. @@ -234,7 +234,7 @@ Then add this to the template: You can see how this works in the previous sample. - + In order for the component to work properly, it is crucial to set `igxTextSelection` after the `igxMask` directive. The reason for this is both directives operate on the input `focus` event so text selection should happen after the mask is set. diff --git a/docs/angular/src/content/en/components/month-picker.mdx b/docs/angular/src/content/en/components/month-picker.mdx index 0de8a77105..69a2bbc74d 100644 --- a/docs/angular/src/content/en/components/month-picker.mdx +++ b/docs/angular/src/content/en/components/month-picker.mdx @@ -33,7 +33,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The first step is to import the `IgxCalendarModule` inside our **app.module.ts** file. - + The also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well: @@ -76,7 +76,7 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Calendar module or Month Picker component imported, you can start using the `igx-month-picker` component. - + Note that the uses the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) WebAPI for localization and formatting of dates. Consider using the [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them. @@ -246,7 +246,7 @@ class="!light-calendar ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/navbar.mdx b/docs/angular/src/content/en/components/navbar.mdx index 61633f2628..0a7364b4e3 100644 --- a/docs/angular/src/content/en/components/navbar.mdx +++ b/docs/angular/src/content/en/components/navbar.mdx @@ -86,7 +86,7 @@ In order to add a menu button, we will show the action button using the `actionB ``` - + The uses the Material fontset by design. @@ -214,7 +214,7 @@ If the sample is configured properly, you should see the following in your brows - + If or is provided, the default will not be used. @@ -262,7 +262,7 @@ If we want to provide a custom content for a navbar's title, we can achieve this ``` - + If or is provided, the default will not be used. @@ -321,7 +321,7 @@ $custom-navbar-theme: navbar-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them. @@ -367,7 +367,7 @@ You can find the full list of properties in the [navbar-theme]({environment:sass ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/navdrawer.mdx b/docs/angular/src/content/en/components/navdrawer.mdx index 3507d0d9c4..06eb89cd93 100644 --- a/docs/angular/src/content/en/components/navdrawer.mdx +++ b/docs/angular/src/content/en/components/navdrawer.mdx @@ -35,7 +35,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The first step is to import the `IgxNavigationDrawerModule` inside our **app.module.ts** file. - + The also depends on the [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) and **optionally** the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) for touch interactions, so they need to be added to the AppModule as well: @@ -104,7 +104,7 @@ export class HomeComponent { } ``` - + This component uses Material Icons. Add the following link to your `index.html`: `` @@ -149,7 +149,7 @@ The [`igxRipple`](/ripple) directive completes the look and feel: ``` > An additional template decorated with `igxDrawerMini` directive can be provided for the alternative [Mini variant](#mini-variant) as closed state. - + The Navigation Drawer can float above the content or be pinned alongside it. By default the drawer switches between those modes depending on the viewport size. See [Modes](#modes) for more information. @@ -233,7 +233,7 @@ Unpinned (elevated above the content) mode is the normal behavior where the draw The drawer can be pinned to take advantage of larger screens, placing it within normal content flow with relative position. Depending on whether the app provides a way to toggle the drawer, the pinned mode can be used to achieve either [permanent or persistent behavior](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior). - + By default the Navigation Drawer is responsive, actively changing between unpinned and pinned mode based on screen size. This behavior is controlled by the property and can be disabled by setting a falsy value (e.g. 0). @@ -412,7 +412,7 @@ To create a multi-level hierarchical navigation using the `IgxNavigationDrawerCo ``` - + In this example, we're not using the `igxDrawerItem`, instead we're populating directly with custom `igxDrawer` content, in this case using an `igx-tree`. @@ -443,7 +443,7 @@ export const menusRoutes: Routes = [ There's also child routing extracted from the `children` property of the routes. The sample shows two levels of hierarchy, but if your routing has more, then all you need to do is define the levels below the second one in the [tree node templates](/tree#templating). - + Keep in mind that some routes, like empty route redirect, error route, page not found, etc., might not be suitable for visualization directly. Before binding the tree to the routing object, you can strip those routes out of your object in your component logic. @@ -484,7 +484,7 @@ The last step is to **include** the component theme in our application. } ``` - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles. diff --git a/docs/angular/src/content/en/components/nuget-feed.mdx b/docs/angular/src/content/en/components/nuget-feed.mdx index 91740176f7..f2a4ec97fc 100644 --- a/docs/angular/src/content/en/components/nuget-feed.mdx +++ b/docs/angular/src/content/en/components/nuget-feed.mdx @@ -34,7 +34,7 @@ This topic contains the following sections: NuGet Package Manager Package Sources - Infragistics Server - + When adding a NuGet package from this source for the first time, you will be prompted for your Infragistics credentials. @@ -48,6 +48,6 @@ When adding a NuGet package from this source for the first time, you will be pro nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed" -username "your login email" -password "your password" ``` - + The password will be stored encrypted in the NuGet config file and can only be decrypted in the same user context as it was encrypted. The default location of the config file can be found here `%AppData%\NuGet\NuGet.config` diff --git a/docs/angular/src/content/en/components/overlay-position.mdx b/docs/angular/src/content/en/components/overlay-position.mdx index 3e99c2d137..3db4e51333 100644 --- a/docs/angular/src/content/en/components/overlay-position.mdx +++ b/docs/angular/src/content/en/components/overlay-position.mdx @@ -74,11 +74,11 @@ Positions the element like the **Connected** positioning strategy and re-sizes t
- + It won't try to resize the element if the strategy is using HorizontalDirection = Center / VerticalDirection = Middle. - + The overlay element **will be** resized, but the positioning strategy **does not** handle `overflow`. For example, if the element needs to have `overflow-y` when resized, incorporate the appropriate style to provide that. diff --git a/docs/angular/src/content/en/components/overlay-styling.mdx b/docs/angular/src/content/en/components/overlay-styling.mdx index 90bc29e3dd..828a97b5f4 100644 --- a/docs/angular/src/content/en/components/overlay-styling.mdx +++ b/docs/angular/src/content/en/components/overlay-styling.mdx @@ -65,7 +65,7 @@ For example, let's take the `igx-combo` - its item [styles](/combo#styling) use } ``` - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles. @@ -123,7 +123,7 @@ $my-overlay-theme: overlay-theme( Now **all** modal overlays will have a purple tint to their background. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles. diff --git a/docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx b/docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx index 587a1ceebc..b04d921361 100644 --- a/docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx +++ b/docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx @@ -15,7 +15,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; The pivot and flat grid component classes inherit from a common base and thus share some functionality and features. - + Some features do not have meaningful behavior in the context of a pivot table and therefore cannot be enabled for `IgxPivotGrid`. These include: - CRUD operations @@ -33,13 +33,13 @@ The Pivot Grid component has additional features and functionalities related to All dimensions (filters, rows, columns) can be filtered via the chip UI or the API. This functionality is embedded and enabled by default. - + You can use the filtering dimension to filter out data values which are not a part of the pivot view. The filtering UI can be opened via the dimension chips filter icon and allows excel-style filtering of the unique dimension values. - + If there is not enough space for all of the filtering chips, the pivot grid will show the ones that were cut off into a dropdown. End-users can access and manipulate them there. @@ -109,7 +109,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { } ``` - + As of version `18.0.0` the IgniteUI for Angular the `width` of the row dimensions can also be set to `auto`. @@ -184,7 +184,7 @@ Additionally the position of the summary can be changed via the `horizontalSumma public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom }; ``` - + The row summary related options - `horizontalSummary` and `horizontalSummariesPosition` are applicable only for the `Horizontal` layout mode. @@ -204,7 +204,7 @@ All chips can change their order within their area by drag & drop. The chips from `rows`, `column`, `filter`(dimension chips) can be moved from any of those areas to any other and at any place. Chips from these areas can not be moved to the `values` area and chips from the `values` area can not be moved to any of the dimension areas. - + The chips from the Pivot Grid can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the Pivot Grid. diff --git a/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx b/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx index f6ab9e788b..5c97311bb9 100644 --- a/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx +++ b/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx @@ -99,7 +99,7 @@ A filter can also be defined via the `filters` configuration property. It can be Each basic dimension configuration requires a `memberName` that matches a field from the provided `data`, or a `memberFunction` that extracts a value from the record in case of complex objects or other custom scenarios. - + The `memberName` needs to be unique. In case you need different dimensions for the same field, you can define a custom unique `memberName` for each, and extract the related value via `memberFunction`. @@ -164,7 +164,7 @@ It also allows for further customization via the second option parameter in orde A value configuration requires a `member` that matches a field from the provided `data`, or it can define either via an `aggregatorName` or custom `aggregator` function for more complex scenarios. - + The `member` needs to be unique. In case you need different value aggregations for the same field, you can define a custom unique `member` for each, and extract the related value via the `aggregator` function. @@ -223,7 +223,7 @@ public static totalMax: PivotAggregation = (members, data: any) => { The pivot value also provides a `displayName` property. It can be used to display a custom name for this value in the column header. - + If you define both `aggregatorName` and `aggregator` function, `aggregatorName` takes precedence. If none is set then an error is thrown. diff --git a/docs/angular/src/content/en/components/query-builder-model.mdx b/docs/angular/src/content/en/components/query-builder-model.mdx index 42bc43e043..46448b6054 100644 --- a/docs/angular/src/content/en/components/query-builder-model.mdx +++ b/docs/angular/src/content/en/components/query-builder-model.mdx @@ -83,7 +83,7 @@ JSON.stringify(tree, null, 2); In the context of the the _IN / NOT-IN_ operators are used with the newly exposed subquery functionality in the _WHERE_ clause. - + A subquery is a query nested inside another query used to retrieve data that will be used as a condition for the outer query. diff --git a/docs/angular/src/content/en/components/query-builder.mdx b/docs/angular/src/content/en/components/query-builder.mdx index c1bfd948dc..cfe110436f 100644 --- a/docs/angular/src/content/en/components/query-builder.mdx +++ b/docs/angular/src/content/en/components/query-builder.mdx @@ -160,7 +160,7 @@ Condition chips can be easily repositioned using mouse [_Drag & Drop_](/drag-dro - Chip can also be dragged along groups and subgroups. For example, grouping/ungrouping expressions is achieved via the Expressions Dragging functionality. In order to group already existing conditions, first you need to add a new group through the 'add' group button. Then via dragging, the required expressions can be moved to that group. In order to ungroup, you could drag all conditions outside their current group and once the last condition is moved out, the group will be deleted. - + Chips from one query tree cannot be dragged in another, e.g. from parent to inner and vice versa. @@ -175,7 +175,7 @@ Chips from one query tree cannot be dragged in another, e.g. from parent to inne - Space / Enter - focused expression enters edit mode. If chip is been moved, this confirms it's new position. - Esc - chip's reordering is canceled and it returns to it's original position. - + Keyboard reordering provides the same functionality as mouse Drag & Drop. Once a chip is moved, user has to confirm the new position or cancel the reorder. @@ -348,7 +348,7 @@ $custom-icon-button: outlined-icon-button-theme( In this example we only changed some of the parameters for the listed components, but the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme), [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme), [`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme), [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) themes provide way more parameters to control their respective styling. - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them. @@ -367,7 +367,7 @@ The last step is to **include** the new component themes using the `tokens` mixi } ``` - + If the component is using an [`Emulated`](/themes/sass/component-themes/#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the query builder component (button, chip, drop-down ...etc). @@ -375,7 +375,7 @@ If the component is using an [`Emulated`](/themes/sass/component-themes/#view-en - + The sample will not be affected by the selected global theme from `Change Theme`. @@ -410,7 +410,7 @@ You can find the full list of properties in the [query-builder-theme]({environme ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/radio-button.mdx b/docs/angular/src/content/en/components/radio-button.mdx index 7f0f73ec29..7a7860fc9b 100644 --- a/docs/angular/src/content/en/components/radio-button.mdx +++ b/docs/angular/src/content/en/components/radio-button.mdx @@ -222,7 +222,7 @@ Finally, **include** the custom theme in your application: - + The sample uses the [Fluent Light](/themes/sass/schemas#predefined-schemas) schema. @@ -259,7 +259,7 @@ class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/rating.mdx b/docs/angular/src/content/en/components/rating.mdx index 83e1424c87..aba5baa1eb 100644 --- a/docs/angular/src/content/en/components/rating.mdx +++ b/docs/angular/src/content/en/components/rating.mdx @@ -79,7 +79,7 @@ import { IgcFormsModule } from 'igniteui-angular/directives'; export class AppModule { } ``` - + If you are importing `IgcFormsModule` and using either `ngModel` or `formControl`, you no longer need to include `CUSTOM_ELEMENTS_SCHEMA` as Angular will recognize the `igc-rating` tag by the custom `ControlValueAccessor` directive. diff --git a/docs/angular/src/content/en/components/ripple.mdx b/docs/angular/src/content/en/components/ripple.mdx index 1e04540d07..61b9894837 100644 --- a/docs/angular/src/content/en/components/ripple.mdx +++ b/docs/angular/src/content/en/components/ripple.mdx @@ -139,7 +139,7 @@ Notice that no matter whether you click on the parent or the child element, the - + The child element, which you want to target with the `igxRippleTarget` property, has to be relatively positioned. @@ -170,7 +170,7 @@ The next step is to pass the custom ripple theme: } ``` - + A color set using the `igxRiple` directive would take precedence over one set by a custom theme. diff --git a/docs/angular/src/content/en/components/select.mdx b/docs/angular/src/content/en/components/select.mdx index 1ba145ab8e..a64fb7fd3d 100644 --- a/docs/angular/src/content/en/components/select.mdx +++ b/docs/angular/src/content/en/components/select.mdx @@ -144,7 +144,7 @@ The Select component supports the following directives applicable to the [Input - + If no is specified for the Select component and there is no selection made, the `igxLabel` will transition and appear where you would expect the placeholder to be. @@ -280,7 +280,7 @@ You can customize the default toggle button, using the `igxSelectToggleIcon` dir - You can navigate to a specific item by rapidly typing the first few characters of the item you wish to go to. - Select an item using the `Enter` or `Space` keys - + `igx-select` supports only _single_ selection of items. @@ -363,7 +363,7 @@ export class MyClass implements OnInit { } ``` - + If you pass in your custom settings both as an argument in the `open` function and in the template, `igx-select` will use the one provided in the `open` function. However, if you bind the settings to an internal event, such as `opening` or `opened` then `igx-select` will use the settings that are provided in the template. @@ -456,7 +456,7 @@ You can find the full list of properties in the [select-theme]({environment:sass ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/simple-combo.mdx b/docs/angular/src/content/en/components/simple-combo.mdx index d07fb50fc3..75643f9bb0 100644 --- a/docs/angular/src/content/en/components/simple-combo.mdx +++ b/docs/angular/src/content/en/components/simple-combo.mdx @@ -114,7 +114,7 @@ In our case, we want the simple combobox to display the `name` of each city and ``` - + When the data source is comprised of a simple type (e.g. `string[]`, `number[]`), **do not** specify a `valueKey` and `displayKey`. @@ -209,7 +209,7 @@ When the simple combobox is closed and focused: - `Tab` will move the focus to the next focusable element outside the combobox. - + Any other key stroke will be handled by the input. @@ -369,7 +369,7 @@ The last step is to include the component's theme. } ``` - + The component uses the [`IgxOverlay`](/overlay) service to hold and display the simple combobox items list container. To properly scope your styles you might have to use an . For more details check the [`IgxOverlay Styling Guide`](/overlay-styling). Also is necessary to use `::ng-deep` when we are styling the components. [!Note] The default `type` of the `IgxSimpleCombo` is `box` unlike the [`IgxSelect`](/select) where it is `line`. @@ -388,7 +388,7 @@ The default `type` of the `IgxSimpleCombo` is `box` unlike the [`IgxSelect`](/se - When the simple combobox is bound via `ngModel` and is marked as `required`, `null`, `undefined` and `''` values cannot be selected. - When the simple combobox is bound to a remote service and there is a predefined selection, its input will remain blank until the requested data is loaded. - + The simple combobox uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for the simple combobox. For more details see [igxForOf Known Issues](/for-of#known-limitations) section. diff --git a/docs/angular/src/content/en/components/slider/slider.mdx b/docs/angular/src/content/en/components/slider/slider.mdx index 7771e78dea..124ac0a2eb 100644 --- a/docs/angular/src/content/en/components/slider/slider.mdx +++ b/docs/angular/src/content/en/components/slider/slider.mdx @@ -144,7 +144,7 @@ We should now see two-way data binding between our two components. First, specify the slider type by setting the input to true. Next, define the minimum and maximum values using and . - + Continuous slider doesn't have step indicators over the track and visible thumb labels during interaction. @@ -226,7 +226,7 @@ export class SampleComponent { - + When using a slider of type RANGE, binding to `ngModel` will work only in the direction of updating the model from the slider. In order to use two-way binding for both values, you can take advantage of the `lowerValue` and `upperValue` bindings. @@ -252,13 +252,13 @@ This can be done by setting + Your array of primitive values should contains at least two values, otherwise `labelsView` won't be enabled. Once we have the definition that corresponds to the preceding rule, we are ready to give it to the `labels` **input** property, which would handle our data by spreading it equally over the `track`. Now, label values represent every primitive value we've defined in our collection. They could be accessed at any time through the API by requesting either or . - + Please take into account the fact that when is enabled, your control over the , and inputs will be taken. @@ -435,7 +435,7 @@ Lastly, we will see how we can provide a custom template for the **tick labels** Applying to the `ng-template` assigns the template over all **tick labels**. - + The context executes per each tick. @@ -717,7 +717,7 @@ class="!light-slider ![--thumb-color:#7B9E89]" ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/snackbar.mdx b/docs/angular/src/content/en/components/snackbar.mdx index 89f669f146..6b642da49b 100644 --- a/docs/angular/src/content/en/components/snackbar.mdx +++ b/docs/angular/src/content/en/components/snackbar.mdx @@ -332,7 +332,7 @@ $dark-snackbar: snackbar-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them. @@ -380,7 +380,7 @@ You can find the full list of properties in the [snackbar-theme]({environment:sa ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/splitter.mdx b/docs/angular/src/content/en/components/splitter.mdx index b0bdf3e3e0..5e825a8b6f 100644 --- a/docs/angular/src/content/en/components/splitter.mdx +++ b/docs/angular/src/content/en/components/splitter.mdx @@ -303,7 +303,7 @@ You can find the full list of properties in the [splitter-theme]({environment:sa ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. 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 c4d4185687..18098c24a4 100644 --- a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -82,7 +82,7 @@ There are over 35 chart types supported by the Spreadsheet ChartAdapters includi ## Dependencies - + In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a `Workbook`. diff --git a/docs/angular/src/content/en/components/spreadsheet-overview.mdx b/docs/angular/src/content/en/components/spreadsheet-overview.mdx index 7b55365afe..2652e48903 100644 --- a/docs/angular/src/content/en/components/spreadsheet-overview.mdx +++ b/docs/angular/src/content/en/components/spreadsheet-overview.mdx @@ -112,7 +112,7 @@ Now that the Angular spreadsheet module is imported, next is the basic configura - + In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a `Workbook`. diff --git a/docs/angular/src/content/en/components/stepper.mdx b/docs/angular/src/content/en/components/stepper.mdx index 5f5d35ef66..18d3607cc5 100644 --- a/docs/angular/src/content/en/components/stepper.mdx +++ b/docs/angular/src/content/en/components/stepper.mdx @@ -206,7 +206,7 @@ When the property is s If the current non-optional step is not valid you cannot go forward to the next step until you validate the current one. - + Optional steps validity is not taken into account in order to move forward. @@ -225,7 +225,7 @@ The following example demonstrates how to configure a linear stepper: - – activates the previous non-disabled step. - – resets the stepper to its initial state. - + The reset method would not clear the step`s content. This should be done manually. @@ -255,7 +255,7 @@ When the `igx-stepper` is horizontally orientated, the title position default va When the orientation is set to vertical layout the title position by default is `end`. - + property is applicable **only** when the stepper property is set to `full`. @@ -271,7 +271,7 @@ If you want to display only titles for the steps, set the + This container could be re-templated as per your requirement without any size restrictions. For example, you could add an indicator with size greater than 24 pixels inside it. @@ -300,7 +300,7 @@ The also allows you to customize the rendered indicat ``` - + This templates would be applied for all steps with the relevant state. @@ -333,7 +333,7 @@ The navigation is compliant with [W3 accessibility st - End - moves the focus to the header of the LAST enabled step in the `igx-stepper` - Enter / Space - activates the currently focused step - + By design when the user presses the Tab key over the step header the focus will move to the step content container. In case the container should be skipped the developer should set the content container `[tabIndex]="-1"`. @@ -488,7 +488,7 @@ You can find the full list of properties in the [stepper-theme]({environment:sas ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/style-guide.mdx b/docs/angular/src/content/en/components/style-guide.mdx index 7ee692b88f..ee34c95f6f 100644 --- a/docs/angular/src/content/en/components/style-guide.mdx +++ b/docs/angular/src/content/en/components/style-guide.mdx @@ -166,11 +166,11 @@ This is some Note Text that spreads across two lines - + Singe line NOTE. - + Don't forget to screw on your hat! diff --git a/docs/angular/src/content/en/components/switch.mdx b/docs/angular/src/content/en/components/switch.mdx index af29a00d21..5cf14cb934 100644 --- a/docs/angular/src/content/en/components/switch.mdx +++ b/docs/angular/src/content/en/components/switch.mdx @@ -433,7 +433,7 @@ You can find the full list of properties in the [IgxSwitch Theme]({environment:s ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/tabbar.mdx b/docs/angular/src/content/en/components/tabbar.mdx index e54a379b01..802cb29b0f 100644 --- a/docs/angular/src/content/en/components/tabbar.mdx +++ b/docs/angular/src/content/en/components/tabbar.mdx @@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of content panels displayed in a single view. The navigation through the panels is accomplished with the tab buttons located at bottom of your application. - + `igx-tab-bar` selector is deprecated. You could use instead. `IgxTabBarComponent` class is renamed to . `IgxTabBarModule` is renamed to `IgxBottomNavModule`. @@ -101,7 +101,7 @@ Now that you have the Ignite UI for Angular Bottom Navigation module or directiv Our component's template includes the Bottom Navigation and three items. Each item wraps an `igx-bottom-nav-header` and an `igx-bottom-nav-content` component which represent respectively the header and the container of the data. Headers usually consist of an icon and an optional text label. The Bottom Navigation control is compatible with the Material Design [**Icons**](https://material.io/icons/) so to adopt them in your application simply add the Material+Icons import in your 'styles.css' file in the main application folder. - + If you haven't used the `igx-icon` in your application so far, please make sure to import the `IgxIconModule` in the **app.module.ts** before proceeding. @@ -460,13 +460,13 @@ $dark-bottom-nav: bottom-nav-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them. If we take a look at the [`bottom-nav-theme`]({environment:sassApiUrl}/themes#function-bottom-nav-theme), we will notice that there are even more parameters available to us in order to style our bottom navigation component! - + In order to style any additional components that are used as part of an item's content, an additional theme should be created that is specific to the respective component. @@ -514,7 +514,7 @@ You can find the full list of properties in the [IgxBottomNav Theme]({environmen ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/tabs.mdx b/docs/angular/src/content/en/components/tabs.mdx index b1e4ca180d..24677c7e2b 100644 --- a/docs/angular/src/content/en/components/tabs.mdx +++ b/docs/angular/src/content/en/components/tabs.mdx @@ -170,7 +170,7 @@ Sample below demonstrates how tabs get aligned when switching between `tabAlignm Let's modify the tabs and make them more appealing by including icons using the `igxTabHeaderIcon` directive. The `igx-tabs` component is compatible with the Material Design [**Icons**](https://material.io/icons/) so it will be very easy to adopt them in your application. - + If you haven't used the `igx-icon` in your application so far, please make sure to import the `IgxIconModule` in the **app.module.ts** before proceeding. @@ -366,7 +366,7 @@ The above code creates an `igx-tabs` component with three tab items. Each tab it - + Please note that the routerLink directive is set to the `igx-tab-header`, not directly to the `igx-tab-item`. @@ -721,13 +721,13 @@ $dark-tabs: tabs-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them. If we take a look at the [`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme), we will notice that there are even more properties available to us in order to style our tabs. - + In order to style any component used as part of a tab content, additional themes should be created specific to the respective component. @@ -775,7 +775,7 @@ You can find the full list of properties in the [IgxTabs Theme]({environment:sas ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/texthighlight.mdx b/docs/angular/src/content/en/components/texthighlight.mdx index 69bdc87fa7..e7199e7a95 100644 --- a/docs/angular/src/content/en/components/texthighlight.mdx +++ b/docs/angular/src/content/en/components/texthighlight.mdx @@ -386,7 +386,7 @@ The last step is to **include** the newly created theme. } ``` - + If the component is using an [`Emulated`](/themes/sass/component-themes/#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles. diff --git a/docs/angular/src/content/en/components/themes.mdx b/docs/angular/src/content/en/components/themes.mdx index bc0bb6a805..93d8c88cb6 100644 --- a/docs/angular/src/content/en/components/themes.mdx +++ b/docs/angular/src/content/en/components/themes.mdx @@ -29,7 +29,7 @@ The second concept is the one of themes. Palettes, wouldn't do much good if they The last concept revolves around typography. Although we have a default typeface choice, we really want to give you the power to style your application in every single way. Typography is such an important part of that. We provide a method for changing the font family, the sizes and weights for headings, subheadings and paragraph texts in your app. - + Theming **requires** [**Sass**](https://github.com/sass/node-sass). @@ -110,7 +110,7 @@ If you've included the _"igniteui-angular.css"_ file in your application project Let's start from our very first example on this page. This time, though, we're going to be including two mixins `core` and `theme`; For now `core` doesn't accept any arguments. `theme`, however, does accept a few - `$palette`, `$schema`, `$exclude`, `$roundness`, `$elevation`, `$elevations`. For now, we'll only talk about the `$palette` argument. - + Including `core` before `theme` is essential. The `core` mixin provides all base definitions needed for `theme` to work. @@ -144,7 +144,7 @@ In its current state, the defining custom typography is limited to changing the To customize the typography use the `typography` mixin. It takes exactly one argument - `config`. - + Including `typography` after `core` is essential. This is subject to change in future releases. diff --git a/docs/angular/src/content/en/components/themes/index.mdx b/docs/angular/src/content/en/components/themes/index.mdx index 2ca27d85f2..c894c1d230 100644 --- a/docs/angular/src/content/en/components/themes/index.mdx +++ b/docs/angular/src/content/en/components/themes/index.mdx @@ -10,7 +10,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' Ignite UI for Angular allows you to modify the styles of all component themes using CSS variables. If you really wanted to dig deep, we provide a powerful Sass theming engine that allows you to create global component themes tailored to your specific design language that work in all modern browsers. - + This document describes the theming system in Ignite UI for Angular from version 12 forward. Starting with version 12 **CSS variables are the recommended way to modify the global and component themes**. You can still use the Sass theming library as you would've prior to version 12. @@ -33,7 +33,7 @@ All themes have light and dark variants as well as support for left-to-right(LTR ] ``` - + If you've installed the Ignite UI for Angular package using `ng add igniteui-angular`, you will have noticed that we've already added `igniteui-angular.css` to the styles array. diff --git a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx index aa613f5614..3109bb512d 100644 --- a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx +++ b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx @@ -202,7 +202,7 @@ $custom-mat-light-theme: mat.define-light-theme(( )); ``` - + Visit our [`palettes with Sass`](../sass/palettes/) section to discover more about the palettes provided by Ignite UI for Angular and learn how to create a new one. diff --git a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx index c0daad1ce2..26a4166679 100644 --- a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx +++ b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx @@ -174,7 +174,7 @@ $dark-primary: color($custom-dark-palette, "primary"); $dark-secondary: color($custom-dark-palette, "secondary"); ``` - + Visit our [`palettes with Sass`](/themes/sass/palettes) section to discover more about the palettes provided by Ignite UI for Angular and learn how to create a new one. diff --git a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx index 068cfd2be8..e9dccd9ab0 100644 --- a/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx +++ b/docs/angular/src/content/en/components/themes/misc/tailwind-classes.mdx @@ -17,7 +17,7 @@ Ignite UI for Angular offers full theming customization through CSS variables an ## Overview - + This guide assumes you already have **Ignite UI for Angular** installed. If not, run: ```cmd @@ -112,7 +112,7 @@ This paragraph gets the h3 styles Each class applies all necessary font settings, spacing, and sizing according to the [Ignite UI type scale](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography). - + These custom typography utilities only work outside of `ig-typography`. If you have to set the `ig-typography` CSS class on a top-level element, these styles won't apply.
@@ -125,7 +125,7 @@ In the sample below, you’ll see a 404 page built entirely with Tailwind utilit - + This sample is fictional and fully custom, it’s not part of the Ignite UI component library. diff --git a/docs/angular/src/content/en/components/themes/palettes.mdx b/docs/angular/src/content/en/components/themes/palettes.mdx index a57c831cf8..b084c990d2 100644 --- a/docs/angular/src/content/en/components/themes/palettes.mdx +++ b/docs/angular/src/content/en/components/themes/palettes.mdx @@ -48,7 +48,7 @@ As the table above shows, the `gray` color doesn't include the `A100`, `A200`, ` On top of the aforementioned colors, we also include **Level AA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) compliant `contrast` colors for each color variant. This means that you can safely use the corresponding `contrast` color variants as foreground colors for the base color variant. - + Contrast colors are CSS relative colors and are runtime calculated, based on the corresponding shade color (primary, secondary, etc.). @@ -83,7 +83,7 @@ All primary color variants come from a single base variable: `--ig-primary-500`. The contrast colors are CSS runtime generated, based on the the provided color's luminance and the chosen contrast-level to calculate the best contrast color for it. If we change the main color variant(`500`), the contrast colors will also be updated. - + You could specify the contrast-level globally by using the `palette` mixin, or if you'd like to set it specifically in the scope of your element, you could use the `adaptive-contrast` mixin. They both accept one of the predefined values: `a`, `aa` or `aaa`. diff --git a/docs/angular/src/content/en/components/themes/sass/global-themes.mdx b/docs/angular/src/content/en/components/themes/sass/global-themes.mdx index 244057cc92..ff9581a8a0 100644 --- a/docs/angular/src/content/en/components/themes/sass/global-themes.mdx +++ b/docs/angular/src/content/en/components/themes/sass/global-themes.mdx @@ -71,7 +71,7 @@ $my-color-palette: palette( Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of some configurations, like adding enhanced accessibility(e.g. colors suitable for color blind users) and printing styles for all components. The `theme` mixin includes each individual component style (bar the ones listed as excluded) and configures the palette, schema, elevations, and roundness that is not listed in the `$exclude` list of components. - + Including `core` before `theme` is essential. The `core` mixins provide all base definitions needed for the `theme` mixin to work correctly. diff --git a/docs/angular/src/content/en/components/themes/sass/index.mdx b/docs/angular/src/content/en/components/themes/sass/index.mdx index 3ea69d9fb5..7f45f57b0e 100644 --- a/docs/angular/src/content/en/components/themes/sass/index.mdx +++ b/docs/angular/src/content/en/components/themes/sass/index.mdx @@ -23,7 +23,7 @@ Since we want to ensure specific aspects of our design system remain unscathed, We will explain every single concept in detail and the related APIs so that you can feel truly in control of our theming engine. - + Although the [**Sass**](https://sass-lang.com) theming library is powerful, most people will only need to modify a few CSS variables to customize the default theme. We encourage you to read through the CSS variables documentation first. You should only need to use Sass if you wanted to modify the produced theme on a deeper level. A good example would be when you need to create several different reusable theme variants for the same component, or to tree-shake the produced CSS to only include styles for the components you use in your app. diff --git a/docs/angular/src/content/en/components/themes/sass/typography.mdx b/docs/angular/src/content/en/components/themes/sass/typography.mdx index 58578818c9..61da060df2 100644 --- a/docs/angular/src/content/en/components/themes/sass/typography.mdx +++ b/docs/angular/src/content/en/components/themes/sass/typography.mdx @@ -24,7 +24,7 @@ In many cases you would only need to make slight modifications to the typography ## Usage - + By default we don't apply any typography styles. To use our typography in your application you have to set the `ig-typography` CSS class on a top-level element and include the `typography` mixin in your base `.scss` file. @@ -66,7 +66,7 @@ The type scale produces a map of 13 typography styles used as scale categories. $my-type-scale: type-scale(...); ``` - + You have to provide a type style for each of the 13 scale categories. A style can be generated using the `type-style` function as shown above. diff --git a/docs/angular/src/content/en/components/themes/typography.mdx b/docs/angular/src/content/en/components/themes/typography.mdx index 3ad1ea1844..ae5e6c28d6 100644 --- a/docs/angular/src/content/en/components/themes/typography.mdx +++ b/docs/angular/src/content/en/components/themes/typography.mdx @@ -42,7 +42,7 @@ Each theme defines its own type scale. This means each one of the themes we ship ## Usage > - + By default we don't apply any typography styles. To use our typography in your application you have to set the `ig-typography` CSS class on a top-level element. All of its children will then use our typography styles. diff --git a/docs/angular/src/content/en/components/time-picker.mdx b/docs/angular/src/content/en/components/time-picker.mdx index 5ae0a24c57..7dbece422b 100644 --- a/docs/angular/src/content/en/components/time-picker.mdx +++ b/docs/angular/src/content/en/components/time-picker.mdx @@ -39,7 +39,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta The next step is to import the `IgxTimePickerModule` in your **app.module.ts** file. - + The IgxTimePicker is also dependent on both the **BrowserAnimationsModule** and **optionally** the **HammerModule** for touch interactions. They need to be added to the AppModule as well. @@ -285,7 +285,7 @@ Alternatively, if the + The `IgxTimePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. @@ -305,7 +305,7 @@ The [Reactive Forms Integration](/angular-reactive-form-validation) sample demon You can specify and to restrict the user input, in which case the dropdown/dialog will display the time within that range only. In dropdown mode however, it is still possible for the user to type in an invalid time. You can handle the event in order to notify the user if that happens. - + The min/max values should be a Date object or a time-only string in the `ISO 8601` format: @@ -406,7 +406,7 @@ $my-time-picker-theme: time-picker-theme( ); ``` - + In order to style any additional components that are used as part of the time picker window's content (such as the [`IgxButton`](/button)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). @@ -430,7 +430,7 @@ export class TimepickerStylingComponent { Now, the time picker's items are properly rendered **inside** of our component's host, which means that our custom theme will take effect: - + In order to learn more about the various options for providing themes to elements that are shown by using the [`IgxOverlayService`](/overlay), you can take a look at the [Overlay styling topic](/overlay-styling). diff --git a/docs/angular/src/content/en/components/toast.mdx b/docs/angular/src/content/en/components/toast.mdx index ae32c59383..c5fcc33dd5 100644 --- a/docs/angular/src/content/en/components/toast.mdx +++ b/docs/angular/src/content/en/components/toast.mdx @@ -226,7 +226,7 @@ $custom-toast-theme: toast-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them. @@ -271,7 +271,7 @@ You can find the full list of properties in the [IgxToast Theme]({environment:sa ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/toggle.mdx b/docs/angular/src/content/en/components/toggle.mdx index 31c1d9abc6..c9d57f0be3 100644 --- a/docs/angular/src/content/en/components/toggle.mdx +++ b/docs/angular/src/content/en/components/toggle.mdx @@ -119,7 +119,7 @@ In the next sample, we'll use a different positioning strategy so that the conte The `igxToggle` directive uses the provider. The `open`, `close` and `toggle` methods accept optional overlay settings that control how the content is displayed. If omitted, the default overlay settings are used as seen in the previous sample. - + By default, the property is set to `true`. In order to disable this functionality, the property has to be set to `false`. Additionally, the property defaults to `false`, so in order to make use of it, we have to set it to `true`. @@ -157,7 +157,7 @@ In order to avoid using the `open` and `close` methods, we can use a directive, If we would like to take advantage of this functionality, we will have to use the `IgxToggleActionDirective` from the `IgxToggleModule` and assign the `IgxToggleDirective` to it. - + The should be declared on the element we are planing to use like a trigger (toggle). @@ -175,7 +175,7 @@ After these changes the toggle should work exactly in the same way. - + By default `IgxToggleActionDirective` excludes its host element from the property. Therefore, clicking on the host element will not fire any event. Additionally, this directive will set its host element as the overlay settings . diff --git a/docs/angular/src/content/en/components/tooltip.mdx b/docs/angular/src/content/en/components/tooltip.mdx index 80de83c660..fb10f34469 100644 --- a/docs/angular/src/content/en/components/tooltip.mdx +++ b/docs/angular/src/content/en/components/tooltip.mdx @@ -298,7 +298,7 @@ In the following example, you can see how we create descriptive tooltips by usin What if we want to control the amount of time that should pass before showing and hiding the tooltip? For this purpose we can use the and the properties of the directive. Both properties are of type **number** and take time in milliseconds. - + The built-in UI interaction behavior of the works by taking and property values into account. Showing and hiding the tooltip through the API or the API of the does NOT take the and property values into account. If necessary, such logic would have to be implemented manually according to the application's specifics. @@ -308,7 +308,7 @@ By default, the - + Setting and only has effect when interacting with the , not the itself. Default event triggers for the are `pointerenter` and `pointerleave`. @@ -345,7 +345,7 @@ public overlaySettings: OverlaySettings = { }; ``` - + Any property that is set through the or will override the same property from the default settings and will have a direct impact on the tooltip. @@ -380,7 +380,7 @@ To customize the default close button, use the + Any custom content added via the `closeButtonTemplate` is rendered only when the tooltip is in sticky mode. @@ -482,7 +482,7 @@ $dark-tooltip: tooltip-theme( ); ``` - + In order to style any additional components that are used as part of the tooltip's content (such as [`IgxButton`](/button), [`IgxSwitch`](/switch), etc.), an additional theme should be created that is specific to the respective component and placed under the tooltip's scope only (so it does not affect the rest of the application). @@ -547,7 +547,7 @@ You can find the full list of properties in the [IgxTooltip Theme]({environment: ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/transaction.mdx b/docs/angular/src/content/en/components/transaction.mdx index 36b3adbfc8..47e2e1d2b3 100644 --- a/docs/angular/src/content/en/components/transaction.mdx +++ b/docs/angular/src/content/en/components/transaction.mdx @@ -14,7 +14,7 @@ The - + The data transformation from the schema above is not mandatory. You do not need to use a pipe in order to use the . diff --git a/docs/angular/src/content/en/components/tree.mdx b/docs/angular/src/content/en/components/tree.mdx index 4576bbaffb..d863d97bc1 100644 --- a/docs/angular/src/content/en/components/tree.mdx +++ b/docs/angular/src/content/en/components/tree.mdx @@ -486,7 +486,7 @@ You can find the full list of properties in the [IgxTree Theme]({environment:sas ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/en/components/treegrid/groupby.mdx b/docs/angular/src/content/en/components/treegrid/groupby.mdx index f4b8f3b7f9..176f66f742 100644 --- a/docs/angular/src/content/en/components/treegrid/groupby.mdx +++ b/docs/angular/src/content/en/components/treegrid/groupby.mdx @@ -50,7 +50,7 @@ The component's inputs are the following: - dropAreaTemplate - a template for the drop area that can be used to override the default drop area template - dropAreaMessage - a string that can be used to override the default message for the default drop area template - + In order for the sorting to work correctly you should set the `sortStrategy` property of the `IgxTreeGridComponent` to an instance of `IgxGroupedTreeGridSorting`. diff --git a/docs/angular/src/content/en/components/treegrid/tree-grid.mdx b/docs/angular/src/content/en/components/treegrid/tree-grid.mdx index 8c16041b4e..78e0fc544a 100644 --- a/docs/angular/src/content/en/components/treegrid/tree-grid.mdx +++ b/docs/angular/src/content/en/components/treegrid/tree-grid.mdx @@ -76,7 +76,7 @@ Now that you have the Ignite UI for Angular Tree Grid module or directives impor ## Using the Angular Tree Grid - + **This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**. @@ -90,7 +90,7 @@ Regardless of which option is used for building the tree grid's hierarchy (child - - Ordinary cell that contains a value. - - Tree cell that contains a value, an expand/collapse indicator and an indentation div element, which is based on the level of the cell's row. The level of a row component can be accessed through the property of its inner . - + Each row can have only one tree cell, but it can have multiple (or none) ordinary cells. @@ -268,7 +268,7 @@ And here is the final result: - + The sample will not be affected by the selected global theme from `Change Theme`. @@ -284,11 +284,11 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + This is still in experimental feature for the `igxTreeGrid`. This means that there might be some unexpected behaviors in the Tree Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. - + Enabling it can affects other parts of an Angular application that the `igxTreeGrid` is not related to. @@ -299,7 +299,7 @@ Enabling it can affects other parts of an Angular application that the `igxTreeG | Templating Tree Cells | When templating a tree cell, content that spans outside the boundaries of the cell will not be shown unless positioned in an overlay. | | Group By | Group By feature is not supported, because it is inherent to the tree grid. | - + The tree grid has a depth limit of 25 levels. Supporting more levels requires adding custom CSS classes in the application. You may see an example of such CSS class below: @@ -309,7 +309,7 @@ The tree grid has a depth limit of 25 levels. Supporting more levels requires ad } ``` - + `igxTreeGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxTreeGrid`. For more details see [igxForOf Known Issues](/for-of#known-limitations) section. diff --git a/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx index 64fcb6e6ed..959310d9db 100644 --- a/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx @@ -178,7 +178,7 @@ If remote data is used, the and methods to open and close the advanced filtering dialog programmatically. - + You can enable both the `quickFilter`/`excelStyleFilter` and the advanced filtering user interfaces in the {ComponentTitle}. Both filtering user interfaces will work independently of one another. The final filtered result in the {ComponentTitle} is the intersection between the results of the two filters. @@ -257,7 +257,7 @@ $custom-query-builder: query-builder-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -278,11 +278,11 @@ igx-advanced-filtering-dialog { } ``` - + We include the created **query-builder-theme** within `igx-advanced-filtering-dialog`, so that this custom theme will affect only the query builder nested in the advanced filtering dialog. Otherwise other query builder components in the application would be affected too. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -324,7 +324,7 @@ $custom-query-builder: query-builder-theme( - + The sample will not be affected by the selected global theme from `Change Theme`.
diff --git a/docs/angular/src/content/en/grids_templates/batch-editing.mdx b/docs/angular/src/content/en/grids_templates/batch-editing.mdx index a22b683124..1dad743492 100644 --- a/docs/angular/src/content/en/grids_templates/batch-editing.mdx +++ b/docs/angular/src/content/en/grids_templates/batch-editing.mdx @@ -50,7 +50,7 @@ The following sample demonstrates a scenario, where the {ComponentObjectRef} has
- + Transaction state consists of all the updated, added and deleted rows, and their last states. @@ -233,7 +233,7 @@ export class HierarchicalGridBatchEditingSampleComponent { - + The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, `{ComponentTitle}` would stay in edit mode. One way to do that is by calling in the respective method. @@ -242,7 +242,7 @@ The transactions API won't handle end of edit and you'd need to do it by yoursel Deleting a parent node in `{ComponentTitle}` has some peculiarities. If you are using a hierarchical data, the children will be deleted when deleting their parent. If you are using a flat data, you may set the desired behavior using the property of `{ComponentTitle}`. This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to `true`). - + Disabling property will modify `{ComponentTitle}` to create transactions on cell change and will not expose row editing overlay in the UI. diff --git a/docs/angular/src/content/en/grids_templates/cell-editing.mdx b/docs/angular/src/content/en/grids_templates/cell-editing.mdx index d2cafaadf0..d7146545b2 100644 --- a/docs/angular/src/content/en/grids_templates/cell-editing.mdx +++ b/docs/angular/src/content/en/grids_templates/cell-editing.mdx @@ -58,7 +58,7 @@ Ignite UI for Angular {ComponentTitle} component provides a great data manipulat
- + By using `igxCellEditor` with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the `focus` will remain on the `cell element`, not on the editor component that we've added - [`igxSelect`](/select), [`igxCombo`](/combo), etc. This is why we should take leverage of the `igxFocus` directive, which will move the focus directly in the in-cell component and will preserve `a fluent editing flow` of the cell/row. @@ -86,7 +86,7 @@ You can exit edit mode and **commit** the changes in one of the following ways: - on single click to another cell - when you click on another cell in the {ComponentTitle}, your changes will be submitted. - operations like paging, resize, pin or move will exit edit mode and changes will be submitted. - + The cell remains in edit mode when you scroll vertically or horizontally or click outside the {ComponentTitle}. This is valid for both cell editing and row editing. @@ -185,16 +185,16 @@ This code is used in the sample below which implements an [`IgxSelectComponent`]
- + Any changes made to the cell's in edit mode, will trigger the appropriate [editing event](editing#event-arguments-and-sequence) on exit and apply to the [transaction state](batch-editing) (if transactions are enabled). - + The cell template [`igxCell`](/grid/grid#cell-template) controls how a column's cells are shown when outside of edit mode. The cell editing template directive `igxCellEditor`, handles how a column's cells in edit mode are displayed and controls the edited cell's edit value. - + By using `igxCellEditor` with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the `focus` will remain on the `cell element`, not on the editor component that we've added - [`igxSelect`](/select), [`igxCombo`](/combo), etc. This is why we should take leverage of the `igxFocus` directive, which will move the focus directly in the in-cell component and will preserve `a fluent editing flow` of the cell/row. @@ -287,7 +287,7 @@ Main benefits of the above approach include: ## CRUD operations - + Please keep in mind that when you perform some **CRUD operation** all of the applied pipes like **filtering**, **sorting** and **grouping** will be re-applied and your view will be automatically updated. @@ -620,7 +620,7 @@ In addition to the steps above, we can also style the controls that are used for - + The sample will not be affected by the selected global theme from `Change Theme`.
diff --git a/docs/angular/src/content/en/grids_templates/cell-merging.mdx b/docs/angular/src/content/en/grids_templates/cell-merging.mdx index 82b506ed29..35552b18df 100644 --- a/docs/angular/src/content/en/grids_templates/cell-merging.mdx +++ b/docs/angular/src/content/en/grids_templates/cell-merging.mdx @@ -199,7 +199,7 @@ Due to the specific behavior of merged cells it has to be noted how exactly it t - **Row pinning**: cells merge only withing their containing area, i.e. cells of pinned rows merge only with cells of other pinned rows, while cells of unpinned rows merge only with cells of unpinned rows. - **Navigation/Activation**: when a cell is active, all merged cells in the same row become single cells, i.e. their merge sequence is broken. This also includes activation via keyboard navigation. - + If a merged cell is clicked, the closest cell from the merge sequence will become active. diff --git a/docs/angular/src/content/en/grids_templates/cell-selection.mdx b/docs/angular/src/content/en/grids_templates/cell-selection.mdx index c2465cf99f..8cc4f52fa9 100644 --- a/docs/angular/src/content/en/grids_templates/cell-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/cell-selection.mdx @@ -105,7 +105,7 @@ How to select cells: When you set the `[cellSelection]="'single'"`, this allows you to have only one selected cell in the grid at a time. Also the mode `mouse drag` will not work and instead of selecting a cell, this will make default text selection. - + When single cell is selected event is emitted, no matter if the `selection mode` is `single` or `multiple`. In multi-cell selection mode when you select a range of cells event is emitted. @@ -133,7 +133,7 @@ If you want to disable cell selection you can just set `[cellSelection]="'none'" - Ctrl + Shift + Home to select all cells from the focused cell till the first-most cell in the grid - Ctrl + Shift + End to select all cells from the focused cell till the last-most cell in the grid - + Continuous scroll is possible only within Grid's body. @@ -166,7 +166,7 @@ this.grid1.selectRange(range); ``` - + Select range is additive operation. It will not clear your previous selection. @@ -261,21 +261,21 @@ Select range is additive operation. It will not clear your previous selection. - + will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. will also return the selected cell data. will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[]. - + will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. will also return the selected cell data. will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[]. - + will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. will also return the selected cell data. will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[]. @@ -320,7 +320,7 @@ $background-color: color($color: "primary", $variant: 900); $border-yellow: #f2c43c; ``` - + If we don't want to use the `contrast-color` and `color` functions, we can always hardcode the color values. @@ -372,7 +372,7 @@ With the custom theme applied, the selected grid cells are highlighted with our - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx b/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx index 3778980867..5636d3a577 100644 --- a/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx +++ b/docs/angular/src/content/en/grids_templates/clipboard-interactions.mdx @@ -62,7 +62,7 @@ Copy behavior is working with the default interaction defined by the browser and - Both the **cut** and **copy** events are not natively supported in Internet Explorer. The exception is the **paste** event (IE 11) which is emitted but does not expose the `clipboardData` property in the event. - + In order to `copy` cells in IE 11, you can use the keyboard selection. Hold the `shift key` in order to make a multi-cell selection, press `Ctrl + C` in order to copy. @@ -82,7 +82,7 @@ We expose Apply any existing column formatters to the copied data. - The string separator to use the for formatting the data in the clipboard. Default is `/t` - + Excel can automatically detect text that is separated by tabs (tab-delimited `/t`) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs. diff --git a/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx b/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx index 243fcfb261..ec6e80bc1b 100644 --- a/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx +++ b/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx @@ -150,7 +150,7 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc ``` - + Please keep in mind that initially collapse group option takes precedence over column hidden - If you declared your column to be hidden using the property hidden and you have a group defined where the same column should be shown, the column will be shown. diff --git a/docs/angular/src/content/en/grids_templates/column-hiding.mdx b/docs/angular/src/content/en/grids_templates/column-hiding.mdx index e8005a67de..c2deb17788 100644 --- a/docs/angular/src/content/en/grids_templates/column-hiding.mdx +++ b/docs/angular/src/content/en/grids_templates/column-hiding.mdx @@ -513,7 +513,7 @@ $custom-button: flat-button-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -531,11 +531,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We include the created **flat-button-theme** within `.igx-column-actions`, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` for the components inside the column action component (buttons, checkboxes ...etc): diff --git a/docs/angular/src/content/en/grids_templates/column-moving.mdx b/docs/angular/src/content/en/grids_templates/column-moving.mdx index b826921aaa..95d2cc1c17 100644 --- a/docs/angular/src/content/en/grids_templates/column-moving.mdx +++ b/docs/angular/src/content/en/grids_templates/column-moving.mdx @@ -40,15 +40,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The {ComponentTitle} component in Ignite UI for Angular provides the **Column Moving** feature to allow columns reordering via standard drag/drop mouse or touch gestures, or by using the Column Moving API. Column moving works both with pinned and unpinned columns and with Multi-column Headers. Moving a column into the pinned area pins the column and vice versa, moving a column outside of the pinned area unpins the column. - + Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns. - + If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the **draggable** attribute set to **false**! This allows to attach handlers for any event emitted by the element, otherwise the event is consumed by the `igxDrag` directive. - + If the pinned area exceeds its maximum allowed width (80% of the total {ComponentTitle} width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area. @@ -215,7 +215,7 @@ $dark-grid-column-moving-theme: grid-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -248,7 +248,7 @@ The last step is to **include** the component mixins with its respective theme: - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/column-pinning.mdx b/docs/angular/src/content/en/grids_templates/column-pinning.mdx index e2d445449d..c7430598af 100644 --- a/docs/angular/src/content/en/grids_templates/column-pinning.mdx +++ b/docs/angular/src/content/en/grids_templates/column-pinning.mdx @@ -404,7 +404,7 @@ $custom-theme: grid-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -422,7 +422,7 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/column-resizing.mdx b/docs/angular/src/content/en/grids_templates/column-resizing.mdx index 5444fa95e6..40f993d746 100644 --- a/docs/angular/src/content/en/grids_templates/column-resizing.mdx +++ b/docs/angular/src/content/en/grids_templates/column-resizing.mdx @@ -177,7 +177,7 @@ This means that the following configuration is possible: - + There is a slight difference in the way resizing works for columns set in pixels and percentages. @@ -326,7 +326,7 @@ $custom-grid-theme: grid-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -357,7 +357,7 @@ The last step is to **include** the component mixins with its respective theme: - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/column-selection.mdx b/docs/angular/src/content/en/grids_templates/column-selection.mdx index e7162e07a2..cb7d50c9e5 100644 --- a/docs/angular/src/content/en/grids_templates/column-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/column-selection.mdx @@ -70,7 +70,7 @@ The column selection feature can be enabled through the . With that being said, in order to select a column, we just need to click on one, which will mark it as . If the column is not selectable, no selection style will be applied on the header, while hovering. - + [`Multi-column Headers`](multi-column-headers) don't reflect on the input. The is , if at least one of its children has the selection behavior enabled. In addition, the component is marked as if all of its `selectable` descendants are . @@ -93,7 +93,7 @@ The default selection mode is `none`. If set to `single` or `multiple` all of th ## Keyboard combinations - + The keyboard combinations are available only when the grid input is set to `multiple`. @@ -106,7 +106,7 @@ There are two scenarios for keyboard navigation of the **Column Selection** feat The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as by setting the corresponding **setter**. - + The above statement also applies to the , except that when the property is changed it changes the state of its descendants. @@ -123,7 +123,7 @@ Before diving into the styling options, the core module and all component mixins // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` - + Please note that [`row selection`](/{igPath}/row-selection) and [`column selection`](/{igPath}/column-selection) can't be manipulated independently. They depend on the same `variables`. @@ -182,7 +182,7 @@ The last step is to include the custom `igx-grid` theme. - + The sample will not be affected by the selected global theme from `Change Theme`.
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 3fe8fc69c0..554735cee6 100644 --- a/docs/angular/src/content/en/grids_templates/column-types.mdx +++ b/docs/angular/src/content/en/grids_templates/column-types.mdx @@ -79,7 +79,9 @@ The appearance of the date portions will be set (e.g. day, month, year) based on - **format** - The default value for formatting the date is 'mediumDate'. Other available options are 'short', 'long', 'shortDate', 'fullDate', 'longTime', 'fullTime' and etc. This is a full list of all available [pre-defined Angular format options](https://angular.io/api/common/DatePipe#pre-defined-format-options) (legacy). - **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: - > Note: Since 20.2.x, if you have the Angular localization disabled, the list of available format options can be found in our new [localization topic](../general/localization#formatting). + +Since 20.2.x, if you have the Angular localization disabled, the list of available format options can be found in our new [localization topic](../general/localization#formatting). + ```ts public formatDateOptions = { @@ -248,7 +250,7 @@ public formatPercentOptions = this.options; ``` - + When using up/down arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) diff --git a/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx b/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx index b2673d7b8d..1f87496c70 100644 --- a/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx +++ b/docs/angular/src/content/en/grids_templates/conditional-cell-styling.mdx @@ -141,7 +141,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. } ``` - + Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. @@ -436,7 +436,7 @@ public grammyClasses = { - + Use **`::ng-deep`** or **`ViewEncapsulation.None`** to force the custom styles down through the current component and its children. diff --git a/docs/angular/src/content/en/grids_templates/display-density.mdx b/docs/angular/src/content/en/grids_templates/display-density.mdx index 0a13321284..d636a506f8 100644 --- a/docs/angular/src/content/en/grids_templates/display-density.mdx +++ b/docs/angular/src/content/en/grids_templates/display-density.mdx @@ -76,7 +76,7 @@ And now let's see in details how each option reflects on the {ComponentTitle} co - **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column is `64px`; - **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column is `56px`; - + Please keep in mind that currently you **can not** override any of the sizes. 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 1438323ca2..daefe2cd0b 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 @@ -391,7 +391,7 @@ In order to do that you can use the + The formatted values filtering strategy won't work correctly if you have more than one column bound to the same field from your data and one of the columns has a formatter. @@ -570,7 +570,7 @@ $custom-list: list-theme( ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -597,11 +597,11 @@ The last step is to **include** each component’s custom theme. We will also se } ``` - + We scope most of the components' mixins within `.igx-excel-filter` and `.igx-excel-filter__secondary`, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -646,7 +646,7 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc - + The sample will not be affected by the selected global theme from `Change Theme`.
diff --git a/docs/angular/src/content/en/grids_templates/export-excel.mdx b/docs/angular/src/content/en/grids_templates/export-excel.mdx index cf7091b6a7..5ec0e4bca8 100644 --- a/docs/angular/src/content/en/grids_templates/export-excel.mdx +++ b/docs/angular/src/content/en/grids_templates/export-excel.mdx @@ -116,7 +116,7 @@ private pdfExportService = inject(IgxPdfExporterService); ``` - + In v12.2.1 and later, `IgxExcelExporterService` is provided in root and does not need to be registered in the `providers` array. The PDF exporter was introduced in later versions and is available as an injectable service without any additional configuration. @@ -169,7 +169,7 @@ Once wired up, pressing the respective buttons downloads files named `ExportedDa - + Expand/collapse indicators in Excel are shown based on the hierarchy of the last dimension of the Pivot Grid. @@ -212,13 +212,13 @@ Example: Dashboards often rely on [multi-column headers](multi-column-headers) to add context—think of a "Q1/Q2/Q3" band above individual month columns. The exporter mirrors this structure so spreadsheet users immediately understand the grouping logic. If your downstream workflow prefers simple column names, flip the flag to `true` and the output will include only the leaf headers. - + The exported {ComponentTitle} will not be formatted as a table, since Excel tables do not support multiple row headers. - + The exported expansion state of the multi-column headers in the row islands will always be in its initial state. diff --git a/docs/angular/src/content/en/grids_templates/filtering.mdx b/docs/angular/src/content/en/grids_templates/filtering.mdx index 90395e4d3a..a206cca63b 100644 --- a/docs/angular/src/content/en/grids_templates/filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/filtering.mdx @@ -117,7 +117,7 @@ To enable the [Advanced filtering](advanced-filtering) however, you need to set ``` - + You can enable both the `quickFilter`/`excelStyleFilter` and the advanced filtering user interfaces in the {ComponentTitle}. Both filtering user interfaces will work independently of one another. The final filtered result in the {ComponentTitle} is the intersection between the results of the two filters. @@ -166,7 +166,7 @@ Filtering feature is enabled for the {ComponentTitle} component by setting the < - + If values of type `string` are used by a column of dataType `Date`, the {ComponentTitle} won't parse them to `Date` objects and using filtering conditions won't be possible. If you want to use `string` objects, additional logic should be implemented on the application level, in order to parse the values to `Date` objects. @@ -205,7 +205,7 @@ this.{ComponentObjectRef}.filter('ProductName', 'myproduct', IgxStringFilteringO The only required parameters are the column field key and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions. - + The filtering operation **DOES NOT** change the underlying data source of the {ComponentTitle}. @@ -606,7 +606,7 @@ $dark-button: flat-button-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -629,11 +629,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We include the created **flat-button-theme** and **input-group-theme** within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -671,13 +671,13 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc - + The sample will not be affected by the selected global theme from `Change Theme`. ## Known Limitations - + Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox [issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665). 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 38b4d3a3de..46b6503f3e 100644 --- a/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx +++ b/docs/angular/src/content/en/grids_templates/keyboard-navigation.mdx @@ -48,12 +48,12 @@ Currently, the {ComponentName} introduces the following tab stops: - **Column summaries** (if enabled); - **{ComponentName} paginator** (if enabled); - + Due to this change, navigating between the cells with tab and Shift + Tab is no longer supported in the {ComponentName}. Pressing the Tab key now goes through the tab stops in the following order: **GroupBy** / **Toolbar** -> **Headers** -> **Body** -> **Summaries** -> **Footer / Paginator**. - + Exposing any **focusable** element into the **{ComponentName}** body via template may introduce **side effects** in the keyboard navigation, since the default browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately. @@ -211,7 +211,7 @@ Overriding the default behavior for a certain key or keys combination is one of - + Both and are availabe for the current level and cannot access cells from upper or lower level. @@ -289,7 +289,7 @@ Based on the + Please refer to the sample code for full implementation details. @@ -318,7 +318,9 @@ Use the demo below to try out the custom scenarios that we just implemented: (obj) => { obj.target.nativeElement.focus(); }); ``` -> Note: Please refer to the sample code for full implementation details. + +Please refer to the sample code for full implementation details. + Use the demo below to try out the custom scenarios that we just implemented: @@ -345,7 +347,9 @@ Use the demo below to try out the custom scenarios that we just implemented: (obj) => { obj.target.nativeElement.focus(); }); ``` -> Note: Please refer to the sample code for full implementation details. + +Please refer to the sample code for full implementation details. + Use the demo below to try out the custom scenarios that we just implemented: diff --git a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx index 24fb14bbcb..34c6aff958 100644 --- a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx +++ b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx @@ -245,7 +245,7 @@ If you want to re-use a single template for several column groups, you could set ... ``` - + If a column header is retemplated and the grid moving is enabled, you have to set the **draggable** attribute of corresponding column to **false** on the templated elements, so that you can handle any of the events that are applied! @@ -296,7 +296,7 @@ $custom-theme: grid-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -330,7 +330,7 @@ The last step is to **include** the component mixins: - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx index 60795c9b55..1b1d97bc52 100644 --- a/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx +++ b/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx @@ -53,7 +53,7 @@ The result of the above configuration can be seen on the screenshot below: Multi-row Layout Example - + and properties must be set for each `igx-column` into `igx-column-layout`. The `igxColumnLayout` component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies. @@ -87,11 +87,11 @@ IgxGridComponent with Multi-Row Layouts provides build-in keyboard navigation. - Ctrl + Arrow Up or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row. - Ctrl + Home or Ctrl + End - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell. - + Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows. - + Selection and multi cell selection are working on layout, meaning that when a cell is active, its layout will be selected. Also all features of multiple selection like drag selection are applicable and will work per layout not per cell. @@ -158,7 +158,7 @@ $custom-theme: grid-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -180,7 +180,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/paging.mdx b/docs/angular/src/content/en/grids_templates/paging.mdx index ef88a5d674..837c7b578e 100644 --- a/docs/angular/src/content/en/grids_templates/paging.mdx +++ b/docs/angular/src/content/en/grids_templates/paging.mdx @@ -225,7 +225,7 @@ $dark-button: flat-icon-button-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -241,11 +241,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We include the created **icon-button-theme** within `.igx-paginator__pager`, so that only the paginator buttons would be styled. Otherwise other icon buttons in the grid would be affected too. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` in order to style the components which are inside the paging container, like the button: diff --git a/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx index caac0f7839..12c2893daf 100644 --- a/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx +++ b/docs/angular/src/content/en/grids_templates/remote-data-operations.mdx @@ -106,7 +106,7 @@ public processData(reset) { 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. @@ -217,7 +217,7 @@ public noopFilterStrategy = NoopFilteringStrategy.instance(); public noopSortStrategy = NoopSortingStrategy.instance(); ``` - + When remote data is requested, the filtering operation is case-sensitive. @@ -280,7 +280,7 @@ public processData() { The remote filtering will have to be performed over the flat collection directly. We will also have to include all the parents for any record that matches the filtering condition regardless of whether or not the parents match the filtering (we do this to keep the hierarchy intact). The result can be seen below: - + When remote data is requested, the filtering operation is case-sensitive. @@ -309,7 +309,7 @@ The list items inside the Excel Style Filtering dialog represent the unique valu The developer can manually generate the necessary unique column values based on the information, that is provided by the **column** and the **filteringExpressionsTree** arguments and then invoke the **done** callback. - + When the input is provided, the default unique values generating process in the excel style filtering will not be used. @@ -745,7 +745,7 @@ public paginate(page: number) { - + In order the Remote Paging to be configured properly a `GridPagingMode.Remote` should be set: diff --git a/docs/angular/src/content/en/grids_templates/row-actions.mdx b/docs/angular/src/content/en/grids_templates/row-actions.mdx index ed2e45e62e..8684ddc2f0 100644 --- a/docs/angular/src/content/en/grids_templates/row-actions.mdx +++ b/docs/angular/src/content/en/grids_templates/row-actions.mdx @@ -99,7 +99,7 @@ They are added inside the `` and this is all needed to have an - + When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. @@ -135,7 +135,7 @@ These components expose templates giving flexibility for customization. For inst - + The predefined actions inherit [`IgxGridActionsBaseDirective`]({environment:infragisticsBaseUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. 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 cd62a97adc..f598b1d4d4 100644 --- a/docs/angular/src/content/en/grids_templates/row-adding.mdx +++ b/docs/angular/src/content/en/grids_templates/row-adding.mdx @@ -162,23 +162,23 @@ Then define a {ComponentTitle} with bound data source and + Setting primary key is mandatory for row adding operations. - + Every column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the column's input to `false`. - + The IgxGridEditingActions 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 IgxGridEditingActions 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. @@ -294,7 +294,7 @@ If you want the buttons to be part of the keyboard navigation, then each on of t ``` - + Using `igxRowEditActions` directive will change edit actions for both editing and adding overlay buttons. diff --git a/docs/angular/src/content/en/grids_templates/row-drag.mdx b/docs/angular/src/content/en/grids_templates/row-drag.mdx index 885b588f89..1e3c68e8ac 100644 --- a/docs/angular/src/content/en/grids_templates/row-drag.mdx +++ b/docs/angular/src/content/en/grids_templates/row-drag.mdx @@ -241,7 +241,7 @@ We define a reference to each of our grids via the `ViewChild` decorator and the - remove the dragged row from the `sourceGrid` - + When using row data from the event arguments (`args.dragData.data`) or any other row property, note that the entire row is passed in the arguments as a reference, which means that you must clone the data you need, if you want to distinguish it from the one in the source grid. @@ -400,7 +400,7 @@ Try to drag moons from the grid and drop them to their corresponding planets. Ro - + The classes applied to the row drag ghost, used in the demo above, are using ::ng-deep modifier, because row drag is an internal grid feature and cannot be accessed on application level, due to the CSS encapsulation. @@ -441,7 +441,7 @@ Since all of the actions will be happening _inside_ of the grid's body, that's w - + Make sure that there is a `primaryKey` specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered @@ -732,7 +732,7 @@ In the demo in the next section you see how you can display an indicator of wher In order to track the position of the cursor, we bind to the `dragMove` event of the when we start dragging a row. - + Make sure that there is a `primaryKey` specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered diff --git a/docs/angular/src/content/en/grids_templates/row-editing.mdx b/docs/angular/src/content/en/grids_templates/row-editing.mdx index 86ed8eb1c3..917ad8caa5 100644 --- a/docs/angular/src/content/en/grids_templates/row-editing.mdx +++ b/docs/angular/src/content/en/grids_templates/row-editing.mdx @@ -52,7 +52,7 @@ The following sample demonstrates how to enable row editing in the {ComponentTit
- + When a row is in edit mode, then clicking on a cell on another row will act like the Done button is pressed - submit all the changes of the previous row. If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode. @@ -147,7 +147,7 @@ Then define a {ComponentTitle} with bound data source and + Setting primary key is mandatory for row editing operations. @@ -240,7 +240,7 @@ export class HGridRowEditingSampleComponent implements OnInit { - + The {ComponentTitle} uses internally a provider that holds pending cell changes, until row state submitted or cancelled. @@ -365,7 +365,7 @@ All we have to do now is apply the theme with a Sass `@include` statement. We pa Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope the banner theme to the style file of the specific component it's applied to. - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid Row Editing Overlay. @@ -443,7 +443,7 @@ After styling the banner and buttons, we also define a custom style for [the cel - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/row-pinning.mdx b/docs/angular/src/content/en/grids_templates/row-pinning.mdx index a41fe4728c..88a3817485 100644 --- a/docs/angular/src/content/en/grids_templates/row-pinning.mdx +++ b/docs/angular/src/content/en/grids_templates/row-pinning.mdx @@ -467,7 +467,7 @@ The last step is to pass the custom grid theme: - + The sample will not be affected by the selected global theme from `Change Theme`. 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 b5fd362e45..771799cfc8 100644 --- a/docs/angular/src/content/en/grids_templates/row-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/row-selection.mdx @@ -428,7 +428,7 @@ In the above example we are using an `igx-checkbox` and we bind `rowContext.sele - + The `rowContext.select()` and `rowContext.deselect()` methods are exposed in the template context of an `{ComponentSelector}`. They make it easier to toggle the current row, especially in a child grid, when you implement a click handler that overrides the base functionality. @@ -505,7 +505,7 @@ Each hierarchy level in an `{ComponentSelector}` can have its own row and header - + The `headContext.selectAll()` and `headContext.deselectAll()` methods are exposed in the template context of an `{ComponentSelector}`. They make it easier to toggle all rows, especially in a child grid, when you implement a click handler that overrides the base functionality. diff --git a/docs/angular/src/content/en/grids_templates/sizing.mdx b/docs/angular/src/content/en/grids_templates/sizing.mdx index b91d2630a4..8b39a4dbc6 100644 --- a/docs/angular/src/content/en/grids_templates/sizing.mdx +++ b/docs/angular/src/content/en/grids_templates/sizing.mdx @@ -77,7 +77,7 @@ There are many different ways to size the When it comes to border and padding size for the , they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. - + If the Border box sizing is overridden by the user we cannot guarantee that the will size correctly. @@ -85,7 +85,7 @@ If the Border box sizing is overridden by the user we cannot guarantee that the If the `width` input does not have value assigned, its default value is `100%` and the tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. - + Setting manually the `width` style of the itself will result in an unexpected behavior. @@ -109,7 +109,7 @@ The grid's `width` can accepts value of `null`, which when set, renders all colu Width Null Parent Scroll - + Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization. @@ -147,7 +147,7 @@ When the `width` of the is set to percenta By default if no height is defined for the , it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. - + Setting manually the `height` style of the itself will result in an unexpected behavior. @@ -168,7 +168,7 @@ The `height` input can accept `null` value Height Null 24 Rows Parent No Scroll Height Null 24 Rows Parent Scroll - + Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization. @@ -248,7 +248,7 @@ When the grid is resized in these scenarios, the column width is also updated to Columns Default All First 100px - + Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns. @@ -404,7 +404,7 @@ While the spacing properties affect both header and body cells, you can target t } ``` - + These spacing adjustments work in conjunction with the grid's display density. The spacing multipliers are applied to the base spacing values that are already determined by whether the grid is in compact, cozy, or comfortable density mode. diff --git a/docs/angular/src/content/en/grids_templates/sorting.mdx b/docs/angular/src/content/en/grids_templates/sorting.mdx index bff7b9118e..4f164ae86d 100644 --- a/docs/angular/src/content/en/grids_templates/sorting.mdx +++ b/docs/angular/src/content/en/grids_templates/sorting.mdx @@ -39,7 +39,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; In Ignite UI for Angular {ComponentTitle}, data sorting is enabled on a per-column level, meaning that the **{ComponentSelector}** can have a mix of sortable and non-sortable columns. Performing angular sort actions enables you to change the display order of the records based on specified criteria. - + Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. @@ -135,7 +135,7 @@ this.{ComponentObjectRef}.sort([ - + Sorting is performed using our algorithm. Any or 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. @@ -164,7 +164,7 @@ this.{ComponentObjectRef}.clearSort(); - + The of the **{ComponentTitle}** is of different type compared to the of the **column**, since they work in different scopes and expose different parameters. @@ -221,7 +221,7 @@ public ngOnInit(): void { - + If values of type `string` are used by a column of `Date`, the {ComponentTitle} won't parse them to `Date` objects and using {ComponentTitle} `sorting` won't work as expected. If you want to use `string` objects, additional logic should be implemented on an application level, in order to parse the values to `Date` objects. @@ -286,7 +286,7 @@ $custom-theme: grid-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -321,7 +321,7 @@ The last step is to **include** the component mixins: - + The sample will not be affected by the selected global theme from `Change Theme`. diff --git a/docs/angular/src/content/en/grids_templates/state-persistence.mdx b/docs/angular/src/content/en/grids_templates/state-persistence.mdx index 58b9e51820..6d69bfc5ed 100644 --- a/docs/angular/src/content/en/grids_templates/state-persistence.mdx +++ b/docs/angular/src/content/en/grids_templates/state-persistence.mdx @@ -130,12 +130,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - + The directive does not take care of templates. Go to [Restoring Column](state-persistence#restoring-columns) section to see how to restore column templates. - + The `Row Selection` feature requires the property to be set, so it can be stored/restored correctly. @@ -463,7 +463,7 @@ public restoreState() { will not persist neither remote operations nor custom dimension strategies (For further information see [Grid Remote Operations](remote-data-operations) sample) by default (see [`limitations`](state-persistence#limitations)). Restoring any of these can be achieved with code on application level. The `IgxGridState` exposes an event called which can be used to additionally modify the grid state before it gets applied. Let's show how to do this: - + is only emitted when we are using with string argument. diff --git a/docs/angular/src/content/en/grids_templates/summaries.mdx b/docs/angular/src/content/en/grids_templates/summaries.mdx index b92e2f293c..c631ec5e2c 100644 --- a/docs/angular/src/content/en/grids_templates/summaries.mdx +++ b/docs/angular/src/content/en/grids_templates/summaries.mdx @@ -59,7 +59,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu
- + The summary of the column is a **function of all column values**, unless filtering is applied, then the summary of the column will be **function of the filtered result values** @@ -285,7 +285,7 @@ interface IgxSummaryResult { 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. @@ -441,7 +441,7 @@ class MySummary extends IgxNumberSummaryOperand { When a default summary is defined, the height of the summary area is calculated by design depending on the column with the largest number of summaries and the size of the grid. Use the input property to override the default value. As an argument it expects a number value, and setting a false value will trigger the default sizing behavior of the grid footer. - + Column summary template could be defined through API by setting the column property to the required TemplateRef. @@ -623,7 +623,7 @@ The available values of 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. - + The property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the {ComponentTitle}. @@ -651,7 +651,7 @@ The available values of 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. - + The property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the {ComponentTitle}. @@ -740,7 +740,7 @@ $custom-theme: grid-summary-theme( ); ``` - + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. @@ -752,7 +752,7 @@ The last step is to **include** the component custom theme: } ``` - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: diff --git a/docs/angular/src/content/en/grids_templates/toolbar.mdx b/docs/angular/src/content/en/grids_templates/toolbar.mdx index 1dc939b865..e76b13510f 100644 --- a/docs/angular/src/content/en/grids_templates/toolbar.mdx +++ b/docs/angular/src/content/en/grids_templates/toolbar.mdx @@ -108,7 +108,9 @@ The predefined `actions` and `title` UI components are added inside the ` -> Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the . This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. + +As seen in the code snippet above, the predefined `actions` UI components are wrapped in the . This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. + Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty: @@ -330,7 +332,7 @@ title, the placeholder for the component input and the height of the dropdown it - + When exporting the Hierarchical Grid or any of its child grids down the hierarchy, the exported data will be a flat collection of rows belonging to their respective grid (the child grids will not be included in the exported data). @@ -354,7 +356,7 @@ import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } export class AppModule { ... } ``` - + In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. @@ -390,7 +392,7 @@ Here is a snippet showing some of the options which can be customized through th In addition to changing the exported filename, the user can further configure the exporter options by waiting for the event and customizing the options entry in the event properties. - + By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true. @@ -470,7 +472,7 @@ The sample below has significant amount of data. While the data is being exporte ## Custom Content - + This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified template files after the migration completes. @@ -594,7 +596,7 @@ The last step is to **include** the newly created themes. } ``` - + If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the grid toolbar component: diff --git a/docs/angular/src/content/en/grids_templates/validation.mdx b/docs/angular/src/content/en/grids_templates/validation.mdx index b9c9b12835..5d1522d5fa 100644 --- a/docs/angular/src/content/en/grids_templates/validation.mdx +++ b/docs/angular/src/content/en/grids_templates/validation.mdx @@ -5,6 +5,7 @@ keywords: angular validation, ignite ui for angular, infragistics license: commercial --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular {ComponentTitle} Editing and Validation @@ -136,7 +137,9 @@ Validation will be triggered in the following scenarios: - When updating cells/rows via the API - , etc.. - When using batch editing and the / API of the transaction service. -> Note: Validation will not trigger for records that have not been edited via user input or via the editing API. Visual indicators on the cell will only shown if the related input is considered touched - either via user interaction or via the `markAsTouched` API of the validation service. + +Validation will not trigger for records that have not been edited via user input or via the editing API. Visual indicators on the cell will only shown if the related input is considered touched - either via user interaction or via the `markAsTouched` API of the validation service. + ## Angular {ComponentTitle} Validation Customization Options diff --git a/docs/angular/src/content/jp/components/accordion.mdx b/docs/angular/src/content/jp/components/accordion.mdx index c3c9367225..73489f6ae1 100644 --- a/docs/angular/src/content/jp/components/accordion.mdx +++ b/docs/angular/src/content/jp/components/accordion.mdx @@ -171,7 +171,7 @@ export class AccordionComponent { ``` - + のアニメーションを無効にするには、`animationSettings` を `null` に設定します。 @@ -200,7 +200,7 @@ export class AccordionComponent { および メソッドを使用すると、 のすべての をプログラムでそれぞれ縮小および展開できます。 - + プロパティが _true_ に設定されている場合、 メソッドを呼び出すと、最後ののみが展開されます。 diff --git a/docs/angular/src/content/jp/components/action-strip.mdx b/docs/angular/src/content/jp/components/action-strip.mdx index f2749d2b35..de0dd00588 100644 --- a/docs/angular/src/content/jp/components/action-strip.mdx +++ b/docs/angular/src/content/jp/components/action-strip.mdx @@ -130,7 +130,7 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ アクション ストリップは によって親コンテナーを変更できます。 API メソッドを使用し、`context` を引数として渡すことを推奨します。`context` はコンポーネントのインスタンスで、`ElementRef` 型のアクセス可能な `element` プロパティを持つ必要があります。 - + アクション ストリップを `element` に追加するために、`show` API メソッドは [Angular Renderer2](https://angular.io/api/core/Renderer2) を使用します。 @@ -153,13 +153,13 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ ``` - + これらのコンポーネントは を継承します。カスタム グリッド アクション コンポーネントを作成する場合、`IgxGridActionsBaseDirective` も継承する必要があります。 - + `IgxActionStripComponent` がグリッドの子コンポーネントである場合、行をホバーするとUI が自動的に表示されます。 diff --git a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx index e31f676ad8..bae4d5eb03 100644 --- a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx +++ b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx @@ -60,7 +60,7 @@ MCP サーバーは `igniteui-theming` パッケージにバンドルされて npx -y igniteui-theming igniteui-theming-mcp ``` - + `-y` フラグは、`npx` にパッケージ ダウンロード プロンプトを自動確認するように指示するため、サーバーは手動介入なしで起動できます。 @@ -89,7 +89,7 @@ VS Code の GitHub Copilot は、ワークスペース レベルの構成ファ 保存したら、GitHub Copilot チャット パネルを開き、**Agent** モードに切り替えると、Ignite UI Theming ツールが利用できるようになります。 - + VS Code での MCP サポートには、GitHub Copilot と VS Code 1.99 以降が必要です。 @@ -110,7 +110,7 @@ Cursor は、プロジェクト スコープの MCP 構成をサポートしま 新しい Cursor チャット セッションを開くと、サーバーが自動的に検出されます。 - + Cursor の **Settings → MCP** を介して、MCP サーバーをグローバルに構成することもできます。 @@ -182,7 +182,7 @@ JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポー 5. **\[OK]** をクリックし、AI Assistant を再起動します。 - + MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされて有効になっている必要があります。 @@ -234,7 +234,7 @@ globs: ["**/*.scss", "**/styles/**"] - For dark mode, only the palette changes. Component overrides stay the same. ``` - + 両方のファイルはソース管理にコミットされるため、すべてのチーム メンバーが手動設定なしで同じ AI 動作を得られます。プロジェクトに合わせてブランド カラー、デザイン システム、ファイル パスを調整してください。 @@ -264,11 +264,11 @@ MCP サーバーは、プロンプトに基づいて AI が自動的に使用す | `get_color` | パレット カラーの CSS 変数参照 (例: `var(--ig-primary-500)`) を返します。オプションのコントラストと不透明度パラメーターをサポートします。 | | `read_resource` | 4 つのカテゴリに編成された組み込み参照リソースを読み取ります: プラットフォーム構成 (6)、パレット/タイポグラフィ/エレベーション プリセット (5)、カラー ガイダンス (7)、レイアウト/間隔ドキュメント (8)。 | - + 複合コンポーネント (例: `combo`、`select`、`grid`) の場合、`get_component_design_tokens` はフラットなトークン リストではなく、関連する子テーマのリストを返します。たとえば、`grid` をクエリすると、`grid`、`grid-toolbar`、`grid-filtering`、`paginator` などの子テーマが返される場合があります。AI は、適切なスコープされたセレクターを使用して、各子テーマに対して個別の `create_component_theme` 呼び出しを生成します。 - + プロジェクトでライセンス版の `@infragistics/igniteui-angular` パッケージを使用している場合は、AI にそのことを伝えてください。そうすることで、パレット、テーマ、コンポーネント ツールで `licensed` パラメーターを設定できます。これにより、生成されるインポート パスがそれに応じて調整されます。 diff --git a/docs/angular/src/content/jp/components/autocomplete.mdx b/docs/angular/src/content/jp/components/autocomplete.mdx index 343330fc3e..813f633548 100644 --- a/docs/angular/src/content/jp/components/autocomplete.mdx +++ b/docs/angular/src/content/jp/components/autocomplete.mdx @@ -135,7 +135,7 @@ export class AutocompletePipeStartsWith implements PipeTransform { } ``` - + は、利用可能なオプションのプロバイダーとして を使用します。これはドロップダウン コンポーネントのすべての機能をオートコンプリートで使用できることを意味します。 @@ -214,7 +214,7 @@ export class AutocompleteComponent { } ``` - + デフォルトの配置ストラテジは、`AutoPositionStrategy` で、空きスペースに基づいてドロップダウンが開きます。 @@ -234,7 +234,7 @@ export class AutocompleteComponent { - ENTER - すでに選択した項目を確定し、ドロップダウンを閉じます。 - ESC - ドロップダウンを閉じます。 - + Angular Autocomplete が開いた際にリストの最初の項目が自動的に選択されます。リストがフィルターされたときも同様です。 diff --git a/docs/angular/src/content/jp/components/avatar.mdx b/docs/angular/src/content/jp/components/avatar.mdx index c620660cd1..413ac3bfcb 100644 --- a/docs/angular/src/content/jp/components/avatar.mdx +++ b/docs/angular/src/content/jp/components/avatar.mdx @@ -249,7 +249,7 @@ shape="rounded"> ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/badge.mdx b/docs/angular/src/content/jp/components/badge.mdx index 819603591a..2bb0478e51 100644 --- a/docs/angular/src/content/jp/components/badge.mdx +++ b/docs/angular/src/content/jp/components/badge.mdx @@ -68,7 +68,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; export class HomeComponent {} ``` - + このコンポーネントは Material アイコンを使用します。`index.html` に次のリンクを追加してください: `` @@ -229,7 +229,7 @@ import { IgxBadgeModule } from 'igniteui-angular/badge'; export class AppModule {} ``` - + には、バッジの外観を構成するための および 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、`Default`、`Info`、`Success`、`Warning`、または `Error` のいずれかに設定できます。その型により、特定の背景の色が適用されます。 @@ -419,7 +419,7 @@ class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]"> ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/banner.mdx b/docs/angular/src/content/jp/components/banner.mdx index db991b033e..4a42758d16 100644 --- a/docs/angular/src/content/jp/components/banner.mdx +++ b/docs/angular/src/content/jp/components/banner.mdx @@ -92,7 +92,7 @@ Banner コンポーネントを表示するには、ボタン クリックで + `IgxBannerModule` には、バナーを閉じるデフォルトの `Dismiss` バナーボタンが含まれています。 @@ -115,7 +115,7 @@ Banner コンポーネントを表示するには、ボタン クリックで + 複数の `igx-icon` 要素がバナーの直接の子孫として挿入される場合、バナーはそれらすべてを最初に配置しようとします。`igx-icon` は 1 つのみ、直接渡すことに注意してください。 @@ -213,7 +213,7 @@ export class MyBannerComponent { } ``` - + 上記が適用されるとオープニング イベントが常にキャンセルされるため、Banner が開くことはありません。 @@ -233,7 +233,7 @@ export class MyBannerComponent { ``` - + Google の [`マテリアル デザイン`](https://material.io/design/components/banners.html#anatomy) ガイドラインでは、バナーに表示するボタンは 2 つまでです。`IgxBannerComponent` は、`igx-banner-actions` タグの要素数を明示的に制限しませんが、マテリアル デザイン ガイドに従う場合は、最大 2 つの要素を使用することを強くお勧めします。 @@ -273,7 +273,7 @@ $custom-banner-theme: banner-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。 diff --git a/docs/angular/src/content/jp/components/button-group.mdx b/docs/angular/src/content/jp/components/button-group.mdx index 2e6a144773..f950298b12 100644 --- a/docs/angular/src/content/jp/components/button-group.mdx +++ b/docs/angular/src/content/jp/components/button-group.mdx @@ -460,7 +460,7 @@ class="!light-button-group ![--item-background:#7B9E89]" ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/button.mdx b/docs/angular/src/content/jp/components/button.mdx index b637230f1c..23a4a90a15 100644 --- a/docs/angular/src/content/jp/components/button.mdx +++ b/docs/angular/src/content/jp/components/button.mdx @@ -136,7 +136,7 @@ Contained ボタンを作成するには、`igxButton` プロパティの値を ``` - + 拡張 FAB テキストを適切にスタイルするには、`` または `
` タグを使用します。 @@ -656,7 +656,7 @@ contained タイプのボタンのスタイル設定に使用できるパラメ - + サンプルでは、[Bootstrap Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 @@ -715,7 +715,7 @@ contained タイプのボタンのスタイル設定に使用できるパラメ
``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/calendar.mdx b/docs/angular/src/content/jp/components/calendar.mdx index e31602dc71..aab3e177a3 100644 --- a/docs/angular/src/content/jp/components/calendar.mdx +++ b/docs/angular/src/content/jp/components/calendar.mdx @@ -39,7 +39,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte 次に、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。 - + はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。 @@ -82,7 +82,7 @@ export class HomeComponent {} Ignite UI for Angular Calendar モジュールまたはディレクティブをインポートしたので、`igx-calendar` コンポーネントの使用を開始できます。 - + が日付のローカライズおよび書式設定のために [Intl Web API](https://developer.mozilla.org/ja-JP/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) を使用します。 対象プラットフォームがその API をサポートしない場合、[適切なポリフィル](https://github.com/andyearnshaw/Intl.js/)を使用してください。 @@ -123,7 +123,7 @@ Ignite UI for Angular Calendar モジュールまたはディレクティブを - + 選択が `multi` または `range` の場合、カレンダー ヘッダーは描画されません。 @@ -329,7 +329,7 @@ Tab キーを使用してページを移動する場合、_igxCalendarComponent_ 複数の選択された日付を含む Angular Calendar では、最初の日付のみがタブ位置として導入されます。たとえば、Angular Calendar の複数選択が有効で、日付を選択した場合: **2020 年 10 月 13 日**、**2020 年 10 月 17 日**および **2020 年 10 月 21 日**のみは、タブ ナビゲーション中にアクセスできます。Angular Calendar 範囲ピッカーでは、選択した範囲の最初の日付のみがページ タブ シーケンスの一部になります。 - + _V10.2.0_ からの動作変更- 日ビューの Tab キー ナビゲーションは使用できなくなりました。日付ビューの日付間を移動するには、矢印キーを使用します。 @@ -366,7 +366,7 @@ _V10.2.0_ からの動作変更- 日ビューの Tab キー ナビゲーショ - 上矢印 キーと 下矢印 キーで年を移動します。 - Enter キーは、現在フォーカスされている年を選択してビューと閉じます。 - + >バージョン 8.2.0 に続いて、キーボード ナビゲーションは現在の月以外の日をフォーカスせず、ビューの月を変更します。 @@ -391,7 +391,7 @@ When an `year` inside the decade view is focused, use: - Arrow up and Arrow down keys to navigate through the years, - Enter key to select the currently focused year and close the view. - + Following version 8.2.0, keyboard navigation will not focus days that are outside of current month, but will rather change the month in view. @@ -415,7 +415,7 @@ Following version 8.2.0, keyboard navigation will not focus days that are outsid ビューの方向を設定して、カレンダー内の月を水平 (並べて) または垂直 (上下に) に配置できます。 これを行うには、`[orientation]` プロパティを使用して、それぞれ `horizo​​ntal` または `vertical` に設定します。 - + そのプロパティが機能していることを確認するには、少なくとも 2 か月分のビュー カレンダーが必要です。 @@ -811,7 +811,7 @@ class="!light-calendar ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/card.mdx b/docs/angular/src/content/jp/components/card.mdx index 1239092704..68786a08b6 100644 --- a/docs/angular/src/content/jp/components/card.mdx +++ b/docs/angular/src/content/jp/components/card.mdx @@ -433,7 +433,7 @@ elevated> ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/carousel.mdx b/docs/angular/src/content/jp/components/carousel.mdx index d9fae87ba7..bd21203353 100644 --- a/docs/angular/src/content/jp/components/carousel.mdx +++ b/docs/angular/src/content/jp/components/carousel.mdx @@ -41,7 +41,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte 次に、**app.module.ts** ファイルに `IgxCarouselModule` をインポートします。 - + このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。 @@ -199,7 +199,7 @@ Angular カスタム カルーセル インジケーターを追加するには ... ``` - + このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `` @@ -321,7 +321,7 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ **IgxCarousel** は、ユーザーの操作なしでスライドを自動的に変更するように簡単に構成できます。この方法では、トランジション間隔を プロパティに設定するだけで、スライドショーを作成できます。このプロパティは、スライド トランジション間の間隔 (ミリ秒)を決定します。 - + 自動的なスライド トランジションは、デフォルトでユーザーに完全に依存しているわけではありません。スライドの上にマウス ポインターを置くと、マウス ポインターがスライド領域から出るまで、現在のスライド トランジションが中断されます。これは、 プロパティを `false` に設定することで防止できます。 @@ -371,7 +371,7 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ ... ``` - + v15.1.0 以降、`onSlideChanged` の名前が `slideChanged` に変更されました。`ng update` を使用すると、新しいイベント名を使用する前にコードが自動的に移行されます。 @@ -998,7 +998,7 @@ The last step is to include the component's theme. ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx b/docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx index dd4d3172bf..1a014457cf 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx @@ -16,7 +16,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; すべての Ignite UI for Angular チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。 - + 次の例は、`CategoryChart` および `FinancialChart` コントロールに適用されます。 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx index 06ae7e8015..ec9a01f478 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx @@ -13,7 +13,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; すべての Ignite UI for Angular チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。これらの機能は、以下の例で示されています。 - + 次の例は、`CategoryChart` および `FinancialChart` コントロールに適用されます。 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx index 18e5c027ac..fa80a8be6b 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx @@ -16,7 +16,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; Angular チャートでは、データ注釈レイヤーを使用して、データ チャートにプロットされたデータに、傾斜線、垂直/水平線 (軸スライス)、垂直/水平ストリップ (特定の軸をターゲットとする)、四角形、さらには平行四辺形 (バンド) で注釈を付けることができます。データ バインディングがサポートされているため、チャートをカスタマイズするために必要な数の注釈を作成できます。また、さまざまな注釈レイヤーを組み合わせて、プロット領域内にテキストをオーバーレイし、データ内の重要なイベント、パターン、領域に注釈を付けることもできます。 - + これらの機能はデカルト軸をサポートするように設計されており、現在は半径または角度の軸には対応していません。 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx b/docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx index 97a3653803..f26c8b38a1 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx @@ -79,7 +79,7 @@ Angular データ チャートのナビゲーションは、タッチ、マウ ## コードによるチャート ナビゲーション - + チャートのコード ナビゲーションは、`DataChart` コントロールにのみ使用できます。 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-performance.mdx b/docs/angular/src/content/jp/components/charts/features/chart-performance.mdx index fcb0584710..a10bbb5088 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-performance.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-performance.mdx @@ -197,7 +197,7 @@ this.LineSeries.Resolution = 10; データ ポイント間の時間間隔に基づくスペースが重要でない場合は、DateTime をサポートする x 軸の使用はお勧めしません。代わりに、順序/カテゴリ軸を使用する必要があります。これは、データを結合する方法がより効率的であるためです。また、順序/カテゴリ軸は、時間ベースの x 軸のようにデータのソートを実行しません。 - + `CategoryChart` はすでに順序/カテゴリ軸を使用しているため、そのプロパティを変更する必要はありません。 @@ -225,7 +225,7 @@ this.LineSeries.Resolution = 10; デフォルトでは、Angular チャートは、データの範囲に基づいて `YAxisInterval` を自動的に計算します。したがって、軸のグリッド線と軸のラベルが多すぎないように、軸の間隔を特に小さい値に設定することは避けてください。また、多くの軸グリッド線または軸ラベルが必要ない場合は、`YAxisInterval` プロパティを自動的に計算された軸間隔よりも大きい値に増やすことを検討することをお勧めします。 - + チャートのパフォーマンスが低下するため、軸の副間隔を設定することはお勧めしません。 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 afa127c6b7..c80596b8de 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 @@ -25,7 +25,7 @@ Ignite UI for Angular では、ユーザー注釈機能を使用して、実行 - + この機能は X 軸と Y 軸をサポートするように設計されており、現在、ラジアル軸やアンギュラー軸はサポートされていません。 diff --git a/docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx b/docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx index 428059e750..c4070c7cab 100644 --- a/docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx +++ b/docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx @@ -101,7 +101,7 @@ ItemLegend バッジを変更することもできます。デフォルトでは これらのプロパティは、「その他」のスライス (存在する場合) にのみ影響します。他のすべてのスライスは、通常のパレットと項目ごとの色付け動作を引き続き使用します。 - + 「その他」のスライスは、チャートがそれを作成するように構成されている場合にのみレンダリングされます (たとえば、 が 0 より大きく、適切な が設定されている場合)。「その他」のスライスが存在しない場合、 と は表示上の効果はありません。 diff --git a/docs/angular/src/content/jp/components/checkbox.mdx b/docs/angular/src/content/jp/components/checkbox.mdx index fa8913c56f..43793bc0df 100644 --- a/docs/angular/src/content/jp/components/checkbox.mdx +++ b/docs/angular/src/content/jp/components/checkbox.mdx @@ -376,7 +376,7 @@ class="!light-checkbox ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/chip.mdx b/docs/angular/src/content/jp/components/chip.mdx index 7eec973db8..fc59c69092 100644 --- a/docs/angular/src/content/jp/components/chip.mdx +++ b/docs/angular/src/content/jp/components/chip.mdx @@ -151,7 +151,7 @@ public chipRemoved(event: IBaseChipEventArgs) { ``` - + チップの順序をソートするには、 を使用してイベントを処理する必要があります。 @@ -674,7 +674,7 @@ $custom-chip-theme: chip-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/circular-progress.mdx b/docs/angular/src/content/jp/components/circular-progress.mdx index 44a8c0f33f..cefb6de6a9 100644 --- a/docs/angular/src/content/jp/components/circular-progress.mdx +++ b/docs/angular/src/content/jp/components/circular-progress.mdx @@ -86,7 +86,7 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ その後、ブラウザ上でデモサンプルを確認することができます。 - + **igx-circular-bar** は、各ステップに `{currentValue: 65, previousValue: 64}` のようなオブジェクトを出力する イベントを発生します。 @@ -98,7 +98,7 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ ``` - + 円形のプログレスバーのテキストを非表示にするには、 プロパティを `false` に設定します。 diff --git a/docs/angular/src/content/jp/components/combo-features.mdx b/docs/angular/src/content/jp/components/combo-features.mdx index 1642bb6d07..9738a98950 100644 --- a/docs/angular/src/content/jp/components/combo-features.mdx +++ b/docs/angular/src/content/jp/components/combo-features.mdx @@ -106,7 +106,7 @@ export class ComboDemo implements OnInit { } ``` - + `displayKey` プロパティが省略された場合、`valueKey` エンティティが項目テキストとして使用されます。 @@ -141,7 +141,7 @@ export class CustomOverlayCombo {
- + コンボボックス コンポーネントは、デフォルトの配置ストラテジとして を使用します。 diff --git a/docs/angular/src/content/jp/components/combo-remote.mdx b/docs/angular/src/content/jp/components/combo-remote.mdx index 73894e4a14..3ec2b57be1 100644 --- a/docs/angular/src/content/jp/components/combo-remote.mdx +++ b/docs/angular/src/content/jp/components/combo-remote.mdx @@ -216,7 +216,7 @@ export class ComboRemoteComponent implements OnInit { } ``` - + 新しいデータが読み込まれた際にスクロールバーが適切なサイズになるよう `totalItemCount` プロパティを更新します。その際サービスは `@odata.count` プロパティを使用して合計サイズを返します。 @@ -224,7 +224,7 @@ export class ComboRemoteComponent implements OnInit { より複雑なデータ型 (オブジェクトなど) を扱うチャンクでロードされたリモート データにバインドされたコンボボックスを使用する場合、`valueKey` を定義する必要があります。[コンボボックス トピック](combo.md#データ値と表示プロパティ)で述べたように、`valueKey` が指定されていない場合、コンボボックスは選択を `equality (===)` で処理しようとします。選択済みとしてマークされるオブジェクトは、継続的にロードされるオブジェクトと同じではないため、選択は失敗します。 - + コンボボックスをリモートデータにバインドするときは、各項目に固有のプロパティを表す `valueKey` を指定してください。 diff --git a/docs/angular/src/content/jp/components/combo.mdx b/docs/angular/src/content/jp/components/combo.mdx index 1b882f02b9..fd657b9ff0 100644 --- a/docs/angular/src/content/jp/components/combo.mdx +++ b/docs/angular/src/content/jp/components/combo.mdx @@ -124,7 +124,7 @@ export class ComboDemo implements OnInit { ``` - + データ ソースがプリミティブの配列 (`string[]`、`number[]` など) の場合、`valueKey` と `displayKey` を**指定しないでください**。プリミティブ値は値とテキストの両方に使用されます。 @@ -292,7 +292,7 @@ public singleSelection(event: IComboSelectionChangingEventArgs) { - `下矢印`は、フォーカスを検索入力から最初のリスト項目に移動します。リストが空でカスタム値が有効な場合、新しい項目の追加ボタンに移動します。 - + その他のキー ストロークは入力によって処理されます。 @@ -426,7 +426,7 @@ $custom-checkbox-theme: checkbox-theme( } ``` - + は、[`IgxOverlay`](overlay.md) サービスを使用して、コンボボックス項目のリスト コンテナーを保持および表示します。スタイルを適切にスコープするには、 を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.md)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。 @@ -466,7 +466,7 @@ class="!light-combo ...> ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 @@ -480,7 +480,7 @@ class="!light-combo - コンボボックスが `undefined` (例: `[ undefined, ...]`) を含むプリミティブ データの配列にバインドされる場合、`undefined` はドロップダウンに表示されません。複合データ (オブジェクトなど) の配列にバインドされ、`valueKey` に使用される値が `undefined` の場合、項目はドロップダウンに表示されますが、選択はできません。 - コンボボックスがリモート サービスにバインドされ、定義済みの選択がある場合、要求されたデータが読み込まれるまでその入力は空白のままになります。 - + コンボボックスは内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限がコンボボックスで有効です。詳細については、[`igxForOf 既知の制限`](for-of.md#既知の制限)セクションを参照してください。 diff --git a/docs/angular/src/content/jp/components/date-picker.mdx b/docs/angular/src/content/jp/components/date-picker.mdx index 65cf83572a..fa24adad1e 100644 --- a/docs/angular/src/content/jp/components/date-picker.mdx +++ b/docs/angular/src/content/jp/components/date-picker.mdx @@ -37,7 +37,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte 次に、**app.module.ts** ファイルに `IgxDatePickerModule` をインポートします。 - + ピッカーが を使用し、タッチ操作のために **BrowserAnimationsModule** と **HammerModule** (**オプション**) に依存関係があり、これらもモジュールに追加する必要があります。 @@ -146,7 +146,7 @@ export class SampleFormComponent { } ``` - + ピッカーは常に `Date` 値を返します。これは、モデルにバインドされている場合、または文字列変数への双方向バインドの場合、新しい日付が選択された後、タイプが `Date` になることを意味します。 @@ -247,7 +247,7 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
- + `IgxDatePicker` が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。 diff --git a/docs/angular/src/content/jp/components/date-range-picker.mdx b/docs/angular/src/content/jp/components/date-range-picker.mdx index 9fb82d5eb9..799519cfbd 100644 --- a/docs/angular/src/content/jp/components/date-range-picker.mdx +++ b/docs/angular/src/content/jp/components/date-range-picker.mdx @@ -90,7 +90,7 @@ Date Range Picker をデフォルトのモードでインスタンス化する public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, 25) }; ``` - + Date Range Picker の値は開始日と終了日を含む タイプです。 @@ -289,7 +289,7 @@ Date Range Picker コンポーネントはさまざまな表示および入力 プロパティが設定されていない場合、入力形式は から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 - + `IgxDateRangePicker` が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。 diff --git a/docs/angular/src/content/jp/components/date-time-editor.mdx b/docs/angular/src/content/jp/components/date-time-editor.mdx index 9478ce9e20..4abeb6bb52 100644 --- a/docs/angular/src/content/jp/components/date-time-editor.mdx +++ b/docs/angular/src/content/jp/components/date-time-editor.mdx @@ -169,7 +169,7 @@ Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用して | `mm` | 先行ゼロが明示的に設定された分。 | | `tt` | 12 時間形式の AM/PM セクション。 | - + `IgxDateTimeEditorDirective` が IME 入力をサポートします。アジア言語の入力を入力すると、コントロールは入力メソッドの構成と候補リストをコントロールの編集領域に直接表示し、構成が終了するとすぐに周囲のテキストを再フローします。 @@ -208,7 +208,7 @@ Additionally, `spinDelta` is an input property of type + 必要に応じて、`validationFailed` イベントを処理し、利用可能な引数の `newValue` プロパティを変更して有効な状態に戻すことができます。 @@ -235,7 +235,7 @@ Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https ``` - + コンポーネントが正しく動作するためには、 ディレクティブの後に を設定することが重要です。これは、両方のディレクティブが入力 `focus` イベントで動作するため、マスクが設定された後にテキスト選択が行われるからです。 diff --git a/docs/angular/src/content/jp/components/dialog.mdx b/docs/angular/src/content/jp/components/dialog.mdx index aab8427738..6233569e81 100644 --- a/docs/angular/src/content/jp/components/dialog.mdx +++ b/docs/angular/src/content/jp/components/dialog.mdx @@ -229,7 +229,7 @@ export class HomeComponent { } ``` - + 同じアプローチをアニメーション設定に使用する必要があります。`openAnimation` と `closeAnimation` プロパティを使用して、期間などのアニメーション パラメーターを定義します。 @@ -303,7 +303,7 @@ $my-dialog-theme: dialog-theme( ); ``` - + ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.md) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 @@ -324,7 +324,7 @@ $custom-button: contained-button-theme( ``` - + [`IgxOverlayService`](overlay.md) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.md)をご覧ください。 @@ -340,7 +340,7 @@ $custom-button: contained-button-theme( } ``` - + コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。 diff --git a/docs/angular/src/content/jp/components/display-density.mdx b/docs/angular/src/content/jp/components/display-density.mdx index 8afc187fb2..6cb2432f50 100644 --- a/docs/angular/src/content/jp/components/display-density.mdx +++ b/docs/angular/src/content/jp/components/display-density.mdx @@ -25,7 +25,7 @@ Using the `--ig-size` custom CSS property, you can configure the size on an appl
- + Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。[インストール](https://jp.infragistics.com/products/ignite-ui-angular/getting-started#ignite-ui-for-angular-のインストール)のトピックで手順をご確認ください。 diff --git a/docs/angular/src/content/jp/components/drag-drop.mdx b/docs/angular/src/content/jp/components/drag-drop.mdx index 163a8134da..021e4de6fe 100644 --- a/docs/angular/src/content/jp/components/drag-drop.mdx +++ b/docs/angular/src/content/jp/components/drag-drop.mdx @@ -89,7 +89,7 @@ Angular アプリケーション内の要素をある場所から他の場所へ ユーザーがマウス/タッチをリリースした後、ドラッグ ゴースト要素が DOM から削除され、 が発生されます。 - + イベントの性質上、短い期間で何度もトリガーされる可能性があり、トリガーされたときに実行される複雑な操作のパフォーマンスの問題が発生することがあります。 @@ -131,7 +131,7 @@ Angular アプリケーション内の要素をある場所から他の場所へ ``` - + このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `` diff --git a/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx b/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx index 6f6419f5fe..93779911ca 100644 --- a/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx +++ b/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx @@ -38,7 +38,7 @@ DOM からチップを削除し、ツリー/グリッドから項目を選択解 - + 最初に開いた Dropdown コンポーネントを表示するには、open メソッドを requestAnimationFrame メソッドのコールバックとして設定することをお勧めします。これにより、DOM ツリーが再描画され、すべての要素が正しく配置されるようになります。 diff --git a/docs/angular/src/content/jp/components/drop-down-virtual.mdx b/docs/angular/src/content/jp/components/drop-down-virtual.mdx index 03494bf65c..8b746b0d52 100644 --- a/docs/angular/src/content/jp/components/drop-down-virtual.mdx +++ b/docs/angular/src/content/jp/components/drop-down-virtual.mdx @@ -77,14 +77,14 @@ export class AppModule {} 項目の一意性を確保するために、 input の内の `item` および `igx-drop-down-item` の 内の `index` を渡します。 スクロールしながら選択を維持するには、ドロップダウン 項目はそれがバインドされているデータ項目への参照を持つ必要があります。 - + ドロップダウンが項目の仮想化リストで機能するためには、 および の入力をすべての項目に渡す必要があります。 - + 各項目に対して `[value]` 入力に渡される一意の値を持たない場合、予想外の結果 (誤った選択) となる場合があります。 - + ドロップダウンが仮想化項目を使用する場合、 の種類は `{ value: any, index: number }` になります。ここで、`value` はデータ項目への参照です。`[value]` input の内に渡され、`index` はデータセット内の項目のインデックスです。 diff --git a/docs/angular/src/content/jp/components/drop-down.mdx b/docs/angular/src/content/jp/components/drop-down.mdx index 95de0a05ca..4ad9a6bc2f 100644 --- a/docs/angular/src/content/jp/components/drop-down.mdx +++ b/docs/angular/src/content/jp/components/drop-down.mdx @@ -397,7 +397,7 @@ public ngAfterViewInit(): void { - + 最初に開いた Dropdown コンポーネントを表示するには、open メソッドを requestAnimationFrame メソッドのコールバックとして設定することをお勧めします。これにより、DOM ツリーが再描画され、すべての要素が正しく配置されるようになります。 diff --git a/docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx index 076b683749..a00380401f 100644 --- a/docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx +++ b/docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx @@ -25,7 +25,7 @@ Infragistics Angular Excel Engine の - + XLSX 形式が必要です。他の形式は現在サポートされていません。 diff --git a/docs/angular/src/content/jp/components/excel-library.mdx b/docs/angular/src/content/jp/components/excel-library.mdx index 42fbee6278..df22958e54 100644 --- a/docs/angular/src/content/jp/components/excel-library.mdx +++ b/docs/angular/src/content/jp/components/excel-library.mdx @@ -109,7 +109,7 @@ Excel ライブラリには、アプリのバンドル サイズを制限する - Microsoft Excel 2016 - + Excel ライブラリ は Excel Binary Workbook (.xlsb) フォーマットを現時点ではサポートしていません。 diff --git a/docs/angular/src/content/jp/components/expansion-panel.mdx b/docs/angular/src/content/jp/components/expansion-panel.mdx index 027b191d70..103699f9f6 100644 --- a/docs/angular/src/content/jp/components/expansion-panel.mdx +++ b/docs/angular/src/content/jp/components/expansion-panel.mdx @@ -170,7 +170,7 @@ export class ExpansionPanelComponent { ``` - + プロパティは、`RTL` で使用できます。たとえば、**right** に表示するよう設定したアイコンは、RTL 設定時にヘッダーの左端に表示されます。 @@ -324,7 +324,7 @@ $custom-panel-theme: expansion-panel-theme( ); ``` - + [`テーマ`](themes/sass/component-themes.md) エンジンを介したスタイル設定に使用可能なすべてのパラメーターを確認するには、[`API ヘルプ`]({environment:sassApiUrl}/themes#function-expansion-panel-theme)を参照してください。 @@ -377,7 +377,7 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/exporter-csv.mdx b/docs/angular/src/content/jp/components/exporter-csv.mdx index 7ef91aa2dc..7ba9e6a575 100644 --- a/docs/angular/src/content/jp/components/exporter-csv.mdx +++ b/docs/angular/src/content/jp/components/exporter-csv.mdx @@ -41,7 +41,7 @@ import { IgxCsvExporterService } from 'igniteui-angular/grids/core'; export class AppModule {} ``` - + v 12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。 diff --git a/docs/angular/src/content/jp/components/exporter-excel.mdx b/docs/angular/src/content/jp/components/exporter-excel.mdx index 262c592aa1..5d3379fa43 100644 --- a/docs/angular/src/content/jp/components/exporter-excel.mdx +++ b/docs/angular/src/content/jp/components/exporter-excel.mdx @@ -42,7 +42,7 @@ import { IgxExcelExporterService } from 'igniteui-angular/grids/core'; export class AppModule {} ``` - + v12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。 diff --git a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx index 3c97dd3336..31a7f5f5c1 100644 --- a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx +++ b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx @@ -15,7 +15,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' Import ステートメントは、API クラスと列挙型へのフル パスではなくパッケージ名のみを使用するように簡素化されました。 - + これらの重大な変更は、パッケージおよびコンポーネントの **8.2.12** バージョン で導入されました。 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 7c86766691..aeb67bc9c5 100644 --- a/docs/angular/src/content/jp/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/jp/components/general-changelog-dv.mdx @@ -20,7 +20,7 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; Ignite UI for Angular の各バージョンのすべての重要な変更は、このページに記載されています。 - + このトピックでは、igniteui-angular パッケージに含まれていないコンポーネントの変更についてのみ説明します。 igniteui-angular コンポーネントに固有の変更については CHANGELOG.MD を参照してください。 @@ -180,7 +180,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### igniteui-angular-maps 地理マップ - + 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 詳細は以下をご覧ください: @@ -370,7 +370,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - **ダッシュ配列**を `DataChart` のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされた[シリーズ](charts/types/line-chart.md#angular-折れ線チャートのスタイル設定)、チャートの[グリッド線](charts/features/chart-axis-gridlines.md#angular-軸グリッド線のプロパティ)、およびチャートにプロットされたシリーズの[トレンドライン](charts/features/chart-trendlines.md#angular-チャート-トレンドラインのダッシュ配列の例)に適用できます。 - + The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using `IncludedProperties` | `ExcludedProperties` because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. ## **16.0.0 (May 2023)** @@ -422,7 +422,7 @@ This release introduces a few improvements and simplifications to visual design ## igniteui-angular-charts (チャート) ### **13.1.0 (November 2021)** - + パッケージ「lit-html」を確認してください。最適な互換性のために、「^2.0.0」以降がプロジェクトに追加されます。 @@ -474,7 +474,7 @@ for example: ### **11.2.0 (April 2021)** - + These features are CTP diff --git a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx index 326cae69a0..1e8f73988a 100644 --- a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx +++ b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx @@ -57,7 +57,7 @@ ig new ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav ``` - + `v13.1.0` 以降、`igx-ts` プロジェクト タイプはデフォルトでスタンドアロン コンポーネントを使用するプロジェクトを生成します。代わりにモジュールベースのブートストラップを使用したい場合は、`type` を `igx-ts-legacy` に設定できます。 diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx index f03c78704a..803d255474 100644 --- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx +++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx @@ -36,7 +36,7 @@ ng new --collection="@igniteui/angular-schematics" - + ステップ バイ ステップ モードは `Inquirer.js` に依存しています。[サポートされている端末](https://github.com/SBoudrias/Inquirer.js#support-os-terminals)を参照してください。 diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx index 515d1db62d..63dbc918c4 100644 --- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx +++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx @@ -36,7 +36,7 @@ ig new - + ステップ バイ ステップ モードは `Inquirer.js` に依存しています。[サポートされている端末](https://github.com/SBoudrias/Inquirer.js#support-os-terminals)を参照してください。 diff --git a/docs/angular/src/content/jp/components/general/data-analysis.mdx b/docs/angular/src/content/jp/components/general/data-analysis.mdx index 2b48942096..16c8dab6e1 100644 --- a/docs/angular/src/content/jp/components/general/data-analysis.mdx +++ b/docs/angular/src/content/jp/components/general/data-analysis.mdx @@ -20,7 +20,7 @@ import containsFormatting from '../../images/general/contains-formatting.png'; データ分析とは、特定の方法でデータを検査、変換、および整理し、それに基づいて役立つ情報を生成するプロセスです。また、分析的および論理的な推論で特定の結果と結論に達することもできます。 - + この機能は、設定を簡単にし、コードを最小限に制限するために、**Ignite UI for Angular** の外部パッケージとして提供されます。 @@ -30,7 +30,7 @@ import containsFormatting from '../../images/general/contains-formatting.png'; - 特定のチャート タイプを選択し、別のペインで可視化します。 - または、`Data Analysis` コンテキスト ボタンを使用して、さまざまなテキスト書式設定オプションを表示します。 - + [Dock Manager Web コンポーネント](../dock-manager.md)は、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、非表示にすることでカスタマイズできます。データを選択した後、いくつかのチャートを作成し、利用可能な領域にドラッグしてピン固定します。 @@ -95,7 +95,7 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula チャートは、セルの範囲を選択し、分析の表示ボタンをクリックすると表示されます。 - + チャート作成オプションは、選択したデータに数値がある場合にのみ使用できます。 diff --git a/docs/angular/src/content/jp/components/general/getting-started.mdx b/docs/angular/src/content/jp/components/general/getting-started.mdx index 48f678736b..8b7c3010b5 100644 --- a/docs/angular/src/content/jp/components/general/getting-started.mdx +++ b/docs/angular/src/content/jp/components/general/getting-started.mdx @@ -64,11 +64,11 @@ ng new --style=scss ng add igniteui-angular ``` - + `igniteui-theming` パッケージは Ignite UI for Angular に付属しているため、明示的にインストールする必要はありません。 - + 上記コマンドでインストールされるのは、商用ライセンスの Ignite UI for Angular コンポーネント (例: `igxGrid`) のトライアル版です。 @@ -150,7 +150,7 @@ CLI ツール を使用する場合は、以下のコマンドを実行します ig ``` - + [まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。[商用ライセンス](./open-source-vs-premium.md#全コンポーネントの比較表)対象コンポーネントを使用する場合、トライアルからライセンス版へのアカウント設定が必要です。 @@ -182,7 +182,7 @@ ng g @igniteui/angular-schematics:component ig add ``` - + アプリケーションを Ignite UI CLI を使用して作成した場合、または **ng add igniteui-angular** コマンドで Ignite UI for Angular を追加した Angular CLI を使用して作成した場合は、[`ig add`](https://github.com/IgniteUI/igniteui-cli/wiki/add) コマンドを使用できます。 diff --git a/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx b/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx index dd8a3b5b80..2d02db68a7 100644 --- a/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx +++ b/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx @@ -22,7 +22,7 @@ import optimizingAfterModuleLazyload from '../../../images/general/theming-walkt この記事では、Ignite UI for Angular アプリケーション テーマのカスタマイズと、生成されたスタイルシートのサイズの最適化について詳しく説明します。Ignite UI for Angular テーマ エンジンがどのように機能するかの詳細を示し、その高度な使用法を示します。この記事は、コンポーネントのスタイルを完全にカスタマイズして、Angularアプリケーションを希望のルック＆フィールに合わせることと、アプリケーションで使用するものだけにスタイルサイズを縮小してアプリケーションをデプロイに最適化することの両方に非常に便利です。 - + このドキュメントでは、バージョン 15 以降の Ignite UI for Angular のテーマ システムについて説明します。例には、テーマ エンジンによって提供される Sass API の使用と公開された CSS 変数の両方が含まれます。 @@ -202,7 +202,7 @@ $custom-palette-light: palette( } ``` - + [`tokens`]({environment:sassApiUrl}/themes#mixin-tokens) を使用してすべてのテーマ変数を再度含める代わりに、`igx-grid-toolbar` テーマ オーバーライドを 2 つの変数のみをオーバーライドするように切り替えました。 すべてのテーマ変数は[対応する sass api ドキュメント]({environment:sassApiUrl}/themes#function-grid-toolbar-theme)で見つけることができ、sass 変数と同等ですが、`$` の代わりに `--` を前に付けます。 @@ -215,7 +215,7 @@ $custom-palette-light: palette( Customizing Color Schema Dark - + 完全な実行時の切り替え (Ignite UI テーマ スキーマ プリセットの切り替えを含む) は、2 つの完全なテーマがビルドされている場合にのみ可能です。上記の例では、カラー パレットを切り替えていますが、テーマ スキーマは $light-material-schema のままであるため、ダーク カラー パレットに切り替えたときに、カラー パレットのすべての正しい色合いが使用されるわけではありません。 @@ -229,7 +229,7 @@ Ignite UI テーマは、複数の次元のテーマを抽象化し、非常に - [タイポグラフィ](../../themes/sass/typography.md) (フォントとフォント サイズ) - [サイズ](../../display-density.md) (画面に収まる情報のサイズ) - + 完全にカスタマイズされたビジュアル デザインが必要な場合は、サポートされているすべてのテーマ ディメンションを変更する必要があり、Sass API を最大限に活用できます。 フォントやいくつかの色などを変更する必要がある場合は、パレットとタイポグラフィのセクションを参照してください。ほとんどの場合、必要な作業はいくつかの CSS 変数を変更することだけであり、完全な Sass API は必要ありません。 これを可能な限り細かくしたので、アプリケーションのビジュアル デザインに予期しない副次的な結果をもたらすことなく変更を適用できます。 @@ -270,7 +270,7 @@ $include: ( ); ``` - + 一部のコンポーネント テーマは、他のコンポーネント テーマに依存します。 特定のテーマを除外しても、除外されたテーマに依存するコンポーネント テーマを使用すると、それらはビルドによって保持されます。 @@ -413,7 +413,7 @@ $include: ( ); ``` - + カラー パレットの値など、すべての変数を個別の `_variables.scss` ファイルに配置して、変数を再利用するために複数のコンポーネントから含めることができます。 diff --git a/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx b/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx index 9e1e70e9a3..0893945a64 100644 --- a/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx +++ b/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx @@ -136,7 +136,7 @@ this._crudService.delete(event.data).subscribe({ }); ``` - + 上記の例は、アクションを編集するためのデフォルトのグリッド UI に基づいています。もう 1 つの有効なアプローチは、独自の外部 UI を提供する場合です。このような場合、UI を使用したユーザーの操作への応答は、グリッド編集 API で機能する必要があります (**グリッドに primaryKey が設定されていることを確認してください**)。参考のために [**API**](how-to-perform-crud.md#api-の編集) セクションを参照してください。 diff --git a/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx b/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx index e2e1623e7b..697c531d62 100644 --- a/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx +++ b/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx @@ -22,7 +22,7 @@ Ignite UI for Angular はデュアルライセンス モデルで提供され、 商用ライセンス対象のコンポーネントには、購入・使用に関するすべての[使用条件](https://jp.infragistics.com/legal/license/igultimate-la)が適用されます。 - + 2025 年第 4 四半期にライセンス条件およびサブスクリプション モデルを更新しました。 @@ -41,7 +41,7 @@ Npm は Node.js ランタイム環境で使用する一般的なデフォルト Infragistics Ignite UI for Angular は npm パッケージとして提供され、[`Ignite UI CLI`](./cli/step-by-step-guide-using-cli.md) または [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md) でプロジェクトに依存関係として追加できます。Ignite UI for Angular のコンポーネントを MIT ライセンスのコンポーネントのみ利用する場合、追加の手続きは不要です。ただし、商用ライセンス コンポーネントを使用する場合 npm からパッケージをダウンロードすると[トライアル期間](https://jp.infragistics.com/products/ignite-ui-angular)が開始されます。 - + トライアル版の使用を開始するとはどういう意味ですか? これは、Web ビューの**ウォーターマーク**部分を含む製品バージョンを使用することを意味します。ライセンス パッケージを有効期限が切れる前に一定期間 (たとえば、1 か月間) 使用するという意味ではありません。 @@ -53,7 +53,7 @@ Infragistics Ignite UI Dock Manager Web コンポーネントは、別の npm Ignite UI for Angular が [`ng add`](./getting-started.md) を使用してプロジェクトに追加された場合、またはプロジェクトが [schematic コレクション](./cli/getting-started-with-angular-schematics.md)または [Ignite UI CLI](./cli/getting-started-with-cli.md) を使用して作成された場合、`upgrade-packages` を使用して、ライセンス パッケージを使用するようにアプリを自動的にアップグレードできます。プロジェクト パッケージの依存関係には、`@igniteui/angular-schematics` または `igniteui-cli` が含まれ、どちらも upgrade コマンドをサポートします。 - + パッケージが変更されるため、切り替える前にプロジェクトを更新することをお勧めします。このように、Ignite UI Angular の高いバージョンを使用せず、更新の移行のトラブルを防止します。[アップデート ガイド](./update-guide.md)を参照してください。 @@ -72,7 +72,7 @@ ig upgrade-packages schematic またはコマンドはプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。 まだセットアップされていない場合、NPM レジストリへのログインが要求されます。 - + プロジェクトが [`yarn`](https://yarnpkg.com/) を使用している場合は、`--skip-install` フラグを指定して `upgrade-packages` を実行します。その後、`yarn install` (現在 `upgrade` コマンドはインストールに `npm` を使用します) を実行して `yarn.lock` を適切に更新します。 @@ -82,7 +82,7 @@ schematic またはコマンドはプロジェクトのパッケージの依存 これにより公開用の npm レジストリおよびプライベート Infragistics レジストリからのパッケージを同時に使用できます。 - + アカウントのライセンスがない場合 (トライアル版アカウントを使用している場合)、プライベート パッケージ フィードにアクセスできません (たとえば、404 または 403 エラーメッセージが返されます)。**ライセンスされているアカウントのみが packages.infragistics プライベート フィードにアクセスできます。** @@ -113,7 +113,7 @@ npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scop Infragistics アカウントにログインするユーザー名およびパスワードを入力する必要があります。Infragistics プロファイルに登録されるメールも入力してください。 - + `npm` はユーザー名で `"@"` の使用を許可しません。ユーザー名が Infragistics アカウントのメール アドレスであるため、`"@"` 記号を含みます。この制限を回避するには、`"@"` 記号の代わりに `"!!"` (2 つの感嘆符) を使用します。たとえば、ユーザー名が `"username@example.com"` の場合、`"username!!example.com"` と入力します。 @@ -193,7 +193,7 @@ Ignite UI for Angular のパッケージはスコープ付きのため、npmjs.o 新しく生成されたトークン - + 各トークンは Base64 エンコードです。 diff --git a/docs/angular/src/content/jp/components/general/localization.mdx b/docs/angular/src/content/jp/components/general/localization.mdx index 4f0e373b50..30896b78ba 100644 --- a/docs/angular/src/content/jp/components/general/localization.mdx +++ b/docs/angular/src/content/jp/components/general/localization.mdx @@ -6,6 +6,7 @@ _language: ja --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; @@ -13,7 +14,9 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; ## ローカライズ (i18n) ->注: 21.1.0 以降、これが Ignite UI for Angular コンポーネントにローカライズを適用する推奨方法です。 + +21.1.0 以降、これが Ignite UI for Angular コンポーネントにローカライズを適用する推奨方法です。 + 新しいローカライズでは、ローカライズ文字列およびすべての利用可能なロケールに対する書式設定の両方について、より少ない要件でより多くの機能を提供します。書式設定は現在、`Intl` API によって導入された標準に基づいています。 @@ -23,7 +26,9 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; ->注: サンプルに含まれているヒンディー語 (HI) は、説明のみを目的としており、カスタム ローカライズ オブジェクトを渡す可能性を強調するためのものです。このサンプルでは、集計用にローカライズされたいくつかの文字列のみが含まれています。詳細については、以下の[カスタム ローカライズ リソース文字列](#カスタム-ローカライズ-リソース文字列)セクションをご覧ください。 + +サンプルに含まれているヒンディー語 (HI) は、説明のみを目的としており、カスタム ローカライズ オブジェクトを渡す可能性を強調するためのものです。このサンプルでは、集計用にローカライズされたいくつかの文字列のみが含まれています。詳細については、以下の[カスタム ローカライズ リソース文字列](#カスタム-ローカライズ-リソース文字列)セクションをご覧ください。 + ### ロケール @@ -49,7 +54,9 @@ setCurrentI18n('de'); この方法では、`HTML` タグの `lang` グローバル属性を通じてローカライズを設定できます。この属性は監視されており、変更されると、レンダリングされたすべてのコンポーネントが現在設定されている言語にリソース文字列を更新します。使用されるタグに関するすべてのルールは、上記の説明と同様に適用されます。 -> 注: これはルート レベルでのみ機能し、ページ上の内部要素では機能しません。 + +これはルート レベルでのみ機能し、ページ上の内部要素では機能しません。 + ```html @@ -239,7 +246,9 @@ public resourcesDE = GridResourceStringsDE; アプリをローカライズしたいが、使用している言語のリソース文字列が提供されておらず、独自の翻訳を提供したい場合は、いつでもカスタム リソース文字列を提供できます。これはグローバルに、またはコンポーネントごとに (`resourceStrings` プロパティを使用して) 実行できます。 ->注: より多くの言語を含む [`igniteui-i18n-resources`](https://github.com/IgniteUI/igniteui-i18n/tree/master/projects/igniteui-i18n-resources) パッケージに自由にコントリビュートしてください。`igniteui-angular-i18n` はこれらに基づいています。 + +より多くの言語を含む [`igniteui-i18n-resources`](https://github.com/IgniteUI/igniteui-i18n/tree/master/projects/igniteui-i18n-resources) パッケージに自由にコントリビュートしてください。`igniteui-angular-i18n` はこれらに基づいています。 + すべてのコンポーネントに提供されている `IResourceStrings` タイプを使用して、使用されるリソース文字列の型指定を取得できます: @@ -287,7 +296,9 @@ registerI18n(customResources, 'en'); ``` ->注: 最後の例では、特定のリソース文字列のみを設定しています。つまり、残りは、使用中のコンポーネントで取得できない場合、デフォルトで英語になります。 + +最後の例では、特定のリソース文字列のみを設定しています。つまり、残りは、使用中のコンポーネントで取得できない場合、デフォルトで英語になります。 + ### 利用可能なリソース文字列 @@ -314,7 +325,9 @@ registerI18n(customResources, 'en'); ## レガシー ローカライズ (i18n) ->注: これは 21.0.x まで推奨されていた古いローカライズ処理方法です。新しいバージョンを使用している場合は、上記の新しい方法の使用を推奨します。これは、今後の通知があるまで引き続き機能します。 + +これは 21.0.x まで推奨されていた古いローカライズ処理方法です。新しいバージョンを使用している場合は、上記の新しい方法の使用を推奨します。これは、今後の通知があるまで引き続き機能します。 + 現在、Ignite UI for Angular は、次の言語と文字のリソース文字列を提供しています: ブルガリア語、チェコ語、デンマーク語、オランダ語、英語、フランス語、ドイツ語、ハンガリー語、イタリア語、日本語、韓国語、ノルウェー語、ポーランド語、ポルトガル語、ルーマニア語、スペイン語、スウェーデン語、トルコ語、繁体字中国語、簡体字中国語。これらは、`igniteui-angular` のデフォルトのローカライズとして提供される英語を除き、`igniteui-angular-i18n` パッケージ経由で利用できます。 @@ -324,7 +337,9 @@ registerI18n(customResources, 'en'); ->注: サンプルに含まれているヒンディー語 (HI) は、説明のみを目的としており、カスタム ローカライズ オブジェクトを渡す可能性を強調するためのものです。このサンプルでは、集計用にローカライズされたいくつかの文字列のみが含まれています。詳細については、以下の[独自のローカライズされたリソースを使用する](#独自のローカライズされたリソースを活用する)セクションを参照してください。 + +サンプルに含まれているヒンディー語 (HI) は、説明のみを目的としており、カスタム ローカライズ オブジェクトを渡す可能性を強調するためのものです。このサンプルでは、集計用にローカライズされたいくつかの文字列のみが含まれています。詳細については、以下の[独自のローカライズされたリソースを使用する](#独自のローカライズされたリソースを活用する)セクションを参照してください。 + ### 使用方法 @@ -398,7 +413,9 @@ export class AppComponent implements OnInit { } ``` ->注: より多くの言語を含む [`igniteui-angular-i18n`](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) パッケージに自由にコントリビュートしてください。 + +より多くの言語を含む [`igniteui-angular-i18n`](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) パッケージに自由にコントリビュートしてください。 + #### 独自のローカライズされたリソースを活用する diff --git a/docs/angular/src/content/jp/components/general/update-guide.mdx b/docs/angular/src/content/jp/components/general/update-guide.mdx index 27b03b2d48..46aedf0b29 100644 --- a/docs/angular/src/content/jp/components/general/update-guide.mdx +++ b/docs/angular/src/content/jp/components/general/update-guide.mdx @@ -52,7 +52,7 @@ ng update @angular/core ng update @angular/cli ``` - + パッケージの依存関係の不一致が原因で `ng update` コマンドが失敗した場合は、アップデートを元に戻し、`node_modules` フォルダを削除してから、`--force` フラグを指定してアップデートを再実行します。 @@ -108,7 +108,7 @@ igx-avatar { } ``` - + スコープ モードでは、適切な変数スコープのコンポーネント セレクターを決定するために、生成されたテーマ マップの `selector` プロパティが必要です。ミックスインがスタイルシートのルートから呼び出された場合、生成されたルールはテーマの内部 `selector` 値を使用します。セレクター内から呼び出された場合、そのセレクターとコンポーネント セレクターの両方が変数を受け取ります。 @@ -125,7 +125,7 @@ igx-avatar { // --ig-avatar-background からグローバル オレンジ値を取得します。 ``` - + **グローバル オーバーライドはスコープ モードに流れ込みます。** スコープ変数は `--ig-*` トークンにフォールバックするため、`:root` でグローバル トークンを設定すると、すべてのスコープ インスタンスに伝播されます。 @@ -1196,7 +1196,7 @@ const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[] @include theme(); ``` - + The `core` mixin should always be included first. diff --git a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/angular-pipes.mdx b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/angular-pipes.mdx index 02a55cf46e..f065f76f6d 100644 --- a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/angular-pipes.mdx +++ b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/angular-pipes.mdx @@ -85,7 +85,7 @@ export class ReplacePipe implements PipeTransform { {{ name | replace:" ":"-" }} ``` - + コンポーネントの html テンプレートでパイプを使用できるようにするには、モジュール宣言にパイプを追加する必要があります。 diff --git a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/create-ui-with-components.mdx b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/create-ui-with-components.mdx index 125418eb05..9857da713e 100644 --- a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/create-ui-with-components.mdx +++ b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/create-ui-with-components.mdx @@ -54,7 +54,7 @@ ng g c sample Sample Component 新しく作成したコンポーネントを含む `sample` フォルダーを確認します。コンポーネントに必要な 3 つのファイルすべてに加えて、SPEC ファイルがありますが、このトピックでは必要ないテスト ファイルです。また、app.module.ts に変更を加え、NgModule の`宣言`セクションにサンプルコンポーネントを追加しました。 - + 重要: 新しいコンポーネントが作成されるたびに、NG モジュールの宣言セクションで宣言する必要があります。このセクションでは、このモジュールに属するコンポーネントについて説明します。 diff --git a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/layout.mdx b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/layout.mdx index 6daf775c7d..0007742539 100644 --- a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/layout.mdx +++ b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/layout.mdx @@ -168,7 +168,7 @@ Angular では、CSS グリッド レイアウト モジュールを使用でき } ``` - + CSS グリッドレイアウトは、Internet Explorer 11 などの古いブラウザーでは[サポートされていません](https://caniuse.com/#feat=css-grid)。 diff --git a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx index 65b14d9cdd..6392b55437 100644 --- a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx +++ b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx @@ -140,7 +140,7 @@ Angular のプロパティ バインディングは、HTML 要素またはディ プロパティ バインディングを使用することにより、入力の `disabled` プロパティは、文字列では**なく**ブール値の結果にバインドされます。`isDisabled` 値は false であり、アプリを実行すると、入力が有効として表示されます。 - + バインディングがデータ型の結果に依存する場合、`プロパティ バインディング`を使用する必要があることに注意してください。バインディングが単に文字列値に依存している場合は、`補間`を使用する必要があります。 diff --git a/docs/angular/src/content/jp/components/grid-lite/binding.mdx b/docs/angular/src/content/jp/components/grid-lite/binding.mdx index 1d8515b453..f9e129d32e 100644 --- a/docs/angular/src/content/jp/components/grid-lite/binding.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/binding.mdx @@ -53,7 +53,7 @@ grid.data = []; ``` - + Grid Lite のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。通常は `clearSort()` または `clearFilter()` を呼び出してリセットすることをお勧めします。 diff --git a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx index 6bbbb13c08..997192fed2 100644 --- a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx @@ -110,7 +110,7 @@ defineComponents( ``` - + テンプレートが複雑であればあるほど、パフォーマンス コストが増加します。パフォーマンスが重要な場合は複雑な DOM 構造を避けてください。 diff --git a/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx index 3799d79132..b00293318c 100644 --- a/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx @@ -53,7 +53,7 @@ const data: Record[] = [ 追加のカスタマイズを行わずに一部のデータをすばやくレンダリングする場合に便利です。 - + これはグリッドが初めて DOM に追加されたときに一度だけ実行されます。空のデータ ソースを渡すか、遅延バインドされたデータ ソース (HTTP リクエストなど) を使用すると、通常列設定は空になります。既存の列設定が存在する場合、このプロパティは無視されます。データ ソースに基づいて列構成を自動生成する方法の詳細については、[データ バインディング](./binding.md)のトピックを参照してください。 @@ -91,7 +91,7 @@ Grid Lite コンポーネントの各列は、列要素の `resizable` プロパ 列がサイズ変更可能に設定されている場合、列ヘッダー右端をドラッグして幅を増減できます。リサイズ領域をダブルクリックすると、自動調整がトリガーされ、セルやヘッダーの最大コンテンツに合わせて幅が設定されます。 - + 「流動的」幅 (fr、%、など) の列は、グリッドのリサイズ時に予期せぬ動作をする場合があります。アプリケーションのシナリオによっては、ユーザーがレイアウトのズレを経験しないように、「固定」単位を使用する方がよい場合があります。 diff --git a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx index b835dabfe0..d0f2660c2a 100644 --- a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx @@ -23,7 +23,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; ``` - + ヘッダー テンプレートが提供されている場合、`header` は無視されます。 diff --git a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx index 743f1d18d3..db440a4997 100644 --- a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx +++ b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx @@ -55,7 +55,7 @@ column.sortConfiguration = { grid.sortingOptions = { mode: 'single' }; ``` - + 単一/複数列ソートの動作は、ユーザーが Grid Lite を操作する方法を制御します。API で複数の式によるソートを実行しても、単一ソートが有効な場合でも動作します。 diff --git a/docs/angular/src/content/jp/components/grid/grid.mdx b/docs/angular/src/content/jp/components/grid/grid.mdx index dffc814999..cc46ed02fa 100644 --- a/docs/angular/src/content/jp/components/grid/grid.mdx +++ b/docs/angular/src/content/jp/components/grid/grid.mdx @@ -68,7 +68,7 @@ Boston Marathon 2021 – この Angular グリッドの例では、ユーザー ## Ignite UI for Angular Data Grid を使用した作業の開始 - + このコンポーネントは、**オプションで** [HammerModule](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。 @@ -136,7 +136,7 @@ Ignite UI for Angular Grid モジュールまたはディレクティブをイ

Ignite UI for Angular includes a powerful bootstrap grid like flex-based layout system. Any modern application today is expected to follow a responsive web design approach, meaning it can gracefully adjust layout of HTML elements based on the device size, or from simply resizing the browser. An Angular bootstrap grid layout was the most used approach in the past, but a flex-based layout system like CSS grid has become more popular, as it works in any browser. The Ignite UI for Angular Layout Directive allows vertical and horizontal flow, including content / text wrapping, justification, and alignment. The Ignite UI for Angular grid supports a responsive layout using CSS, giving you the ultimate flexibility in how the grid behaves on resize.

## Angular Grid スタイルの構成 - + は **css グリッド レイアウト**を使用しますが、**プレフィックスなしでは IE でサポートされていない**ため、正しく描画できません。 @@ -216,7 +216,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1 ... ``` - + グループ化/移動機能と一緒にヘッダー テンプレートを使用すると、_列ヘッダー領域_は**ドラッグ可能**になり、ヘッダー テンプレートのカスタム要素部分に**ドラッグ不可**としてマークするまでアクセスできません。以下は例です。 @@ -272,7 +272,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1 `ngModel` を使用して**セル テンプレート**を介してデータを変更する場合、適切な API メソッドを呼び出して、Angular グリッドの基になるデータ コレクションで値が正しく更新されることを確認する必要があります。上記のスニペットでは、`ngModelChange` 呼び出しはグリッドの[編集 API](cell-editing.md#api-を介した編集) を通過し、グリッドの編集パイプラインを通過し、トランザクション (該当する場合) を適切にトリガーし、[集計](summaries.md)、[選択](selection.md) などの処理を行います。ただし、この `ngModelChange` はユーザーが編集を完了したときだけでなく、セルが変更され、より多くの API 呼び出しが発生します。 - + グリッドは、数値、文字列、日付、およびブール列タイプのデフォルトの処理を公開します。例えば、ブール列タイプの場合に列はデフォルトで true/false の代わりに`チェック`または`閉じる`アイコンを表示します。 @@ -800,7 +800,7 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + これは `IgxGridComponent` の試験中の機能です。これは、グリッドで予期しない動作が発生する可能性があることを意味します。このような動作が発生した場合は、[Github](https://github.com/IgniteUI/igniteui-angular/discussions) ページでお問い合わせください。 @@ -816,7 +816,7 @@ platformBrowserDynamic() | 列には設定可能な最小幅があります。[`--ig-size`] CSS 変数の値に応じて、次のようになります:
"small": 56px
"medium": 64px
"large ": 80px | 許容される最小幅未満に設定した場合、描画される要素に影響はありません。対応する [`--ig-size`] の最小許容幅で描画します。水平方向の仮想化は予期しない動作を招く場合があるためサポートしていません。 | ビューに描画されていないセル高さは行の高さに影響しません。|仮想化のため、セルの高さを変更するビューにないカスタム テンプレートの列は行の高さに影響しません。関連する列がビューにスクロールされるときのみ行の高さに影響します。 - + `igxGrid` は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限が `igxGrid` で有効です。詳細については、[igxForOf 既知の問題](../for-of.html#既知の問題と制限) のセクションを参照してください。 diff --git a/docs/angular/src/content/jp/components/grid/groupby.mdx b/docs/angular/src/content/jp/components/grid/groupby.mdx index f15810e861..8818e55cfe 100644 --- a/docs/angular/src/content/jp/components/grid/groupby.mdx +++ b/docs/angular/src/content/jp/components/grid/groupby.mdx @@ -63,7 +63,7 @@ public ngOnInit() { grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }); ``` - + これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、グループ化をソートから切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。 @@ -206,7 +206,7 @@ export interface IGroupByRecord { igxGrid では、列ごとまたはグループ化式ごとにカスタム グループを定義できます。これにより、カスタム条件に基づいてグループ化が提供されます。これは、複雑なオブジェクトごとにグループ化する必要がある場合、または他のアプリケーション固有のシナリオで役立ちます。 - + カスタム グループ化を実装するには、まずデータを適切にソートする必要があります。このため、ベース を拡張するカスタムのソート ストラテジを適用する必要がある場合もあります。データがソートされた後、列または特定のグループ化式に を指定することにより、カスタム グループを決定できます。 @@ -447,7 +447,7 @@ $custom-theme: grid-theme( このように、Angular の [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。 - + コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド内のコンポーネントをスタイル設定するためには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 @@ -467,7 +467,7 @@ $custom-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx b/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx index 9b17819961..bbeebafabd 100644 --- a/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx +++ b/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx @@ -39,7 +39,7 @@ const boolData = data.filter(rec => typeof rec === "boolean"); const dates = data.filter(rec => isDate(rec)); ``` - + `isDate` はカスタム関数であることに注意してください。 diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx index cd75662ea4..52009390f2 100644 --- a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx +++ b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx @@ -27,7 +27,7 @@ Ignite UI for Angular Hierarchical Data Grid は、階層表形式データの ## Ignite UI for Angular Hierarchical Data Grid を使用した作業の開始 - + このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。 @@ -144,7 +144,7 @@ export const singers = [{ ``` - + `data` の代わりにユーザーは、データを自動的に設定するめの読み込みに `igx-hierarchical-grid` が必要な `key` のみ設定します。 @@ -305,7 +305,7 @@ export class RemoteLoDService { ## CRUD 操作 - + フラットな Data Grid と行アイランドの各インスタンスの重要な違いは、同じトランザクション サービス インスタンスがあり、同じトランザクション ログを蓄積する点です。CRUD 機能を有効にするには、`IgxHierarchicalTransactionServiceFactory` を注入する必要があります。 @@ -334,7 +334,7 @@ igxHierarchicalGrid を使用すると、[`Ignite UI for Angular テーマ ラ 次に、[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) を拡張し、必要に応じて階層グリッドをカスタマイズするために必要なパラメーターを受け取る新しいテーマを作成します。 - + 特定の `sass` 階層グリッド機能はありません。 @@ -353,7 +353,7 @@ $custom-theme: grid-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。 @@ -379,7 +379,7 @@ This way, due to Angular's [`ViewEncapsulation`](https://angular.io/api/core/Com ## デモ - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 @@ -389,11 +389,11 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + This is still in experimental feature for the `igxHierarchicalGrid`. This means that there might be some unexpected behaviors in the Hierarchical Grid. In case of encountering any such behavior, please contact us on our [Github](https://github.com/IgniteUI/igniteui-angular/discussions) page. - + Enabling it can affects other parts of an Angular application that the `igxHierarchicalGrid` is not related to. @@ -401,7 +401,7 @@ Enabling it can affects other parts of an Angular application that the `igxHiera `igxHierarchicalGrid` のデザインでは、Angular で導入されたイベント結合機能を利用できます。この機能は、インタラクションとレスポンシブの点で **`20%`** のパフォーマンスを向上します。この機能は、`bootstrapModule` メソッドで `ngZoneEventCoalescing` と `ngZoneRunCoalescing` プロパティを `true` に設定するだけでアプリケーション レベルで有効にできます。 - + これは `igxHierarchicalGrid` の試験中の機能です。これは、階層グリッドで予期しない動作が発生する可能性があることを意味します。このような動作が発生した場合は、[Github](https://github.com/IgniteUI/igniteui-angular/discussions) ページでお問い合わせください。 diff --git a/docs/angular/src/content/jp/components/icon-button.mdx b/docs/angular/src/content/jp/components/icon-button.mdx index 2539dd024a..e59e40d2c5 100644 --- a/docs/angular/src/content/jp/components/icon-button.mdx +++ b/docs/angular/src/content/jp/components/icon-button.mdx @@ -462,7 +462,7 @@ $custom-contained: contained-icon-button-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/icon.mdx b/docs/angular/src/content/jp/components/icon.mdx index 481b01792b..6890fccff4 100644 --- a/docs/angular/src/content/jp/components/icon.mdx +++ b/docs/angular/src/content/jp/components/icon.mdx @@ -178,7 +178,7 @@ public ngOnInit() { ## サーバーサイド レンダリング時の注意 - + Angular Universal を使用してアプリケーションにサーバー側のレンダリング ロジックを実装し、`IgxIconService` を使用してアイコンを登録した場合は、以下の例外が発生することがあります。

`XMLHttpRequest is not defined. Could not fetch SVG from url.` (XMLHttpRequest が定義されていません。url から SVG をフェッチできませんでした。)>

これを避けるためには、以下の順序に従って下さい。 @@ -334,7 +334,7 @@ igx-icon { person ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/input-group.mdx b/docs/angular/src/content/jp/components/input-group.mdx index c2e9853306..91593916b1 100644 --- a/docs/angular/src/content/jp/components/input-group.mdx +++ b/docs/angular/src/content/jp/components/input-group.mdx @@ -79,13 +79,13 @@ export class HomeComponent { } ``` - + このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `` Ignite UI for Angular Input Group モジュールまたはディレクティブをインポートしたので、`igx-input-group` コンポーネントの使用を開始できます。 - + `igxInput`、`igxLabel`、`igx-preix`、`igx-suffix` または `igx-hint` ディレクティブを使用するには、`` コンテナーでラップする必要があります。 @@ -150,7 +150,7 @@ providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }] インジェクション トークンを使用すると、すべての入力グループ インスタンスのタイプをアプリケーション レベルで指定できます。すべての関連コンポーネントを一度に簡単にスタイル設定できます。 タイプを設定するには、 インジェクション トークンを使用して DI プロバイダーを作成します。 - + プロパティは よりも優先されるため、type プロパティが明示的に設定されている場合トークン値をコンポーネントレベルでオーバーライドできます。 `igniteui-angular` フォーム コントロールのほとんどは、内部で input-group コンポーネントを使用するか、カスタム テンプレートを使用します。グローバル トークンの設定は、これらのコンポーネントにも影響します。 @@ -1033,7 +1033,7 @@ constructor(fb: FormBuilder) { 以下のサンプルでは、カスタマイズした CSS 変数を使用した入力グループが、[`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) デザイン システムの入力グループに視覚的に似たデザインを実現している様子を確認できます。 - + サンプルでは、[Indigo Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 @@ -1044,7 +1044,7 @@ $custom-input-group: input-group-theme( ); ``` - + ページ内に `box`、`border`、`line`、`search` といった複数のタイプの input-group が存在する場合は、特定のタイプごとにテーマ変数のスコープを設定するのが最適です。
例:
@@ -1063,11 +1063,11 @@ In the sample below, you can see how using the input group with customized CSS v - + The sample uses the [Indigo Light](/themes/sass/schemas#predefined-schemas) schema. - + If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type.
For example:
@@ -1122,7 +1122,7 @@ For instance, setting a dark `$box-background` globally could cause the borders ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/interactivity/right-to-left-support.mdx b/docs/angular/src/content/jp/components/interactivity/right-to-left-support.mdx index 3b1502f42c..78999fd2dc 100644 --- a/docs/angular/src/content/jp/components/interactivity/right-to-left-support.mdx +++ b/docs/angular/src/content/jp/components/interactivity/right-to-left-support.mdx @@ -58,6 +58,6 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; ``` - + 現在、`Igx-Grid` コンポーネントは部分的 (視覚的) RTL のみをサポートしています。 diff --git a/docs/angular/src/content/jp/components/label-input.mdx b/docs/angular/src/content/jp/components/label-input.mdx index d24f8dfbd6..b6d2aea5f0 100644 --- a/docs/angular/src/content/jp/components/label-input.mdx +++ b/docs/angular/src/content/jp/components/label-input.mdx @@ -137,7 +137,7 @@ public user = { ``` - + ディレクティブを使用するには、 をインポートする必要があります。 @@ -155,7 +155,7 @@ public user = { ``` - + ディレクティブを使用するには、 をインポートする必要があります。 diff --git a/docs/angular/src/content/jp/components/layout.mdx b/docs/angular/src/content/jp/components/layout.mdx index 92fc0e99c7..372060efc9 100644 --- a/docs/angular/src/content/jp/components/layout.mdx +++ b/docs/angular/src/content/jp/components/layout.mdx @@ -47,7 +47,7 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout
- + 順序を反転するには、`="true"` を使用します。 @@ -91,7 +91,7 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout - + ディレクティブはそのコンテナーの**直下**の子のフロー方向に影響します。 diff --git a/docs/angular/src/content/jp/components/linear-progress.mdx b/docs/angular/src/content/jp/components/linear-progress.mdx index ea40c8c383..d8beb24416 100644 --- a/docs/angular/src/content/jp/components/linear-progress.mdx +++ b/docs/angular/src/content/jp/components/linear-progress.mdx @@ -181,7 +181,7 @@ public positionEnd: IgxTextAlign = IgxTextAlign.END;
- + 入力値が定義されていない場合、更新は ** 値の 1%**。進行を速くしたい場合、 値を (** * 1%**) より大きい値にし、より遅い進行は をデフォルト進捗状況未満にする必要があります。 diff --git a/docs/angular/src/content/jp/components/list.mdx b/docs/angular/src/content/jp/components/list.mdx index 06f47aabc8..4331ea3af6 100644 --- a/docs/angular/src/content/jp/components/list.mdx +++ b/docs/angular/src/content/jp/components/list.mdx @@ -34,7 +34,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte 次に、**app.module.ts** ファイルに `IgxListModule` をインポートします。 - + このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。 @@ -279,7 +279,7 @@ public contacts = [{ ``` - + このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `` @@ -363,7 +363,7 @@ protected get sizeStyle() { 以下は、右と左両方のパンニングを処理する方法の例です。右パンニングのイベント ハンドラーは、トースト メッセージを表示します。左パンニングのイベント ハンドラーは、 から項目を削除します。 - + リスト項目の削除はアプリケーション タスクであることに注意してください。 にデータソース参照がないため、 は項目をデータソースから削除できません。 @@ -429,7 +429,7 @@ igx-icon { } ``` - + リスト項目のパンニング時にパンニング イベントが発生するために達する必要のあるしきい値があります。 プロパティを使用するしきい値を変更できます。このプロパティのデフォルトは 0.5 でリスト項目幅の 50% を意味します。 @@ -846,7 +846,7 @@ $my-list-theme: list-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/mask.mdx b/docs/angular/src/content/jp/components/mask.mdx index aaca0c8375..fc2b64c58e 100644 --- a/docs/angular/src/content/jp/components/mask.mdx +++ b/docs/angular/src/content/jp/components/mask.mdx @@ -32,7 +32,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte 次に、**app.module.ts** ファイルに `IgxMaskModule` と `IgxInputGroupModule` をインポートします。 - + ディレクティブは、**text** タイプの入力で使用されます。 @@ -120,7 +120,7 @@ Ignite UI for Angular Mask モジュールまたはディレクティブをイ 正しく構成されていれば、ブラウザ上でデモサンプルを確認することができます。 - + `IgxMaskDirective` は IME 入力をサポートし、合成が終了するとマスクを更新します。 @@ -234,7 +234,7 @@ export class AppModule {} これが前のサンプルでどのように機能するかを確認できます。 - + コンポーネントが正しく動作するためには、`igxMask` ディレクティブの後に `igxTextSelection` を設定することが重要です。これは、両方のディレクティブが入力 `focus` イベントで動作するため、マスクが設定された後にテキスト選択が行われるからです。 diff --git a/docs/angular/src/content/jp/components/month-picker.mdx b/docs/angular/src/content/jp/components/month-picker.mdx index 689c0575c3..bb83a7e03c 100644 --- a/docs/angular/src/content/jp/components/month-picker.mdx +++ b/docs/angular/src/content/jp/components/month-picker.mdx @@ -34,7 +34,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte はじめに、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。 - + はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。 @@ -77,7 +77,7 @@ export class HomeComponent {} Ignite UI for Angular Calendar モジュールまたは Month Picker コンポーネントをインポートしたので、`igx-month-picker` コンポーネントの使用を開始できます。 - + が日付のローカライズおよび書式設定のために [Intl](https://developer.mozilla.org/ja-jp/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) を使用します。 対象プラットフォームがその API をサポートしない場合、[適切なポリフィル](https://github.com/andyearnshaw/Intl.js/)を使用してください。 @@ -238,7 +238,7 @@ $my-calendar-theme: calendar-theme( プロパティの完全なリストは、[calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme) で確認できます。構文は次のとおりです: - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/navbar.mdx b/docs/angular/src/content/jp/components/navbar.mdx index 4ff16ddd37..809442ed91 100644 --- a/docs/angular/src/content/jp/components/navbar.mdx +++ b/docs/angular/src/content/jp/components/navbar.mdx @@ -87,7 +87,7 @@ Ignite UI for Angular Navbar モジュールまたはディレクティブをイ ``` - + は、デザインで Material フォントセットを使用します。 @@ -215,7 +215,7 @@ export class NavbarSample3Component { - + または が指定される場合、デフォルトの は使用されません。 @@ -261,7 +261,7 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、 ``` - + または の場合、デフォルト が使用されません。 @@ -320,7 +320,7 @@ $custom-navbar-theme: navbar-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。 @@ -366,7 +366,7 @@ $custom-navbar-theme: navbar-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/navdrawer.mdx b/docs/angular/src/content/jp/components/navdrawer.mdx index c3cad49fcd..f491f862ad 100644 --- a/docs/angular/src/content/jp/components/navdrawer.mdx +++ b/docs/angular/src/content/jp/components/navdrawer.mdx @@ -36,7 +36,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte はじめに、**app.module.ts** ファイルに `IgxNavigationDrawerModule` をインポートします。 - + はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。 @@ -103,7 +103,7 @@ export class HomeComponent { } ``` - + このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `` @@ -148,7 +148,7 @@ Drawer のコンテンツを `igxDrawer` ディレクティブでデコレート > `igxDrawerMini` ディレクティブでデコレートした追加のテンプレートを閉じた状態の代わりの [Mini バリアント](#ミニ-バリアント)として提供できます。 - + Navigation Drawer はコンテンツの上にフローティングさせるか、隣に固定配置できます。デフォルトでは、ドロワーはビューポートのサイズに応じてこれらのモードを切り替えます。詳細は[モード](#モード)を参照してください。 @@ -230,7 +230,7 @@ export class AppComponent { より大きい画面に Drawer をピン固定すると、相対的な位置を使用して通常のコンテンツ フローで配置されます。アプリケーションに Drawer を切り替える方法を提供するかどうかにより、ピン固定モードを使用して、[確定または永続的な動作](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior)を実装できます。 - + Navigation Drawer はデフォルトでレスポンシブです。画面サイズに基づいて固定解除および固定モード間で切り替わります。この動作は プロパティによって制御され、falsy 値 (0 など) を設定すると無効になります。 @@ -406,7 +406,7 @@ import { RouterModule } from '@angular/router'; ``` - + この例では、`igxDrawerItem` を使用せずに、カスタム `igxDrawer` コンテンツ (この場合は `igx-tree`) を直接使用します。 @@ -437,7 +437,7 @@ export const menusRoutes: Routes = [ ルートの `children` プロパティから抽出された子ルーティングもあります。このサンプルは 2 つの階層レベルを示していますが、ルーティングに複数の階層がある場合は、[ツリー ノード テンプレート](tree.md#テンプレート化)で 2 番目の下のレベルを定義するだけです。 - + 空のルート リダイレクト、エラー ルート、ページが見つからないなどの一部のルートは、可視化に直接適さない場合があることに注意してください。ツリーをルーティング オブジェクトにバインドする前に、コンポーネント ロジックでオブジェクトからそれらのルートを削除できます。 @@ -478,7 +478,7 @@ $custom-theme: navdrawer-theme( } ``` - + コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。 diff --git a/docs/angular/src/content/jp/components/nuget-feed.mdx b/docs/angular/src/content/jp/components/nuget-feed.mdx index bc5965db54..8368bc48a9 100644 --- a/docs/angular/src/content/jp/components/nuget-feed.mdx +++ b/docs/angular/src/content/jp/components/nuget-feed.mdx @@ -36,7 +36,7 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet NuGet Package Manager Package Sources - Infragistics Server - + このソースから NuGet パッケージを初めて追加する場合、Infragistics 資格情報の入力を求められます。 diff --git a/docs/angular/src/content/jp/components/overlay-position.mdx b/docs/angular/src/content/jp/components/overlay-position.mdx index 3bbfc16d7a..61f2ebe54c 100644 --- a/docs/angular/src/content/jp/components/overlay-position.mdx +++ b/docs/angular/src/content/jp/components/overlay-position.mdx @@ -76,11 +76,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- + ストラテジが HorizontalDirection = Center / VerticalDirection = Middle を使用している場合、要素はサイズ変更されません。 - + オーバーレイ要素はサイズ変更**されます**が配置ストラテジは `overflow` を**処理しません**。たとえば、サイズ変更時の要素に `overflow-y` が必要な場合、適切なスタイルを組み込んで提供します。 diff --git a/docs/angular/src/content/jp/components/overlay-styling.mdx b/docs/angular/src/content/jp/components/overlay-styling.mdx index 19c9c5d487..4886927739 100644 --- a/docs/angular/src/content/jp/components/overlay-styling.mdx +++ b/docs/angular/src/content/jp/components/overlay-styling.mdx @@ -64,7 +64,7 @@ $my-drop-down-theme: drop-down-theme( } ``` - + コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。 @@ -120,7 +120,7 @@ $my-overlay-theme: overlay-theme( これで、**すべて**のモーダル オーバーレイの背景が紫色になります。 - + コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。 diff --git a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx index af5949b614..546cdc8790 100644 --- a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx +++ b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx @@ -17,7 +17,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; ピボットおよびフラット グリッド コンポーネント クラスは、共通ベースを継承しているため、いくつかの機能を共有しています。 - + 一部の機能は、ピボット テーブルのコンテキストで意味のある動作をしないため、`IgxPivotGrid` で有効にできません。以下が含まれます。 - CRUD 操作 - グループ化 @@ -34,13 +34,13 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; すべてのディメンション (フィルター、行、列) は、チップ UI または API を介してフィルター処理できます。この機能は埋め込まれており、デフォルトで有効になっています。 - + フィルタリング ディメンションを使用して、ピボット ビューの一部ではないデータ値を除外できます。 フィルタリング UI は、ディメンション チップ フィルターア イコンを介して開くことができ、一意のディメンション値の Excel スタイルのフィルタリングを可能にします。 - + すべてのフィルタリング チップに十分なスペースがない場合、ピボット グリッドには、ドロップダウンに切り取られたものが表示されます。エンドユーザーはそこでアクセスして操作できます。 @@ -109,7 +109,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { } ``` - + バージョン `18.0.0` 以降、Ignite UI for Angular では行ディメンションの `width` を `auto` に設定できます。 @@ -184,7 +184,7 @@ rows: [ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom }; ``` - + 行集計関連のオプション (`horizontalSummary` および `horizontalSummariesPosition`) は、`Horizontal` レイアウト モードにのみ適用されます。 @@ -204,7 +204,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h `rows`、`column`、`filter` (ディメンション チップ) のチップは、これらの領域のいずれかから他の任意の場所に移動できます。 これらの領域のチップは `values` 領域に移動できず、`values` 領域のチップはどのディメンション領域にも移動できません。 - + ピボット グリッドのチップをピボット データ セレクターに移動したり、ピボット データ セレクターの項目をピボット グリッドに移動したりすることはできません。 diff --git a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx index acb321861e..0b7e18ae11 100644 --- a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx +++ b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx @@ -105,7 +105,7 @@ Angular ピボット グリッド コンポーネントは、 + `memberName` は一意である必要があります。同じフィールドに異なるディメンションが必要な場合は、それぞれにカスタムの一意の `memberName` を定義し、`memberFunction` を介して関連する値を抽出できます。 @@ -171,7 +171,7 @@ It also allows for further customization via the second option parameter in orde 値の構成には、提供された `data` のフィールドに一致する `member` が必要です。または、より複雑なカスタム シナリオでは、`aggregatorName` またはカスタムの `aggregator` 関数のいずれかを定義できます。 - + `member` は一意である必要があります。同じフィールドに対して異なる値の集計が必要な場合は、それぞれにカスタムの一意の `member` を定義し、`aggregator` 関数を使用して関連する値を抽出できます。 @@ -230,7 +230,7 @@ public static totalMax: PivotAggregation = (members, data: any) => { ピボット値は、`displayName` プロパティも提供します。この値のカスタム名を列ヘッダーに表示するために使用できます。 - + `aggregatorName` と `aggregator` 関数の両方を定義すると、`aggregatorName` が優先されます。何も設定されていない場合、エラーがスローされます。 diff --git a/docs/angular/src/content/jp/components/query-builder-model.mdx b/docs/angular/src/content/jp/components/query-builder-model.mdx index dd1590b3c3..3eb3e39ac1 100644 --- a/docs/angular/src/content/jp/components/query-builder-model.mdx +++ b/docs/angular/src/content/jp/components/query-builder-model.mdx @@ -85,7 +85,7 @@ JSON.stringify(tree, null, 2); のコンテキストでは、_IN / NOT-IN_ 演算子は、_WHERE_ 句で新しく公開されたサブクエリ機能とともに使用されます。 - + サブクエリは、外部クエリの条件として使用されるデータを取得するために使用される、別のクエリ内にネストされたクエリです。 diff --git a/docs/angular/src/content/jp/components/query-builder.mdx b/docs/angular/src/content/jp/components/query-builder.mdx index 5b8ab99c1e..904d1eb203 100644 --- a/docs/angular/src/content/jp/components/query-builder.mdx +++ b/docs/angular/src/content/jp/components/query-builder.mdx @@ -160,11 +160,11 @@ ngAfterViewInit(): void { - チップはグループやサブグループにドラッグすることもできます。たとえば、式のグループ化/グループ解除は、式のドラッグ機能によって実行されます。 既存の条件をグループ化するには、まず「追加」グループ ボタンを使用して新しいグループを追加する必要があります。次に、ドラッグすることで、必要な式をそのグループに移動できます。グループを解除するには、すべての条件を現在のグループの外にドラッグします。最後の条件を移動したら、グループは削除されます。 - + あるクエリ ツリーのチップを別のクエリ ツリーにドラッグすることはできません (例: 親から内部へ、またはその逆)。 - + Chips from one query tree cannot be dragged in another, e.g. from parent to inner and vice versa. @@ -178,11 +178,11 @@ Chips from one query tree cannot be dragged in another, e.g. from parent to inne - Space/Enter - フォーカスされた式が編集モードに入ります。チップが移動された場合、これにより新しい位置が確認されます。 - Esc - チップの並べ替えがキャンセルされ、元の位置に戻ります。 - + キーボードの並べ替えは、マウスのドラッグ アンド ドロップと同じ機能を提供します。チップを移動したら、ユーザーは新しい位置を確認するか、並べ替えをキャンセルする必要があります。 - + Keyboard reordering provides the same functionality as mouse Drag & Drop. Once a chip is moved, user has to confirm the new position or cancel the reorder. @@ -355,7 +355,7 @@ $custom-icon-button: outlined-icon-button-theme( この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、[`button-theme`]({environment:sassApiUrl}/themes#function-button-theme)、[`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme)、[`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme)、[`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) テーマは、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。 - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.md)のトピックをご覧ください。 @@ -374,7 +374,7 @@ $custom-icon-button: outlined-icon-button-theme( } ``` - + コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、クエリ ビルダー コンポーネント内のコンポーネント (ボタン、チップ、ドロップダウンなど) のスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 @@ -382,7 +382,7 @@ $custom-icon-button: outlined-icon-button-theme( - + サンプルは、`Change Theme` (テーマの変更) で選択したグローバル テーマの影響を受けません。 @@ -417,7 +417,7 @@ $custom-icon-button: outlined-icon-button-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx index 0ad56931c5..b426369304 100644 --- a/docs/angular/src/content/jp/components/radio-button.mdx +++ b/docs/angular/src/content/jp/components/radio-button.mdx @@ -222,7 +222,7 @@ $custom-radio-theme: radio-theme( - + サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 @@ -259,7 +259,7 @@ class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/rating.mdx b/docs/angular/src/content/jp/components/rating.mdx index e037694bc4..8674baa03c 100644 --- a/docs/angular/src/content/jp/components/rating.mdx +++ b/docs/angular/src/content/jp/components/rating.mdx @@ -81,7 +81,7 @@ import { IgcFormsModule } from 'igniteui-angular/directives'; export class AppModule { } ``` - + `IgcFormsModule` をインポートして `ngModel` または `formControl` を使用する場合、Angular はカスタム `ControlValueAccessor` ディレクティブによって `igc-rating` タグを認識するため、`CUSTOM_ELEMENTS_SCHEMA` を含める必要はありません。 diff --git a/docs/angular/src/content/jp/components/ripple.mdx b/docs/angular/src/content/jp/components/ripple.mdx index 0aec3fa5c4..e529e95f8c 100644 --- a/docs/angular/src/content/jp/components/ripple.mdx +++ b/docs/angular/src/content/jp/components/ripple.mdx @@ -139,7 +139,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ - + `igxRippleTarget` プロパティで対象する子要素は、相対的に配置する必要があります。 @@ -170,7 +170,7 @@ $custom-ripple-theme: ripple-theme( } ``` - + `igxRiple` ディレクティブを使用したカラー セットは、カスタム テーマによるカラー セットよりも優先されます。 diff --git a/docs/angular/src/content/jp/components/select.mdx b/docs/angular/src/content/jp/components/select.mdx index fd12ff1ad7..0d0e0ba8f9 100644 --- a/docs/angular/src/content/jp/components/select.mdx +++ b/docs/angular/src/content/jp/components/select.mdx @@ -145,7 +145,7 @@ Select コンポーネントは、[入力グループ](input-group.md)に適用 - + Select コンポーネントに が指定されておらず、選択も行われていない場合、`igxLabel` は遷移し、プレースホルダーが適切な場所に表示されます。 @@ -274,7 +274,7 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: - 必要な項目の最初の数文字を入力してすばやく特定の項目に移動できます。 - `Enter` キーまたは `Space` キーを使用して項目を選択します。 - + `igx-select` は項目の**単一**選択のみをサポートします。 @@ -357,7 +357,7 @@ export class MyClass implements OnInit { } ``` - + テンプレートと同様に関数 `open` 引数としてカスタム設定を渡す場合、`igx-select` は関数 `open` 提供されるものを使用します。ただし、`opening` たは `opened` などのインターナル イベントにバインドした場合は、`igx-select` はテンプレートの設定を使用します。 @@ -450,7 +450,7 @@ $custom-select-theme: select-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/simple-combo.mdx b/docs/angular/src/content/jp/components/simple-combo.mdx index 221d79bca3..c70319d621 100644 --- a/docs/angular/src/content/jp/components/simple-combo.mdx +++ b/docs/angular/src/content/jp/components/simple-combo.mdx @@ -115,7 +115,7 @@ Simple ComboBox は複雑なデータ (つまりオブジェクト) の配列に ``` - + データ ソースが単純なタイプ (`string[]`、`number[]` など）で構成されている場合、`valueKey` と `displayKey` を**指定しないでください**。 @@ -209,7 +209,7 @@ Simple ComboBox を閉じてフォーカスを合わせると、次のように - `Tab` キーは、コンボボックスの外部にある次のフォーカス可能な要素へフォーカスを移動します。 - + その他のキー ストロークはすべて入力によって処理されます。 @@ -372,7 +372,7 @@ $custom-drop-down-theme: drop-down-theme( } ``` - + コンポーネントは、[`IgxOverlay`](overlay.md) サービスを使用して、Simple ComboBox 項目リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、 を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.md)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。 @@ -389,7 +389,7 @@ $custom-drop-down-theme: drop-down-theme( - シンプルなコンボボックスが `ngModel` でバインドされ、`required` とマークされている場合、`null`、`undefined`、`''` の値は選択できません。 - シンプルなコンボボックスがリモート サービスにバインドされ、定義済みの選択がある場合、要求されたデータが読み込まれるまでその入力は空白のままになります。 - + Simple ComboBox は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` 制限は Simple ComboBox に対して有効です。詳細については、[igxForOf 既知の制限](for-of.md#既知の制限) の既知の問題のセクションを参照してください。 diff --git a/docs/angular/src/content/jp/components/slider/slider.mdx b/docs/angular/src/content/jp/components/slider/slider.mdx index 772303a340..bd96b81ba7 100644 --- a/docs/angular/src/content/jp/components/slider/slider.mdx +++ b/docs/angular/src/content/jp/components/slider/slider.mdx @@ -145,7 +145,7 @@ export class SampleComponent { 最初に、 入力を true に設定し、スライダー タイプを指定します。次に、 および プロパティを設定し、最小値および最大値を定義します。 - + 連続スライダーには、トラック上にステップ インジケーターがなく、操作中に表示されるつまみラベルがありません。 @@ -227,7 +227,7 @@ export class SampleComponent { - + RANGE タイプのスライダーを使用する場合、`ngModel` へのバインディングはスライダーからモデルを更新する方向でのみ動作します。両方の値に双方向バインディングを使用するには、`lowerValue` と `upperValue` バインディングを利用できます。 @@ -253,13 +253,13 @@ RANGE タイプのスライダーを使用する場合、`ngModel` へのバイ ### ラベル モード ここまでで目盛りでのみ数値を表示しましたが、基本的な値の配列を使用することで、情報を提示するために使用できる別の方法があります。 - + 初期値の配列には少なくとも 2 つの値を含める必要があり、含めない場合は `labelsView` が有効になりません。 このルールに対応する定義ができたら、`labels` 入力プロパティに渡す準備ができました。これは、データを`トラック`全体に均等に分散させることによって処理します。ラベル値は、コレクション内で定義したすべての初期値を表します。それらは、 または のいずれかを要求することによって、API を通じていつでもアクセスできます。 - + が有効になっているときは、、、 の入力が制御されることに注意してください。 @@ -393,7 +393,7 @@ This mirrors the visualization of the **ticks** and displays them above and belo - + ### Orientation @@ -438,7 +438,7 @@ Lastly, we will see how we can provide a custom template for the **tick labels** Applying to the `ng-template` assigns the template over all **tick labels**. - + The context executes per each tick. @@ -720,7 +720,7 @@ class="!light-slider ![--thumb-color:#7B9E89]" ``` - + The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. diff --git a/docs/angular/src/content/jp/components/snackbar.mdx b/docs/angular/src/content/jp/components/snackbar.mdx index 4fc25d5c96..0c4980955c 100644 --- a/docs/angular/src/content/jp/components/snackbar.mdx +++ b/docs/angular/src/content/jp/components/snackbar.mdx @@ -326,7 +326,7 @@ $dark-snackbar: snackbar-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。 @@ -374,7 +374,7 @@ $dark-snackbar: snackbar-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/splitter.mdx b/docs/angular/src/content/jp/components/splitter.mdx index 334a696062..9ff3a5c91d 100644 --- a/docs/angular/src/content/jp/components/splitter.mdx +++ b/docs/angular/src/content/jp/components/splitter.mdx @@ -303,7 +303,7 @@ $splitter-theme: splitter-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 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 51f36eea4c..586e32a33c 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx @@ -84,7 +84,7 @@ Spreadsheet ChartAdapter は、折れ線、エリア、縦棒、ドーナツを ## 依存関係 - + 以下のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して `Workbook` を保存およびロードしています。 diff --git a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx index 2182916775..85d4a6cc73 100644 --- a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx +++ b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx @@ -114,7 +114,7 @@ Angular スプレッドシート モジュールがインポートされたの - + 次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して `Workbook` を保存およびロードしています。 diff --git a/docs/angular/src/content/jp/components/stepper.mdx b/docs/angular/src/content/jp/components/stepper.mdx index 6a1858d50f..20dd1ed1df 100644 --- a/docs/angular/src/content/jp/components/stepper.mdx +++ b/docs/angular/src/content/jp/components/stepper.mdx @@ -201,7 +201,7 @@ By default, the propert 現在のオプションではないステップが有効でない場合、現在のステップを検証するまで次のステップに進むことができません。 - + オプションのステップの有効性は考慮されません。 @@ -219,11 +219,11 @@ By default, the propert - – 前の無効化されていないステップをアクティブ化します。 - – ステッパーを初期状態にリセットします。 - + reset メソッドはステップの内容をクリアしません。これは手動で行う必要があります。 - + The reset method would not clear the step`s content. This should be done manually. @@ -251,7 +251,7 @@ Ignite UI for Angular Stepper では、タイトル、インジケーターな 向きが垂直レイアウトに設定されている場合、タイトル位置のデフォルト値は `end` です。 - + プロパティは、ステッパーの プロパティが `full` に設定されている場合に**のみ**適用できます。 @@ -267,7 +267,7 @@ Ignite UI for Angular Stepper では、タイトル、インジケーターな このように、サブタイトルが定義されている場合、それらもステップ タイトルの下に描画されます。 - + このコンテナーは、サイズ制限なしで要件に応じて再テンプレート化できます。たとえば、サイズが 24 ピクセルより大きいインジケーターを中に追加できます。 @@ -275,7 +275,7 @@ Ignite UI for Angular Stepper では、タイトル、インジケーターな では、アクティブなステップ、無効なステップ、完了したステップの描画されたインジケーターをカスタマイズできます。これは、`igxStepActiveIndicator`、`igxStepInvalidIndicator`、および `igxStepCompletedIndicator` ディレクティブで実現できます。 - + このテンプレートは、関連する状態のすべてのステップに適用されます。 @@ -302,7 +302,7 @@ The also allows you to customize the rendered indicat ``` - + This templates would be applied for all steps with the relevant state. @@ -335,7 +335,7 @@ Ignite UI for Angular は、さまざまなキーボード操作をエンドユ - End - `igx-stepper` の最後の有効なステップのヘッダーにフォーカスを移動します。 - Enter / Space - 現在フォーカスされているステップをアクティブ化します。 - + ユーザーがステップ ヘッダーで Tab キーを押すと、フォーカスはステップ コンテンツ コンテナーに移動します。コンテナーをスキップする場合、開発者は `[tabIndex]="-1"` コンテンツ コンテナーを設定する必要があります。 @@ -490,7 +490,7 @@ $stepper-theme: stepper-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/switch.mdx b/docs/angular/src/content/jp/components/switch.mdx index beb491fe2f..188bf55ee0 100644 --- a/docs/angular/src/content/jp/components/switch.mdx +++ b/docs/angular/src/content/jp/components/switch.mdx @@ -639,7 +639,7 @@ In the sample below, you can see how using the switch component with customized ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/tabbar.mdx b/docs/angular/src/content/jp/components/tabbar.mdx index 564991f9ad..e5173f51fe 100644 --- a/docs/angular/src/content/jp/components/tabbar.mdx +++ b/docs/angular/src/content/jp/components/tabbar.mdx @@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- + `igx-tab-bar` セレクターは非推奨です。代わりに を使用してください。`IgxTabBarComponent` クラスは に名前変更しました。`IgxTabBarModule` は `IgxBottomNavModule` に名前変更しました。 @@ -106,7 +106,7 @@ Ignite UI for Angular Bottom Navigation モジュールまたはディレクテ コンポーネントのテンプレートには、Bottom Navigation と 3 つの項目が含まれています。各項目は、データのヘッダーとコンテナをそれぞれ表す `igx-bottom-nav-header` コンポーネントと `igx-bottom-nav-content` コンポーネントをラップします。ヘッダーは通常、アイコンとオプションのテキスト ラベルで構成されます。Bottom Navigation コントロールはマテリアル デザイン[**アイコン**](https://material.io/icons/)と互換性があるため、アプリケーションに採用するには、メイン アプリケーション フォルダーの 'styles.css' ファイルに Material+Icons インポートを追加するだけです。 - + これまでアプリケーションで `igx-icon` を使用したことがない場合は、続行する前に必ず **app.module.ts** の `IgxIconModule` をインポートしてください。 @@ -458,13 +458,13 @@ $dark-bottom-nav: bottom-nav-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。 [`bottom-nav-theme`]({environment:sassApiUrl}/themes#function-bottom-nav-theme) は、tabs コンポーネントのスタイル設定で多くのパラメーターが利用できます。 - + 項目のコンテンツの一部として使用される追加コンポーネントをスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成する必要があります。 @@ -512,7 +512,7 @@ $dark-bottom-nav: bottom-nav-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/tabs.mdx b/docs/angular/src/content/jp/components/tabs.mdx index f4cf909183..26ba04095b 100644 --- a/docs/angular/src/content/jp/components/tabs.mdx +++ b/docs/angular/src/content/jp/components/tabs.mdx @@ -171,7 +171,7 @@ Sample below demonstrates how tabs get aligned when switching between `tabAlignm ## Angular Tabs のカスタマイズ タブに `igxTabHeaderIcon` ディレクティブを追加します。`igx-tabs` コントロールはマテリアル デザイン [**アイコン**](https://material.io/icons/)と互換性があるため、アプリケーションにアイコンを簡単に追加できます。 - + これまでアプリケーションで `igx-icon` を使用したことがない場合は、続行する前に必ず **app.module.ts** の `IgxIconModule` をインポートしてください。 @@ -363,7 +363,7 @@ export class AppRoutingModule { } - + routerLink ディレクティブは、直接 `igx-tab-item` ではなく、`igx-tab-header` に設定されていることに注意してください。 @@ -718,13 +718,13 @@ $dark-tabs: tabs-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。 次に、[`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme) を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。 - + タブのコンテンツの一部として使用されるコンポーネントをスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成する必要があります。 @@ -772,7 +772,7 @@ $dark-tabs: tabs-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/texthighlight.mdx b/docs/angular/src/content/jp/components/texthighlight.mdx index 300b296659..3aff08b034 100644 --- a/docs/angular/src/content/jp/components/texthighlight.mdx +++ b/docs/angular/src/content/jp/components/texthighlight.mdx @@ -381,7 +381,7 @@ $dark-highlight: highlight-theme( } ``` - + コンポーネントが [`Emulated`](/hemes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。 diff --git a/docs/angular/src/content/jp/components/themes.mdx b/docs/angular/src/content/jp/components/themes.mdx index 1ec29ad0f9..23aa6c5d18 100644 --- a/docs/angular/src/content/jp/components/themes.mdx +++ b/docs/angular/src/content/jp/components/themes.mdx @@ -30,7 +30,7 @@ Ignite UI for Angular はコンポーネントのデザインを** + テーマには [**Sass**](https://github.com/sass/node-sass) が**必要**です。 @@ -111,7 +111,7 @@ $my-primary-800-text: contrast-color($my-palette, "primary", 600); このトピックの最初の例から始めます。ただし、今回は `core` と `theme` の 2 つのミックスインを組み込む予定です。現時点では `core` は引数を受け入れません。`theme` は、`$palette`、`$schema`、`$exclude`、`$roundness`、`$elevation`、`$elevations` など、いくつかのオプションを受け入れます。ここでは `$palette` 引数について説明します。 - + `core` を `theme` の前に含める必要があります。`core` ミックスインは `theme` の基本定義を提供します。 @@ -145,7 +145,7 @@ $my-color-palette: palette( タイポグラフィをカスタマイズするには、`typography` ミックスインを使用します。単一の `config` 引数を取得します。 - + `core` の後に `typography` を含める必要があります。今後のリリースで条件が変わることがあります。 diff --git a/docs/angular/src/content/jp/components/themes/index.mdx b/docs/angular/src/content/jp/components/themes/index.mdx index e6c3e823b6..204a76d29d 100644 --- a/docs/angular/src/content/jp/components/themes/index.mdx +++ b/docs/angular/src/content/jp/components/themes/index.mdx @@ -11,7 +11,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' Ignite UI for Angular を使用すると、CSS 変数を使用してすべてのコンポーネント テーマのスタイルを変更できます。本当に深く掘り下げたい場合は、強力な Sass テーマ エンジンを提供します。これにより、特定のデザイン言語に合わせた、最新のすべてのブラウザーで機能するグローバル コンポーネント テーマを作成できます。 - + このドキュメントでは、バージョン 12 以降の Ignite UI for Angular のテーマ システムについて説明します。バージョン 12 以降、**CSS 変数は、グローバルおよびコンポーネント テーマを変更するための推奨される方法です**。 バージョン 12 より前のバージョンと同様に、Sass テーマ ライブラリを引き続き使用できます。 @@ -34,7 +34,7 @@ Ignite UI for Angular には、パッケージの一部として次のテーマ ] ``` - + `ng add igniteui-angular` パッケージをインストールした場合は、すでに `igniteui-angular.css` が styles 配列に追加されていることに気付くでしょう。 diff --git a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx index 25ae74871f..eea2d91173 100644 --- a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx +++ b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx @@ -203,7 +203,7 @@ $custom-mat-light-theme: mat.define-light-theme(( )); ``` - + Ignite UI for Angular が提供するパレットと新しいパレットの作成方法については、[`Sass のパレット`](../sass/palettes.md) セクションを参照してください。 diff --git a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx index 515653bcd0..0b8d9ec668 100644 --- a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx +++ b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx @@ -175,7 +175,7 @@ $dark-primary: color($custom-dark-palette, "primary"); $dark-secondary: color($custom-dark-palette, "secondary"); ``` - + Ignite UI for Angular が提供するパレットと新しいパレットの作成方法については、[`Sass のパレット`](../sass/palettes.md) セクションを参照してください。 diff --git a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx index d47cf98655..6a0d669017 100644 --- a/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx +++ b/docs/angular/src/content/jp/components/themes/misc/tailwind-classes.mdx @@ -19,7 +19,7 @@ Ignite UI for Angular offers full theming customization through CSS variables an ## 概要 - + このガイドでは、**Ignite UI for Angular** がすでにインストールされていることを前提としています。そうでない場合は、次を実行します: ```cmd @@ -110,7 +110,7 @@ Tailwind が提供するすべてのシャドウ関連のユーティリティ 各クラスは、[Ignite UI のタイプ スケール](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography)に応じて、必要なすべてのフォント設定、間隔、サイズを適用します。 - + これらのカスタム タイポグラフィ ユーティリティは、`ig-typography` の外部でのみ機能します。トップ レベル要素に `ig-typography` CSS クラスを設定すると、これらのスタイルは適用されません。
@@ -123,7 +123,7 @@ Tailwind が提供するすべてのシャドウ関連のユーティリティ - + このサンプルは架空の完全カスタム例であり、Ignite UI コンポーネント ライブラリの一部ではありません。 diff --git a/docs/angular/src/content/jp/components/themes/palettes.mdx b/docs/angular/src/content/jp/components/themes/palettes.mdx index 631fd7194c..73be1b8626 100644 --- a/docs/angular/src/content/jp/components/themes/palettes.mdx +++ b/docs/angular/src/content/jp/components/themes/palettes.mdx @@ -49,7 +49,7 @@ Ignite UI for Angular は、`primary`、`secondary`、`surface`、`gray`、`info 上記のカラーに加えて、各カラー バリエーションに **Level AA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) 準拠の `contrast` カラーも含まれています。つまり、対応する `contrast` カラー バリエーションをベースカラー バリエーションの前景カラーとして安全に使用できます。 - + コントラスト カラーは CSS 相対カラーであり、対応するシェード カラー (primary、secondary など) に基づいて実行時に計算されます。 @@ -84,7 +84,7 @@ Ignite UI for Angular は、`primary`、`secondary`、`surface`、`gray`、`info コントラスト カラーは、指定されたカラーの輝度と選択されたコントラスト レベルに基づいて、 CSS ランタイムによって最適なコントラスト カラーが計算されます。メイン カラー バリエーション (`500`) を変更すると、コントラスト カラーも更新されます。 - + コントラスト レベルは、`palette` ミックスインを使用してグローバルに指定することも、特定の要素のスコープ内で `adaptive-contrast` ミックスインを使用して指定することもできます。どちらも、事前定義された値 `a`、`aa`、または `aaa` のいずれかを受け入れます。 diff --git a/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx b/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx index bcfcf5faea..4c5eb1e659 100644 --- a/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx +++ b/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx @@ -72,7 +72,7 @@ $my-color-palette: palette( `core` と `theme` ミックスインが何をするか説明しましょう。`core` ミックスインは、強化されたアクセシビリティ (色弱ユーザーに適した色など) やすべてのコンポーネントの印刷スタイルの追加など、いくつかの構成を処理します。`theme` ミックスインには、個々のコンポーネント スタイル (除外リストにあるものを除く) が含まれ、コンポーネントの `$exclude` リストにリストされていないパレット、スキーマ、エレベーション、および丸みを構成します。 - + `theme` の前に `core` を含めることが不可欠です。`core` ミックスインは、`theme` ミックスインが正しく機能するために必要なすべての基本定義を提供します。 diff --git a/docs/angular/src/content/jp/components/themes/sass/index.mdx b/docs/angular/src/content/jp/components/themes/sass/index.mdx index 10484f18e7..3d83ad0555 100644 --- a/docs/angular/src/content/jp/components/themes/sass/index.mdx +++ b/docs/angular/src/content/jp/components/themes/sass/index.mdx @@ -24,7 +24,7 @@ Ignite UI for Angular doesn't shy away from exposing its Sass theming API so you テーマ エンジンを完全に制御できるように、各コンセプトを詳細に説明し、関連する API を説明します。 - + [**Sass**](https://sass-lang.com) テーマ ライブラリは強力ですが、ほとんどのユーザーは少数の CSS 変数を変更するだけでデフォルトのテーマをカスタマイズできます。最初に CSS 変数のドキュメントを読むことをお勧めします。Sass は、作成したテーマをより深いレベルで変更する場合にのみ使用してください。例えば、同じコンポーネントに複数の異なる再利用可能なテーマ バリエーションを作成する場合、またはアプリケーションで使用するコンポーネントのスタイルのみを含めるために生成された CSS をツリーシェークする場合です。 diff --git a/docs/angular/src/content/jp/components/themes/sass/typography.mdx b/docs/angular/src/content/jp/components/themes/sass/typography.mdx index ca60c2eb80..3a27c4027c 100644 --- a/docs/angular/src/content/jp/components/themes/sass/typography.mdx +++ b/docs/angular/src/content/jp/components/themes/sass/typography.mdx @@ -25,7 +25,7 @@ Ignite UI for Angular は、テーマごとに 4 つのデフォルトのタイ ## 使用方法 - + デフォルトではタイポグラフィ スタイルを適用しません。アプリケーションでタイポグラフィを使用するには、最上位要素に `ig-typography` CSS クラスを設定し、ベース `.scss` ファイルに `typography` ミックスインを含める必要があります。 @@ -67,7 +67,7 @@ $h1-style: type-style( $my-type-scale: type-scale(...); ``` - + 13 のスケール カテゴリごとにタイプ スタイルを指定する必要があります。上記のように、`type-style` 関数を使用してスタイルを生成できます。 diff --git a/docs/angular/src/content/jp/components/themes/typography.mdx b/docs/angular/src/content/jp/components/themes/typography.mdx index 1452b0be67..a90e9c7331 100644 --- a/docs/angular/src/content/jp/components/themes/typography.mdx +++ b/docs/angular/src/content/jp/components/themes/typography.mdx @@ -42,7 +42,7 @@ Ignite UI for Angular のタイポグラフィは、[マテリアル タイプ 各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Boostrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。 ## 使用方法 - + デフォルトではタイポグラフィ スタイルを適用しません。アプリケーションでインフラジスティックスのタイポグラフィを使用するには、`ig-typography` CSS をトップ レベルの要素に設定する必要があります。そのすべての子がタイポグラフィ スタイルを使用するようになります。 diff --git a/docs/angular/src/content/jp/components/time-picker.mdx b/docs/angular/src/content/jp/components/time-picker.mdx index 6ee0ca98da..b023e0aee0 100644 --- a/docs/angular/src/content/jp/components/time-picker.mdx +++ b/docs/angular/src/content/jp/components/time-picker.mdx @@ -40,7 +40,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte 次に、**app.module.ts** ファイルに `IgxTimePickerModule` をインポートします。 - + IgxTimePicker は、タッチ操作において、**BrowserAnimationsModule** と **HammerModule** (オプション) に依存しています。これらも AppModule に追加する必要があります。 @@ -280,7 +280,7 @@ Time Picker コンポーネントは、さまざまな表示形式と入力形 ``` - + `IgxTimePicker` が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。 @@ -300,7 +300,7 @@ Time Picker コンポーネントは、コア FormsModule [NgModel](https://angu および を指定して、ユーザー入力を制限できます。その場合、ドロップダウン/ダイアログにはその範囲内の時刻のみが表示されます。ただし、ドロップダウン モードでは、ユーザーが無効な時間を入力する可能性があります。 イベントを処理して、それが発生した場合にユーザーに通知することができます。 - + 最小/最大値は、Date オブジェクトまたは `ISO 8601` 形式の時刻のみの文字列である必要があります。 @@ -401,7 +401,7 @@ $my-time-picker-theme: time-picker-theme( ); ``` - + Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.md) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 @@ -425,7 +425,7 @@ export class TimepickerStylingComponent { Time Picker の項目がコンポーネントのホスト**内**に適切にレンダリングされます。つまり、カスタム テーマが有効になります。 - + [`IgxOverlayService`](overlay.md) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.md)をご覧ください。 diff --git a/docs/angular/src/content/jp/components/toast.mdx b/docs/angular/src/content/jp/components/toast.mdx index 5647d74c68..481620b440 100644 --- a/docs/angular/src/content/jp/components/toast.mdx +++ b/docs/angular/src/content/jp/components/toast.mdx @@ -227,7 +227,7 @@ $custom-toast-theme: toast-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。 @@ -272,7 +272,7 @@ $custom-toast-theme: toast-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/toggle.mdx b/docs/angular/src/content/jp/components/toggle.mdx index d18a6295c9..939c0c44f8 100644 --- a/docs/angular/src/content/jp/components/toggle.mdx +++ b/docs/angular/src/content/jp/components/toggle.mdx @@ -119,7 +119,7 @@ export class Class { `igxToggle` ディレクティブは プロバイダーを使用します。`open`、`close`、`toggle` メソッドは、コンテンツの表示方法を制御するオプションのオーバーレイ設定を受け取ります。省略した場合は、上のサンプルのようにデフォルトのオーバーレイ設定が使用されます。 - + デフォルトで、 プロパティは `true`に設定されています。この機能を無効にするには、プロパティを `false` に設定する必要があります。さらに、 プロパティのデフォルトの設定は `false` であるため、利用するには、`true` に設定する必要があります。 @@ -157,7 +157,7 @@ export class Class { この機能を利用するには、`IgxToggleModule` の `IgxToggleActionDirective` を使用して `IgxToggleDirective` を割り当てる必要があります。 - + トリガー (トグル) として使用する要素で を宣言します。 @@ -175,7 +175,7 @@ export class Class { - + デフォルトで、`IgxToggleActionDirective` はホスト要素を プロパティから除外します。したがって、ホスト要素をクリックしてもイベントは発生しません。さらに、このディレクティブはホスト要素をオーバーレイ設定の として設定します。 diff --git a/docs/angular/src/content/jp/components/tooltip.mdx b/docs/angular/src/content/jp/components/tooltip.mdx index c0dd560d1d..d24df509b5 100644 --- a/docs/angular/src/content/jp/components/tooltip.mdx +++ b/docs/angular/src/content/jp/components/tooltip.mdx @@ -281,7 +281,7 @@ export class AppModule {} ツールチップを表示または非表示にするまでの時間を制御する場合は、 ディレクティブの と プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。 - + の組み込み UI インタラクションは、 および プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や の API を使用する場合、 や は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 @@ -291,7 +291,7 @@ export class AppModule {} - + および の設定は、 自体ではなく とのインタラクション時にのみ有効です。 のデフォルトのイベント トリガーは `pointerenter` および `pointerleave` です。 @@ -327,7 +327,7 @@ public overlaySettings: OverlaySettings = { }; ``` - + または で設定したプロパティは、デフォルト設定の同じプロパティをオーバーライドし、ツールチップの動作に直接影響します。 @@ -360,7 +360,7 @@ public overlaySettings: OverlaySettings = {
Her name is Madelyn James
``` - + `closeButtonTemplate` で追加したカスタム コンテンツは、sticky モードのときのみレンダリングされます。 @@ -459,7 +459,7 @@ $dark-tooltip: tooltip-theme( ); ``` - + ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.md)、[`IgxSwitch`](switch.md) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 @@ -523,7 +523,7 @@ $dark-tooltip: tooltip-theme(
``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/transaction.mdx b/docs/angular/src/content/jp/components/transaction.mdx index 8e37338716..78cd8e3621 100644 --- a/docs/angular/src/content/jp/components/transaction.mdx +++ b/docs/angular/src/content/jp/components/transaction.mdx @@ -14,7 +14,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' - + 上記のスキーマからのデータ変換は必須ではありません。 を使用するためにパイプを使用する必要はありません。 diff --git a/docs/angular/src/content/jp/components/tree.mdx b/docs/angular/src/content/jp/components/tree.mdx index ee48928f88..77e616b9fb 100644 --- a/docs/angular/src/content/jp/components/tree.mdx +++ b/docs/angular/src/content/jp/components/tree.mdx @@ -490,7 +490,7 @@ $custom-tree-theme: tree-theme( ``` - + ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 diff --git a/docs/angular/src/content/jp/components/treegrid/groupby.mdx b/docs/angular/src/content/jp/components/treegrid/groupby.mdx index 1385e68d5c..0cdc19c199 100644 --- a/docs/angular/src/content/jp/components/treegrid/groupby.mdx +++ b/docs/angular/src/content/jp/components/treegrid/groupby.mdx @@ -50,7 +50,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; ``` - + ソートが正しく機能するためには、`IgxTreeGridComponent` の `sortStrategy` プロパティを `IgxGroupedTreeGridSorting` のインスタンスに設定する必要があります。 @@ -60,7 +60,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; - dropAreaTemplate - a template for the drop area that can be used to override the default drop area template - dropAreaMessage - a string that can be used to override the default message for the default drop area template - + In order for the sorting to work correctly you should set the `sortStrategy` property of the `IgxTreeGridComponent` to an instance of `IgxGroupedTreeGridSorting`. diff --git a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx index d4c2290965..c8ded6de37 100644 --- a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx +++ b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx @@ -76,7 +76,7 @@ Ignite UI for Angular Tree Grid モジュールまたはディレクティブを ## Angular Tree Grid の使用 - + このコンポーネントは、**オプションで** [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) を利用できます。タッチ操作が正しく動作するために、アプリケーションのルート モジュールにインポートできます。 @@ -90,7 +90,7 @@ Ignite UI for Angular Tree Grid モジュールまたはディレクティブを - - 値を含む標準セル。 - - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリー セル。インナー の プロパティでアクセスできる行コンポーネント レベル。 - + 各行にはツリー セルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。 @@ -268,7 +268,7 @@ export class MyComponent implements OnInit { - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 @@ -284,7 +284,7 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + これは `igxTreeGrid` の試験中の機能です。これは、ツリー グリッドで予期しない動作が発生する可能性があることを意味します。このような動作が発生した場合は、[Github](https://github.com/IgniteUI/igniteui-angular/discussions) ページでお問い合わせください。 @@ -295,7 +295,7 @@ platformBrowserDynamic() |ツリー セルのテンプレート化|ツリーセルをテンプレート化する場合、セルの境界外にスパンするコンテンツはオーバレイに配置しない限り表示されません。| |グループ化|グループ化機能は、ツリーグリッドに継承されるためサポートされません。| - + ツリー グリッドには、25 レベルの深度制限があります。それ以上のレベルをサポートするには、アプリケーションにカスタム CSS クラスを追加する必要があります。以下には、このような CSS クラスの例を示します。 @@ -305,7 +305,7 @@ platformBrowserDynamic() } ``` - + `igxTreeGrid` は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限が `igxTreeGrid` で有効です。詳細については、[igxForOf 既知の問題](../for-of.md#既知の問題と制限) のセクションを参照してください。 diff --git a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx index cc30dbaff8..5c1d9ea05b 100644 --- a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx +++ b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx @@ -175,7 +175,7 @@ ngAfterViewInit(): void { {ComponentTitle} ツールバーを表示したくない場合は、 および メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。 - + {ComponentTitle} で `quickFilter`/`excelStyleFilter` と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。{ComponentTitle} の最終的なフィルター結果は、2 つのフィルターの結果の共通部分です。 @@ -255,7 +255,7 @@ $custom-query-builder: query-builder-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -276,11 +276,11 @@ igx-advanced-filtering-dialog { } ``` - + 作成した **query-builder-theme** を `igx-advanced-filtering-dialog` 内に含めることで、このカスタム テーマは高度なフィルタリング ダイアログ内のクエリ ビルダーにのみに影響します。そうしない場合、アプリケーション内の他のクエリ ビルダー コンポーネントにも影響します。 - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 @@ -322,7 +322,7 @@ $custom-query-builder: query-builder-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
diff --git a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx index 09be07f8f7..2803e0c454 100644 --- a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx +++ b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx @@ -41,7 +41,7 @@ Below is a detailed example of how is Batch Editing enabled for the {ComponentTi
- + トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。 @@ -56,7 +56,7 @@ Below is a detailed example of how is Batch Editing enabled for the {ComponentTi
- + Transaction state consists of all the updated, added and deleted rows, and their last states. @@ -123,7 +123,7 @@ export class AppModule {} ... ``` - + トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、`{ComponentTitle}` は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで を呼び出すことです。 @@ -151,7 +151,7 @@ export class AppModule {} ``` - + プロパティを無効にすると `{ComponentTitle}` を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。 @@ -242,7 +242,7 @@ export class HierarchicalGridBatchEditingSampleComponent { - + The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, `{ComponentTitle}` would stay in edit mode. One way to do that is by calling in the respective method. @@ -251,7 +251,7 @@ The transactions API won't handle end of edit and you'd need to do it by yoursel Deleting a parent node in `{ComponentTitle}` has some peculiarities. If you are using a hierarchical data, the children will be deleted when deleting their parent. If you are using a flat data, you may set the desired behavior using the property of `{ComponentTitle}`. This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to `true`). - + Disabling property will modify `{ComponentTitle}` to create transactions on cell change and will not expose row editing overlay in the UI. diff --git a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx index 2b46633ca9..e5075a0781 100644 --- a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx +++ b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx @@ -55,7 +55,7 @@ Ignite UI for Angular {ComponentTitle} コンポーネントは、Angular CRUD
- + 任意のタイプのエディター コンポーネントで `igxCellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント ([`igxSelect`](/select.md)、[`igxCombo`](/combo.md) など) ではなく、セル要素にフォーカスが残るためです。これが、`igxFocus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の`流暢な編集フロー`が維持されます。 @@ -80,7 +80,7 @@ Ignite UI for Angular {ComponentTitle} コンポーネントは、Angular CRUD - 他のセルをシングル クリック - {ComponentTitle} で他のセルをクリックしたときに変更がサブミットされます。 - その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。 - + セルは、垂直/水平方向へのスクロールや {ComponentTitle} 以外をクリックした場合も編集モードのままです。セル編集と行編集両方で有効です。 @@ -179,16 +179,16 @@ public updateCell() {
- + 編集モードでセルの に加えられた変更は、終了時に適切な[編集イベント](editing.md#イベントの引数とシーケンス)をトリガーし、[トランザクション状態](./batch-editing.md)に適用されます (トランザクションが有効な場合)。 - + セルテンプレート [`igxCell`](/grid/grid.md#セル-テンプレート) は、編集モード外での列のセルの表示方法を制御します。 `igxCellEditor` セル編集テンプレート ディレクティブは、編集モードでの列のセルの表示方法を処理し、編集されたセルの編集値を制御します。 - + 任意のタイプのエディター コンポーネントで `igxCellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント ([`igxSelect`](/select.md)、[`igxCombo`](/combo.md) など) ではなく、セル要素にフォーカスが残るためです。これが、`igxFocus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の `流暢な編集フロー`が維持されます。 @@ -280,7 +280,7 @@ return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEdit ## CRUD 操作 - + **CRUD 操作**を実行した場合、**filtering**、**sorting**、**grouping** などのパイプが再適用されるため、ビューが自動的に更新されることに注意してください。 @@ -613,7 +613,7 @@ $custom-grid-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
diff --git a/docs/angular/src/content/jp/grids_templates/cell-merging.mdx b/docs/angular/src/content/jp/grids_templates/cell-merging.mdx index 713d49f8fc..05db6f53de 100644 --- a/docs/angular/src/content/jp/grids_templates/cell-merging.mdx +++ b/docs/angular/src/content/jp/grids_templates/cell-merging.mdx @@ -192,14 +192,14 @@ protected customStrategy = new MyCustomStrategy(); ## 機能の統合 - + 結合セルをクリックすると、結合シーケンス内でもっとも近いセルがアクティブになります。 - **更新/編集**: アクティブ化によって結合シーケンスが分解されるため、編集モードになるのは単一セルのみです。 - **行の選択**: 選択された行が結合セルと交差する場合、関連するすべての結合セルが選択対象としてマークされます。 - + If a merged cell is clicked, the closest cell from the merge sequence will become active. diff --git a/docs/angular/src/content/jp/grids_templates/cell-selection.mdx b/docs/angular/src/content/jp/grids_templates/cell-selection.mdx index 3c10a5721c..fa5a9257ff 100644 --- a/docs/angular/src/content/jp/grids_templates/cell-selection.mdx +++ b/docs/angular/src/content/jp/grids_templates/cell-selection.mdx @@ -100,7 +100,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; `[cellSelection]="'single'"` を設定すると、一度にグリッド内で選択されたセルを1つだけ持つことができます。また、モード`マウス ドラッグ`は機能せず、セルを選択する代わりに、デフォルトのテキスト選択が行われます。 - + `selection mode` が `single` であるか `multiple` であるかに関係なく、単一セルが イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると イベントが発生します。 @@ -127,7 +127,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - Ctrl + Shift + Home - フォーカスされているセルからグリッド内の最初のセルまでのすべてのセルを選択します。 - Ctrl + Shift + End - フォーカスされているセルからグリッド内の最後のセルまでのすべてのセルを選択します。 - + 連続スクロールは、グリッド本体でのみ可能です。 @@ -157,7 +157,7 @@ this.grid1.selectRange(range); ``` - + 選択範囲は加算操作です。以前の選択はクリアされません。 @@ -246,21 +246,21 @@ this.grid1.selectRange(range); - + は、表示されているすべての行 (グリッドのビューポート内の行) と、表示されていない列を含むすべての列からセルを返します。 も、選択したセル データを返します。 は、キーボードとポインターの両方の操作からグリッドで現在選択されている範囲を返します。 - + は、表示されているすべての行 (グリッドのビューポート内の行) と、表示されていない列を含むすべての列からセルを返します。 も、選択したセル データを返します。 は、キーボードとポインターの両方の操作からグリッドで現在選択されている範囲を返します。 - + は、表示されているすべての行 (グリッドのビューポート内の行) と、表示されていない列を含むすべての列からセルを返します。 も、選択したセル データを返します。 は、キーボードとポインターの両方の操作からグリッドで現在選択されている範囲を返します。 @@ -305,7 +305,7 @@ $background-color: color($color: "primary", $variant: 900); $border-yellow: #f2c43c; ``` - + `contrast-color` 関数と `color` 関数を使用しない場合は、いつでもカラーの値をハードコードできます。 @@ -357,7 +357,7 @@ $custom-grid-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx b/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx index bd784a62c4..9c9a47d8e0 100644 --- a/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx +++ b/docs/angular/src/content/jp/grids_templates/clipboard-interactions.mdx @@ -57,7 +57,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 制限 - カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。例外は発生される **paste** イベント(IE 11)ですが、イベントの `clipboardData` プロパティを公開していません。 - + IE 11のセルを`コピー`するためには、キーボード選択を使用できます。複数セルを選択するには `Shift キー` を押しながらコピーするには `Ctrl + C` を押します。 @@ -73,7 +73,7 @@ IE 11のセルを`コピー`するためには、キーボード選択を使用 - は、既存の列フォーマッタをコピーしたデータに適用します。 - クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは `/t` です。 - + Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。 diff --git a/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx b/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx index f5a343ee28..c5c76f8289 100644 --- a/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx +++ b/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx @@ -145,7 +145,7 @@ igxGrid のデフォルトの展開インジケーターは次のとおりです ``` - + プロパティを使用して列を非表示にすると宣言した場合、最初にグループを折りたたむオプションは非表示の列よりも優先されることに注意してください。 非表示で、同じ列が表示される場所にグループが定義されている場合、列が表示されます。 diff --git a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx index e315616a4d..eb63ba4a6d 100644 --- a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx @@ -510,7 +510,7 @@ $custom-button: flat-button-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -528,11 +528,11 @@ $custom-button: flat-button-theme( } ``` - + 作成した **flat-button-theme** を `.igx-column-actions` 内に含めて、列を非表示にするボタンのみにスタイルを設定します。 そうでない場合は、グリッド内の他のボタンも影響を受けます。 - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、列アクション コンポーネント内のコンポーネント (ボタン、チェックボックスなど) に対して `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 diff --git a/docs/angular/src/content/jp/grids_templates/column-moving.mdx b/docs/angular/src/content/jp/grids_templates/column-moving.mdx index 0278b731d4..4b436b571d 100644 --- a/docs/angular/src/content/jp/grids_templates/column-moving.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-moving.mdx @@ -37,15 +37,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; Ignite UI for Angular の {ComponentTitle} のコンポーネントは、標準ドラッグ/ドロップのマウス/タッチによるジェスチャ、または列移動 API を使用した順序変更のための**列移動**機能を提供します。列の移動は、固定列と固定されていない列、および複数列ヘッダーの両方で機能します。列を固定領域に移動すると列が固定され、または逆に固定領域の外に列を移動すると、列の固定が解除されます。 - + 列と列グループ間の順序変更は、それらが階層の同じレベルにあり、両方が同じグループにある場合にのみ許可されます。列/列グループが最上位の列である場合、列/列グループ間を移動できます。 - + 列ヘッダーがテンプレート化され、対応する列が移動可能 (またはグループ化可能) である場合、テンプレート化された要素は **draggable** 属性を **false** に設定する必要があります。これにより、要素によって発行されたすべてのイベントのハンドラーをアタッチできます。それ以外の場合、イベントは `igxDrag` ディレクティブによって消費されます。 - + ピン固定領域が最大幅 ({ComponentTitle} 幅合計の 80%) を超えた場合、ドロップ操作が禁止されていてピン固定ができないことをヒントの表示でエンドユーザーに通知します。つまり、ピン固定領域に列をドロップできません。 @@ -212,7 +212,7 @@ $dark-grid-column-moving-theme: grid-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -244,7 +244,7 @@ $dark-grid-column-moving-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/column-pinning.mdx b/docs/angular/src/content/jp/grids_templates/column-pinning.mdx index 9d19659717..c63e54dd74 100644 --- a/docs/angular/src/content/jp/grids_templates/column-pinning.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-pinning.mdx @@ -402,7 +402,7 @@ $custom-theme: grid-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -420,7 +420,7 @@ $custom-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx index 6f0522031b..a5a9ebe7cf 100644 --- a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx @@ -176,7 +176,7 @@ public onResize(event) { - + ピクセルとパーセンテージで設定された場合で列のサイズ変更の動作は少々異なります。 @@ -325,7 +325,7 @@ $custom-grid-theme: grid-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -356,7 +356,7 @@ $custom-grid-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx index 26bda6bf20..c78d9efe95 100644 --- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx @@ -64,7 +64,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; デフォルトの選択モードは `none` です。`single` または `multiple` に設定されると、すべての列は になります。列を選択するには、列をクリックして としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。 - + [`複数列ヘッダー`](multi-column-headers.md) は 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、 は です。さらに、すべての `selectable` 子孫が である場合、コンポーネントは としてマークされます。 @@ -84,7 +84,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## キーボードの組み合わせ - + キーボードの組み合わせは、グリッドの 入力が `multiple` に設定されている場合にのみ使用できます。 @@ -96,7 +96,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; **API** は、**非表示**列に関していくつかの追加機能を提供し、対応する **setter** を設定することにより、すべての**非表示**列を としてマークできます。 - + 上記は にも適用されますが、 プロパティを変更する場合、その子孫の状態を変更します。 @@ -113,7 +113,7 @@ API 操作の詳細については、[`API リファレンス`](#api-references) // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` - + [`行選択`](/{igPath}/row-selection)と[`列選択`](/{igPath}/column-selection)は個別に操作できないことに注意してください。同じ`変数`に依存します。 @@ -172,7 +172,7 @@ $custom-grid-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
diff --git a/docs/angular/src/content/jp/grids_templates/column-types.mdx b/docs/angular/src/content/jp/grids_templates/column-types.mdx index ef3971fbdc..e3a56f9e04 100644 --- a/docs/angular/src/content/jp/grids_templates/column-types.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-types.mdx @@ -74,7 +74,9 @@ public formatOptions = this.options; - **format** - 日付の書式設定のデフォルト値は 'mediumDate' です。その他の利用可能なオプションは 'short'、'long'、'shortDate'、'fullDate'、'longTime'、'fullTime' などです。以下は利用可能なすべての[定義済みの書式オプション](https://angular.io/api/common/DatePipe#pre-defined-format-options) (レガシー) の完全なリストです。 - **timezone** - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例: -> 注: 20.2.x 以降、Angular のローカリゼーションを無効にしている場合、利用可能な形式オプションの一覧は新しい[ローカライズ トピック](../general/localization.md#書式設定)を参照してください。 + +20.2.x 以降、Angular のローカリゼーションを無効にしている場合、利用可能な形式オプションの一覧は新しい[ローカライズ トピック](../general/localization.md#書式設定)を参照してください。 + ```ts public formatDateOptions = { @@ -206,7 +208,7 @@ public formatOptions = this.options; セルの値を編集すると、**通貨記号**がサフィックスまたはプレフィックスとして表示されます。詳細については、公式の[セル編集トピック](/{igPath}/cell-editing#セル編集テンプレート)を参照してください。 - + 上/下矢印キーを使用する場合、値は digitsInfo-minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。 @@ -237,7 +239,7 @@ public formatPercentOptions = this.options; ``` - + 上/下矢印キーを使用する場合、値は digitsInfo-minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。 diff --git a/docs/angular/src/content/jp/grids_templates/conditional-cell-styling.mdx b/docs/angular/src/content/jp/grids_templates/conditional-cell-styling.mdx index d958a8792b..45defc30e7 100644 --- a/docs/angular/src/content/jp/grids_templates/conditional-cell-styling.mdx +++ b/docs/angular/src/content/jp/grids_templates/conditional-cell-styling.mdx @@ -129,7 +129,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. } ``` - + **`::ng-deep`** または **`ViewEncapsulation.None`** を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。 @@ -421,7 +421,7 @@ public grammyClasses = { - + **`::ng-deep`** または **`ViewEncapsulation.None`** を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。 diff --git a/docs/angular/src/content/jp/grids_templates/display-density.mdx b/docs/angular/src/content/jp/grids_templates/display-density.mdx index 928da76e44..206ae1adc7 100644 --- a/docs/angular/src/content/jp/grids_templates/display-density.mdx +++ b/docs/angular/src/content/jp/grids_templates/display-density.mdx @@ -70,7 +70,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - **--ig-size-medium** - これは行の高さが `40px` の中間サイズです。左右のパディングは `16px` です。最小列 は `64px` です。 - **--ig-size-small** - これは行の高さが `32px` の最小サイズです。左右のパディングは `12px` です。最小列 は `56px` です。 - + 現在サイズはオーバーライド**できません**。 diff --git a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx index c241250272..47d1738ffd 100644 --- a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx +++ b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx @@ -382,7 +382,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は - + データの同じフィールドに複数の列がバインドされていて、1 つの列にフォーマッタがある場合、書式設定された値のフィルタリング ストラテジは正しく動作しません。 @@ -560,7 +560,7 @@ $custom-list: list-theme( ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -587,11 +587,11 @@ $custom-list: list-theme( } ``` - + `.igx-excel-filter` と `.igx-excel-filter__secondary` 内のほとんどのコンポーネントのミックスインをスコープするため、これらのカスタムテーマは、Excel スタイル フィルタリング ダイアログとそのすべてのサブダイアログにネストされたコンポーネントのみに影響します。そうでない場合、他のボタン、チェックボックス、入力グループ、およびリストも影響を受けます。 - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 @@ -636,7 +636,7 @@ $custom-list: list-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
diff --git a/docs/angular/src/content/jp/grids_templates/export-excel.mdx b/docs/angular/src/content/jp/grids_templates/export-excel.mdx index 20f5c50bc3..da61a92d88 100644 --- a/docs/angular/src/content/jp/grids_templates/export-excel.mdx +++ b/docs/angular/src/content/jp/grids_templates/export-excel.mdx @@ -114,7 +114,7 @@ private pdfExportService = inject(IgxPdfExporterService); ``` - + v12.2.1 以降、`IgxExcelExporterService` はルートで提供され、`providers` 配列に登録する必要はありません。PDF Exporter は後のバージョンで導入され、追加の構成なしでインジェクタブル サービスとして利用できます。 @@ -167,11 +167,11 @@ public exportPdfButtonHandler() { - + Excel の展開/縮小インジケーターは、ピボット グリッドの最後のディメンションの階層に基づいて表示されます。 - + Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた {ComponentTitle} はテーブルとしてフォーマットされません。 @@ -211,12 +211,12 @@ public exportButtonHandler() { ダッシュボードは、多くの場合、[複数列ヘッダー](multi-column-headers.md)に依存してコンテキストを追加します。個々の月列の上に 「Q1/Q2/Q3」 バンドを配置することを考えてください。エクスポーターはこの構造をミラーリングするため、スプレッドシート ユーザーはグループ化ロジックをすぐに理解できます。ダウンストリーム ワークフローで単純な列名を優先する場合は、 フラグを `true` に反転すると、出力にはリーフ ヘッダーのみが含まれます。 - + Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた {ComponentTitle} はテーブルとしてフォーマットされません。 - + 行アイランド内の複数列ヘッダーのエクスポートされた展開状態は常に初期状態になります。 diff --git a/docs/angular/src/content/jp/grids_templates/filtering.mdx b/docs/angular/src/content/jp/grids_templates/filtering.mdx index 46e910a36c..03e668d334 100644 --- a/docs/angular/src/content/jp/grids_templates/filtering.mdx +++ b/docs/angular/src/content/jp/grids_templates/filtering.mdx @@ -110,7 +110,7 @@ IgniteUI for [Angular {ComponentTitle} コンポーネント](https://jp.infragi ``` - + {ComponentTitle} で `quickFilter`/`excelStyleFilter` と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。{ComponentTitle} の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。 @@ -159,7 +159,7 @@ IgniteUI for [Angular {ComponentTitle} コンポーネント](https://jp.infragi - + `string` 型の値が dataType `Date` の列で使用される場合、{ComponentTitle} は値を `Date` オブジェクトに解析しないためフィルター条件は使用できません。`string` オブジェクトを使用する場合、値を `Date` オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。 @@ -198,7 +198,7 @@ this.{ComponentObjectRef}.filter('ProductName', 'myproduct', IgxStringFilteringO 必要なパラメーターは列フィールド キーとフィルター用語のみです。条件および大文字と小文字の区別を設定しない場合、列プロパティで推測されます。フィルターが複数ある場合、このメソッドはフィルター式の配列を受け取ります。 - + フィルタリング操作でグリッドにバインドされているデータ ソースは変更されません。 @@ -596,7 +596,7 @@ $dark-button: flat-button-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -619,11 +619,11 @@ $dark-button: flat-button-theme( } ``` - + 作成した **flat-button-theme** と **input-group-theme** を `.igx-grid__filtering-row` 内に含めて、フィルタリング行ボタンとその入力グループのみにスタイルを設定します。そうでない場合は、グリッド内の他のボタンと入力グループも影響を受けます。 - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 @@ -662,13 +662,13 @@ $dark-button: flat-button-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 ## 既知の制限 - + Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox [問題](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665)を参照してください。 diff --git a/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx b/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx index 296b023e2d..ca6c617ad2 100644 --- a/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx +++ b/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx @@ -43,12 +43,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - **列集計** (有効な場合) - **{ComponentName} ページネーター** (有効な場合) - + この動作変更のため、Tab と Shift + Tab キーでセル間を移動することは {ComponentName} でサポートされなくなりました。 Tabキーを押すと、**グループ化** / **ツール バー** -> **ヘッダー** -> **本体** -> **集計** -> **フッター / ページネーター** の順序にタブ位置を移動します。 - + テンプレートによって**フォーカス可能な**要素を **{ComponentName}** の本体に公開すると、ブラウザのデフォルトの動作が防止されていないため、**予期されない結果**が発生する可能性があります。 したがって、それを適切に**防止/変更する**のは開発者の責任です。 @@ -174,7 +174,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - + および は現在のレベルで使用し、上位または下位レベルのセルにアクセスできません。 @@ -252,7 +252,7 @@ public customKeydown(args: IGridKeydownEventArgs) { }); ``` - + 実装の詳細は、サンプルコードを参照してください。 @@ -280,7 +280,9 @@ public customKeydown(args: IGridKeydownEventArgs) { (obj) => { obj.target.nativeElement.focus(); }); ``` -> 注: 実装の詳細は、サンプルコードを参照してください。 + +実装の詳細は、サンプルコードを参照してください。 + 実装したカスタム シナリオを試すには以下のデモを使用してください。 - `Grammy Nominations` 列のセルをダブルクリックするか F2 キーを押し、値を `-2` に変更して Tab キーを押します。プロンプト メッセージが表示されます。 @@ -306,7 +308,9 @@ public customKeydown(args: IGridKeydownEventArgs) { (obj) => { obj.target.nativeElement.focus(); }); ``` -> 注: 実装の詳細は、サンプルコードを参照してください。 + +実装の詳細は、サンプルコードを参照してください。 + 実装したカスタム シナリオを試すには以下のデモを使用してください。 - `Age` 列のセルをダブルクリックするか F2 キーを押し、値を `16` に変更して Tab キーを押します。プロンプト メッセージが表示されます。 diff --git a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx index a7e2c83c00..8f8d7f7231 100644 --- a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx +++ b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx @@ -157,7 +157,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 各 は、[`移動`](column-moving.md)、[`ピン固定`](column-pinning.md)と[`非表示`](column-hiding.md)をサポートします。 - + 列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。ネストした `column groups` や `columns` のピン固定はできません。
複数列ヘッダーでのピン固定を使用すると、グループ全体がピン固定されることに注意してください。
`columns` と `column groups` 間の移動は、階層の同じレベルで同じ `group` の場合のみです。
@@ -243,7 +243,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ... ``` - + ヘッダーが再テンプレート化され、対応する列グループが移動可能な場合は、テンプレート要素で **draggable** 属性を **false** に設定する必要があり、これにより適用されるイベントをすべて処理できます。 @@ -294,7 +294,7 @@ $custom-theme: grid-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -328,7 +328,7 @@ $custom-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx index fdb5df5cb9..f01579cf29 100644 --- a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx +++ b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx @@ -52,13 +52,13 @@ import multiRowLayout1 from '../../images/multi-row-layout-1.png'; ``` - + プロパティと プロパティは、それぞれの `igx-column` に対して`igx-column-layout` に設定する必要があります。`igxColumnLayout` コンポーネントはレイアウトが正しいかどうかを検証しておらず、それについてエラーや警告を投げていません。開発者は、レイアウトの宣言が正しく完全であることを確認する必要があります。誤った配置、オーバーラップ、ブラウザの不整合などが発生し、レイアウトが壊れる可能性があります。 Multi-row Layout Example - + and properties must be set for each `igx-column` into `igx-column-layout`. The `igxColumnLayout` component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies. @@ -92,7 +92,7 @@ import multiRowLayout1 from '../../images/multi-row-layout-1.png'; - Ctrl + 上矢印またはCtrl + Down - 最初の行または最後の行の同じ列に移動してフォーカスを適用します。 - Ctrl + Home または Ctrl + End - 最初の行に移動して最初のセルに移動するか、最後のセルに移動します。最後のセルに移動してフォーカスを合わせます。 - + 複数の行または列にわたるセルを介したナビゲーションは、ナビゲーション開始セルに従って行われ、反対方向のキーを使用して開始セルに戻ることができます。グループ行を移動するときにも同じ方法が使用されます。 @@ -159,7 +159,7 @@ $custom-theme: grid-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -181,7 +181,7 @@ $custom-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/paging.mdx b/docs/angular/src/content/jp/grids_templates/paging.mdx index 8f7f46a55e..0b63605a12 100644 --- a/docs/angular/src/content/jp/grids_templates/paging.mdx +++ b/docs/angular/src/content/jp/grids_templates/paging.mdx @@ -218,7 +218,7 @@ $dark-button: flat-icon-button-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -234,11 +234,11 @@ $dark-button: flat-icon-button-theme( } ``` - + 作成した **icon-button-theme** を `.igx-paginator__pager` 内に含めて、ページネーター ボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のアイコン ボタンも影響を受けます。 - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、ボタンのようにページング コンテナー内にあるコンポーネントのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 diff --git a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx index 429b231bba..5f11f238d3 100644 --- a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx +++ b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx @@ -97,7 +97,7 @@ public processData(reset) { データを要求時、 と プロパティを提供する インターフェイスを使用する必要があります。 - + 最初の は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。 @@ -208,7 +208,7 @@ public noopFilterStrategy = NoopFilteringStrategy.instance(); public noopSortStrategy = NoopSortingStrategy.instance(); ``` - + リモー トデータが要求された場合、フィルタリング操作が大文字と小文字を区別します。 @@ -270,7 +270,7 @@ public processData() { リモート フィルタリングは、フラット コレクションで直接実行する必要があります。また、親がフィルターに一致するかどうかにかかわらず、フィルター条件に一致するすべてのレコードにすべての親を含める必要があります (階層をそのままにするためにこれを行います)。結果は以下で確認できます。 - + リモー トデータが要求された場合、フィルタリング操作が大文字と小文字を区別します。 @@ -296,7 +296,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は 開発者は、**列**と **filteringExpressionsTree** 引数によって提供される情報に基づいて、必要な一意の列値を手動で生成し、**done** コールバックを呼び出すことができます。 - + 入力が提供される場合、Excel スタイル フィルタリングでプロセスを生成するデフォルトの一意の値は使用されません。 @@ -730,7 +730,7 @@ public paginate(page: number) { - + リモート ページングを適切に構成するには、`GridPagingMode.Remote` を設定する必要があります。 diff --git a/docs/angular/src/content/jp/grids_templates/row-actions.mdx b/docs/angular/src/content/jp/grids_templates/row-actions.mdx index e447fc7d85..ab6631a308 100644 --- a/docs/angular/src/content/jp/grids_templates/row-actions.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-actions.mdx @@ -55,7 +55,7 @@ import { IgxActionStripModule } from 'igniteui-angular/action-strip'; これらは `` 内に追加され、デフォルトのインタラクションを提供するアクション ストリップを持つために必要です。 - + `IgxActionStripComponent` がグリッドの子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。 @@ -105,7 +105,7 @@ import { IgxActionStripModule } from 'igniteui-angular/action-strip'; - + When `IgxActionStripComponent` is a child component of the grid, hovering a row will automatically show the UI. @@ -127,7 +127,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row ``` - + これらのコンポーネントは [`IgxGridActionsBaseDirective`]({environment:infragisticsBaseUrl}/classes/igxgridactionsbasedirective.html) を継承します。カスタム グリッド アクション コンポーネントを作成する場合、`IgxGridActionsBaseDirective` も継承する必要があります。 @@ -145,7 +145,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row - + The predefined actions inherit [`IgxGridActionsBaseDirective`]({environment:infragisticsBaseUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. diff --git a/docs/angular/src/content/jp/grids_templates/row-adding.mdx b/docs/angular/src/content/jp/grids_templates/row-adding.mdx index 6e0e98a703..33a7b73e6e 100644 --- a/docs/angular/src/content/jp/grids_templates/row-adding.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-adding.mdx @@ -158,23 +158,23 @@ export class AppModule {} - + プライマリ キーは行追加操作で必須です。 - + プライマリ キーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、 列の入力を `false` に設定する必要があります。 - + [行の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。 - + [行の追加] と [子の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。 @@ -284,7 +284,7 @@ this.treeGrid.beginAddRowByIndex(null); // spawns the add row UI as the fi ``` - + `igxRowEditActions` ディレクティブを使用すると、オーバーレイ ボタンの編集と追加の両方の編集アクションが変更されます。 diff --git a/docs/angular/src/content/jp/grids_templates/row-drag.mdx b/docs/angular/src/content/jp/grids_templates/row-drag.mdx index 74007e7d32..28b5b930cc 100644 --- a/docs/angular/src/content/jp/grids_templates/row-drag.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-drag.mdx @@ -230,7 +230,7 @@ export class {ComponentName}RowDragComponent { - `sourceGrid` からドラッグした行を削除します。 - + イベント引数 (`args.dragData.data`) または他の行プロパティからの行データを使用する場合、行全体が参照として引数に渡されることに注意してください。つまり、ソースグリッドのデータと区別する必要がある場合は、必要なデータを複製する必要があります。 @@ -387,7 +387,7 @@ enum DragIcon { - + 上記のデモで使用した行ドラッグ ゴーストに適用されるクラスは ::ng-deep 修飾子を使用しています。行ドラッグは内部グリッド機能であり、CSS カプセル化のためにアプリケーションレベルでアクセスできないためです。 @@ -428,7 +428,7 @@ enum DragIcon { - + グリッドに `primaryKey` が指定されていることを確認してください！ロジックが行を適切に並べ替えられるように、行には一意の識別子が必要です。 @@ -712,7 +712,7 @@ class MyRowGhostComponent { カーソルの位置を追跡するために、行のドラッグを開始するときに の `dragMove` イベントにバインドします。 - + グリッドに `primaryKey` が指定されていることを確認してください! ロジックが行を適切に並べ替えられるように、行には一意の識別子が必要です。 diff --git a/docs/angular/src/content/jp/grids_templates/row-editing.mdx b/docs/angular/src/content/jp/grids_templates/row-editing.mdx index 6bf507d963..056135965c 100644 --- a/docs/angular/src/content/jp/grids_templates/row-editing.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-editing.mdx @@ -51,7 +51,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- + 行が編集モードにある場合、他の行のセルをクリックすると [完了] ボタンが押されたように動作し、前の行の変更をすべての変更をサブミットします。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。 @@ -146,11 +146,11 @@ export class AppModule {} - + プライマリキーは行編集操作で必須です。 - + 各列の編集を有効にする必要はありません。{ComponentTitle} で プロパティを使用するとプライマリ行以外 `field` プロパティを定義したすべての行が編集可能になります。特定の列の編集を無効にする場合、 列の入力を false に設定します。 @@ -245,7 +245,7 @@ export class HGridRowEditingSampleComponent implements OnInit { - + {ComponentTitle} は、保留中のセル変更を保持するプロバイダー を行ステートをサブミットまたはキャンセルするまで内部使用します。 @@ -369,7 +369,7 @@ $banner-theme: banner-theme( 行編集オーバーレイは他の多くのコンポーネントのテーマを利用するため、グローバル スタイルでスタイル設定するとアプリケーションの他の部分 (バナー、ボタンなど) に影響を与える可能性があります。それを防ぐ最善の方法は、バナー テーマを適用する特定のコンポーネントのスタイル ファイルにスコープすることです。 - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド行編集オーバーレイのスタイルを設定するには、`::ng-deep`を使用してこのカプセル化を解除する必要があります。 @@ -447,7 +447,7 @@ $button-theme: flat-icon-button-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx index 8365b72d0a..d3b4f831cc 100644 --- a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx @@ -464,7 +464,7 @@ $custom-grid-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/row-selection.mdx b/docs/angular/src/content/jp/grids_templates/row-selection.mdx index 5f41942e2e..9181e0a6d4 100644 --- a/docs/angular/src/content/jp/grids_templates/row-selection.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-selection.mdx @@ -410,7 +410,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; 上の例では、`igx-checkbox` を使用しており、`rowContext.selected` をその `checked` プロパティにバインドしています。[`行番号のデモ`](#行の番号付けデモ)で実際にこれをご覧ください。 - + `rowContext.select()` および `rowContext.deselect()` メソッドは、`{ComponentSelector}` のテンプレート コンテキストで公開されます。基本機能をオーバーライドするクリック ハンドラーを実装した場合、特に子グリッドで現在の行を簡単に切り替えることができます。 @@ -486,7 +486,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; - + `headContext.selectAll()` と `headContext.deselectAll()` メソッドは、`{ComponentSelector}` のテンプレート コンテキストで公開されます。基本機能をオーバーライドするクリック ハンドラーを実装した場合、特に子グリッドで現在の行を簡単に切り替えることができます。 diff --git a/docs/angular/src/content/jp/grids_templates/sizing.mdx b/docs/angular/src/content/jp/grids_templates/sizing.mdx index 8777cf8086..8da9858bf1 100644 --- a/docs/angular/src/content/jp/grids_templates/sizing.mdx +++ b/docs/angular/src/content/jp/grids_templates/sizing.mdx @@ -75,7 +75,7 @@ import hgridHeightPercentagesV2 from '../../images/grid_sizing/hgrid-height-perc の境界線とパディングのサイズに関しては、幅/高さのサイズ計算、または[ボーダー ボックス](https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing)のサイジングとも呼ばれます。すべてのシナリオに適用されます。 - + ユーザーがボーダー ボックスのサイズ変更をオーバーライドした場合に正しい になるかどうかは保証できません。 @@ -83,7 +83,7 @@ import hgridHeightPercentagesV2 from '../../images/grid_sizing/hgrid-height-perc 入力 `width` に値が割り当てられていない場合のデフォルト値は `100%` で、 は使用可能なスペースを埋めようとします。`Percentages` セクションで、グリッドがグリッドにどのように反応するかを確認できます。 - + 自体の幅スタイルを手動で設定すると、予期しない動作が生じます。 @@ -107,7 +107,7 @@ import hgridHeightPercentagesV2 from '../../images/grid_sizing/hgrid-height-perc - + この動作により、グリッド データに含まれる列が多すぎる場合、すべての列が仮想化なしでレンダリングされるため、ブラウザーのパフォーマンスに大きな影響を与える可能性があります。 @@ -145,7 +145,7 @@ import hgridHeightPercentagesV2 from '../../images/grid_sizing/hgrid-height-perc デフォルトでは、 の高さが定義されていない場合、`100%` に設定されます。`Percentages` セクションで、DOM 構造に応じたグリッドの応答を確認できます。 - + 自体の `height` のスタイルを手動で設定すると、予期しない動作が生じます。 @@ -166,7 +166,7 @@ import hgridHeightPercentagesV2 from '../../images/grid_sizing/hgrid-height-perc - + この動作により、グリッド データに含まれる行が多すぎる場合、すべての行が仮想化なしでレンダリングされるため、ブラウザーのパフォーマンスに大きな影響を与える可能性があります。 @@ -246,7 +246,7 @@ import hgridHeightPercentagesV2 from '../../images/grid_sizing/hgrid-height-perc - + 行セレクターのチェックボックス列などの機能列は、列の自動サイズ調整時に考慮される追加のスペースを埋めます。 @@ -400,7 +400,7 @@ igx-grid { } ``` - + これらのスペーシング調整は、グリッドの表示密度と組み合わせて機能します。スペーシング乗数は、グリッドが compact、cosy または comfortable のどの密度モードであるかに応じて決定される基準スペーシング値に適用されます。 diff --git a/docs/angular/src/content/jp/grids_templates/sorting.mdx b/docs/angular/src/content/jp/grids_templates/sorting.mdx index d1eb4cb8be..49a7573470 100644 --- a/docs/angular/src/content/jp/grids_templates/sorting.mdx +++ b/docs/angular/src/content/jp/grids_templates/sorting.mdx @@ -37,7 +37,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; Ignite UI for Angular {ComponentTitle} では、列レベルでのデータ ソートが可能です。つまり、**{ComponentSelector}** にソート可能な列とソート不可の列の両方を持つことができます。Angular でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。 - + これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、グループ化をソートから切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。 @@ -129,7 +129,7 @@ this.{ComponentObjectRef}.sort([ - + Sorting は、 アルゴリズムを使用して実行されます。 または は、代替アルゴリズムとして のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。 @@ -158,11 +158,11 @@ this.{ComponentObjectRef}.clearSort(); - + **{ComponentTitle}** の は **column** の と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。 - + ソート操作で {ComponentTitle} の基になるデータ ソースは変更**しません**。 @@ -215,7 +215,7 @@ public ngOnInit(): void { - + `string` 型の値が `Date` の列で使用される場合、{ComponentTitle} が値を `Date` オブジェクトに解析しないため i{ComponentTitle} `sorting` が正しく動作しません。`string` オブジェクトを使用する場合、値を `Date` オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。 @@ -280,7 +280,7 @@ $custom-theme: grid-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -315,7 +315,7 @@ $custom-theme: grid-theme( - + このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx index d0ae40a38f..b395b4e6c1 100644 --- a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx +++ b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx @@ -126,12 +126,12 @@ igxGridState ディレクティブによって開発者がグリッドの状態 - + ディレクティブはテンプレートを処理しません。列テンプレートの復元方法については、「[列の復元](state-persistence.md#列の復元)」セクションを参照してください。 - + `Row Selection` 機能を使用するには、 プロパティを設定して、正しく保存/復元する必要があります。 @@ -452,7 +452,7 @@ public restoreState() { はデフォルトでは、リモート操作もカスタム ディメンション ストラテジ (詳細については、[グリッド リモート操作](remote-data-operations.md)サンプルを参照) も保持しません ([`制限`](state-persistence.md#制限) を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、 と呼ばれるイベントを公開します。このイベントはグリッド状態に追加の変更を、それが適用される前に行なうために使用できます。 以下はその方法です。 - + は、文字列引数で を使用している場合にのみ発行されます。 diff --git a/docs/angular/src/content/jp/grids_templates/summaries.mdx b/docs/angular/src/content/jp/grids_templates/summaries.mdx index 7864344720..44416f2519 100644 --- a/docs/angular/src/content/jp/grids_templates/summaries.mdx +++ b/docs/angular/src/content/jp/grids_templates/summaries.mdx @@ -59,7 +59,7 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ
- + 列の集計は**列値すべての関数**ですが、フィルタリングが適用された場合、列の集計は**フィルターされた結果値の関数**になります。 @@ -284,7 +284,7 @@ interface IgxSummaryResult { 以下の[「すべてのデータにアクセスするカスタム集計」](#すべてのデータにアクセスするカスタム集計)セクションを参照してください。 - + 集計行の高さを正しく計算するために、{ComponentTitle} の メソッドでデータが空の場合も常に 配列の正しい長さを返す必要があります。 @@ -436,7 +436,7 @@ class MySummary extends IgxNumberSummaryOperand { デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドのサイズに応じてデザインにより計算されます。 入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、false 値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。 - + 列の集計テンプレートは、列 プロパティを必要な TemplateRef に設定することにより、API を介して定義できます。 @@ -612,7 +612,7 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。 - + プロパティは子レベルの集計のみに適用します。ルートレベルの集計は、{ComponentTitle} の下に常に固定されます。 @@ -640,7 +640,7 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、親行が縮小されたときに、集計行は表示されたままになります。 - + プロパティは子レベルの集計のみに適用します。ルートレベルの集計は、{ComponentTitle} の下に常に固定されます。 @@ -726,7 +726,7 @@ $custom-theme: grid-summary-theme( ); ``` - + 上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 @@ -738,7 +738,7 @@ $custom-theme: grid-summary-theme( } ``` - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、 `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 diff --git a/docs/angular/src/content/jp/grids_templates/toolbar.mdx b/docs/angular/src/content/jp/grids_templates/toolbar.mdx index 1441a39ac6..97403591f7 100644 --- a/docs/angular/src/content/jp/grids_templates/toolbar.mdx +++ b/docs/angular/src/content/jp/grids_templates/toolbar.mdx @@ -108,7 +108,9 @@ Ignite UI for Angular の {ComponentTitle} は、UI 操作のコンテナーと -> 注: 上記のコード スニペットに示されているように、事前定義された `actions` UI コンポーネントは にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。 + +上記のコード スニペットに示されているように、事前定義された `actions` UI コンポーネントは にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。 + これらの UI はそれぞれ独立して追加することも、まったく追加しないこともできます。このようにして、ツールバー コンテナーは空になります。 @@ -322,7 +324,7 @@ constructor() { ### データのエクスポート - + 階層グリッドまたは階層下の子グリッドのいずれかをエクスポートすると、エクスポートされるデータは、それぞれのグリッドに属する行のフラット コレクションになります (子グリッドはエクスポートされたデータに含まれません)。 @@ -344,7 +346,7 @@ import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } export class AppModule { ... } ``` - + v12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。 @@ -380,7 +382,7 @@ v12.2.1 以降では、エクスポーター サービスは root で提供さ エクスポートされたファイル名を変更することに加えて、ユーザーは イベントを待機し、イベント プロパティのオプション エントリをカスタマイズすることで、エクスポーター オプションをさらに構成できます。 - + デフォルトで CSV にエクスポートした際にエクスポーターがカンマ区切りセパレーターを使用してエクスポートし、出力ファイルに .csv 拡張しを使用します。 エクスポーターのイベントにサブスクライブまたはエクスポーター オプション フィールドの値を変更して、エクスポート パラメーターをカスタマイズできます。 またイベント引数のキャンセル フィールドを true に設定してエクスポートをキャンセルすることもできます。 @@ -457,7 +459,7 @@ configureExport(args: IGridToolbarExportEventArgs) { ## カスタム コンテンツ - + これは、古いツールバー テンプレート ディレクティブを置き換えます。v11 より前のバージョンから移行する場合は、マイグレーションによってテンプレート コンテンツの移動が処理されます。 ただし、テンプレート内のバインディングは処理しないため、マイグレーションの完了後に、変更されたテンプレート ファイルを再確認してください。 @@ -580,7 +582,7 @@ $dark-checkbox-theme: checkbox-theme( } ``` - + コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド ツールバー コンポーネント内のコンポーネントのスタイルを設定するために、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 diff --git a/docs/angular/src/content/jp/grids_templates/validation.mdx b/docs/angular/src/content/jp/grids_templates/validation.mdx index decefca3f4..ab24e413f9 100644 --- a/docs/angular/src/content/jp/grids_templates/validation.mdx +++ b/docs/angular/src/content/jp/grids_templates/validation.mdx @@ -139,7 +139,9 @@ Invalid states will persist until the validation errors in them are fixed accord - 、 などの API を使用してセル/行を更新する場合 。 - トランザクション サービスの一括編集および / API を使用する場合。 -> 注: ユーザー入力または編集 API で編集されていないレコードに対しては、検証はトリガーされません。セルの視覚的なインジケーターは、ユーザー操作または検証サービスの `markAsTouched` API を介して入力がタッチ済みと見なされる場合のみ表示されます。 + +ユーザー入力または編集 API で編集されていないレコードに対しては、検証はトリガーされません。セルの視覚的なインジケーターは、ユーザー操作または検証サービスの `markAsTouched` API を介して入力がタッチ済みと見なされる場合のみ表示されます。 + ## Angular {ComponentTitle} 検証のカスタマイズ オプション diff --git a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx index d45f826b3d..fb02086722 100644 --- a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx +++ b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx @@ -55,7 +55,7 @@ The canonical launch command is: npx -y igniteui-theming igniteui-theming-mcp ``` - + The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. @@ -76,7 +76,7 @@ GitHub Copilot in VS Code supports MCP servers through a workspace-level configu Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available. - + MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. @@ -97,7 +97,7 @@ Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.js The server will be picked up automatically when you open a new Cursor chat session. - + You can also configure MCP servers globally via **Settings → MCP** in Cursor. @@ -166,7 +166,7 @@ JetBrains AI Assistant supports MCP servers through the IDE settings: 5. Click **OK** and restart the AI Assistant. - + MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. @@ -218,7 +218,7 @@ globs: ["**/*.scss", "**/styles/**"] - For dark mode, only the palette changes. Component overrides stay the same. ``` - + Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project. @@ -248,7 +248,7 @@ Here is a brief overview of each tool: | `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | | `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | - + For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx index c5ee580f0f..e9a760dc7f 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx @@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; All {ProductName} charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis. - + the following examples can be applied to `CategoryChart` as well as `FinancialChart` controls. diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx index 8ae79dbcbd..81f1b76d42 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx @@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; All {ProductName} charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below. - + the following examples can be applied to `CategoryChart` as well as `FinancialChart` controls. diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx index 3a4a7cd771..0c8dcce66e 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx @@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; In the {Platform} chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data. - + These features are designed to support cartesian axes and does not currently support radius or angle axes. diff --git a/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx b/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx index c1a2455b1f..a6d9dfaf9a 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx @@ -73,7 +73,7 @@ The following example demonstrates enabling scrollbars. ## Chart Navigation through Code - + Code navigation of the chart can only be used for the control. diff --git a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx index 8d20611ca4..3583dcbea9 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx @@ -272,7 +272,7 @@ Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performa Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does. - + The `CategoryChart` already uses ordinal/category axis so there is no need to change its properties. @@ -330,7 +330,7 @@ This code snippet shows how to ordinal/category x-axis in the `FinancialChart` a By default, {Platform} charts will automatically calculate `YAxisInterval` based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing `YAxisInterval` property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels. - + We do not recommend setting axis minor interval as it will decrease chart performance. 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 6af7c0495b..0af7351c2b 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 @@ -23,7 +23,7 @@ This is directly integrated with the available tools of the `Toolbar`. The follo - + This feature is designed to support X and Y axes and does not currently support radial or angular axes. diff --git a/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx index c451c5bbde..14da58de2a 100644 --- a/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx +++ b/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx @@ -95,7 +95,7 @@ You can style the aggregated Others slice separately from other slices by using These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior. - + The Others slice is only rendered when the chart is configured to create it (for example, with greater than `0` and an appropriate ). If the Others slice is not present, and have no visible effect. diff --git a/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx b/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx index 184de0f5b9..390edffded 100644 --- a/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx +++ b/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx @@ -20,7 +20,7 @@ The Infragistics {Platform} Excel Engine's - + The XLSX format is required. Other formats are not supported at this time. diff --git a/docs/xplat/src/content/en/components/excel-library.mdx b/docs/xplat/src/content/en/components/excel-library.mdx index 2ad854999f..e399624e09 100644 --- a/docs/xplat/src/content/en/components/excel-library.mdx +++ b/docs/xplat/src/content/en/components/excel-library.mdx @@ -147,7 +147,7 @@ The following is a list of the supported versions of Excel.** - Microsoft Excel 2016 - + The Excel Library does not support the Excel Binary Workbook (.xlsb) format at this time. 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 4e405f97d3..c532cb185c 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 @@ -415,7 +415,7 @@ The following properties of these components are now nullable: ### {PackageMaps} (Geographic Map) - + As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. For more details please visit: @@ -1048,7 +1048,7 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to ## **{PackageVerChanges-21-2.1}** - + The following breaking changes were introduced @@ -1069,7 +1069,7 @@ The following breaking changes were introduced ## **{PackageVerChanges-21-2}** - + The **Igb** prefix is now required for the {ProductName} components and nested elements within each component. This API change was necessary to avoid ambiguity between Infragistics controls and 3rd party controls. For example, ``` ``` instead of ``` ``` @@ -1194,7 +1194,7 @@ for example: #### Geographic Map - + These features are CTP 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 de9e9d8e4d..6f4cb8e169 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 @@ -433,7 +433,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov ### {PackageMaps} (Geographic Map) - + As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. For more details please visit: @@ -486,7 +486,7 @@ For more details please visit: |37244 | Excel Library | Custom Data Validation is not working.| ## **{PackageVerChanges-24-2-APR2}** - + With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide. @@ -924,7 +924,7 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to #### Data Grid - Added `ValueMultiField`, of type string[], in the `ComboBoxColumn` to be used when your items in the drop down contain a key that consists of multiple fields. - + The following breaking changes were introduced @@ -943,7 +943,7 @@ The following breaking changes were introduced ## **{PackageVerChanges-21-2}** - + Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility. @@ -1052,7 +1052,7 @@ for example: ### {PackageMaps} (GeoMap) - + These features are CTP @@ -1098,7 +1098,7 @@ These features are CTP ### {PackageGrids} (Data Grid) - + These breaking changes were introduce in the grid package. @@ -1136,7 +1136,7 @@ income.field = "Income"; The data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid". - + These breaking changes were introduce in these packages and components only: @@ -1167,7 +1167,7 @@ The data grid component requires the "inputs" package. Import statements have been simplified to use just package names instead of full paths to API classes and enums. - + These breaking changes were introduce in these packages and components only: 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 2b0e637eea..2388bae87e 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 @@ -420,7 +420,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov ### {PackageMaps} - + As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. For more details please visit: @@ -786,7 +786,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t - `DataGrid`: - Added `ValueMultiField`, of type string[], in the `ComboBoxColumn` to be used when your items in the drop down contain a key that consists of multiple fields. - + The following breaking changes were introduced: Changed `ValueField` property from type string[] to string. @@ -815,7 +815,7 @@ The following breaking changes were introduced: Changed `ValueField` property fr - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from `DataSourceSectionHeaderDisplayMode` - + Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility. @@ -887,7 +887,7 @@ This release introduces a few improvements and simplifications to visual design ### {PackageMaps} - + These features are CTP @@ -954,7 +954,7 @@ for example: - `DataGrid`: - + These breaking changes were introduce in the grid package. @@ -992,7 +992,7 @@ income.field = "Income"; - Changed Name of Live Grid - the data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid". - + These breaking changes were introduce in these packages and components only: @@ -1023,7 +1023,7 @@ The data grid component requires the "inputs" package. Import statements have been simplified to use just package names instead of full paths to API classes and enums. - + These breaking changes were introduce in these packages and components only: 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 195daf00db..aaf803a51b 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv.mdx @@ -19,7 +19,7 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; All notable changes for each version of {ProductName} are documented on this page. - + This topic discusses changes only for components that are not included in the {PackageAngularComponents} package. For changes specific to igniteui-angular components, please see CHANGELOG.MD. @@ -179,7 +179,7 @@ There is a new property called `UseInsetOutlines` to control how outlines on the ### {PackageMaps} (Geographic Map) - + As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. For more details please visit: @@ -419,7 +419,7 @@ The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not w ## **{PackageVerChanges-21-2}** - + Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility. @@ -512,7 +512,7 @@ for example: ### {PackageMaps} (GeoMap) - + These features are CTP @@ -529,7 +529,7 @@ These features are CTP Import statements have been simplified to use just package names instead of full paths to API classes and enums. - + These breaking changes were introduce in these packages and components only: diff --git a/docs/xplat/src/content/en/components/general-cli-overview.mdx b/docs/xplat/src/content/en/components/general-cli-overview.mdx index 579bd390fa..f1e2c5d76c 100644 --- a/docs/xplat/src/content/en/components/general-cli-overview.mdx +++ b/docs/xplat/src/content/en/components/general-cli-overview.mdx @@ -102,7 +102,9 @@ For example, if you wanted to add a data grid templated component named "MyGridC ig add grid MyGridComponent ``` -> NOTE: Your routing file will be updated with the path to the page with the new component - in that case `/my-grid-component`. You can use it to manually navigate to the newly generated page. + +Your routing file will be updated with the path to the page with the new component - in that case `/my-grid-component`. You can use it to manually navigate to the newly generated page. + diff --git a/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx b/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx index 50330ae71a..6beef161aa 100644 --- a/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx @@ -142,6 +142,6 @@ Build and run the .NET MAUI Blazor app for Windows. getting-started-blazor-card-windows - + For more information about building cross-platform applications with .NET MAUI, visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android). \ No newline at end of file diff --git a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx index 041c6a0970..6232314af4 100644 --- a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx @@ -24,7 +24,7 @@ The open-source libraries include: - Start Visual Studio and click **Create a new project** on the start page, select a Blazor template such as **Blazor Server App**, **Blazor WebAssembly App**, or **Blazor Web App**, and click **Next**. - + When using **Blazor Server App**, ensure you add `@rendermode InteractiveServer` in the pages where the components are used. @@ -36,7 +36,7 @@ When using **Blazor Server App**, ensure you add `@rendermode InteractiveServer` The IgniteUI.Blazor.Lite package contains open-source UI components delivered via NuGet. - + You should not combine the **IgniteUI.Blazor** and **IgniteUI.Blazor.Lite** packages in the same project. They use the same namespaces and contain duplicate components, so only one of them should be used. diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx index 0705807cef..ea0ce56cb1 100644 --- a/docs/xplat/src/content/en/components/general-getting-started.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started.mdx @@ -86,7 +86,7 @@ If you added a Grid component during the prompts, once the application is runnin - + Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./general-open-source-vs-premium.md#comparison-table-for-all-components). @@ -237,7 +237,7 @@ import { defineAllComponents } from 'igniteui-webcomponents'; defineAllComponents(); ``` - + Importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using. @@ -282,7 +282,7 @@ npm init -y npm install webpack webpack-cli --save-dev ``` - + Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. @@ -317,7 +317,7 @@ code . }, ``` - + This script will use webpack to bundle the **index.js** file into another file called **index.bundle.js** and place it into a folder named **dist**. If a **JavaScript heap out of memory** issue occurs while building you can increase the heap size by using this build command instead: @@ -392,7 +392,7 @@ ModuleManager.register( npm run build ``` - + This command will run the build script we created earlier. The build script will generate a file named **index.bundle.js** in a folder named **dist** @@ -411,7 +411,7 @@ This command will run the build script we created earlier. The build script will {/* wc-live-server */} - + Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). diff --git a/docs/xplat/src/content/en/components/general-installing-blazor.mdx b/docs/xplat/src/content/en/components/general-installing-blazor.mdx index c56ed139ae..765d53ca22 100644 --- a/docs/xplat/src/content/en/components/general-installing-blazor.mdx +++ b/docs/xplat/src/content/en/components/general-installing-blazor.mdx @@ -21,7 +21,7 @@ There are three ways to install Ignite UI for Blazor using NuGet: Licensed users should use the official licensed Ignite UI for Blazor NuGet packages provided on the [Infragistics Private NuGet Feed](./general-nuget-feed.md). - + Trial users can install the **IgniteUI.Blazor** trial NuGet package found on [NuGet.org](https://www.nuget.org/packages/IgniteUI.Blazor). @@ -35,7 +35,7 @@ In the package manager dialog, open the **Browse** tab, select the **Infragistic nuget-package-manager-browse - + If you do not have an Infragistics package source available, learn how to add it by reading the [Infragistics NuGet feed topic](./general-nuget-feed.md). diff --git a/docs/xplat/src/content/en/components/general-licensing.mdx b/docs/xplat/src/content/en/components/general-licensing.mdx index 3d37285f22..8dfcde1460 100644 --- a/docs/xplat/src/content/en/components/general-licensing.mdx +++ b/docs/xplat/src/content/en/components/general-licensing.mdx @@ -40,7 +40,7 @@ Npm is the most popular package manager and is also the default one for the runt Infragistics {ProductName} is available as npm packages and you can add them as dependencies to your project in a [few easy steps](./general-getting-started.md). Choosing this approach will not require configuring npm. If you are installing a package under commercial license, you will start using the **{ProductName} Trial version** of the product. - + What does it mean to start using a trial version? It means that you will be using a version of our product with a **Watermark** part of your web view. It doesn’t mean that you will be using the licensed package for a certain amount of time before it expires. For example, for a month. diff --git a/docs/xplat/src/content/en/components/general-nuget-feed.mdx b/docs/xplat/src/content/en/components/general-nuget-feed.mdx index 8021ecb058..f012b266ff 100644 --- a/docs/xplat/src/content/en/components/general-nuget-feed.mdx +++ b/docs/xplat/src/content/en/components/general-nuget-feed.mdx @@ -29,7 +29,7 @@ This topic contains the following sections: - Set the Name to **Infragistics** - Set the Source to **https://packages.infragistics.com/nuget/licensed/v3/index.json** if you prefer using the NuGet protocol version 3. Otherwise this must be set to **https://packages.infragistics.com/nuget/licensed/** - + For more details on whether to use v3 or older please visit: **https://devblogs.microsoft.com/nuget/nuget-3-what-and-why/**. Protocol v3 is applicable only when using newer versions of NuGet clients (after 2015). Older NuGet clients may or may not be compatible with v3. @@ -37,7 +37,7 @@ Click the **Update** button, and then click **OK** to close the dialog. nuget-package-manager-package-sources-ig-server - + When adding a NuGet package from this source for the first time, you will be prompted for your Infragistics credentials. @@ -55,6 +55,6 @@ nuget sources add -name "Infragistics" -source "https://packages.infragistics.co nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed" -username "your login email" -password "your password" ``` - + The password will be stored encrypted in the NuGet config file and can only be decrypted in the same user context as it was encrypted. The default location of the config file can be found here `%AppData%\NuGet\NuGet.config` \ No newline at end of file diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx index 9deb57f781..a4928770b8 100644 --- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx @@ -174,7 +174,7 @@ return ( - + The sort/filter states of the {GridLiteTitle} are kept when changing the data source in this manner. Usually you will want to reset them by calling either `clearSort()` and/or `clearFilter()`. @@ -186,7 +186,7 @@ Usually you will want to reset them by calling either `clearSort()` and/or `clea - + The sort/filter states of the {GridLiteTitle} are kept when changing the data source in this manner. Usually you will want to reset them by calling either `ClearSort()` and/or `ClearFilter()`. diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx index ba5ca62c1e..769d753b75 100644 --- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx @@ -204,7 +204,7 @@ const satisfactionCellTemplate = (ctx: IgrCellContext) => ( - + Keep in mind the more complex and involved the template is, the greater the performance cost. Avoid complex DOM structures if performance is important. diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx index 3e66392bfe..fc00704188 100644 --- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx @@ -350,7 +350,7 @@ Each column of the {GridLiteTitle} can be configured to be resizable by setting If a column is set to be resizable, you can drag the right size of the column header to either increase/decrease the column width. Double-clicking on the resize area will trigger auto-sizing of the column where it will try set its width according to the largest content of its cells/header. - + Columns with "fluid" widths (fr, %, etc.) can behave erratically when resizing in the grid is performed as they try to accommodate for the new dimensions. Depending on the application scenario, it may be better to use "hard" units so users don't experience layout shifts. diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx index 36dc6340d5..54ad9e342f 100644 --- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx @@ -53,7 +53,7 @@ By default the column uses the `Field` property for label text. To customize the - + When `headerTemplate` is provided, `header` is ignored. diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx index f8c57f2d0e..9eb542844f 100644 --- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx +++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx @@ -235,7 +235,7 @@ grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode - + The single/multi-column sorting behavior controls how end-users interact with the {GridLiteTitle}. Sorting through the API with multiple expression will still work when single sorting is enabled. diff --git a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx index 318d851e57..763c729bfc 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx @@ -266,7 +266,7 @@ const filteringTree: IgrFilteringExpressionsTree = { In case you don't want to show the toolbar, you could use the and methods to open and close the advanced filtering dialog programmatically. - + You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the . Both filtering user interfaces will work independently of one another. The final filtered result in the is the intersection between the results of the two filters. @@ -394,11 +394,11 @@ igx-advanced-filtering-dialog { } ``` - + We scope most of the components' mixins within `igx-advanced-filtering-dialog`, so that these custom themes will affect only components nested in the advanced filtering dialog. Otherwise, other buttons, chips, inputs and dropdowns in the application would be affected too. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -488,7 +488,7 @@ $custom-drop-down: drop-down-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them. @@ -606,7 +606,7 @@ Don't forget to include the themes in the same way as it was demonstrated above. - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx index d49dd4da8d..7534a955bf 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx @@ -40,7 +40,7 @@ The following sample demonstrates a scenario, where the + Transaction state consists of all the updated, added and deleted rows, and their last states. @@ -425,7 +425,7 @@ export class HierarchicalGridBatchEditingSampleComponent { ``` - + The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, `{ComponentName}` would stay in edit mode. One way to do that is by calling `EndEdit` in the respective method. @@ -433,7 +433,7 @@ The transactions API won't handle end of edit and you'd need to do it by yoursel Deleting a parent node in has some peculiarities. If you are using a hierarchical data, the children will be deleted when deleting their parent. If you are using a flat data, you may set the desired behavior using the `CascadeOnDelete` property of . This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to **true**). - + Disabling property will modify `{ComponentName}` to create transactions on cell change and will not expose row editing overlay in the UI. 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 8fc9b2a3db..a44460c9d1 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 @@ -26,7 +26,7 @@ In addition, you can define your own custom templates for update-data actions an - + By using with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the **focus** will remain on the **cell element**, not on the editor component that we've added. This is why we should take leverage of the `Focus` directive, which will move the focus directly in the in-cell component and will preserve **a fluent editing flow** of the cell/row. @@ -54,7 +54,7 @@ You can exit edit mode and **commit** the changes in one of the following ways: - operations like paging, resize, pin or move will exit edit mode and changes will be submitted. - + The cell remains in edit mode when you scroll vertically or horizontally or click outside the . This is valid for both cell editing and row editing. @@ -254,16 +254,16 @@ This code is used in the sample below which implements an [SelectComponent](../s - + Any changes made to the cell's in edit mode, will trigger the appropriate [editing event](editing.md#event-arguments-and-sequence) on exit and apply to the transaction state if transactions are enabled. - + The cell template `Cell` controls how a column's cells are shown when outside of edit mode. The cell editing template directive , handles how a column's cells in edit mode are displayed and controls the edited cell's edit value. - + By using with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the **focus** will remain on the **cell element**, not on the editor component that we've added. This is why we should take leverage of the `Focus` directive, which will move the focus directly in the in-cell component and will preserve **a fluent editing flow** of the cell/row. @@ -561,7 +561,7 @@ useEffect(() => { ``` - + We are using the native browser keydown event instead of React’s synthetic onKeyDown event. When a cell enters edit mode and the ENTER key is pressed to move to the next row, the grid’s editing feature updates the cell value and closes the edit mode. As a result, the input element used for editing is removed from the DOM. Due to React’s event system optimizations, the onKeyDown synthetic event does not bubble up to the grid because the element no longer exists in the React tree at that moment. Therefore, using the native event listener is necessary to ensure the expected behavior. @@ -688,7 +688,7 @@ Main benefits of the above approach include: ## CRUD operations - + Please keep in mind that when you perform some **CRUD operation** all of the applied pipes like **filtering**, **sorting** and **grouping** will be re-applied and your view will be automatically updated. @@ -1476,11 +1476,11 @@ In order for the custom theme to affect only our specific component, we can move This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), our styles will be applied only to our custom component. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. - + We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component: @@ -1499,7 +1499,7 @@ In addition to the steps above, we can also style the controls that are used for - + The sample will not be affected by the selected global theme from **Change Theme**. 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 5c62ec568f..4ed414463e 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 @@ -318,7 +318,7 @@ Due to the specific behavior of merged cells it has to be noted how exactly it t - **Row selection**: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection. - **Navigation/Activation**: when a cell is active, all merged cells in the same row become single cells, i.e. their merge sequence is broken. This also includes activation via keyboard navigation. - + If a merged cell is clicked, the closest cell from the merge sequence will become active. diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx index 63c006829f..7a6ea0c23b 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx @@ -91,7 +91,7 @@ If you want to disable cell selection you can just set CTRL + SHIFT + HOME to select all cells from the focused cell till the first-most cell in the grid - CTRL + SHIFT + END to select all cells from the focused cell till the last-most cell in the grid - + Continuous scroll is possible only within Grid's body. @@ -259,7 +259,7 @@ expectedData = [ - + `SelectedCells` will return the correct result even if the cell is not visible in grids view port. `GetSelectedData` will also return the selected cell data. `GetSelectedRanges` will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is **GridSelectionRange[]**. @@ -433,7 +433,7 @@ Afterwards, all we need to do is include the mixin in our component's style (cou @include grid($custom-grid-theme); ``` - + If the component is using an [Emulated ViewEncapsulation](../themes/styles.md#view-encapsulation), it is necessary to penetrate this encapsulation using `::ng-deep`. We scope the style under `:host` selector so as not to affect any other grids we might have in our application. @@ -454,7 +454,7 @@ With the custom theme applied, the selected grid cells are highlighted with our - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx index 0d00496777..f36e4c5b61 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx @@ -43,7 +43,7 @@ Copy behavior is working with the default interaction defined by the browser and - Both the **cut** and **copy** events are not natively supported in Internet Explorer. The exception is the **paste** event (IE 11) which is emitted but does not expose the property in the event. - + In order to **copy** cells in IE 11, you can use the keyboard selection. Hold the SHIFT key in order to make a multi-cell selection, press CTRL + C in order to copy. @@ -65,7 +65,7 @@ We expose Apply any existing column formatters to the copied data. - The string separator to use the for formatting the data in the clipboard. Default is `/t` - + Excel can automatically detect text that is separated by tabs (tab-delimited `/t`) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs. 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 3b5a6ab69c..96dd781212 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 @@ -18,11 +18,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The {Platform} {ComponentTitle} Column Moving feature in {ProductName} allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the {Platform} {ComponentTitle}, you can enable Column Moving for pinned and unpinned columns and for [Multi-Column Headers](multi-column-headers.md) as well. - + Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns. - + If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the **draggable** attribute set to **false**! @@ -31,7 +31,7 @@ This allows to attach handlers for any event emitted by the element, otherwise t - + If the pinned area exceeds its maximum allowed width (80% of the total width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area. @@ -308,7 +308,7 @@ The last step is to **include** the component mixins with its respective theme: @include grid($dark-grid-column-moving-theme); ``` - + Depending on the component [**View Encapsulation**](/components/themes/sass/component-themes.html#view-encapsulation) strategy, it may be necessary to `penetrate` this encapsulation using `::ng-deep` @@ -346,7 +346,7 @@ $dark-grid-column-moving-theme: grid-theme( ``` - + The color and palette are powerful functions for generating and retrieving colors. Please refer to [Palettes](/components/themes/palettes.html) topic for detailed guidance on how to use them. @@ -397,7 +397,7 @@ Don't forget to include the theme in the same way as it was demonstrated above. - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx index 5d57b3ee92..9394f942c0 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx @@ -894,11 +894,11 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the In order for the custom theme to affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. - + Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements outside of our component: @@ -914,7 +914,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx index 0b741852b6..6262f04958 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx @@ -419,7 +419,7 @@ This means that the following configuration is possible: - + There is a slight difference in the way resizing works for columns set in pixels and percentages. @@ -761,7 +761,7 @@ $custom-grid-theme: grid-theme( ); ``` - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. @@ -794,7 +794,7 @@ $custom-grid-theme: grid-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please, refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them. @@ -842,7 +842,7 @@ Don't forget to include the theme in the same way as it was demonstrated above. - + The sample will not be affected by the selected global theme from **Change Theme**. 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 6f81c638f4..505e08c604 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 @@ -49,7 +49,7 @@ The column selection feature can be enabled through the . With that being said, in order to select a column, we just need to click on one, which will mark it as . If the column is not selectable, no selection style will be applied on the header, while hovering. - + The [Multi Column Headers](multi-column-headers.md) feature does not reflect on the input. The `ColumnGroupComponent` is , if at least one of its children has the selection behavior enabled. In addition, the component is marked as if all of its descendants are . @@ -72,7 +72,7 @@ The [Multi Column Headers](multi-column-headers.md) feature does not reflect on ## Keyboard Combinations - + The keyboard combinations are available only when the grid input is set to `multiple`. @@ -84,7 +84,7 @@ There are two scenarios for keyboard navigation of the **Column Selection** feat The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as by setting the corresponding **setter**. - + The above statement also applies to the `ColumnGroupComponent`, except that when the property is changed it changes the state of its descendants. @@ -203,7 +203,7 @@ The last step is to include the custom `{ComponentSelector}` theme. ### Overriding the Base Theme In order to style components for Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables. - + If the component is using the [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. In order to prevent the custom theme from leaking into other components, be sure that you have included the `:host` selector before `::ng-deep`. @@ -220,7 +220,7 @@ If the component is using the [Emulated](../themes/styles.md#view-encapsulation) - + The sample will not be affected by the selected global theme from **Change Theme**. 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 63405cc0cf..bfcbd56d8f 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 @@ -541,7 +541,7 @@ const formatOptions : IgrColumnPipeArgs = { ``` - + When using ↑ + ↓ arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0) diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx index 31f61520a8..bd5ddeff83 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx @@ -611,7 +611,7 @@ The following sample demonstrates how to format the numeric values of a column a - + The formatted values filtering strategy won't work correctly if you have more than one column bound to the same field from your data and one of the columns has a formatter. @@ -808,11 +808,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We scope most of the components' mixins within `.igx-excel-filter` and `.igx-excel-filter__secondary`, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -887,7 +887,7 @@ $custom-drop-down:drop-down-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them. @@ -1046,7 +1046,7 @@ Don't forget to include the themes in the same way as it was demonstrated above. - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx index 09ef6edb83..a302bd7af8 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx @@ -45,7 +45,7 @@ import { ExcelExporterService, PdfExporterService } from 'igniteui-{Platform}'; export class AppModule {} ``` - + In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. @@ -126,15 +126,15 @@ To export grouped data, group the with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the . If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` to `true`. - + The exported `{ComponentName}` will not be formatted as a table, since Excel tables do not support multiple column headers. - + The exported will not be formatted as a table, since Excel tables do not support multiple column headers. - + is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: - `export-excel`, `export-csv`, `export-pdf` - `exportExcel`, `exportCsv`, `exportPdf` @@ -148,7 +148,7 @@ The exported wil By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` to `true`. - + PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file. 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 eb90f25521..f4811cf7fe 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx @@ -117,7 +117,7 @@ To enable the [Advanced filtering](advanced-filtering.md) however, you need to s ``` - + You can enable both the `QuickFilter` or `ExcelStyleFilter` and the advanced filtering user interfaces in the . Both filtering user interfaces will work independently of one another. The final filtered result in the is the intersection between the results of the two filters. @@ -195,7 +195,7 @@ The filtering feature is enabled for the + If values of type **string** are used by a column of data type **date**, the won't parse them to **date** objects and using filtering conditions won't be possible. If you want to use **string** objects, additional logic should be implemented on the application level, in order to parse the values to **date** objects. @@ -222,11 +222,11 @@ this.grid.filter('ProductName', 'myproduct', IgcStringFilteringOperand.instance( The only required parameters are the column field key and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions. - + The filtering operation **DOES NOT** change the underlying data source of the `{ComponentName}`. - + The filtering operation **DOES NOT** change the underlying data source of the . @@ -838,11 +838,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We scope the **igx-button** and the **igx-input-group** mixins within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. - + If the component is using an `Emulated` ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -900,7 +900,7 @@ $dark-button: button-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them. @@ -1003,7 +1003,7 @@ Don't forget to include the themes in the same way as it was demonstrated above. - + The sample will not be affected by the selected global theme from **Change Theme**. @@ -1011,7 +1011,7 @@ The sample will not be affected by the selected global theme from **Change Theme ## Known Limitations - + Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox [issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665). 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 47c9619365..f8fb5d6c22 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 @@ -27,12 +27,12 @@ Currently, the i - **{ComponentTitle} paginator** (if enabled). - + Due to this change, navigating between the cells with TAB and SHIFT + TAB is no longer supported in the . Pressing the TAB key now goes through the tab stops in the following order: **GroupBy** / **Toolbar** -> **Headers** -> **Body** -> **Summaries** -> **Footer / Paginator**. - + Exposing any **focusable** element into the body via template may introduce **side effects** in the keyboard navigation, since the default browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately. @@ -159,7 +159,7 @@ Overriding the default behavior for a certain key or keys combination is one of
- + Both `GetNextCell` and `GetPreviousCell` are available for the current level and cannot access cells from upper or lower level. @@ -321,7 +321,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { ``` - + Please refer to the sample code for full implementation details. diff --git a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx index 3068c89a1f..74d1005403 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx @@ -395,7 +395,7 @@ For achieving `n-th` level of nested headers, the declaration above should be fo Every supports [moving](column-moving.md), [pinning](column-pinning.md) and [hiding](column-hiding.md). - + When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed.
Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same `group`.
When `columns/column-groups` are not wrapped by current `group` which means they are **top level** `columns`, moving is allowed between whole visible columns. @@ -698,7 +698,7 @@ const groupHeaderTemplate = (e: IgrColumnTemplateContext) => { ``` - + If a header is re-templated and the corresponding column group is movable, you have to set the **draggable** attribute to **false** on the templated elements, so that you can handle any of the events that are applied! @@ -780,7 +780,7 @@ The last step is to **include** the component mixins: @include igx-grid($custom-theme); ``` - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -817,7 +817,7 @@ $custom-theme: igx-grid-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palette.md) topic for detailed guidance on how to use them. diff --git a/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx b/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx index f759caf6d7..c51102568e 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx @@ -134,7 +134,7 @@ The result of the above configuration can be seen on the screenshot below: multi-row-layout - + and properties must be set for each `Column` into a . The component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies. @@ -170,11 +170,11 @@ The following features are currently **not** supported: - CTRL + HOME or CTRL + END - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell. - + Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows. - + Selection and multi cell selection are working on layout, meaning that when a cell is active, its layout will be selected. Also all features of multiple selection like drag selection are applicable and will work per layout not per cell. @@ -331,11 +331,11 @@ In order for the custom theme do affect only specific component, you can move al This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. - + Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements outside of our component: @@ -353,7 +353,7 @@ This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Co - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx index 15f9b7cd70..e6a2a6d3db 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx @@ -276,11 +276,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We scope the `Button` mixin within `.igx-paginator__pager`, so that only the paginator buttons would be styled. Otherwise other buttons in the grid would be affected too. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -329,7 +329,7 @@ $dark-button: button-theme( ); ``` - + The `Color` and `Palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them. 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 af6d87353e..2f358a86c8 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 @@ -75,7 +75,7 @@ BLAZOR CODE SNIPPET HERE 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. @@ -320,7 +320,7 @@ BLAZOR CODE SNIPPET HERE ``` - + When remote data is requested, the filtering operation is case-sensitive. @@ -392,7 +392,7 @@ BLAZOR CODE SNIPPET HERE The remote filtering will have to be performed over the flat collection directly. We will also have to include all the parents for any record that matches the filtering condition regardless of whether or not the parents match the filtering (we do this to keep the hierarchy intact). The result can be seen below: - + When remote data is requested, the filtering operation is case-sensitive. @@ -413,7 +413,7 @@ The list items inside the Excel Style Filtering dialog represent the unique valu The developer can manually generate the necessary unique column values based on the information, that is provided by the `Column` and the arguments and then invoke the `Done` callback. - + When the `UniqueColumnValuesStrategy` input is provided, the default unique values generating process in the excel style filtering will not be used. @@ -1558,7 +1558,7 @@ BLAZOR CODE SNIPPET HERE - + In order for the Remote Paging to be configured properly a `GridPagingMode.Remote` should be set: diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx index 4891c984d9..04aecd9f89 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx @@ -188,7 +188,7 @@ They are added inside the - + When `ActionStripComponent` is a child component of the , hovering a row will automatically show the UI. @@ -311,7 +311,7 @@ These components expose templates giving flexibility for customization. For inst - + The predefined actions inherit `GridActionsBaseDirective` and when creating a custom grid action component, it should also inherit `GridActionsBaseDirective`. diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx index 1cff52349b..9eb2a0806d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx @@ -282,7 +282,7 @@ export class {ComponentName}RowDragComponent { - + When using row data from the event arguments (**args.dragData.data**) or any other row property, note that the entire row is passed in the arguments as a reference, which means that you must clone the data you need, if you want to distinguish it from the one in the source grid. @@ -545,7 +545,7 @@ Try to drag moons from the grid and drop them to their corresponding planets. Ro - + The classes applied to the row drag ghost, used in the demo above, are using ::ng-deep modifier, because row drag is an internal grid feature and cannot be accessed on application level, due to the CSS encapsulation. @@ -728,7 +728,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { ``` - + Make sure that there is a specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. @@ -1338,7 +1338,7 @@ In the demo in the next section you see how you can display an indicator of wher In order to track the position of the cursor, we bind to the `DragMove` event of the `DragDirective` when we start dragging a row. - + Make sure that there is a specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx index fd6ada9439..046f1db957 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx @@ -26,7 +26,7 @@ The following sample demonstrates how to enable row editing in the `{ComponentNa - + When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. @@ -414,11 +414,11 @@ RowEditable="true"> - + Setting primary key is mandatory for row editing operations. - + Enabling editing for individual columns is not necessary. Using the property in the `{ComponentName}`, all rows, with defined `Field` property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the input of that column to `false`. @@ -446,7 +446,7 @@ export class {ComponentName}RowEditSampleComponent { - + The `{ComponentName}` utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -664,7 +664,7 @@ This will apply our custom banner theme to the Row Editing overlay. However, sin Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope our banner theme. We can define our styles (including the [theme import](#import-theme)) in the component containing our `{ComponentName}`. - + If the component is using an [Emulated](themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component: @@ -727,7 +727,7 @@ After styling the banner and buttons, we also define a custom style for [the cel - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx index 96115ebf31..a27f0d436f 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx @@ -691,7 +691,7 @@ If the component is using an [Emulated](../themes/styles.md#view-encapsulation) - + The sample will not be affected by the selected global theme from **Change Theme**. 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 d0f01f6721..7f222e7c16 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 @@ -693,7 +693,7 @@ In the above example we are using an `Checkbox` and we bind `rowContext.selected - + The `rowContext.select()` and `rowContext.deselect()` methods are exposed in the template context of an `{ComponentSelector}`. They make it easier to toggle the current row, especially in a child grid, when you implement a click handler that overrides the base functionality. @@ -822,7 +822,7 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => { Each hierarchy level in an `{ComponentSelector}` can have its own row and header templating. - + The `headContext.selectAll()` and `headContext.deselectAll()` methods are exposed in the template context of an `{ComponentSelector}`. They make it easier to toggle all rows, especially in a child grid, when you implement a click handler that overrides the base functionality. diff --git a/docs/xplat/src/content/en/components/grids/_shared/size.mdx b/docs/xplat/src/content/en/components/grids/_shared/size.mdx index 95a590c225..288cd007ae 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/size.mdx @@ -71,7 +71,7 @@ And now let's see in details how each option reflects on the is `64px`; - **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column is `56px`; - + Please keep in mind that currently you **can not** override any of the sizes. diff --git a/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx index e72c8128f6..93808cf71b 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx @@ -53,7 +53,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per The {ProductName} Sizing feature in {Platform} {ComponentTitle} is an important aspect of creating responsive and user-friendly grid interfaces. The {Platform} {ComponentTitle} Sizing feature enables users to adjust the and of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the `{ComponentName}`, they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. - + If the Border box sizing is overridden by the user we cannot guarantee that the `{ComponentName}` will size correctly. @@ -61,7 +61,7 @@ If the Border box sizing is overridden by the user we cannot guarantee that the If the input does not have value assigned, its default value is `100%` and the `{ComponentName}` tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. - + Setting manually the style of the `{ComponentName}` itself will result in an unexpected behavior. @@ -86,7 +86,7 @@ The grid's - + Due to this behavior, if the grid data contains too many columns, it might have significant impact on the browser performance, since all columns would be rendered without virtualization. @@ -125,7 +125,7 @@ When the + Setting manually the style of the `{ComponentName}` itself will result in an unexpected behavior. @@ -146,7 +146,7 @@ The `{ComponentName}` height-null-24rows-parent-scroll-v2 - + Due to this behavior, if the grid data contains too many rows, it might have significant impact on the browser performance, since all rows would be rendered without virtualization. @@ -228,7 +228,7 @@ When the grid is resized in these scenarios, the column width is also updated to columns-default-all-first-100px-v2 - + Feature columns like Row Selector checkbox column and etc. fill additional space that is taken into account when autosizing columns. 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 301e084f6b..143c70490c 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx @@ -19,7 +19,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The {ProductName} Data Sorting feature in {Platform} {ComponentTitle} is enabled on a per-column level, meaning that the can have a mix of sortable and non-sortable columns. Performing {Platform} sort actions enables you to change the display order of the records based on specified criteria. - + Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. @@ -283,7 +283,7 @@ hierarchicalGridRef.current.sort([ - + Sorting is performed using our algorithm. Any `Column` 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. @@ -391,11 +391,11 @@ hierarchicalGridRef.current.clearSort(); - + The of the is of different type compared to the of the `Column`, since they work in different scopes and expose different parameters. - + The sorting operation **DOES NOT** change the underlying data source of the . @@ -575,7 +575,7 @@ const sortingExpressions: IgrSortingExpression[] = [ - + If values of type `string` are used by a column of `Date`, the won't parse them to `Date` objects and using `Sorting` won't work as expected. If you want to use `string` objects, additional logic should be implemented on an application level, in order to parse the values to `Date` objects. @@ -792,7 +792,7 @@ The last step is to **include** the component mixins: @include grid($custom-theme); ``` - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -826,7 +826,7 @@ $custom-theme: grid-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them. @@ -870,7 +870,7 @@ Don't forget to include the themes in the same way as it was demonstrated above. - + The sample will not be affected by the selected global theme from **Change Theme**. 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 b9f16cf5f0..928f1d8b72 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx @@ -23,7 +23,7 @@ The {ProductName} Summaries feature in {Platform} {ComponentTitle} functions on - + The summary of the column is a **function of all column values**, unless filtering is applied, then the summary of the column will be **function of the filtered result values** @@ -661,12 +661,12 @@ interface IgcSummaryResult { 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 `Operate` method to always return an array of `SummaryResult` 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. @@ -1063,11 +1063,11 @@ When a default summary is defined, the height of the summary area is calculated - + Column summary template could be defined through API by setting the column `SummaryTemplate` property to the required TemplateRef. - + Column summary template could be defined through API by setting the column property to the required TemplateRef. @@ -1296,7 +1296,7 @@ The available values of 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. - + The property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the . @@ -1326,7 +1326,7 @@ The available values of 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. - + The property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the . @@ -1467,7 +1467,7 @@ The last step is to **include** the component mixins: @include grid-summary($custom-theme); ``` - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -1506,7 +1506,7 @@ $custom-theme: grid-summary-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palettes.md) topic for detailed guidance on how to use them. diff --git a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx index 4eecbf42f4..aa2504e87f 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx @@ -263,7 +263,7 @@ The predefined and - + As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. @@ -878,7 +878,7 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi - + When exporting the or any of its child grids down the hierarchy, the exported data will be a flat collection of rows belonging to their respective grid (the child grids will not be included in the exported data). @@ -904,7 +904,7 @@ import { IgxExcelExporterService, IgxCsvExporterService } from 'igniteui-{Platfo export class AppModule { ... } ``` - + In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. @@ -976,7 +976,7 @@ Here is a snippet showing some of the options which can be customized through th In addition to changing the exported filename, the user can further configure the exporter options by waiting for the `ToolbarExporting` event and customizing the options entry in the event properties. - + By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true. @@ -1229,7 +1229,7 @@ The sample belows uses has significant amount of data, in order to increase the ## Custom Content - + This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified template files after the migration completes. @@ -1442,7 +1442,7 @@ The last step is to **include** the newly created themes. } ``` - + If `$legacy-support` is set to `false(default)`, include the component css variables like that: @@ -1456,7 +1456,7 @@ If `$legacy-support` is set to `false(default)`, include the component css varia } ``` - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -1486,7 +1486,7 @@ If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ## Known Limitations - + Currently, defining a toolbar component directly inside the {RowIslandSelector} is not supported. Use the `ToolbarTemplate` property instead. 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 436b19e99e..63675c8d3d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx @@ -121,7 +121,7 @@ Validation will be triggered in the following scenarios: - When updating cells/rows via the API - , , etc. - When using batch editing and the `Undo`/`Redo` API of the transaction service. - + Validation will not trigger for records that have not been edited via user input or via the editing API. Visual indicators on the cell will only shown if the related input is considered touched - either via user interaction or via the API of the validation service. diff --git a/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx b/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx index 935a2005b5..c4241a931f 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx @@ -80,7 +80,7 @@ igRegisterScript("CellTemplate", (ctx) => { The handler then renders the provided lit template directly in the DOM as needed. - + While both approaches are valid, the server-side templates do require a round-trip request to the server to retrieve and resolve the custom template before rendering it on the client. As such the client-template approach is more optimized and recommended, especially in scenarios with many templates that need frequent updates as there may be a noticeable delay between the related user-interaction and the template updates. diff --git a/docs/xplat/src/content/en/components/grids/data-grid.mdx b/docs/xplat/src/content/en/components/grids/data-grid.mdx index 721ce8f4fb..3ffa2afa8b 100644 --- a/docs/xplat/src/content/en/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/en/components/grids/data-grid.mdx @@ -2347,11 +2347,11 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + This is still in experimental feature for the `IgxGridComponent`. This means that there might be some unexpected behaviors in the Grid. In case of encountering any such behavior, please contact us on our [Github]({GithubLink}/discussions) page. - + Enabling it can affects other parts of an Angular application that the `IgxGridComponent` is not related to. 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 acb39b92bf..5a22b68206 100644 --- a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx @@ -259,7 +259,7 @@ gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, - + Up until now, grouping/sorting worked in conjunction with each other. In 13.2 version, a new behavior which decouples grouping from sorting is introduced. For example - clearing the grouping will not clear sorting expressions in the grid or vice versa. Still, if a column is both sorted and grouped, grouped expressions take precedence. @@ -619,11 +619,11 @@ Grid allows defining custom grouping per column or per grouping expression, whic - + In order to implement custom grouping the data first needs to be sorted appropriately. Due to this you may also need to apply a custom sorting strategy that extends the base `DefaultSortingStrategy`. After the data is sorted the custom groups can be determined by specifying a `GroupingComparer` for the column or for the specific grouping expression. - + In order to implement custom grouping the data first needs to be sorted appropriately. Due to this you may also need to apply a custom sorting strategy that extends the base . After the data is sorted the custom groups can be determined by specifying a for the column or for the specific grouping expression. @@ -886,11 +886,11 @@ In order for the custom theme to affect only specific component, you can move al This way, due to {Platform}'s [ViewEncapsulation](https://{Platform}.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. - + Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements outside of our component: @@ -912,7 +912,7 @@ This way, due to {Platform}'s [ViewEncapsulation](https://{Platform}.io/api/core - + The sample will not be affected by the selected global theme from **Change Theme**. 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 ad529dd406..e89474ceda 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 @@ -36,7 +36,7 @@ const boolData = data.filter(rec => typeof rec === "boolean"); const dates = data.filter(rec => isDate(rec)); ``` - + Bear in mind, that `isDate` is a custom function. 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 0599d6576d..2d8e8473c6 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 @@ -326,7 +326,7 @@ Each **{RowIslandSelector}** should specify the key of the property that holds t - + Note that instead of `data` the user configures only the `childDataKey` that the {HierarchicalGridSelector} needs to read to set the data automatically. @@ -815,7 +815,7 @@ See the [Hierarchical Grid Sizing](sizing.md) topic. */} ## CRUD operations - + An important difference from the flat Data Grid is that each instance for a given row island has the same transaction service instance and accumulates the same transaction log. In order to enable the CRUD functionality users should inject the `IgxHierarchicalTransactionServiceFactory`. @@ -845,7 +845,7 @@ To begin the customization of the hierarchical grid, you need to import the `ind ### Defining custom theme Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. - + There is no specific `sass` hierarchical grid function. @@ -941,11 +941,11 @@ In order for the custom theme do affect only specific component, you can move al This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. - + If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. - + Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements outside of our component: @@ -961,7 +961,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx index e1902a332d..ab365f8687 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx @@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The pivot and flat grid components inherit from a common base and thus share some functionality and features. - + Some features do not have meaningful behavior in the context of a pivot table and therefore cannot be enabled for `PivotGrid`. These include: - CRUD operations - Grouping @@ -40,13 +40,13 @@ The {PivotGridTitle} component has additional features and functionalities relat All dimensions (filters, rows, columns) can be filtered via the chip UI or the API. This functionality is embedded and enabled by default. - + You can use the filtering dimension to filter out data values which are not a part of the pivot view. The filtering UI can be opened via the dimension chips filter icon and allows excel-style filtering of the unique dimension values. - + If there is not enough space for all of the filtering chips, the {PivotGridTitle} will show the ones that were cut off into a dropdown. End-users can access and manipulate them there. @@ -288,7 +288,7 @@ All chips can change their order within their area by drag & drop. The chips from `rows`, `column`, `filter`(dimension chips) can be moved from any of those areas to any other and at any place. Chips from these areas can not be moved to the `values` area and chips from the `values` area can not be moved to any of the dimension areas. - + The chips from the {PivotGridTitle} can not be moved to the Pivot Data Selector and items from the Pivot Data Selector can not be moved to the {PivotGridTitle}. 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 4dbcf29bcd..65d507d8af 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 @@ -790,7 +790,7 @@ 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. 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 db2b75acc4..8ec8665f47 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 @@ -172,7 +172,7 @@ Regardless of which option is used for building the tree grid's hierarchy (child - `GridCell` - Ordinary cell that contains a value. - `TreeGridCell` - Tree cell that contains a value, an expand/collapse indicator and an indentation div element, which is based on the level of the cell's row. The level of a row component can be accessed through the `level` property of its inner `treeRow`. - + Each row can have only one tree cell, but it can have multiple (or none) ordinary cells. diff --git a/docs/xplat/src/content/en/components/grids/tree.mdx b/docs/xplat/src/content/en/components/grids/tree.mdx index de93cd302f..4b7d598c52 100644 --- a/docs/xplat/src/content/en/components/grids/tree.mdx +++ b/docs/xplat/src/content/en/components/grids/tree.mdx @@ -232,7 +232,7 @@ In order to render a tree you do not necessarily need a data set - individual it - + You can provide a custom slot content for each `TreeItem`'s indentation, expansion and label area respectively using the provided `indentation`, `indicator` and `label` slots. diff --git a/docs/xplat/src/content/en/components/inputs/button-group.mdx b/docs/xplat/src/content/en/components/inputs/button-group.mdx index 1a0749f6ef..4b999d6dd8 100644 --- a/docs/xplat/src/content/en/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/en/components/inputs/button-group.mdx @@ -257,7 +257,7 @@ A could be marked as selected via its - + Setting attribute is mandatory for using the property of the . 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 04fafd0f98..e29aaacaf6 100644 --- a/docs/xplat/src/content/en/components/inputs/circular-progress.mdx +++ b/docs/xplat/src/content/en/components/inputs/circular-progress.mdx @@ -219,7 +219,7 @@ Customizing the progress bar in order to use a color gradient instead of a solid - + For each defined as gradient slot of {ProductName} a [SVG stop](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) element would be created. The values passed as `color`, `offset` and `opacity` would be set as stop-color, offset and stop-opacity of the SVG element without further validations. 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 1d279e1ace..a110092777 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/features.mdx @@ -317,7 +317,7 @@ Defining a option wi - + The `GroupKey` property will only have effect if your data source consists of complex objects. 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 6b76396287..b9ea5b7be1 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx @@ -204,7 +204,7 @@ When the combo is bound to a list of complex data (i.e. objects), we need to spe - - **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 `DisplayKey`, the combo will use the specified `ValueKey` (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 `ValueKey` and `DisplayKey` respectively. - + When the data source consists of primitive types (e.g. `strings`, `numbers`, etc.), **do not** specify a `ValueKey` and/or `DisplayKey`. 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 77f144ca2f..f0e34d749f 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 @@ -270,7 +270,7 @@ Furthermore, users can construct a displayFormat string using the supported symb | | `tttt` | Long | noon | | | `ttttt` | Narrow | n | - + Many locales use the same time period string, irrespective of the format specified. Also, it has an effect only if a 12-hour clock is used. diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx index d1b7034619..ffafe10bc0 100644 --- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx +++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx @@ -209,7 +209,7 @@ Condition chips can be easily repositioned using mouse Drag & Drop or Keyboard r - Chip can also be dragged along groups and subgroups. For example, grouping/ungrouping expressions is achieved via the Expressions Dragging functionality. In order to group already existing conditions, first you need to add a new group through the 'add' group button. Then via dragging, the required expressions can be moved to that group. In order to ungroup, you could drag all conditions outside their current group and once the last condition is moved out, the group will be deleted. - + Chips from one query tree cannot be dragged in another, e.g. from parent to inner and vice versa. @@ -224,7 +224,7 @@ Chips from one query tree cannot be dragged in another, e.g. from parent to inne - Space / Enter - focused expression enters edit mode. If chip is been moved, this confirms it's new position. - Esc - chip's reordering is canceled and it returns to it's original position. - + Keyboard reordering provides the same functionality as mouse Drag & Drop. Once a chip is moved, user has to confirm the new position or cancel the reorder. @@ -253,7 +253,7 @@ By default the header would not be d The search value of a condition can be templated by setting the property to a function that returns a lit-html template. - + When using `SearchValueTemplate`, you must provide templates for all field types in your entity, or the query builder will not function correctly. It is mandatory to implement a default/fallback template that handles any fields or conditions not covered by specific custom templates. Without this, users will not be able to edit conditions for those fields. diff --git a/docs/xplat/src/content/en/components/inputs/select.mdx b/docs/xplat/src/content/en/components/inputs/select.mdx index 9a922d339d..93980f4b0f 100644 --- a/docs/xplat/src/content/en/components/inputs/select.mdx +++ b/docs/xplat/src/content/en/components/inputs/select.mdx @@ -100,7 +100,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - + Please note that the select header and group components are not mandatory unless you want to use them. @@ -223,7 +223,7 @@ You can use the to provide a header for a group Multiple s can be placed between the opening and closing brackets of an component so that users can visually group them together. The can be labelled via its `label` slot and disabled via its property. - + Keep in mind that if a select group is disabled, you cannot enable separate items of it. @@ -358,7 +358,7 @@ When the select is focused and the list of options is **visible**: - Using the ↑ ↓ keys will activate the next item in the list. - Using the HOME or END keys will activate the first or last item in the list. - + The `Select` component supports only **single** selection of items. diff --git a/docs/xplat/src/content/en/components/inputs/tooltip.mdx b/docs/xplat/src/content/en/components/inputs/tooltip.mdx index 4f93a7e4ee..2012fef798 100644 --- a/docs/xplat/src/content/en/components/inputs/tooltip.mdx +++ b/docs/xplat/src/content/en/components/inputs/tooltip.mdx @@ -362,7 +362,7 @@ If you want to control the delay before showing and hiding the + It's important to note that the Tooltip API methods — , , and — DO NOT take the and properties into account. They act immediately when invoked. diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx index 46b8345243..ec0ba37dd5 100644 --- a/docs/xplat/src/content/en/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx @@ -498,7 +498,7 @@ The Chat component includes built-in support for Markdown content through the `c 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/accordion.mdx b/docs/xplat/src/content/en/components/layouts/accordion.mdx index d70004c6a4..535cc5721b 100644 --- a/docs/xplat/src/content/en/components/layouts/accordion.mdx +++ b/docs/xplat/src/content/en/components/layouts/accordion.mdx @@ -206,7 +206,7 @@ As demonstrated above, the and methods you can respectively collapse and expand all s of the programmatically. - + If property is set to **true** calling method would expand only the focused panel. diff --git a/docs/xplat/src/content/en/components/layouts/carousel.mdx b/docs/xplat/src/content/en/components/layouts/carousel.mdx index 3ced129b40..921f54d211 100644 --- a/docs/xplat/src/content/en/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/en/components/layouts/carousel.mdx @@ -198,7 +198,7 @@ If you want a slide to be active by default, use the `Active` attribute: - + If no active slide is set, the first one will be set by default. If there are multiple active slides on initial rendering or subsequent updates, only the last one will be taken into account. @@ -649,7 +649,7 @@ The carousel [animations](carousel.md#animations) are fully supported on touch d 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. - + Hovering the mouse over any carousel content or moving keyboard focus to any of the carousel content pauses automatic transitioning. Automatic transitioning resumes when the mouse moves away from the carousel or when keyboard focus moves out of the carousel content. This can be prevented by setting property to **true**. 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 5a1064db01..0d16037c17 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx @@ -85,7 +85,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). diff --git a/docs/xplat/src/content/en/components/layouts/stepper.mdx b/docs/xplat/src/content/en/components/layouts/stepper.mdx index 022bd0f2bf..621a15a800 100644 --- a/docs/xplat/src/content/en/components/layouts/stepper.mdx +++ b/docs/xplat/src/content/en/components/layouts/stepper.mdx @@ -209,11 +209,11 @@ Steps can be declared using one of the following approaches. For each step the user has the ability to configure indicator, title and subtitle using the , and slots as follows: - + The `Default` `Step` slot renders the content of the step. - + The `Default` slot renders the content of the step. @@ -359,7 +359,7 @@ When the linear property is set to **true**, the stepper will require the curren If the current non-optional step is not valid you cannot go forward to the next step until you validate the current one. - + Optional steps validity is not taken into account in order to move forward. @@ -371,7 +371,7 @@ Optional steps validity is not taken into account in order to move forward. - **prev** – activates the previous non-disabled step. - **reset** – resets the stepper to its initial state. - + The reset method would reset the stepper to its initial state, i.e. activates the first step. It would not clear the step`s content. This should be done manually. @@ -400,7 +400,7 @@ When the {Platform} is horizontally orientated and th When the orientation is set to vertical and the title position **is not defined**, the titles would be displayed **after** the indicators. - + **titlePosition** property is applicable **only** when the stepper stepType property is set to **full**. @@ -416,7 +416,7 @@ If you want to display only titles for the steps, set the stepType option to **t In this way if subtitles are defined, they will also be rendered below the step title. - + This container could be re-templated as per your requirement without any size restrictions. For example, you could add an indicator with size greater than 24 pixels inside it. 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 e871ed4c3a..eb6aaef12c 100644 --- a/docs/xplat/src/content/en/components/layouts/tile-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/tile-manager.mdx @@ -560,7 +560,7 @@ Resizing in the Tile Manager is a functionality that allows tiles to be resized To ensure smooth resizing, a ghost element is used instead of directly modifying the tile’s dimensions. This element appears on top of the original tile, displaying its current dimensions when resizing begins, and it updates in real time as the user drags any of the resize handles. - + If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits. @@ -645,7 +645,7 @@ You can reorder tiles in the Tile Manager using the drag-and-drop feature. By de - With the `tile` option, you can click and hold anywhere on an individual tile to start dragging it. - With the `tile-header` option, you can only click and hold in the tile's header section to start the dragging process. - + While the tile is in maximized or fullscreen state, the tile cannot be dragged. diff --git a/docs/xplat/src/content/en/components/localization.mdx b/docs/xplat/src/content/en/components/localization.mdx index 942a40c771..dc8eff0d70 100644 --- a/docs/xplat/src/content/en/components/localization.mdx +++ b/docs/xplat/src/content/en/components/localization.mdx @@ -6,6 +6,7 @@ mentionedTypes: ["Grid"] --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; # {Platform} Localization (i18n) @@ -19,7 +20,9 @@ Currently, {ProductName} ships with resource strings for the following languages ->Note: Hindi (HI) included in the sample is for illustrative purposes only, to demonstrate the possibility of passing a custom localization object. In this sample, it contains only a few localized strings for the summary. For more details, see the [Custom localized resource strings](#custom-localized-resource-strings) section below. + +Hindi (HI) included in the sample is for illustrative purposes only, to demonstrate the possibility of passing a custom localization object. In this sample, it contains only a few localized strings for the summary. For more details, see the [Custom localized resource strings](#custom-localized-resource-strings) section below. + ## Locale @@ -82,7 +85,9 @@ In general, resources should be registered under the languages, regions, and scr This approach enables setting the localization through the `lang` global attribute of the `HTML` tag. This attribute is observed, and if it changes, all rendered components update their resource strings to the currently set language. All rules regarding the tag used apply as described above. -> Note: This works only on root level and will not work for inner elements on the page. + +This works only on root level and will not work for inner elements on the page. + @@ -383,7 +388,9 @@ public resourcesDE = GridResourceStringsDE; If {ProductName} does not provide resource strings for the required language, custom resource strings can always be provided. ->Note: Contributions to the [`igniteui-i18n-resources`](https://github.com/IgniteUI/igniteui-i18n/tree/master/projects/igniteui-i18n-resources) GitHub repo with additional languages are welcome. + +Contributions to the [`igniteui-i18n-resources`](https://github.com/IgniteUI/igniteui-i18n/tree/master/projects/igniteui-i18n-resources) GitHub repo with additional languages are welcome. + @@ -553,7 +560,9 @@ registerI18n(customResources, 'en'); ->Note: The last examples set only specific resource strings. The remaining strings default to English if they are not available for the components in use. + +The last examples set only specific resource strings. The remaining strings default to English if they are not available for the components in use. + ## Available resource strings diff --git a/docs/xplat/src/content/en/components/nextjs-usage.mdx b/docs/xplat/src/content/en/components/nextjs-usage.mdx index 13a3916c79..507e36d821 100644 --- a/docs/xplat/src/content/en/components/nextjs-usage.mdx +++ b/docs/xplat/src/content/en/components/nextjs-usage.mdx @@ -96,7 +96,7 @@ IgrDataChartInteractivityModule.register(); - + It's important to note that {ProductName} components are using client-only features like state and browser events. Infragistics' components will work as expected within Client Next.js Components since they have the "use client" directive, but they won't work within Server Components. @@ -172,7 +172,7 @@ function App() { - + The majority of {ProductName} components may remain unwrapped as they are expected to be utilized within other Client Components. Therefore, there is no need to wrap all Infragistics' components. @@ -285,7 +285,7 @@ export default function GridDynamicComponent() { - + Implementing lazy loading for components can enhance performance, but it is advisable to use it exclusively when the components are not immediately visible on the page. diff --git a/docs/xplat/src/content/en/components/notifications/banner.mdx b/docs/xplat/src/content/en/components/notifications/banner.mdx index a483ad1974..198e8af64d 100644 --- a/docs/xplat/src/content/en/components/notifications/banner.mdx +++ b/docs/xplat/src/content/en/components/notifications/banner.mdx @@ -139,7 +139,7 @@ In order to display the banner component, use its - + The includes a default action button `OK`, which closes the banner. @@ -187,11 +187,11 @@ Configuring the message displayed in the banner is easy - just change the conten 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 `Icon` elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `Icon` 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 `Icon` directly to the banner. @@ -405,7 +405,7 @@ function handleClosing() { - + If the changes above are applied, the banner will never close, as the closing event is always cancelled. diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx index 87c36f47d3..cb33119be2 100644 --- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx @@ -207,11 +207,11 @@ The {ProductName} Calendar component allows you to switch between three differen 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 `HeaderOrientation` property corresponds to the `header-orientation` attribute. 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 74642a9f95..379b037126 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -18,7 +18,7 @@ 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 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 8d78b4e193..307456c213 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -83,7 +83,7 @@ There are over 35 chart types supported by the Spreadsheet ChartAdapters includi ## Dependencies - + In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a `Workbook`. diff --git a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx index bf05ec32dc..b0005b4391 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx @@ -157,7 +157,7 @@ Now that the {Platform} spreadsheet module is imported, next is the basic config - + In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a `Workbook`. diff --git a/docs/xplat/src/content/en/components/themes/overview.mdx b/docs/xplat/src/content/en/components/themes/overview.mdx index 10a2bcfd25..db96a99818 100644 --- a/docs/xplat/src/content/en/components/themes/overview.mdx +++ b/docs/xplat/src/content/en/components/themes/overview.mdx @@ -56,7 +56,7 @@ Here's the complete list of all bundled themes and their path: ## Runtime Theme Switching - + Changing the theme at runtime also requires you to replace the global stylesheet from the table above. @@ -71,7 +71,7 @@ import { configureTheme } from "igniteui-webcomponents"; configureTheme("material"); ``` - + This only tells components to switch their internal styles to the desired theme, you should also switch the global theme file to one of the listed files above. diff --git a/docs/xplat/src/content/en/components/themes/palettes.mdx b/docs/xplat/src/content/en/components/themes/palettes.mdx index d948d1d9b7..4de4a65c5e 100644 --- a/docs/xplat/src/content/en/components/themes/palettes.mdx +++ b/docs/xplat/src/content/en/components/themes/palettes.mdx @@ -48,7 +48,7 @@ As the table above shows, the `gray` color doesn't include the `A100`, `A200`, ` On top of the aforementioned colors, we also include **Level AA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) compliant `contrast` colors for each color variant. This means that you can safely use the corresponding `contrast` color variants as foreground colors for the base color variant. - + Contrast colors are generated at build-time therefore overriding the CSS variables will not update the corresponding contrast colors. diff --git a/docs/xplat/src/content/en/components/themes/tailwind.mdx b/docs/xplat/src/content/en/components/themes/tailwind.mdx index d8de78ea7a..62de47519c 100644 --- a/docs/xplat/src/content/en/components/themes/tailwind.mdx +++ b/docs/xplat/src/content/en/components/themes/tailwind.mdx @@ -114,7 +114,7 @@ In the sample below, you’ll see a 404 page built entirely with Tailwind utilit - + This sample is fictional and fully custom, it’s not part of the Ignite UI component library. diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx index 0ade3fb721..2df02ff9b7 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx @@ -16,7 +16,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; すべての {ProductName} チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。 - + 次の例は、`CategoryChart` および `FinancialChart` コントロールに適用されます。 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx index 4fd1c0eecb..f7f2659892 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx @@ -14,7 +14,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; すべての {ProductName} チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。これらの機能は、以下の例で示されています。 - + 次の例は、`CategoryChart` および `FinancialChart` コントロールに適用されます。 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-annotations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-annotations.mdx index 403a17d5ae..f4cb924dd6 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-annotations.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-annotations.mdx @@ -16,7 +16,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; {Platform} チャートでは、データ注釈レイヤーを使用して、データ チャートにプロットされたデータに、傾斜線、垂直/水平線 (軸スライス)、垂直/水平ストリップ (特定の軸をターゲットとする)、四角形、さらには平行四辺形 (バンド) で注釈を付けることができます。データ バインディングがサポートされているため、チャートをカスタマイズするために必要な数の注釈を作成できます。また、さまざまな注釈レイヤーを組み合わせて、プロット領域内にテキストをオーバーレイし、データ内の重要なイベント、パターン、領域に注釈を付けることもできます。 - + これらの機能はデカルト軸をサポートするように設計されており、現在は半径または角度の軸には対応していません。 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx index 9aa437e63e..cd5d9b9073 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx @@ -79,7 +79,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## コードによるチャート ナビゲーション - + チャートのコード ナビゲーションは、`DataChart` コントロールにのみ使用できます。 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx index 0052105c3e..96b885aa86 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx @@ -274,7 +274,7 @@ this.LineSeries.Resolution = 10; データ ポイント間の時間間隔に基づくスペースが重要でない場合は、DateTime をサポートする x 軸の使用はお勧めしません。代わりに、順序/カテゴリ軸を使用する必要があります。これは、データを結合する方法がより効率的であるためです。また、順序/カテゴリ軸は、時間ベースの x 軸のようにデータのソートを実行しません。 - + `CategoryChart` はすでに順序/カテゴリ軸を使用しているため、そのプロパティを変更する必要はありません。 @@ -332,7 +332,7 @@ this.LineSeries.Resolution = 10; デフォルトでは、{Platform} チャートは、データの範囲に基づいて `YAxisInterval` を自動的に計算します。したがって、軸のグリッド線と軸のラベルが多すぎないように、軸の間隔を特に小さい値に設定することは避けてください。また、多くの軸グリッド線または軸ラベルが必要ない場合は、`YAxisInterval` プロパティを自動的に計算された軸間隔よりも大きい値に増やすことを検討することをお勧めします。 - + チャートのパフォーマンスが低下するため、軸の副間隔を設定することはお勧めしません。 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 c93eda4796..fa131d28f5 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 @@ -25,7 +25,7 @@ import dataChartUserAnnotationDelete from '@xplat-images/charts/data-chart-user- - + この機能は X 軸と Y 軸をサポートするように設計されており、現在、ラジアル軸やアンギュラー軸はサポートされていません。 diff --git a/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx index accf2e5d66..454f2f20fd 100644 --- a/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx @@ -101,7 +101,7 @@ ItemLegend バッジを変更することもできます。デフォルトでは これらのプロパティは、「その他」のスライス (存在する場合) にのみ影響します。他のすべてのスライスは、通常のパレットと項目ごとの色付け動作を引き続き使用します。 - + 「その他」のスライスは、チャートがそれを作成するように構成されている場合にのみレンダリングされます (たとえば、 が 0 より大きく、適切な が設定されている場合)。「その他」のスライスが存在しない場合、 と は表示上の効果はありません。 diff --git a/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx b/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx index d1a8006ba9..4e18acd23a 100644 --- a/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx @@ -26,7 +26,7 @@ Infragistics {Platform} Excel Engine の - + XLSX 形式が必要です。他の形式は現在サポートされていません。 diff --git a/docs/xplat/src/content/jp/components/excel-library.mdx b/docs/xplat/src/content/jp/components/excel-library.mdx index 154fa2068c..b1a3a0eea9 100644 --- a/docs/xplat/src/content/jp/components/excel-library.mdx +++ b/docs/xplat/src/content/jp/components/excel-library.mdx @@ -149,7 +149,7 @@ Web Assembly (WASM) Blazor プロジェクトを使用している場合は、 - Microsoft Excel 2016 - + Excel ライブラリ は Excel Binary Workbook (.xlsb) フォーマットを現時点ではサポートしていません。 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 290baca01e..3f7dec15a8 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 @@ -321,7 +321,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov #### {PackageMaps} 地理マップ - + 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 詳細は以下をご覧ください: @@ -921,7 +921,7 @@ The type of Values from `PivotConfiguration` option is now array of IgbPivotValu ### **{PackageVerChanges-21-2.1}** - + 以下の重大な変更が導入されました @@ -1022,7 +1022,7 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to ## 地理マップ - + これらの機能は CTP です。 @@ -1062,7 +1062,7 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to ## **{PackageVerChanges-21-2}** - + The **Igb** prefix is now required for the {ProductName} components and nested elements within each component. This API change was necessary to avoid ambiguity between Infragistics controls and 3rd party controls. For example, ``` ``` instead of ``` ``` @@ -1187,7 +1187,7 @@ for example: #### Geographic Map - + These features are CTP 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 ba170d125a..6e8a2540f9 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 @@ -435,7 +435,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov ### {PackageMaps} 地理マップ - + 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 詳細は以下をご覧ください: @@ -482,7 +482,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov ### **{PackageVerChanges-24-2-APR2}** - + バージョン 19.0.0 では、React 製品に多くの重大な変更が導入され、API の改善と整理が行われました。詳細は完全なアップデートガイドをご参照ください。 @@ -502,7 +502,7 @@ Stepper Step の `titlePosition` は、同じ動作を持つ undefined ではな `igr-tab` パネル プロパティは削除されました。 ## **{PackageVerChanges-24-2-APR}** - + With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide. @@ -989,7 +989,7 @@ Added significant improvements to default behaviors, and refined the Category Ch ### {PackageMaps} (GeoMap) - + これらの機能は CTP です。 @@ -1082,7 +1082,7 @@ for example: ### {PackageGrids} (データ グリッド) - + これらの重大な変更は、グリッド パッケージで導入されました。 @@ -1116,7 +1116,7 @@ for example: ### {PackageGrids} (Data Grid) - + These breaking changes were introduce in the grid package. @@ -1154,7 +1154,7 @@ income.field = "Income"; The data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid". - + These breaking changes were introduce in these packages and components only: @@ -1185,7 +1185,7 @@ The data grid component requires the "inputs" package. Import statements have been simplified to use just package names instead of full paths to API classes and enums. - + These breaking changes were introduce in these packages and components only: 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 d555fd4c6e..bf097977af 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 @@ -402,7 +402,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov ### **{PackageVerChanges-24-2-APR}** - + As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028. For more details please visit: @@ -820,7 +820,7 @@ For more details please visit: - `DataGrid`: - + これらの重大な変更は、グリッド パッケージで導入されました。 @@ -882,7 +882,7 @@ This release introduces a few improvements and simplifications to visual design ### {PackageCommon} - + These features are CTP @@ -948,7 +948,7 @@ for example: - `DataGrid`: - + These breaking changes were introduce in the grid package. @@ -986,7 +986,7 @@ income.field = "Income"; - Changed Name of Live Grid - the data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid". - + These breaking changes were introduce in these packages and components only: @@ -1017,7 +1017,7 @@ The data grid component requires the "inputs" package. Import statements have been simplified to use just package names instead of full paths to API classes and enums. - + These breaking changes were introduce in these packages and components only: 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 877d949bcc..85149cfe4d 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx @@ -21,7 +21,7 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 - + このトピックでは、{PackageAngularComponents} パッケージに含まれていないコンポーネントの変更についてのみ説明します。 igniteui-angular コンポーネントに固有の変更については CHANGELOG.MD を参照してください。 @@ -181,7 +181,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 ### {PackageMaps} 地理マップ - + 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 詳細は以下をご覧ください: @@ -371,7 +371,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 - **ダッシュ配列**を `DataChart` のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされた[シリーズ](charts/types/line-chart.md#{PlatformLower}-折れ線チャートのスタイル設定)、チャートの[グリッド線](charts/features/chart-axis-gridlines.md#{PlatformLower}-軸グリッド線のプロパティ)、およびチャートにプロットされたシリーズの[トレンドライン](charts/features/chart-trendlines.md#{PlatformLower}-チャート-トレンドラインのダッシュ配列の例)に適用できます。 - + The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using `IncludedProperties` | `ExcludedProperties` because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. ## **{PackageVerChanges-22-2.2}** @@ -423,7 +423,7 @@ This release introduces a few improvements and simplifications to visual design ## {PackageCharts} (チャート) ### **{PackageVerChanges-21-2}** - + パッケージ「lit-html」を確認してください。最適な互換性のために、「^2.0.0」以降がプロジェクトに追加されます。 @@ -475,7 +475,7 @@ for example: ### **{PackageVerChanges-21-1}** - + These features are CTP diff --git a/docs/xplat/src/content/jp/components/general-cli-overview.mdx b/docs/xplat/src/content/jp/components/general-cli-overview.mdx index c8b1ddab72..ff43f6aa96 100644 --- a/docs/xplat/src/content/jp/components/general-cli-overview.mdx +++ b/docs/xplat/src/content/jp/components/general-cli-overview.mdx @@ -49,7 +49,7 @@ ig new "[name_of_project]" --framework=[target_framework] --type=[project_type] ig new "My Project" --framework=react --type=igr-ts ``` - + TypeScript のサポートは、Ignite UI CLI バージョン 13 以降で利用可能になります。 @@ -97,7 +97,9 @@ ig add [component_template] [component_name] ig add grid MyGridComponent ``` -> 注: ルーティング ファイルは、新しいコンポーネントを含むページへのパス (この場合は `/my-grid-component`) で更新されます。これを使用して、新しく生成されたページに手動で移動できます。 + +ルーティング ファイルは、新しいコンポーネントを含むページへのパス (この場合は `/my-grid-component`) で更新されます。これを使用して、新しく生成されたページに手動で移動できます。 + diff --git a/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx b/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx index f353bab71c..e8d2303829 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx @@ -144,6 +144,6 @@ Windows 用の .NET MAUI Blazor アプリをビルドして実行します。 getting-started-blazor-card-windows - + .NET MAUI を使用したクロス プラットフォーム アプリケーションの構築の詳細については、[Microsoft のドキュメント](https://docs.microsoft.com/ja-jp/dotnet/maui/get-started/first-app?pivots=devices-android)を参照してください。 \ No newline at end of file diff --git a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx index 595915fcf0..5362c367eb 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx @@ -26,7 +26,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc - Visual Studio を起動し、スタート ページで **[新しいプロジェクトの作成]** をクリックし、**Blazor Server App**、**Blazor WebAssembly App**、**Blazor Web App** などの Blazor テンプレートを選択して **[次へ]** をクリックします。 - + **Blazor Server App** を使用する場合は、コンポーネントが使用されるページに `@rendermode InteractiveServer` を追加してください。 diff --git a/docs/xplat/src/content/jp/components/general-getting-started.mdx b/docs/xplat/src/content/jp/components/general-getting-started.mdx index c92953d57e..9a28e6dea5 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started.mdx @@ -75,7 +75,7 @@ Ignite UI CLI の詳細については、[CLI の概要](general-cli-overview.md - + デフォルトでは、Ignite UI CLI は [商用ライセンス](./general-open-source-vs-premium.md#全コンポーネントの比較表)の下にある Ignite UI for React の Grid コンポーネントの Trial バージョンをインストールすることに注意してください。 @@ -221,7 +221,7 @@ import { defineAllComponents } from 'igniteui-webcomponents'; defineAllComponents(); ``` - + すべてのコンポーネントをインポートすると、アプリケーションのバンドル サイズが大きくなります。そのため、実際に使用しているコンポーネントのみをインポートすることをお勧めします。 @@ -266,7 +266,7 @@ npm init -y npm install webpack webpack-cli --save-dev ``` - + Webpack はモジュール バンドラーです。主な目的は、ブラウザーで使用するために JavaScript ファイルをバンドルすることですが、あらゆるリソースやアセットを変換、バンドル、またはパッケージ化することもできます。 @@ -301,7 +301,7 @@ code . }, ``` - + このスクリプトは webpack を使用して **index.js** ファイルを **index.bundle.js** と呼ばれる別のファイルにバンドルし、**dist** という名前のフォルダーに配置します。 ビルド中に **JavaScript のメモリ不足** の問題が発生した場合、代わりに以下のビルド コマンドを使用してヒープ サイズを増やすことができます。 @@ -376,7 +376,7 @@ ModuleManager.register( npm run build ``` - + このコマンドは、前に作成したビルド スクリプトを実行します。ビルド スクリプトは、**dist** という名前のフォルダーに **index.bundle.js** という名前のファイルを生成します。 @@ -395,7 +395,7 @@ npm run build - + Live Server は Visual Studio Code の拡張機能で、静的および動的ページの自動更新機能を備えたローカル開発サーバーを起動できます。この拡張機能は、Visual Studio Code の [拡張機能] タブから、または [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) からダウンロードしてインストールできます。 diff --git a/docs/xplat/src/content/jp/components/general-installing-blazor.mdx b/docs/xplat/src/content/jp/components/general-installing-blazor.mdx index f2b3012c5c..87cef407f5 100644 --- a/docs/xplat/src/content/jp/components/general-installing-blazor.mdx +++ b/docs/xplat/src/content/jp/components/general-installing-blazor.mdx @@ -22,7 +22,7 @@ NuGet を使用して Ignite UI for Blazor をインストールするには、 ライセンスを取得したユーザーは、[Infragistics プライベート NuGet フィード](./general-nuget-feed.md)で提供されている公式のライセンス付き Ignite UI for Blazor NuGet パッケージを使用する必要があります。 - + トライアル ユーザーは、[NuGet.org](https://www.nuget.org/packages/IgniteUI.Blazor) にある **IgniteUI.Blazor** トライアル NuGet パッケージをインストールできます。 @@ -36,7 +36,7 @@ NuGet を使用して Ignite UI for Blazor をインストールするには、 nuget-package-manager-browse - + Infragistics パッケージ ソースがない場合、追加するには[ Infragistics NuGet フィード トピック](./general-nuget-feed.md)を参照してください。 diff --git a/docs/xplat/src/content/jp/components/general-licensing.mdx b/docs/xplat/src/content/jp/components/general-licensing.mdx index dad3d9c515..227e5c58d7 100644 --- a/docs/xplat/src/content/jp/components/general-licensing.mdx +++ b/docs/xplat/src/content/jp/components/general-licensing.mdx @@ -40,7 +40,7 @@ Npm は Node.js ランタイム環境で使用する一般的なデフォルト Infragistics {ProductName} は npm パッケージで提供され、[いくつかの簡単な手順](./general-getting-started.md)でプロジェクトの依存関係として追加できます。この方法を選択する場合、npm を構成する必要はありません。商用ライセンスのパッケージをインストールする場合、製品の **{ProductName} のトライアル版バージョン** の使用を開始します。 - + トライアル版の使用を開始するとはどういう意味ですか？これは、Web ビューの一部に**ウォーターマーク**が付いた製品のバージョンを使用することを意味します。たとえば、1 か月など、有効期限が切れるまでの一定期間、ライセンス パッケージを使用することを意味するものではありません。 diff --git a/docs/xplat/src/content/jp/components/general-nuget-feed.mdx b/docs/xplat/src/content/jp/components/general-nuget-feed.mdx index 492e10d852..851cbea4ca 100644 --- a/docs/xplat/src/content/jp/components/general-nuget-feed.mdx +++ b/docs/xplat/src/content/jp/components/general-nuget-feed.mdx @@ -30,7 +30,7 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet - 名前を **Infragistics** に設定します。 - NuGet プロトコル バージョン 3 を使用する場合は、ソースを **https://packages.infragistics.com/nuget/licensed/v3/index.json** に設定します。それ以外の場合は、**https://packages.infragistics.com/nuget/licensed/** に設定する必要があります。 - + v3 またはそれ以前のバージョンを使用するかどうかの詳細については、次の Web サイト (英語) をご覧ください: **https://devblogs.microsoft.com/nuget/nuget-3-what-and-why/** 。プロトコル v3 は、新しいバージョンの NuGet クライアント (2015 以降) を使用する場合にのみ適用されます。古い NuGet クライアントは、v3 と互換性がない場合があります。 @@ -38,7 +38,7 @@ v3 またはそれ以前のバージョンを使用するかどうかの詳細 nuget-package-manager-package-sources-ig-server - + このソースから NuGet パッケージを初めて追加する場合、Infragistics 資格情報の入力を求められます。 @@ -56,6 +56,6 @@ nuget sources add -name "Infragistics" -source "https://packages.infragistics.co nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed" -username "your login email" -password "your password" ``` - + パスワードは暗号化されて NuGet 設定ファイルに保存され、暗号化されたのと同じユーザー コンテキストでのみ解読できます。設定ファイルのデフォルトの場所は `%AppData%\NuGet\NuGet.config` です。 \ No newline at end of file diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx index 954ac629b9..d9e81f61c5 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx @@ -139,7 +139,7 @@ grid.data = []; - + {GridLiteTitle} のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。 通常は `clearSort()` または `clearFilter()` を呼び出してリセットすることをお勧めします。 @@ -148,7 +148,7 @@ grid.data = []; - + {GridLiteTitle} のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。 通常は `ClearSort()` または `ClearFilter()` を呼び出してリセットすることをお勧めします。 diff --git a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx index a3161a616b..b9932180b5 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx @@ -304,7 +304,7 @@ return ( 列がサイズ変更可能に設定されている場合、列ヘッダー右端をドラッグして幅を増減できます。リサイズ領域をダブルクリックすると、自動調整がトリガーされ、セルやヘッダーの最大コンテンツに合わせて幅が設定されます。 - + 「流動的」幅 (fr、%、など) の列は、グリッドのリサイズ時に予期せぬ動作をする場合があります。アプリケーションのシナリオによっては、ユーザーがレイアウトのズレを経験しないように、「固定」単位を使用する方がよい場合があります。 diff --git a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx index 288f55819a..5c349e485d 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx @@ -188,7 +188,7 @@ grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode - + 単一/複数列ソートの動作は、ユーザーが {GridLiteTitle} を操作する方法を制御します。API で複数の式によるソートを実行しても、単一ソートが有効な場合でも動作します。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx index 4a08d7245c..a51819cb07 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx @@ -221,7 +221,7 @@ const filteringTree: IgrFilteringExpressionsTree = { ツールバーを表示したくない場合は、`OpenAdvancedFilteringDialog` および `CloseAdvancedFilteringDialog` メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。 - + で **QuickFilter**/**ExcelStyleFilter** と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。 の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。 @@ -348,11 +348,11 @@ igx-advanced-filtering-dialog { } ``` - + カスタム テーマが高度なフィルタリング ダイアログにネストされたコンポーネントのみに影響するように、コンポーネントのほとんどの mixins を `igx-advanced-filtering-dialog` 内にスコープします。そうでない場合、アプリケーション内の他のボタン、チップ、入力、ドロップダウンも影響を受けます。 - + コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化に`解除する`必要があります。 @@ -442,7 +442,7 @@ $custom-drop-down: drop-down-theme( ); ``` - + `igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx index f348b3544b..a417fe5fb9 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx @@ -38,7 +38,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - + トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。 @@ -402,7 +402,7 @@ export class GridBatchEditingSampleComponent { ``` - + トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、 は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで `EndEdit` を呼び出すことです。 @@ -410,7 +410,7 @@ export class GridBatchEditingSampleComponent { 内の親ノードの削除にはいくつかの特徴があります。階層データを使用している場合、親を削除すると子も削除されます。フラットデータを使用している場合、 の `CascadeOnDelete` プロパティを使用して必要な動作を設定できます。このプロパティは、親が削除されたときに子レコードを削除するかどうかを示します (デフォルトでは **true** に設定されています)。 - + `RowEditable` プロパティを無効にすると を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx index ab7d0a69ff..1b3ae709d1 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx @@ -28,7 +28,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - + 任意のタイプのエディター コンポーネントで `CellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネントではなく、**セル要素**に**フォーカス**が残るためです。これが、`Focus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の**流暢な編集フロー**が維持されます。 @@ -55,7 +55,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - 他のセルをシングル クリック - で他のセルをクリックしたときに変更がサブミットされます。 - その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。 - + セルは、垂直/水平方向へのスクロールや 以外をクリックした場合も編集モードのままです。セル編集と行編集両方で有効です。 @@ -237,16 +237,16 @@ public updateCell() { - + 編集モードでセルの `EditValue` に加えられた変更は、終了時に適切な[編集イベント](editing.md#イベントの引数とシーケンス)をトリガーし、トランザクションが有効な場合はトランザクション状態に適用されます。 - + セルテンプレート `Cell` は、編集モード外での列のセルの表示方法を制御します。 `CellEditor` セル編集テンプレート ディレクティブは、編集モードでの列のセルの表示方法を処理し、編集されたセルの編集値を制御します。 - + 任意のタイプのエディター コンポーネントで `CellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネントではなく、**セル要素**に**フォーカス**が残るためです。これが、`Focus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の**流暢な編集フロー**が維持されます。 @@ -512,13 +512,13 @@ useEffect(() => { ``` - + We are using the native browser keydown event instead of React’s synthetic onKeyDown event. When a cell enters edit mode and the ENTER key is pressed to move to the next row, the grid’s editing feature updates the cell value and closes the edit mode. As a result, the input element used for editing is removed from the DOM. Due to React’s event system optimizations, the onKeyDown synthetic event does not bubble up to the grid because the element no longer exists in the React tree at that moment. Therefore, using the native event listener is necessary to ensure the expected behavior. - + React の合成 onKeyDown イベントの代わりに、ネイティブ ブラウザーの keydown イベントを使用しています。セルが編集モードに入り、ENTER キーを押して次の行に移動すると、グリッドの編集機能によってセルの値が更新され、編集モードが閉じられます。その結果、編集に使用された入力要素は DOM から削除されます。React のイベント システムの最適化により、その時点で要素が React ツリー内に存在しなくなるため、onKeyDown 合成イベントはグリッドにバブルアップされません。したがって、期待される動作を確実にするには、ネイティブ イベント リスナーを使用する必要があります。 @@ -641,7 +641,7 @@ return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEdit ## CRUD 操作 - + **CRUD 操作**を実行した場合、**filtering**、**sorting**、**grouping** などのパイプが再適用されるため、ビューが自動的に更新されることに注意してください。 @@ -1430,11 +1430,11 @@ In order for the custom theme to affect only our specific component, we can move This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), our styles will be applied only to our custom component. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. - + We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component: 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 83e086f127..07dbf62fe4 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 @@ -317,7 +317,7 @@ constructor() { - **Row selection**: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection. - **Navigation/Activation**: when a cell is active, all merged cells in the same row become single cells, i.e. their merge sequence is broken. This also includes activation via keyboard navigation. - + If a merged cell is clicked, the closest cell from the merge sequence will become active. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx index 484d27f0d8..4c72bba013 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx @@ -93,7 +93,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - CTRL + SHIFT + HOME - フォーカスされているセルからグリッド内の最初のセルまでのすべてのセルを選択します。 - CTRL + SHIFT + END - フォーカスされているセルからグリッド内の最後のセルまでのすべてのセルを選択します。 - + 連続スクロールは、グリッド本体でのみ可能です。 @@ -432,7 +432,7 @@ $custom-grid-theme: grid-theme( @include grid($custom-grid-theme); ``` - + コンポーネントが [Emulated ViewEncapsulation](../themes/styles.md#表示のカプセル化) を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 アプリケーション内に存在する可能性のある他のグリッドに影響を与えないように、スタイルを `:host` セレクターの下で範囲指定します。 @@ -453,7 +453,7 @@ $custom-grid-theme: grid-theme( - + サンプルは、**テーマの変更**で選択したグローバル テーマの影響を受けません。 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 7a1196fe31..395a390f0e 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 @@ -43,7 +43,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 制限 - カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。**paste** イベント (IE 11) は発生されますが、イベントの プロパティを公開しません。 - + IE 11のセルを**コピー**するためには、キーボード選択を使用できます。複数セルを選択するには SHIFT キー を押しながらコピーするには CTRL + C を押します。 @@ -65,7 +65,7 @@ You can use a custom paste handler in order to configure **paste** behavior, hav - `CopyFormatters` は、既存の列フォーマッタをコピーしたデータに適用します。 - `Separator` は、クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは `/t` です。 - + Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。 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 02087dad6b..5e96919c2b 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 @@ -18,11 +18,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {Platform} {ComponentTitle} の {ProductName} 列移動機能を使用すると、列をすばやく簡単に並べ替えることができます。これは、列移動 API を使用するか、マウスまたはタッチ ジェスチャを使用してヘッダーを別の位置にドラッグ アンド ドロップすることによって実行できます。{Platform} {ComponentTitle} では、ピン固定された列とピン固定されていない列、および[複数列ヘッダー](multi-column-headers.md)に対しても列の移動を有効にすることができます。 - + 列と列グループ間の順序変更は、それらが階層の同じレベルにあり、両方が同じグループにある場合にのみ許可されます。列/列グループが最上位の列である場合、列/列グループ間を移動できます。 - + 列ヘッダーがテンプレート化され、対応する列がグループ化可能である場合、テンプレート化された要素は **draggable** 属性を **false** に設定する必要があります。 @@ -30,7 +30,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; これにより、要素によって発行されたすべてのイベントのハンドラーをアタッチできます。それ以外の場合、イベントは `igxDrag` ディレクティブによって消費されます。 - + ピン固定領域が最大幅 ( 幅合計の 80%) を超えた場合、ドロップ操作が禁止されていてピン固定ができないことをヒントの表示でエンドユーザーに通知します。つまり、ピン固定領域に列をドロップできません。 @@ -308,7 +308,7 @@ $dark-grid-column-moving-theme: grid-theme( @include grid($dark-grid-column-moving-theme); ``` - + コンポーネントの [**View Encapsulation**](/components/themes/sass/component-themes.html#表示のカプセル化) ストラテジに基づいて、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 @@ -345,7 +345,7 @@ $dark-grid-column-moving-theme: grid-theme( ``` - + Color および Palette は、カラーを生成および取得するための重要な機能です。使い方の詳細については[パレット](/components/themes/palettes.html)のトピックを参照してください。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx index 77aecb307e..13bb03117c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx @@ -898,11 +898,11 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the In order for the custom theme to affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. - + Wrap the statement inside of a `:host` selector to prevent your styles from affecting elements outside of our component: @@ -918,7 +918,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo - + The sample will not be affected by the selected global theme from **Change Theme**. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx index d58a641254..cf0af2bf9b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx @@ -421,7 +421,7 @@ const onResize = (event: IgrColumnResizeEventArgs) => { - + ピクセルとパーセンテージで設定された場合で列のサイズ変更の動作は少々異なります。 @@ -763,7 +763,7 @@ $custom-grid-theme: grid-theme( ); ``` - + コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 @@ -796,7 +796,7 @@ $custom-grid-theme: grid-theme( ); ``` - + `igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。 @@ -844,7 +844,7 @@ $custom-grid-theme: grid-theme( - + サンプルは、**テーマの変更**で選択したグローバル テーマの影響を受けません。 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 abe116f325..c50f6380ad 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 @@ -47,7 +47,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; デフォルトの選択モードは `None` です。`Single` または `Multiple` に設定されると、すべての列は `Selectable` になります。列を選択するには、列をクリックして `Selected` としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。 - + [複数列ヘッダー](multi-column-headers.md)機能は `Selectable` 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、`ColumnGroupComponent` は `Selectable` です。さらに、すべての `Selectable` 子孫が `Selected` である場合、コンポーネントは `Selected` としてマークされます。 @@ -68,7 +68,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## キーボードの組み合わせ - + キーボードの組み合わせは、グリッドの `ColumnSelection` 入力が `multiple` に設定されている場合にのみ使用できます。 @@ -80,7 +80,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; **API** は、**非表示**列に関していくつかの追加機能を提供し、対応する **setter** を設定することにより、すべての**非表示**列を `Selected` としてマークできます。 - + 上記は `ColumnGroupComponent` にも適用されますが、`Selected` プロパティを変更する場合、その子孫の状態を変更します。 @@ -134,7 +134,7 @@ API 操作の詳細については、[API リファレンス](#api-リファレ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` - + >Please note that [row selection](row-selection.md) and [column selection](column-selection.md) can't be manipulated independently. They depend on the same `variables`. @@ -184,7 +184,7 @@ $custom-grid-theme: grid-theme( ### 基本テーマのオーバーライド Internet Explorer 11 のコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。 - + コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、`::ng-deep` の前に `:host` セレクターを含めるようにしてください。 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 2606a325f3..b285817b25 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 @@ -443,7 +443,9 @@ const formatOptions : IgrColumnPipeArgs = { セルの値を編集すると、**通貨記号**がサフィックスまたはプレフィックスとして表示されます。詳細については、公式の[セル編集トピック](cell-editing.md#セル編集と編集テンプレートの例)を参照してください。 -> 注: ↑ + ↓ 矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。 + +↑ + ↓ 矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。 + ### Percent (パーセント) @@ -544,7 +546,7 @@ const formatOptions : IgrColumnPipeArgs = { ``` - + ↑ + ↓ 矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx index 99e3eba2be..97ec9d5577 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx @@ -789,11 +789,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We scope most of the components' mixins within `.igx-excel-filter` and `.igx-excel-filter__secondary`, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -891,7 +891,7 @@ $custom-drop-down:drop-down-theme( ); ``` - + `igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。 @@ -906,7 +906,7 @@ $custom-drop-down:drop-down-theme( ## デモ - + サンプルは、**テーマの変更**で選択したグローバル テーマの影響を受けません。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx index c993fa1a50..a947a4c051 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx @@ -47,7 +47,7 @@ import { ExcelExporterService, PdfExporterService } from 'igniteui-{Platform}'; export class AppModule {} ``` - + v12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。 @@ -114,11 +114,11 @@ When offering PDF downloads for remote data, consider fetching the complete data デフォルトでは、Excel エクスポーター サービスは、スクロール可能な (固定されていない) 列ヘッダーを使用してグリッドをエクスポートします。多くのシナリオでは、エクスポートされた Excel ファイルの上部にすべてのヘッダーを固定し、ユーザーがレコードをスクロールしても常に表示されるようにしたい場合があります。これを実現するには、`ExporterOption` `FreezeHeaders` を **true** に設定します。 - + PDF エクスポートには、ドキュメントの上部に列ヘッダー行が自動的に含まれるため、読者がファイルを開いたり印刷したりしても同じコンテキストが保持されます。 - + is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: - `export-excel`, `export-csv`, `export-pdf` - `exportExcel`, `exportCsv`, `exportPdf` 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 7d1eb009e0..eb6bbf4b16 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx @@ -115,7 +115,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ``` - + で `QuickFilter` または `ExcelStyleFilter` と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。 の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。 @@ -193,7 +193,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ``` - + **string** 型の値が **date** データ型の列で使用される場合、 は値を **date** オブジェクトに解析しないためフィルター条件は使用できません。*string* オブジェクトを使用する場合、値を **date** オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。 @@ -219,7 +219,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ``` - + フィルタリング操作で `{ComponentName}` にバインドされているデータ ソースは**変更されません**。 @@ -784,11 +784,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We scope the **igx-button** and the **igx-input-group** mixins within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. - + If the component is using an `Emulated` ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -846,7 +846,7 @@ $dark-button: button-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them. @@ -914,7 +914,7 @@ $custom-grid: grid-theme( ## 既知の問題と制限 - + Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox [問題](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665)を参照してください。 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 fccf19ca6b..ed764e319a 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 @@ -27,12 +27,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - **列の集計** (有効な場合) - **{ComponentTitle} ページネーター** (有効な場合) - + この変更のため、TAB と SHIFT + TAB キーでセル間を移動することは でサポートされなくなりました。 TAB キーを押すと、**グループ化 / ツール バー** -> **ヘッダー** -> **本体** -> **集計** -> **フッター/ページネーター**の順序にタブ位置を移動します。 - + テンプレートによっ**フォーカス可能な**要素を の本体に公開すると、ブラウザのデフォルトの動作が防止されていないため、**予期されない結果**が発生する可能性があります。 したがって、それを適切に**防止/変更する**のは開発者の責任です。 @@ -185,7 +185,7 @@ Practice all of the above mentioned actions in the demo sample below. Focus any
- + `GetNextCell` および `GetPreviousCell` は現在のレベルで使用し、上位または下位レベルのセルにアクセスできません。 @@ -345,7 +345,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { ``` - + 実装の詳細は、サンプルコードを参照してください。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx index 3d8c982b0f..8164d6428f 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx @@ -394,7 +394,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; すべての は、[移動](column-moving.md)、[ピン固定](column-pinning.md)、および[非表示](column-hiding.md)をサポートしています。 - + 列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。具体的には、ネストされた column groups または columns ごとのピン固定は許可されていません。
columns と column groups 間の移動は、それらが階層内の同じレベルにあり、両方が同じ `group` にある場合にのみ許可されます。
`columns/column-groups` が現在の `group` によってラップされていない場合 (**一番上のレベル** `columns` の場合)、表示されている列全体の間で移動が許可されます。 @@ -697,7 +697,7 @@ const groupHeaderTemplate = (e: IgrColumnTemplateContext) => { ``` - + ヘッダーが再テンプレート化され、対応する列グループが移動可能な場合は、テンプレート要素で **draggable** 属性を **false** に設定する必要があり、これにより適用されるイベントをすべて処理できます。 @@ -779,7 +779,7 @@ $custom-theme: igx-grid-theme( @include igx-grid($custom-theme); ``` - + >コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化に`解除する`必要があります。 @@ -816,7 +816,7 @@ $custom-theme: igx-grid-theme( ); ``` - + `igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/palette.md)のトピックを参照してください。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx index 1f4b7e761d..69a52c9419 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx @@ -137,7 +137,7 @@ import multiRowLayout1 from '@xplat-images/multi-row-layout-1.png'; multi-row-layout - + `RowStart` と `ColStart` プロパティは、 内の各 に設定する必要があります。 コンポーネントはレイアウトが正しいかどうかを検証しておらず、それについてエラーや警告をスローしません。開発者は、レイアウトの宣言が正しく、完全であることを確認し、誤った配置、オーバーラップ、ブラウザーでの不整合、レイアウトの崩れなどを回避する必要があります。 @@ -173,11 +173,11 @@ import multiRowLayout1 from '@xplat-images/multi-row-layout-1.png'; - CTRL + HOME または CTRL + END - 最初の行に移動して最初のセルに移動するか、最後のセルに移動します。最後のセルに移動してフォーカスを合わせます。 - + 複数の行または列にわたるセルを介したナビゲーションは、ナビゲーション開始セルに従って行われ、反対方向のキーを使用して開始セルに戻ることができます。グループ行を移動するときにも同じ方法が使用されます。 - + 選択と複数セル選択はレイアウトで使用できます。つまり、セルがアクティブになると、そのレイアウトが選択されます。ドラッグ選択などの複数選択のすべての機能も適用可能であり、セルごとではなくレイアウトごとに機能します。 @@ -334,11 +334,11 @@ $my-custom-schema: extend($light-schema, ( このように、{Platform} の [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。 - + コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 - + ステートメントがコンポーネントの外にある要素に影響を与えないよう、ステートメントを `:host` セレクター内にラップします。 @@ -356,7 +356,7 @@ $my-custom-schema: extend($light-schema, ( - + サンプルは、**テーマの変更**で選択したグローバル テーマの影響を受けません。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx index 88393d5413..6651d0858d 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx @@ -272,11 +272,11 @@ The last step is to **include** the component mixins, each with its respective t } ``` - + We scope the `Button` mixin within `.igx-paginator__pager`, so that only the paginator buttons would be styled. Otherwise other buttons in the grid would be affected too. - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -350,7 +350,7 @@ $dark-button: button-theme( ); ``` - + `Color` および `Palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。 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 360bacf6a3..8987a475ba 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 @@ -74,7 +74,7 @@ BLAZOR CODE SNIPPET HERE 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. @@ -137,7 +137,7 @@ public processData(reset) { ``` - + 最初の `ChunkSize` は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。 @@ -386,11 +386,11 @@ BLAZOR CODE SNIPPET HERE ``` - + リモー トデータが要求された場合、フィルタリング操作が大文字と小文字を区別します。 - + When remote data is requested, the filtering operation is case-sensitive. @@ -1363,7 +1363,7 @@ BLAZOR CODE SNIPPET HERE - + `UniqueColumnValuesStrategy` 入力が提供される場合、Excel スタイル フィルタリングでプロセスを生成するデフォルトの一意の値は使用されません。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx index 5fd175aaba..ede62dbcdc 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx @@ -193,7 +193,7 @@ import { IgxActionStripModule } from 'igniteui-angular'; - + `ActionStripComponent` が の子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。 @@ -316,7 +316,7 @@ import { IgxActionStripModule } from 'igniteui-angular'; - + 事前定義された操作は `GridActionsBaseDirective` を継承します。カスタム グリッド アクション コンポーネントを作成する場合、`GridActionsBaseDirective` も継承する必要があります。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx index 5a4156b400..ec87a10ae1 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx @@ -280,7 +280,7 @@ export class {ComponentName}RowDragComponent { - + When using row data from the event arguments (**args.dragData.data**) or any other row property, note that the entire row is passed in the arguments as a reference, which means that you must clone the data you need, if you want to distinguish it from the one in the source grid. @@ -559,7 +559,7 @@ Try to drag moons from the grid and drop them to their corresponding planets. Ro - + The classes applied to the row drag ghost, used in the demo above, are using ::ng-deep modifier, because row drag is an internal grid feature and cannot be accessed on application level, due to the CSS encapsulation. @@ -582,7 +582,7 @@ The classes applied to the row drag ghost, used in the demo above, are using ::n - + 上記のデモで使用されている行ドラッグ ゴーストに適用されるクラスは ::ng-deep 修飾子を使用しています。これは、行ドラッグが内部グリッド機能であり、CSS カプセル化のためにアプリケーション レベルでアクセスできないためです。 @@ -746,7 +746,7 @@ function getCurrentRowIndex(rowList, cursorPosition) { ``` - + Make sure that there is a specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. @@ -1353,7 +1353,7 @@ In the demo in the next section you see how you can display an indicator of wher In order to track the position of the cursor, we bind to the `DragMove` event of the `DragDirective` when we start dragging a row. - + Make sure that there is a specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx index 348dfebfb2..d9424023a4 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx @@ -24,7 +24,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - + 行が編集モードにある場合、他の行のセルをクリックすると [完了] ボタンが押されたように動作し、前の行の変更をすべての変更をサブミットします。新しくフォーカスされたセルが編集可能な場合、新しい行も編集モードになります。ただし、セルが編集可能でない場合は、前の行のみが編集モードを終了します。 @@ -412,11 +412,11 @@ RowEditable="true"> - + プライマリキーは行編集操作で必須です。 - + 個々の列の編集を有効にする必要はありません。 の `RowEditable` プロパティを使用すると、定義された `Field` プロパティを持つすべての行 (主行を除く) が編集可能になります。特定の列の編集を無効にしたい場合は、その列の `Editable` 入力を **false** に設定するだけです。 @@ -437,7 +437,7 @@ RowEditable="true"> ``` - + `{ComponentName}` は、行の状態が送信されるかキャンセルされるまで保留中のセルの変更を保持する内部プロバイダーである `BaseTransactionService` を利用します。 @@ -650,7 +650,7 @@ This will apply our custom banner theme to the Row Editing overlay. However, sin Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope our banner theme. We can define our styles (including the [theme import](#import-theme)) in the component containing our `{ComponentName}`. - + If the component is using an [Emulated](themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component: @@ -713,7 +713,7 @@ After styling the banner and buttons, we also define a custom style for [the cel - + The sample will not be affected by the selected global theme from **Change Theme**. 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 a5861e3c8b..122307f2a9 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 @@ -693,7 +693,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { 上の例では、`Checkbox` を使用しており、`rowContext.selected` をその `Checked` プロパティにバインドしています。[行番号のデモ](#行の番号付けデモ)で実際にこれをご覧ください。 - + `rowContext.select()` および `rowContext.deselect()` メソッドは、`{ComponentSelector}` のテンプレート コンテキストで公開されます。基本機能をオーバーライドするクリック ハンドラーを実装した場合、特に子グリッドで現在の行を簡単に切り替えることができます。 @@ -821,7 +821,7 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => { `{ComponentSelector}` の各階層レベルには、独自の行とヘッダーのテンプレートを設定できます。 - + `headContext.selectAll()` および `headContext.deselectAll()` メソッドは、`{ComponentSelector}` のテンプレート コンテキストで公開されます。基本機能をオーバーライドするクリック ハンドラーを実装した場合、特に子グリッドで現在の行を簡単に切り替えることができます。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx index 32bfbdd5df..c0155310f4 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx @@ -67,7 +67,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - **medium** - 中サイズで、行の高さは `40px` です。左と右のパディングが `16px` で最小列 `Width` は `64px` です。 - **small** - 強度が最も高く、行の高さは `32px` です。左と右のパディングが `12px` で最小列 `Width` は `56px` です。 - + 現在サイズは**オーバーライドできません**。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx index e59dc2f4bf..8d51ce22ee 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx @@ -55,7 +55,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per {Platform} {ComponentTitle} の {ProductName} サイズ変更機能は、応答性が高くユーザーフレンドリーなグリッド インターフェイスを作成するための重要な側面です。{Platform} {ComponentTitle} のサイズ変更機能を使用すると、ユーザーはさまざまな画面サイズ、コンテンツ、またはユーザーの好みに合わせてグリッドの `Width` と `Height` を調整できます。 の境界線とパディングのサイズに関しては、幅/高さのサイズ計算、または[ボーダー ボックス](https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing)のサイジングとも呼ばれます。すべてのシナリオに適用されます。 - + ユーザーがボーダー ボックスのサイズ変更をオーバーライドした場合に正しい `{ComponentName}` になるかどうかは保証できません。 @@ -63,7 +63,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per `Width` 入力に値が割り当てられていない場合のデフォルト値は `100%` で、 は使用可能なスペースを埋めようとします。`Percentages` セクションで、グリッドがグリッドにどのように反応するかを確認できます。 - + 自体の `Width` スタイルを手動で設定すると、予期しない動作が生じます。 @@ -88,7 +88,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per width-null-parent-scroll-v2 - + この動作により、グリッド データに含まれる列が多すぎる場合、すべての列が仮想化なしでレンダリングされるため、ブラウザーのパフォーマンスに大きな影響を与える可能性があります。 @@ -127,7 +127,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per デフォルトでは、`{ComponentName}` の高さが定義されていない場合、`100%` に設定されます。`Percentages` セクションで、DOM 構造に応じたグリッドの応答を確認できます。 - + 自体の `Height` スタイルを手動で設定すると、予期しない動作が生じます。 @@ -148,7 +148,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2 - + この動作により、グリッド データに含まれる行が多すぎる場合、すべての行が仮想化なしでレンダリングされるため、ブラウザーのパフォーマンスに大きな影響を与える可能性があります。 @@ -230,7 +230,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per columns-default-all-first-100px-v2 - + 行セレクターのチェックボックス列などの機能列は、列の自動サイズ調整時に考慮される追加のスペースを埋めます。 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 ac0d2828d7..5dc64fd16f 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx @@ -21,7 +21,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {Platform} {ComponentTitle} の {ProductName} データ ソート機能は列ごとのレベルで有効になっています。つまり、 にはソート可能な列とソート不可能な列を混在させることができます。{Platform} でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。 - + これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、gropuing を sorting から切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。 @@ -285,7 +285,7 @@ hierarchicalGridRef.current.sort([ - + Sorting は、 アルゴリズムを使用して実行されます。 または `ISortingExpression` は、代替アルゴリズムとして `ISortingStrategy` のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。 @@ -393,11 +393,11 @@ hierarchicalGridRef.current.clearSort(); - + の `SortStrategy` は の `SortStrategy` と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。 - + ソート操作で の基になるデータ ソースは**変更しません**。 @@ -577,7 +577,7 @@ const sortingExpressions: IgrSortingExpression[] = [ - + `string` 型の値が `DataType` `Date` の列で使用される場合、 が値を `Date` オブジェクトに解析しないため が正しく動作しません。`string` オブジェクトを使用する場合、値を `Date` オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。 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 ad3e2a3cee..d0600e6d5c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx @@ -22,7 +22,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - + 列の集計は列**値すべての関数**ですが、フィルタリングが適用された場合、列の集計**はフィルターされた結果値の関数になります**。 @@ -1272,7 +1272,7 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。 - + プロパティは子レベルの集計のみに適用します。ルート レベルの集計は、 の下に常に固定されます。 @@ -1300,7 +1300,7 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、親行が縮小されたときに、集計行は表示されたままになります。 - + プロパティは子レベルの集計のみに適用します。ルート レベルの集計は、 の下に常に固定されます。 @@ -1428,7 +1428,7 @@ The last step is to **include** the component mixins: ``` - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -1466,7 +1466,7 @@ $custom-theme: grid-summary-theme( ); ``` - + The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palettes.md) topic for detailed guidance on how to use them. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx index 8c3e803822..82e9d62fad 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx @@ -263,7 +263,7 @@ The predefined and - + As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. @@ -514,7 +514,7 @@ const rowIslandToolbarTemplate = (ctx: IgrGridToolbarTemplateContext) => { 事前定義された `GridToolbarActions` および `GridToolbarTitle` UI コンポーネントが `GridToolbar` 内に追加されます。これはすべて、対応するグリッド機能とのデフォルトのインタラクションを提供するツールバーを持つために必要です。 - + 上記のコード スニペットに示されているように、事前定義された `Actions` UI コンポーネントは `GridToolbarActions` にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。 @@ -901,7 +901,7 @@ If you need a refresher on the DI in {Platform}, check the [official guide](http ``` - + In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers. @@ -973,7 +973,7 @@ Here is a snippet showing some of the options which can be customized through th In addition to changing the exported filename, the user can further configure the exporter options by waiting for the `ToolbarExporting` event and customizing the options entry in the event properties. - + By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true. @@ -1219,13 +1219,13 @@ The sample belows uses has significant amount of data, in order to increase the ## データのエクスポート - + This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified template files after the migration completes. - + `{ComponentName}` または階層下の子グリッドのいずれかをエクスポートすると、エクスポートされるデータは、それぞれのグリッドに属する行のフラット コレクションになります (子グリッドはエクスポートされたデータに含まれません)。 @@ -1419,7 +1419,7 @@ The last step is to **include** the newly created themes. } ``` - + If `$legacy-support` is set to `false(default)`, include the component css variables like that: @@ -1433,7 +1433,7 @@ If `$legacy-support` is set to `false(default)`, include the component css varia } ``` - + If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: @@ -1461,7 +1461,7 @@ If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ## Known Limitations - + Currently, defining a toolbar component directly inside the {RowIslandSelector} is not supported. Use the `ToolbarTemplate` property instead. 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 09b132fe47..ecf92ee6e6 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx @@ -121,7 +121,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - `UpdateRow`、`UpdateCell` などの API を使用してセル / 行を更新する場合 。 - トランザクション サービスの一括編集および `Undo`/`Redo` API を使用する場合。 - + ユーザー入力または編集 API で編集されていないレコードに対しては、検証はトリガーされません。セルの視覚的なインジケーターは、ユーザー操作または検証サービスの `MarkAsTouched` API を介して入力がタッチ済みと見なされる場合のみ表示されます。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx index 8b4e629f13..ffe2449f2a 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx @@ -83,7 +83,7 @@ igRegisterScript("CellTemplate", (ctx) => { クライアント テンプレート: プロパティの `Script` 版 (例: `BodyTemplateScript`) を使用して、クライアント側関数ハンドラ名ーを設定。 - + 両方の方法が有効ですが、サーバー側テンプレートはカスタム テンプレートの取得・解決のためにサーバーとの往復通信が必要となり、クライアント レンダリングまでに遅延が発生する場合があります。そのため、多数のテンプレートを頻繁に更新するシナリオでは、より最適化された クライアント テンプレートの使用が推奨されます。 diff --git a/docs/xplat/src/content/jp/components/grids/data-grid.mdx b/docs/xplat/src/content/jp/components/grids/data-grid.mdx index 9bd70dbdf3..3278df2b05 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid.mdx @@ -2344,11 +2344,11 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` - + これは `IgxGridComponent` の試験中の機能です。これは、グリッドで予期しない動作が発生する可能性があることを意味します。このような動作が発生した場合は、[Github]({GithubLink}/discussions) ページでお問い合わせください。 - + 有効にすると、`IgxGridComponent` に関連しない Angular アプリケーションの他の部分に影響します。 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 e98c177811..c2de4e3a2e 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx @@ -229,7 +229,7 @@ gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, - + これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、grouping を sorting から切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。 @@ -570,13 +570,13 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { - + In order to implement custom grouping the data first needs to be sorted appropriately. Due to this you may also need to apply a custom sorting strategy that extends the base . After the data is sorted the custom groups can be determined by specifying a for the column or for the specific grouping expression. - + カスタム グループ化を実装するには、まずデータを適切にソートする必要があります。このため、ベース `DefaultSortingStrategy` を拡張するカスタムのソート ストラテジを適用する必要がある場合もあります。データがソートされた後、列または特定のグループ化式に `GroupingComparer` を指定することにより、カスタム グループを決定できます。 @@ -806,11 +806,11 @@ $custom-theme: grid-theme( このように、{Platform} の [ViewEncapsulation](https://{Platform}.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。 - + コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 - + ステートメントがコンポーネントの外にある要素に影響を与えないよう、ステートメントを `:host` セレクター内にラップします。 @@ -830,7 +830,7 @@ $custom-theme: grid-theme( - + サンプルは、**テーマの変更**で選択したグローバル テーマの影響を受けません。 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 ae359c26a6..c7c73f68d4 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 @@ -35,7 +35,7 @@ const boolData = data.filter(rec => typeof rec === "boolean"); const dates = data.filter(rec => isDate(rec)); ``` - + `isDate` はカスタム関数であることに注意してください。 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 8872d757bd..96607dffc3 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 @@ -307,7 +307,7 @@ public class SingersData : List - + `data` の代わりにユーザーは、データを自動的に設定するめの読み込みに {HierarchicalGridSelector} が必要な `childDataKey` のみ設定します。 @@ -786,7 +786,7 @@ function buildUrl(dataState) { ## CRUD 操作 - + フラットな Data Grid と行アイランドの各インスタンスの重要な違いは、同じトランザクション サービス インスタンスがあり、同じトランザクション ログを蓄積する点です。CRUD 機能を有効にするには、`IgxHierarchicalTransactionServiceFactory` を注入する必要があります。 @@ -813,7 +813,7 @@ igxHierarchicalGrid を使用すると、[Ignite UI for Angular Theme ライブ ### カスタム テーマの定義 次に、[`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) を拡張し、必要に応じて階層グリッドをカスタマイズするために必要なパラメーターを受け取る新しいテーマを作成します。 - + 特定の `sass` 階層グリッド機能はありません。 @@ -904,11 +904,11 @@ $custom-theme: grid-theme( このように、Angular の [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。 - + コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 - + ステートメントがコンポーネントの外にある要素に影響を与えないよう、ステートメントを `:host` セレクター内にラップします。 @@ -924,7 +924,7 @@ $custom-theme: grid-theme( - + サンプルは、**テーマの変更**で選択したグローバル テーマの影響を受けません。 diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx index 60060a2c18..d62ac73f6a 100644 --- a/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx +++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx @@ -18,7 +18,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ピボットおよびフラット グリッド コンポーネントは、共通ベースを継承しているため、いくつかの機能を共有しています。 - + 一部の機能は、ピボット テーブルのコンテキストで意味のある動作をしないため `PivotGrid` で有効にできません。以下が含まれます。 - CRUD 操作 - グループ化 @@ -42,13 +42,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; すべてのディメンション (フィルター、行、列) は、チップ UI または API を介してフィルター処理できます。この機能は埋め込まれており、デフォルトで有効になっています。 - + フィルタリング ディメンションを使用して、ピボット ビューの一部ではないデータ値を除外できます。 フィルタリング UI は、ディメンション チップ フィルター アイコンを介して開くことができ、一意のディメンション値の Excel スタイルのフィルタリングを可能にします。 - + すべてのフィルタリング チップに十分なスペースがない場合、{PivotGridTitle} には、ドロップダウンに切り取られたものが表示されます。エンドユーザーはそこでアクセスして操作できます。 @@ -290,7 +290,7 @@ const igrPivotDimension2: IgrPivotDimension = { `rows`、`column`、`filter` (ディメンション チップ) のチップは、これらの領域のいずれかから他の任意の場所に移動できます。 これらの領域のチップは `values` 領域に移動できず、`values` 領域のチップはどのディメンション領域にも移動できません。 - + {PivotGridTitle} のチップをピボット データ セレクターに移動したり、ピボット データ セレクターの項目を {PivotGridTitle} に移動したりすることはできません。 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 4788795b67..7581b686b3 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 @@ -792,7 +792,7 @@ public PivotDataFlat() - + デフォルトのキーを含むデータ フィールド値がある場合は、現在使用していない他の記号に一致する区切り文字を必ず変更してください。そうしないと、集計値の計算と表示で予期しない動作が発生する可能性があります。 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 efaadb7e7b..7a812fbd0c 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 @@ -157,7 +157,7 @@ export class AppModule {} - `GridCell` - 値を含む標準セル。 - `TreeGridCell` - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリー セル。行コンポーネントのレベルは、その内部の `treeRow` の `level` プロパティを通じてアクセスできます。 - + 各行にはツリー セルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。 diff --git a/docs/xplat/src/content/jp/components/grids/tree.mdx b/docs/xplat/src/content/jp/components/grids/tree.mdx index 10678d12a5..a3ba2f890c 100644 --- a/docs/xplat/src/content/jp/components/grids/tree.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree.mdx @@ -220,7 +220,7 @@ builder.Services.AddIgniteUIBlazor( - + 提供されている `indentation`、`indicator`、および `label` スロットを使用して、`TreeItem` のインデント、拡張、およびラベル領域ごとにカスタム スロット コンテンツを提供できます。 diff --git a/docs/xplat/src/content/jp/components/inputs/button-group.mdx b/docs/xplat/src/content/jp/components/inputs/button-group.mdx index 978aa53383..317fb5b902 100644 --- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx @@ -258,7 +258,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule)); - + の プロパティを使用するには、 属性の設定が必須です。 diff --git a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx index 2b6bf796f5..913d8f29b3 100644 --- a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx +++ b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx @@ -228,7 +228,7 @@ Customizing the progress bar in order to use a color gradient instead of a solid - + For each defined as gradient slot of {ProductName} a [SVG stop](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) element would be created. The values passed as `color`, `offset` and `opacity` would be set as stop-color, offset and stop-opacity of the SVG element without further validations. 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 affdce0f96..46d4a907ff 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx @@ -319,7 +319,7 @@ const options = { - + `GroupKey` プロパティは、データ ソースが複雑なオブジェクトで構成されている場合にのみ有効です。 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 4ad0c54d1b..ae8e1fee76 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx @@ -206,7 +206,7 @@ const cities: City[] = [ - - オプション、複雑なデータ オブジェクトに**推奨** - データ ソース内のどのフィールドが表示値として使用されるかを決定します。 に値が指定されていない場合、コンボは指定された (存在する場合) を使用します。 この例では、コンボで各都市の `name` を表示し、項目の選択と各項目の基礎となる値として `id` フィールドを使用するようにします。したがって、これらのプロパティをコンボの と にそれぞれ提供します。 - + データ ソースがプリミティブ型 (例: `strings`、`numbers` など) で構成されている場合、`ValueKey` や `DisplayKey` を**指定しないでください**。 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 accafc456d..3b5f8a7baf 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 @@ -272,7 +272,7 @@ input.value = date; | | `tttt` | 長い | noon | | | `ttttt` | 狭い | n | - + 多くのロケールは、指定された書式に関係なく、同じ期間文字列を使用します。また、12 時間制を使用した場合にのみ効果があります。 diff --git a/docs/xplat/src/content/jp/components/inputs/select.mdx b/docs/xplat/src/content/jp/components/inputs/select.mdx index 015b5c75e9..0d8d045539 100644 --- a/docs/xplat/src/content/jp/components/inputs/select.mdx +++ b/docs/xplat/src/content/jp/components/inputs/select.mdx @@ -102,7 +102,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - + ヘッダーとグループの選択コンポーネントは、使用しない限り必須ではないことに注意してください。 @@ -225,7 +225,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; 複数の を コンポーネントの開く括弧と閉じる括弧の間に配置して、ユーザーがそれらを視覚的にグループ化できるようにすることができます。 は、その `label` スロットを介してラベルを付け、その プロパティを介して無効にすることができます。 - + 選択グループが無効になっている場合、そのグループの個別の項目を有効にすることはできないことに注意してください。 @@ -360,7 +360,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; - ↑ ↓ キーを使用すると、リスト内の次の項目がアクティブになります。 - HOME キーまたは END キーを使用すると、リストの最初または最後の項目がアクティブになります。 - + `Select` コンポーネントは、項目の**単一**選択のみをサポートします。 diff --git a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx index 17cdf4c91b..a3fb984699 100644 --- a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx @@ -363,7 +363,7 @@ tooltip.anchor = anchor; - + Tooltip API メソッド (、、) では、 プロパティと プロパティが考慮されないことに注意することが重要です。呼び出されるとすぐに動作します。 diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx index 3b703c5507..2658d2b5fd 100644 --- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx @@ -472,7 +472,7 @@ const options = { Chat コンポーネントは `igniteui-webcomponents/extras` `igniteui-react/extras` からエクスポートされる `createMarkdownRenderer` ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。 - + Markdown レンダラーを使用するには、プロジェクトに次のピア依存関係をインストールする必要があります。 @@ -488,7 +488,7 @@ Markdown レンダラーを使用するには、プロジェクトに次のピ - レンダラーは [DOMPurify](https://github.com/cure53/DOMPurify) を使用して出力をサニタイズします。 - リンクは自動的に新しいタブで開き、安全な rel 属性が付与されます。 - + To use the Markdown renderer, you need to install the following peer dependencies in your project: diff --git a/docs/xplat/src/content/jp/components/layouts/accordion.mdx b/docs/xplat/src/content/jp/components/layouts/accordion.mdx index aa54ef797e..c1b408c91a 100644 --- a/docs/xplat/src/content/jp/components/layouts/accordion.mdx +++ b/docs/xplat/src/content/jp/components/layouts/accordion.mdx @@ -207,7 +207,7 @@ constructor() { メソッドと メソッドを使用すると、 のすべての をプログラムでそれぞれ省略したり展開したりできます。 - + プロパティが **true** に設定されている場合、 メソッドを呼び出すと、フォーカスされたパネルのみが展開されます。 diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx index 1d00403808..7a2bf51c80 100644 --- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx @@ -200,7 +200,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); - + アクティブなスライドが設定されていない場合は、最初のスライドがデフォルトで設定されます。最初のレンダリングまたは後続の更新時にアクティブなスライドが複数ある場合は、最後のスライドだけが考慮されます。 @@ -650,7 +650,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); は、ユーザーの操作なしでスライドを自動的に変更するように簡単に構成できます。この方法では、トランジション間隔 を プロパティに設定するだけで、スライドショーを作成できます。このプロパティは、スライド トランジション間の間隔 (ミリ秒)を決定します。 - + カルーセル コンテンツの上にマウスを移動するか、キーボード フォーカスをいずれかのカルーセル コンテンツに移動すると、自動トランジションが一時停止されます。マウスがカルーセルから離れるか、キーボード フォーカスがカルーセル コンテンツから移動すると、自動トランジションが再開されます。 この動作は、 プロパティを **true** に設定することでこれを防ぐことができます。 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 373d7115fe..d179350756 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx @@ -75,7 +75,7 @@ defineComponents(IgcDockManagerComponent); ``` - + ドック マネージャー コンポーネントは ShadowDOM とスロットを使用するため、Internet Explorer 11 および Edge 18 以前 (Chromium 以外のバージョン) などの古いブラウザーではサポートされません。 diff --git a/docs/xplat/src/content/jp/components/layouts/stepper.mdx b/docs/xplat/src/content/jp/components/layouts/stepper.mdx index 2cd142313b..197f5447a6 100644 --- a/docs/xplat/src/content/jp/components/layouts/stepper.mdx +++ b/docs/xplat/src/content/jp/components/layouts/stepper.mdx @@ -210,7 +210,7 @@ builder.Services.AddIgniteUIBlazor( 各ステップで、、、および スロットを使用してインジケーター、タイトル、およびサブタイトルを構成できます。 - + `Default` の スロットは、ステップのコンテンツを描画します。 @@ -361,7 +361,7 @@ linear プロパティが **true** に設定されている場合、ステッパ 現在のオプションではないステップが有効でない場合、現在のステップを検証するまで次のステップに進むことができません。 - + オプションのステップの有効性は考慮されません。 @@ -374,7 +374,7 @@ linear プロパティが **true** に設定されている場合、ステッパ - **prev** – 前の無効化されていないステップをアクティブ化します。 - **reset** – ステッパーを初期状態にリセットします。 - + reset メソッドは、ステッパーを初期状態にリセットします。つまり、最初のステップをアクティブにします。reset メソッドはステップの内容をクリアしません。これは手動で行う必要があります。 @@ -403,7 +403,7 @@ reset メソッドは、ステッパーを初期状態にリセットします 向きが垂直に設定され、タイトルの位置が**定義されていない**場合、タイトルはインジケーターの**後**に表示されます。 - + **titlePosition** プロパティは、ステッパーの stepType プロパティが **full** に設定されている場合に**のみ**適用できます。 @@ -419,7 +419,7 @@ reset メソッドは、ステッパーを初期状態にリセットします このように、サブタイトルが定義されている場合、それらもステップ タイトルの下に描画されます。 - + このコンテナーは、サイズ制限なしで要件に応じて再テンプレート化できます。たとえば、サイズが 24 ピクセルより大きいインジケーターを中に追加できます。 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 5738d802fa..2af83c1051 100644 --- a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx @@ -562,7 +562,7 @@ Tile コンポーネントは、使用できるいくつかのスロットも公 スムーズなサイズ変更を実現するために、タイルの大きさを直接変更するのではなく、ゴースト要素が使用されます。この要素は元のタイルの上に表示され、サイズ変更の開始時に現在のサイズで表示され、ユーザーがリサイズ ハンドルのいずれかをドラッグするとリアルタイムで更新されます。 - + ゴースト要素が利用可能なグリッド スペースを超える場合、グリッドの制限内で可能な最大範囲に自動的に調整されます。 @@ -647,7 +647,7 @@ Tile コンポーネントは、使用できるいくつかのスロットも公 - `tile` オプションを使用すると、個々のタイルの任意の場所をクリックして押したままにすると、ドラッグを開始できます。 - `tile-header` オプションを使用すると、タイルのヘッダー セクションをクリックして押したままにするだけで、ドラッグ プロセスを開始できます。 - + タイルが最大化または全画面表示の状態では、タイルをドラッグすることはできません。 diff --git a/docs/xplat/src/content/jp/components/nextjs-usage.mdx b/docs/xplat/src/content/jp/components/nextjs-usage.mdx index 6d125bf16b..c7619961f4 100644 --- a/docs/xplat/src/content/jp/components/nextjs-usage.mdx +++ b/docs/xplat/src/content/jp/components/nextjs-usage.mdx @@ -98,7 +98,7 @@ IgrDataChartInteractivityModule.register(); - + {ProductName} コンポーネントは、状態やブラウザー イベントなどのクライアント専用の機能を使用していることに注意してください。Infragistics のコンポーネントは、「use client」 ディレクティブがあるため、クライアント Next.js コンポーネント内では期待どおりに動作しますが、サーバー コンポーネント内では動作しません。 @@ -174,7 +174,7 @@ function App() { - + {ProductName} コンポーネントの大部分は、他のクライアント コンポーネント内で使用されることが予想されるため、ラップされていないままになる可能性があります。したがって、Infragistics コントロールをラップする必要はありません。 @@ -287,7 +287,7 @@ export default function GridDynamicComponent() { - + コンポーネントの遅延読み込みを実装するとパフォーマンスが向上しますが、コンポーネントがページ上にすぐに表示されない場合にのみ使用することをお勧めします。 diff --git a/docs/xplat/src/content/jp/components/notifications/banner.mdx b/docs/xplat/src/content/jp/components/notifications/banner.mdx index 7a74c3ab61..9d3dfa6978 100644 --- a/docs/xplat/src/content/jp/components/notifications/banner.mdx +++ b/docs/xplat/src/content/jp/components/notifications/banner.mdx @@ -140,7 +140,7 @@ Banner コンポーネントを表示するには、ボタン クリックで - + には、バナーを閉じるデフォルトの `OK` アクション ボタンが含まれています。 @@ -187,7 +187,7 @@ Banner コンポーネントを表示するには、ボタン クリックで をバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。 - + 複数の 要素が挿入される場合、バナーはそれらすべてを最初に配置しようとします。 は 1 つのみ、直接渡すことに注意してください。 @@ -401,7 +401,7 @@ function handleClosing() { - + 上記が適用されると、終了イベントが常にキャンセルされるため、バナーが閉じることはありません。 diff --git a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx index f065b5ba3d..98b539cb1e 100644 --- a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx @@ -186,11 +186,11 @@ defineComponents(IgcCalendarComponent); デフォルトでは、{ProductName} Calendar コンポーネントは、選択された日付に関する情報を含むヘッダー領域を描画します。`HasHeader` プロパティを **false** に設定することで、ヘッダーを非表示にできます。`HeaderOrientation` プロパティを使用して、ヘッダーの `vertical` または `horizontal` を構成することもできます。 - + `Selection` が複数に設定されている場合、{ProductName} Calendar ヘッダーが描画されないことに注意してください。 - + {ProductName} Calendar の DOM プロパティは `camelCase` の命名を使用し、対応する HTML 属性は `kebab-case` を使用していることに注意してください。たとえば、`HeaderOrientation` プロパティは `header-orientation` 属性に対応します。 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 029d3dfe63..5678538b8a 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {ProductName} Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。{Platform} Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。 - + コンポーネントは、{ProductName} のバージョン 5.0.018.7.0 以降の新しいコンポーネントです。このバージョンより前の古い は `XDatePicker` に名前が変更され、それぞれのドキュメント ページは「非推奨のコンポーネント」の下にあります。 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 661acf597d..822523e56f 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx @@ -85,7 +85,7 @@ Spreadsheet ChartAdapter は、折れ線、エリア、縦棒、ドーナツを ## 依存関係 - + 以下のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して `Workbook` を保存およびロードしています。 diff --git a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx index 3c128f908a..c0649190de 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx @@ -159,7 +159,7 @@ ModuleManager.register( - + 次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して `Workbook` を保存およびロードしています。 diff --git a/docs/xplat/src/content/jp/components/themes/overview.mdx b/docs/xplat/src/content/jp/components/themes/overview.mdx index 2bdfab1345..14744c442f 100644 --- a/docs/xplat/src/content/jp/components/themes/overview.mdx +++ b/docs/xplat/src/content/jp/components/themes/overview.mdx @@ -58,7 +58,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc ## ランタイム テーマの切り替え - + ランタイムにテーマを変更するには、上の表のグローバル スタイルシートも置き換える必要があります。 @@ -73,7 +73,7 @@ import { configureTheme } from "igniteui-webcomponents"; configureTheme("material"); ``` - + これは、内部スタイルを目的のテーマに切り替えるようにコンポーネントに指示するだけで、グローバル テーマ ファイルも上記のファイルのいずれかに切り替える必要があります。 diff --git a/docs/xplat/src/content/jp/components/themes/palettes.mdx b/docs/xplat/src/content/jp/components/themes/palettes.mdx index bf7e2584c6..81b08502c5 100644 --- a/docs/xplat/src/content/jp/components/themes/palettes.mdx +++ b/docs/xplat/src/content/jp/components/themes/palettes.mdx @@ -50,7 +50,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' 上記のカラーに加えて、各カラー バリエーションに **Level AA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) 準拠の `contrast` カラーも含まれています。つまり、対応する `contrast` カラー バリエーションをベースカラー バリエーションの前景カラーとして安全に使用できます。 - + コントラスト カラーはビルド時に生成されるため、CSS 変数をオーバーライドしても、対応するコントラスト カラーは更新されません。 diff --git a/docs/xplat/src/content/jp/components/themes/tailwind.mdx b/docs/xplat/src/content/jp/components/themes/tailwind.mdx index 07fd62deb2..3214cf3f9e 100644 --- a/docs/xplat/src/content/jp/components/themes/tailwind.mdx +++ b/docs/xplat/src/content/jp/components/themes/tailwind.mdx @@ -116,7 +116,7 @@ Tailwind が提供するすべてのシャドウ関連のユーティリティ - + このサンプルは架空の完全カスタム例であり、Ignite UI コンポーネント ライブラリの一部ではありません。