diff --git a/en/components/.DS_Store b/en/components/.DS_Store deleted file mode 100644 index d96b4ceb20..0000000000 Binary files a/en/components/.DS_Store and /dev/null differ diff --git a/en/components/accordion.md b/en/components/accordion.md index d623465dec..cb4f8da542 100644 --- a/en/components/accordion.md +++ b/en/components/accordion.md @@ -19,7 +19,7 @@ In it, you can see how to define an `igx-accrodion` and its [expansion panels]({ + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1/" alt="Angular Accordion Example">
@@ -203,7 +203,7 @@ The sample below demonstrates how elaborate filtering options can be implemented + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-3/" alt="Angular Accoridon Example">
@@ -239,7 +239,7 @@ You can see the result below. + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2/" alt="Angular Accordion Example">
@@ -294,7 +294,7 @@ The last step is to include the component's theme. + iframe-src="{environment:demosBaseUrl}/layouts/accordion-style/" alt="Angular Accordion Style Example"> ## API Reference diff --git a/en/components/action-strip.md b/en/components/action-strip.md index 1324c9564c..cc979b4233 100644 --- a/en/components/action-strip.md +++ b/en/components/action-strip.md @@ -14,7 +14,7 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai + iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph/" alt="Angular Action Strip Example">
@@ -114,7 +114,7 @@ For scenarios where more than three action items will be shown, it is best to us + iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph-menu/" > ### Reusing the Action Strip @@ -153,7 +153,7 @@ This can be utilized via grid action components and we are providing two default + iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip/" > > [!NOTE] @@ -189,7 +189,7 @@ The last step is to include the newly created component theme in our application + iframe-src="{environment:demosBaseUrl}/menus/action-strip-styling/" > ## API and Style References diff --git a/en/components/angular-reactive-form-validation.md b/en/components/angular-reactive-form-validation.md index 8763db20c3..51563b6d44 100644 --- a/en/components/angular-reactive-form-validation.md +++ b/en/components/angular-reactive-form-validation.md @@ -113,7 +113,7 @@ So, if you enter values for movie title, full name, phone, and email, they will diff --git a/en/components/autocomplete.md b/en/components/autocomplete.md index a7fe7e2100..2a731cf873 100644 --- a/en/components/autocomplete.md +++ b/en/components/autocomplete.md @@ -18,7 +18,7 @@ The Angular Autocomplete example below generates a dropdown suggestion list as u + iframe-src="{environment:demosBaseUrl}/data-entries/autocomplete/" alt="Angular Autocomplete Example">
@@ -216,7 +216,7 @@ If everything went right, you should see this in your browser: + iframe-src="{environment:demosBaseUrl}/data-entries/movie/" > diff --git a/en/components/avatar.md b/en/components/avatar.md index 8acb1c1968..42cf4e1f9a 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -12,7 +12,7 @@ _keywords: Angular Avatar component, Angular Avatar control, Ignite UI for Angul + iframe-src="{environment:demosBaseUrl}/layouts/avatar-sample-3/" alt="Angular Avatar Example">
@@ -183,7 +183,7 @@ If all went well, you should see something like the following in the browser: + iframe-src="{environment:demosBaseUrl}/layouts/avatar-styling/" > ### Custom sizing diff --git a/en/components/badge.md b/en/components/badge.md index 8a7b95624a..de190c7852 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -11,7 +11,7 @@ _keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-2/" alt="Angular Badge Example">
@@ -153,7 +153,7 @@ Then, just specify the icon name and family as follows: + iframe-src="{environment:demosBaseUrl}/data-display/badge-icon/" > ### Badge in List @@ -283,7 +283,7 @@ If the sample is configured properly, a list of members should be displayed and + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-3/" > ## Styling @@ -317,7 +317,7 @@ To include the new theme we use the `css-vars` mixin: + iframe-src="{environment:demosBaseUrl}/data-display/badge-styling-sample/" > diff --git a/en/components/banner.md b/en/components/banner.md index d1ff6d91c2..1c0fe47bd8 100644 --- a/en/components/banner.md +++ b/en/components/banner.md @@ -10,7 +10,7 @@ _keywords: Angular Banner component, Angular Banner control, Ignite UI for Angul + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-1/" alt="Angular Banner Example">
@@ -150,7 +150,7 @@ The `IgxBannerModule` exposes a directive for templating the banner buttons - [` + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-2/" > @@ -185,7 +185,7 @@ export class MyBannerComponent { + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-3/" > @@ -250,7 +250,7 @@ Finally, we will add a `toast`, displaying a message about the WiFi state. The r + iframe-src="{environment:demosBaseUrl}/notifications/banner-advanced-sample/" > @@ -285,7 +285,7 @@ The last step is to pass the custom banner theme: + iframe-src="{environment:demosBaseUrl}/notifications/banner-styling/" > diff --git a/en/components/button-group.md b/en/components/button-group.md index 8afc399514..1e0c34c60f 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -12,7 +12,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-1/" alt="Angular Button Group Example">
@@ -133,7 +133,7 @@ public alignment = ButtonGroupAlignment.vertical; + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-2/" >
@@ -150,7 +150,7 @@ The sample below demonstrates the exposed `igx-buttongroup` selection modes: + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-4/" > ### Size @@ -171,7 +171,7 @@ igx-buttongroup { + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-5/" > ### Custom toggle buttons @@ -243,7 +243,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-3/" > ## Styling @@ -278,7 +278,7 @@ The last step is to include the component's theme. + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-style/" > ## API References diff --git a/en/components/button.md b/en/components/button.md index a69eccc1a5..f1a0e7f13f 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -18,7 +18,7 @@ We have created the Angular Button example below to show you how different butto + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-sample-1/" alt="Angular Button Example">
@@ -242,7 +242,7 @@ If all went well, you should see something like the following in the browser: + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-display-density/" alt="Angular Button Example">
@@ -323,7 +323,7 @@ For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-t + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-style/" > ### Custom sizing diff --git a/en/components/calendar.md b/en/components/calendar.md index 74a020bc8f..c66882e9ac 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -21,7 +21,7 @@ We created the following Angular Calendar example using the Ignite UI for Angula + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-5/" alt="Angular Calendar Example"> @@ -108,7 +108,7 @@ We can easily change the default mode using the [`selection`]({environment:angul + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-1/" > @@ -125,7 +125,7 @@ Following the same approach, we can switch to range selection mode: + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-8/" > @@ -175,7 +175,7 @@ If everything went well, we should now have a calendar with customized dates dis + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-2/" > @@ -206,7 +206,7 @@ These configurations should have the following result: + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-6/" > @@ -257,7 +257,7 @@ The following demo illustrates a calendar with a vacation request option: + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-7/" > @@ -275,7 +275,7 @@ The following demo illustrates a calendar with enabled week numbers: + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-1/" > @@ -318,7 +318,7 @@ Use the demo below to play around (change selection, navigate through months and + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-3/" > @@ -330,7 +330,7 @@ There are separate views provided by the `IgxCalendarModule` that can be used in + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-days-view/" > @@ -339,7 +339,7 @@ There are separate views provided by the `IgxCalendarModule` that can be used in + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-months-view/" > @@ -348,7 +348,7 @@ There are separate views provided by the `IgxCalendarModule` that can be used in + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-years-view/" > @@ -407,7 +407,7 @@ Multi-view calendar supports all three types of selection. Use the [`monthsViewN + iframe-src="{environment:demosBaseUrl}/scheduling/multiview-calendar/" > ## Calendar Orientation @@ -451,7 +451,7 @@ export class CalendarSample9Component { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-9/" alt="Angular Calendar Orientation Example"> ## Styling @@ -483,7 +483,7 @@ The last step is to pass the custom calendar theme: + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-styling-sample/" > diff --git a/en/components/card.md b/en/components/card.md index 104f4d56aa..79939fb653 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -16,7 +16,7 @@ Below you can see a basic sample of a well-crafted Ignite UI for Angular Card wi + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-0/" alt="Angular Card Example">
@@ -255,7 +255,7 @@ If everything went well, our card should look like this: + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-2/" > @@ -294,7 +294,7 @@ Below is an example showing how you can create a semi-horizontal card, where we + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-3/" > @@ -358,7 +358,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/layouts/card-styling-sample/" > diff --git a/en/components/carousel.md b/en/components/carousel.md index eb39188efb..62ee4faa96 100644 --- a/en/components/carousel.md +++ b/en/components/carousel.md @@ -16,7 +16,7 @@ The Angular Carousel demo you see below shows slides containing only images. We + iframe-src="{environment:demosBaseUrl}/layouts/carousel/" alt="Angular Carousel Example">
@@ -244,7 +244,7 @@ This carousel is going to contain slides with forms and images: + iframe-src="{environment:demosBaseUrl}/layouts/carousel-with-components-sample/" > @@ -273,7 +273,7 @@ The demo below demonstrates the different types of animations, which the carouse + iframe-src="{environment:demosBaseUrl}/layouts/carousel-animations-sample/" > @@ -373,7 +373,7 @@ These configurions will have the following result: + iframe-src="{environment:demosBaseUrl}/layouts/carousel-no-navigation-sample/" > diff --git a/en/components/checkbox.md b/en/components/checkbox.md index 611ed63a51..3b797c7de6 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -14,7 +14,7 @@ See the checkbox in action in the following Angular Checkbox example below. + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-sample-1/" alt="Angular Checkbox Example">
@@ -118,7 +118,7 @@ igx-checkbox { The final result would be something like that: + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-sample-2/" > ### Label Positioning You can position the label using the checkbox's [`labelPosition`]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html#labelPosition) property: @@ -205,7 +205,7 @@ public toggleAll() { After all that is done, our application should look like this: + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-sample-3/" > @@ -243,7 +243,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-styling/" > diff --git a/en/components/chip.md b/en/components/chip.md index ef456af2d8..612854db97 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -12,7 +12,7 @@ _keywords: Angular Chip, Angular Chip Component, Angular Chip Area, Angular Chip + iframe-src="{environment:demosBaseUrl}/data-display/chip-simple/" alt="Angular Chip Example">
@@ -190,7 +190,7 @@ If everything went well, you should see this in your browser: + iframe-src="{environment:demosBaseUrl}/data-display/chip-simple/" > ### Chip Templates @@ -318,7 +318,7 @@ If everything went well, you should see this in your browser: + iframe-src="{environment:demosBaseUrl}/data-display/chip-simple/" > ## Chip Area @@ -475,7 +475,7 @@ If everything's set up correctly, you should see this in your browser: + iframe-src="{environment:demosBaseUrl}/data-display/chip-area-sample/" > ## Styling @@ -511,7 +511,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/data-display/chip-styling/" > ### Custom sizing diff --git a/en/components/circular-progress.md b/en/components/circular-progress.md index 987edf0603..d5c633b5db 100644 --- a/en/components/circular-progress.md +++ b/en/components/circular-progress.md @@ -12,7 +12,7 @@ _keywords: Angular Circular Progress component, Angular Circular Progress contro + iframe-src="{environment:demosBaseUrl}/data-display/circular-progressbar/" alt="Angular Circular Progress Example">
@@ -102,7 +102,7 @@ The final result should be: + iframe-src="{environment:demosBaseUrl}/data-display/circular-indeterminate-progressbar/" >
@@ -222,7 +222,7 @@ After reproducing the steps above, you should get this as a result: + iframe-src="{environment:demosBaseUrl}/data-display/circular-dynamic-sample/" >
@@ -260,7 +260,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/data-display/circular-styling-sample/" > ## API diff --git a/en/components/combo-features.md b/en/components/combo-features.md index 2bdb97d533..4374667c8d 100644 --- a/en/components/combo-features.md +++ b/en/components/combo-features.md @@ -15,7 +15,7 @@ The following demo demonstrates some of the combobox features that are enabled/d + iframe-src="{environment:demosBaseUrl}/lists/combo-features/" alt="Angular Combo Features Example">
@@ -46,7 +46,7 @@ export class AppModule {}
@@ -55,8 +55,8 @@ export class AppModule {} Allow Custom Values Enable Grouping Disable Combo - Enable Filtering - Show Case-sensitive Icon + Disable Filtering + Show Case-sensitive Icon
``` @@ -66,7 +66,7 @@ Note that grouping is enabled/disabled by setting the [groupKey]({environment:an ```typescript @ViewChild('combo', { read: IgxComboComponent }) public combo: IgxComboComponent; - public filterable = true; + public disableFiltering = false; public showSearchCaseIcon = true; public customValues = true; public disabled = false; @@ -129,7 +129,7 @@ If everything is set up correctly, the combobox's list will display centered, us + iframe-src="{environment:demosBaseUrl}/lists/combo-overlay/" > @@ -139,12 +139,12 @@ If everything is set up correctly, the combobox's list will display centered, us > The combobox component uses the [AutoPositionStrategy]({environment:angularApiUrl}/classes/autopositionstrategy.html) as a default position strategy. ### Filtering -By default, filtering in the combobox is enabled. It can be disabled by setting the [filterable]({environment:angularApiUrl}/classes/igxcombocomponent.html#filterable) property to false. +By default, filtering in the combobox is enabled. It can be disabled by setting the [disableFiltering]({environment:angularApiUrl}/classes/igxcombocomponent.html#disableFiltering) property to true. Filtering options can be further enhanced by enabling the search case sensitivity. To display the case-sensitive icon in the search input, set the [showSearchCaseIcon]({environment:angularApiUrl}/classes/IgxComboComponent.html#showSearchCaseIcon) property to true: ```html - + ```
diff --git a/en/components/combo-remote.md b/en/components/combo-remote.md index 97ca545279..0909d78f91 100644 --- a/en/components/combo-remote.md +++ b/en/components/combo-remote.md @@ -15,7 +15,7 @@ The sample below demonstrates remote binding using the [dataPreLoad]({environmen + iframe-src="{environment:demosBaseUrl}/lists/combo-remote/" alt="Angular Combo Remote Binding Example"> @@ -79,7 +79,7 @@ When data is returned from a service as an observable, we can set it to the comb (closing)="onClosing()" (opened)="onOpened()" (closed)="onClosed()" - [filterable]="true"> + [disableFiltering]="false"> ``` diff --git a/en/components/combo-templates.md b/en/components/combo-templates.md index fa0bd66101..b3b92902a7 100644 --- a/en/components/combo-templates.md +++ b/en/components/combo-templates.md @@ -14,7 +14,7 @@ The Ignite UI for Angular ComboBox Component allows defining custom templates fo + iframe-src="{environment:demosBaseUrl}/lists/combo-template/" alt="Angular Combo Templates Example"> diff --git a/en/components/combo.md b/en/components/combo.md index 639f4ab27b..99cc4fd1aa 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -15,7 +15,7 @@ In this Angular ComboBox example, you can see how users can filter items and per + iframe-src="{environment:demosBaseUrl}/lists/combo-main/" alt="Angular ComboBox Example">
@@ -138,7 +138,7 @@ export class MyCombo { + iframe-src="{environment:demosBaseUrl}/lists/combo-valuekey/" > @@ -155,7 +155,7 @@ export class MyCombo { + iframe-src="{environment:demosBaseUrl}/lists/combo-binding/" > @@ -330,7 +330,7 @@ The last step is to include the component's theme. + iframe-src="{environment:demosBaseUrl}/lists/combo-styling/" > diff --git a/en/components/date-picker.md b/en/components/date-picker.md index 1778ce781c..1edb035561 100644 --- a/en/components/date-picker.md +++ b/en/components/date-picker.md @@ -16,7 +16,7 @@ Below you can see a sample that demonstrates how the Angular Date Picker works w + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-1/" alt="Angular Datepicker Example">
@@ -202,7 +202,7 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker ``` + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-2/" >
@@ -219,7 +219,7 @@ More information about these can be found in the [`IgxDateTimeEditor`](date-time + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-3/" >
@@ -254,7 +254,7 @@ To achieve that in template driven forms, use the `ngModel` to bind both compone + iframe-src="{environment:demosBaseUrl}/scheduling/template-driven-form/" >
@@ -263,7 +263,7 @@ In reactive forms, we can handle the [`valueChange`]({environment:angularApiUrl} + iframe-src="{environment:demosBaseUrl}/scheduling/reactive-form/" >
@@ -325,7 +325,7 @@ The last step is to pass the custom Date Picker theme: + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-styling-sample/" > ## API References diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md index 330e0e3e13..c4c6c28229 100644 --- a/en/components/date-range-picker.md +++ b/en/components/date-range-picker.md @@ -6,14 +6,14 @@ _keywords: Angular Date Range Picker, Date Range Picker, Date Picker, Angular Da # Angular Date Range Picker Component Overview -Angular Date Range Picker is a lightweight component that includes text input and a calendar pop-up to allow users to easily select start and end date values. It can be customized to match app requirements with features like range restrictions, formats, data range selection, grouping the start and end values together and many more. The Date Range Picker in Angular also allows developers to change the default view property and set it to month, year or multi-year. +The Angular Date Range Picker is a lightweight component that includes a text input and a calendar pop-up, allowing users to easily select start and end dates. It is highly customizable to fit various application requirements, offering features such as date range restrictions, configurable date formats, and more. ## Angular Date Range Picker Example -We have created this basic Angular Date Range Picker example to show you the component in action. In this case, you see a calendar pop-up, letting users select start and end date values. +Below is a sample demonstrating the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) component in action, where a calendar pop-up allows users to select start and end dates. + iframe-src="{environment:demosBaseUrl}/scheduling/basic-daterangepicker/" alt="Angular Date Range Picker Example">
@@ -21,7 +21,7 @@ We have created this basic Angular Date Range Picker example to show you the com ## Getting Started with Ignite UI for Angular Date Range Picker -To get started with the Ignite UI for Angular Datepicker component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: +To get started with the Ignite UI for Angular [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: ```cmd ng add igniteui-angular @@ -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 `IgxDateRangePickerModule` in your **app.module.ts** file. -As `IgxDateRangePicker` uses the [**IgxCalendarComponent**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), it also has a dependency on the **BrowserAnimationsModule** and **optionally** the **HammerModule** for touch interactions, so they need to be added to the `AppModule` as well: +As the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) uses the [**IgxCalendarComponent**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html), it also has a dependency on the **BrowserAnimationsModule** and **optionally** the **HammerModule** for touch interactions, so they need to be added to the `AppModule` as well: ```typescript // app.module.ts @@ -50,7 +50,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; export class AppModule {} ``` -Alternatively, as of `16.0.0` you can import the `IgxDateRangePickerComponent` as a standalone dependency, or use the [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) token to import the component and all of its supporting components and directives. +Alternatively, as of `16.0.0` you can import the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) as a standalone dependency, or use the [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) token to import the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -74,7 +74,8 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Date Range Picker module or directives imported, you can start using the `igx-date-range-picker` component. ## Using the Angular Date Range Picker Component -### Display Date Range Picker + +### Display and Value To instantiate a date range picker in its default mode, use the following code: ```html @@ -88,24 +89,13 @@ public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, >[!NOTE] > The Date Range Picker value is of type [`DateRange`]({environment:angularApiUrl}/interfaces/daterange.html), which contains a start and an end date. -To create a two-way data-binding, use `ngModel`: -```html - -``` - -### Projecting components +The picker offers two modes for displaying date values: single input and two inputs. In single input mode, the field is non-editable and the date range cannot be edited by typing. In two inputs mode, however, users can edit the start and end dates by typing in separate input fields. -To enrich the default Date Range Picker UX, the component allows projecting child components - the same as in the [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html): [`igxLabel`](label-input.md), [`igx-hint / igxHint`](input-group.md#hints), [`igx-prefix / igxPrefix`](input-group.md#prefix--suffix), [`igx-suffix / igxSuffix`](input-group.md#prefix--suffix), excluding [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html). More detailed information about this can be found in the [Label & Input](label-input.md) topic. - -In addition, the Ignite UI for Angular Date Range Picker can be configured to project [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) - a component that controls the calendar toggle and can be modified as shown in the [Calendar toggle](#calendar-toggle) section. +When the calendar is visible a date range can be selected by choosing both a start and end date. Selecting a date will set both the start and end date and once a second date is chosen, it will set the end date. If a range is already selected, clicking any other date on the calendar will start a new range selection. +To create a two-way data-binding, use `ngModel`: ```html - - - - Please choose start and end date! - - + ``` ### Display Separate Editable Inputs @@ -124,45 +114,122 @@ The Angular Date Range Picker component also allows configuring two separate inp - Both the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) and [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) extend the existing [`IgxInputGroupComponent`](input-group.md). For such a configuration to work, defining an [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) is required. In addition, all other components and directives available to the [`IgxInputGroupComponent`](input-group.md) can also be used. - In order to enable date editing for both inputs, you need to decorate them with [`igxDateTimeEditor`](date-time-editor.md) directive. - +### Popup modes + +By default, when clicked, the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the `Mode` property to `dialog`. +```html + +``` + + + + +### Popup modes + +By default, when clicked, the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) opens its calendar pop-up in `dropdown` mode. Alternatively, the calendar can be opened in `dialog` mode by setting the `Mode` property to `dialog`. +```html + +``` + + + +
-### User Experience +In a default configuration with a single read-only input, the calendar can be opened by clicking anywhere in the input, including the calendar icon. When there are two separate inputs for start and end date, and in dropdown mode, the calendar can only be opened from the calendar icon, since both inputs are editable by default. For two inputs in `dialog` mode, clicking anywhere in the input opens the calendar -In a default configuration, with a single read-only input, the calendar can be opened by clicking anywhere in the input, including the calendar icon. When there are two separate inputs for start and end date, the calendar can only be opened from the calendar icon, since both inputs are editable by default. +The range value is set when dates are picked from the calendar. You will notice that in dropdown mode, the `Done` button is not available. In dialog mode, a `Cancel` button allows to revert the selection on close. -When the calendar is visible, a range can be selected by choosing the start and end dates. Picking a date will set the start and end date, until a second date is chosen. If there is a selected range, clicking any other date from the calendar will start a new range selection. +### Keyboard Navigation -Start and end date are separated by a hyphen when shown in the component's read-only input. When defining different inputs for start and end, they are separated by the `to` preposition. The latter can be localized or overwritten via a template. See the [Templating](#templating) example below, for more details. +The [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. -## Examples +The available keyboard navigation options vary depending on whether the component is in single input or two inputs mode. -### Label -To define the label for the date range picker the [`igxLabel`](label-input.md) directive should be used as shown in the snippet below: +**Two Inputs Mode:** + +|Keys|Description| +|----|-----------| +| ← | Moves the caret one character to the left | +| → | Moves the caret one character to the right | +| Ctrl + ArrowLeft | Moves the caret to the beginning of the current input mask section or to the start of the previous one if it's already at the beginning | +| Ctrl + ArrowRight | Moves the caret to the end of the current input mask section or to the end of the next one if it's already at the end | +| ArrowUp | Increments the currently "focused" part of the input mask by one step | +| ArrowDown | Decrements the currently "focused" part of the input mask by one step | +| Home | Moves the caret to the beginning of the input mask | +| End | Moves the caret to the end of the input mask | +| Ctrl + ; | Sets the current date as the value of the component | + +**Both Single and Two Inputs Modes:** + +|Keys|Description| +|----|-----------| +| Alt + ArrowDown | Opens the calendar dropdown | +| Alt + ArrowUp | Closes the calendar dropdown | + +The [calendar keyboard navigation](calendar.md#keyboard-navigation) section contains all keyboard combinations that can be used in the calendar. + +
+ +## Layout + +### Projecting components + +To enrich the default Date Range Picker UX, the component allows projecting child components - the same as in the [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html): [`igxLabel`](label-input.md), [`igx-hint / igxHint`](input-group.md#hints), [`igx-prefix / igxPrefix`](input-group.md#prefix--suffix), [`igx-suffix / igxSuffix`](input-group.md#prefix--suffix), excluding [`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html). More detailed information about this can be found in the [Label & Input](label-input.md) topic. ```html - + + + Please choose start and end date! + + +``` + +Or for two inputs: + +```html + + + ... + + + Please choose start and end date! + + ... + + + ... + + ... + ``` -### Calendar toggle -In the default configuration, with a single read-only input, a default calendar icon is shown as a prefix. The calendar icon can be changed or redefined using the [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) component. It can be decorated with either [`igxPrefix`](input-group.md#prefix--suffix) or [`igxSuffix`](input-group.md#prefix--suffix), which will define its position - at the start of the input or at the end respectively. To change the default position and show the icon as a suffix, you need to do the following: +#### Toggle and clear icons +In the default configuration, with a single read-only input, a default calendar icon is shown as a prefix and a clear icon - as a suffix. These icons can be changed or redefined using the [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html). They can be decorated with either [`igxPrefix`](input-group.md#prefix--suffix) or [`igxSuffix`](input-group.md#prefix--suffix), which will define their position - at the start of the input or at the end respectively: ```html calendar_view_day + + clear + ``` -When a Date Range Picker has two separate inputs, for start and end dates, it doesn't expose a calendar icon by default. The [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) should be manually added as a child of the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) or [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) like so: +When a Date Range Picker has two separate inputs for start and end dates, it doesn't expose these icons by default. The [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) and [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html) should be manually added as children of the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) or [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) like so: ```html @@ -171,6 +238,9 @@ When a Date Range Picker has two separate inputs, for start and end dates, it do calendar_view_day + + clear + ... @@ -179,58 +249,41 @@ When a Date Range Picker has two separate inputs, for start and end dates, it do ``` -### Dialog mode +### Custom And Predefined Date Ranges -The [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) component has two modes - dropdown (default) and dialog. To switch to `dialog` mode, do the following: +You can also add custom date range chips to the calendar pop-up for faster range selection using the [`customRanges`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#customRanges) property. For example, you can create a custom date range chip to quickly select the range for the upcoming 7 days, ending with the current date. In addition, by setting the [`usePredefinedRanges`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#usePredefinedRanges) property, a set of predefined ranges chips will be displayed along with the custom ones. -```html - -``` +```ts +public today = new Date(); +public nextSeven = new Date( + this.today.getFullYear(), + this.today.getMonth(), + this.today.getDate() + 7 +); - - - -
- -The range value is set when dates are picked from the calendar. You will notice that in dropdown mode, the `Done` button is not available. +public customRanges: CustomDateRange[] = [ + { + label: 'Next 7 days', + dateRange: { + start: this.today, + end: this.nextSeven + } + } +]; +``` -### Custom Action Buttons +```html + +``` -The Date Range Picker’s action buttons can be templated using the [`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) directive. A common scenario is allowing the user to select from pre-defined ranges, as in the following demo: +In addition, custom content or actions can be templated using the [`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) directive. The following demo shows the predefined and custom ranges along with the templated actions: - + iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-range-buttons/" > -### Keyboard Navigation ->[!NOTE] -> Use the demos for [Dialog mode](#dialog-mode) and [Display Separate Editable Inputs](#display-separate-editable-inputs) to try the keyboard combinations defined below. - -Opening and closing the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) calendar UI with the keyboard is available only for `dropdown` mode and can be triggered via the key combinations below: - -- Alt + Down Arrow - Opens the dropdown containing the calendar UI and focuses it -- Alt + Up Arrow - Closes the dropdown and focuses the input field (range start input field when two separate inputs are used) -- Esc - Closes the dropdown and focuses the input field (range start input field when two separate inputs are used) - -Keyboard navigation within the calendar UI of the Date Range Picker is available in all modes and configurations. When the calendar is opened it takes focus and the following keyboard combinations can be used: - -- Enter selects start and end dates -- PageUp, PageDown, Shift + PageUp, Shift + PageDown, Home, End, Tab - navigate the calendar - -The [calendar keyboard navigation](calendar.md#keyboard-navigation) section contains all keyboard combinations that can be used in the calendar. - -When two separate inputs are used, [keyboard navigation](date-time-editor.md#keyboard-navigation) for the [`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) directive is also applicable to the Date Range Picker component: - -- Ctrl / Cmd + Arrow Left / Right - navigates between date sections. On Ctrl / Cmd + Right it goes to the end of the section. If already there it goes to the end of the next section. It works the same way in the opposite direction. -- Arrow Up / Down - increments/decrements date portions. -- Ctrl / Cmd + ; - sets the current day and time in the editor. - -
- ### Formatting The Date Range Picker Component supports different display and input formats. @@ -251,7 +304,7 @@ If the [`inputFormat`]({environment:angularApiUrl}/classes/igxdaterangepickercom > The `IgxDateRangePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. ### Forms and Validation -The Date Range Picker Component supports all directives from the core [FormsModule](https://angular.io/api/forms/FormsModule), [NgModel](https://angular.io/api/forms/NgModel) and [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl), [`FormGroup`](https://angular.io/api/forms/FormGroup), etc.). This also includes the [Forms Validators](https://angular.io/api/forms/Validators) functions. In addition, the component's [min and max values](#min-and-max-values) also act as form validators. +The Date Range Picker Component supports all directives from the core [FormsModule](https://angular.io/api/forms/FormsModule), [NgModel](https://angular.io/api/forms/NgModel) and [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl), [`FormGroup`](https://angular.io/api/forms/FormGroup), etc.). This also includes the [Forms Validators](https://angular.io/api/forms/Validators) functions. In addition, the component's [min and max values](#min-and-max-values) and [disabledDates](#disabled-and-special-dates) also act as form validators. The [NgModel](https://angular.io/api/forms/NgModel) and validators can be set on the [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) or on the individual start and end date inputs. @@ -298,7 +351,7 @@ When using two separate inputs, it is possible to set the model and required pro + iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-validation/" >
@@ -346,6 +399,32 @@ The `IgxDateRangePickerComponent` is also a validator which means it controls it ``` +### Disabled And Special dates + +You also have the ability to set disabled dates in the calendar to narrow the range of dates the user can choose from. To set the disabled dates, you can use the [`disabledDates`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#disabledDates) property. + +```ts +export class DateRangeSampleComponent implements OnInit { + @ViewChild('dateRange') public dateRange: IgxDateRangePicker; + + public minDate = new Date(2025, 4, 1); + public maxDate = new Date(2025, 4, 31); + + public ngOnInit() { + this.dateRange.disabledDates = [ + { + type: DateRangeType.Between, + dateRange: [minDate, maxDate] + } + ] as DateRangeDescriptor[]; + } +} +``` + +You can see more information about all the possibilities that the `DisabledDates` property offers here: [calendar disabled dates](calendar.md#how-to-disable-dates-in-angular-calendar). + +You can also do the same if you want to set one or more special dates in the calendar; the only difference is that you need to use the `SpecialDates` property instead. [Special dates](./calendar.md#special-dates) + ### Templating When two editors are used, the default separator can be replaced using the [`igxDateRangeSeparator`]({environment:angularApiUrl}/classes/igxdaterangeseparatordirective.html) directive. Here is how to change the date separator to a hyphen `-`: @@ -362,6 +441,46 @@ When two editors are used, the default separator can be replaced using the [`igx ``` +### Calendar specific settings + +You can further customize the pop-up calendar using various properties. More information on how these affect the calendar can be found in the [**IgxCalendarComponent**](calendar.md) topic. + +|Name|Type|Description| +|--|--|--| +| `orientation` | 'vertical' or 'horizontal' | Allows you to set whether the calendar should be displayed vertically or horizontally. | +| `displayMonthsCount` | string | Controls how many months are visible at a time, with a value of either 1 or 2. | +| `showWeekNumbers` | string | Enables or disables the week number column in the calendar. | +| `weekStart` | string | Sets the start day of the week. | +| `hideOutsideDays` | boolean | Hides days that fall outside the current month view. | +| `hideHeader` | boolean | Hides the calendar header (applicable only in dialog mode). | +| `headerOrientation` | 'vertical' or 'horizontal' | Aligns the calendar header vertically or horizontally (dialog mode only). | +| `activeDate` | Date | Sets the date that is initially highlighted in the calendar. If not set, the current date becomes the active date. | + +```html + + +``` + +The header, subheader and title parts of the calendar header can be customized by leveraging the `igxCalendarHeader`, `igxCalendarSubheader` and the `igxCalendarHeaderTitle` template directives, for example: + +```html + + + {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }} + + + {{ format.year.combined }} + {{ format.month.combined | titlecase }} + + + My calendar + + +``` + ## Styling To get started with styling the `igxDateRangePicker`, we need to import the `index` file, where all the theme functions and component mixins live: @@ -443,7 +562,7 @@ Regarding style scoping, you should refer to both styling sections [Overlay Scop + iframe-src="{environment:demosBaseUrl}/scheduling/styled-daterangepicker/" > @@ -453,7 +572,7 @@ The demo below defines a form for flight tickets that uses the [`IgxDateRangePic + iframe-src="{environment:demosBaseUrl}/scheduling/flight-booking/" >
diff --git a/en/components/date-time-editor.md b/en/components/date-time-editor.md index cd55eca33e..bd85b24818 100644 --- a/en/components/date-time-editor.md +++ b/en/components/date-time-editor.md @@ -11,7 +11,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI + iframe-src="{environment:demosBaseUrl}/scheduling/datetime-basic/" alt="Angular Date Time Editor Directive Example">
@@ -180,7 +180,7 @@ Also, both methods accept an optional `delta` parameter of type `number` which c You may compare both in the following sample: + iframe-src="{environment:demosBaseUrl}/scheduling/datetime-advanced/" >
diff --git a/en/components/dialog.md b/en/components/dialog.md index 1cac98d955..fd770fb3d9 100644 --- a/en/components/dialog.md +++ b/en/components/dialog.md @@ -11,7 +11,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-1/" alt="Angular Dialog Window Example">
@@ -119,7 +119,7 @@ To create a standard dialog, in the template of our file manager component, we a + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-2/" >
@@ -168,7 +168,7 @@ We add two input groups consisting of a label and and input decorated with the [ + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-3/" >
@@ -319,7 +319,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/interactions/dialog-styling-sample/" >
diff --git a/en/components/display-density.md b/en/components/display-density.md index b5fc2e9010..d5caa00b79 100644 --- a/en/components/display-density.md +++ b/en/components/display-density.md @@ -16,7 +16,7 @@ Using the `--ig-size` custom CSS property, you can configure the size on an appl ## Angular Size Example + iframe-src="{environment:demosBaseUrl}/theming/density/" alt="Angular Size Example">
@@ -46,35 +46,84 @@ igx-input-group { } ``` -## Incorporating size in your own components and layouts +## Understanding Size with CSS Custom Properties -Ignite UI for Angular exposes a few Sass functions and a mixin that allow you to implement layouts that react to changes of the `--ig-size` CSS property. +The sizing system in Ignite UI works through a set of CSS custom properties that automatically adjust component dimensions and spacing. When you change the `--ig-size` property, components automatically detect this change and apply the appropriate sizing values. -Here's an example on how we can make an element change its width and height based on the value of `--ig-size`. +### Size Detection Variables +Components use several CSS custom properties to detect and respond to size changes: + +- `--component-size` - Maps the global `--ig-size` to a numeric value (1=small, 2=medium, 3=large) +- `--is-small` - Set to 1 when component is small-sized, 0 otherwise +- `--is-medium` - Set to 1 when component is medium-sized, 0 otherwise. +- `--is-large` - Set to 1 when component is large-sized, 0 otherwise. + +These variables are automatically calculated using mathematical CSS expressions and change whenever `--ig-size` is modified. + +### Size Constants + +The theming system defines three size constants: + +- `--ig-size-small` (value: 1) +- `--ig-size-medium` (value: 2) +- `--ig-size-large` (value: 3). + +## Incorporating Size in Your Own Components + +You can make your custom components responsive to size changes using Ignite UI's Sass utilities. These utilities generate the necessary CSS custom properties and mathematical expressions behind the scenes. + +### Using the Sizable Mixin and Function + +Here's how to create a component that responds to the global size setting: ```html -
+
``` ```scss @use "igniteui-angular/theming" as *; -.my-elem { - // Make the element sizable +.my-responsive-element { + // The sizable mixin sets up size detection CSS custom properties @include sizable(); - // Define the default size of the element and hook it to the `--ig-size` property + // Connect to the global size system --component-size: var(--ig-size, var(--ig-size-large)); - // Define sizes for small (10px), medium (20px), and large (30px) + // Use the sizable function for responsive sizing --size: #{sizable(10px, 20px, 30px)}; width: var(--size); height: var(--size); } ``` -Now any time the value of `--ig-size` changes, `.my-elem` will change its size. +### How the Sizable System Works Behind the Scenes + +When you use `@include sizable()`, it generates CSS custom properties that detect the current component size: + +```css +.my-responsive-element { + --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1); + --is-medium: min( + clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), + clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) + ); + --is-small: clamp(0, var(--ig-size-medium, 2) - var(--component-size, 1), 1); +} +``` + +The `sizable(10px, 20px, 30px)` function generates a CSS expression that automatically selects the appropriate value: + +```css +--size: max( + calc(var(--is-large, 1) * 30px), + calc(var(--is-medium, 1) * 20px), + calc(var(--is-small, 1) * 10px) +); +``` + +This mathematical approach using `clamp()`, `min()`, `max()`, and `calc()` functions allows components to automatically switch between size values based on the current `--ig-size` setting. ## API References
diff --git a/en/components/divider.md b/en/components/divider.md index defeebbf44..9c0776b605 100644 --- a/en/components/divider.md +++ b/en/components/divider.md @@ -15,7 +15,7 @@ By default the divider is a solid horizontal line. + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-1/" alt="Angular Divider Example"> ## Getting Started with Ignite UI for Angular Divider @@ -76,7 +76,7 @@ By adding the `vertical` attribute and setting its value to `true`, you can chan + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-2/" > @@ -90,7 +90,7 @@ To change the default look simply use the `type` attribute of the divider and se + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-3/" > @@ -111,7 +111,7 @@ To inset the divider, set the `middle` attribute of the divider to `true` and pr + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-4/" > diff --git a/en/components/dock-manager.md b/en/components/dock-manager.md index fff970d396..efd77d145e 100644 --- a/en/components/dock-manager.md +++ b/en/components/dock-manager.md @@ -12,7 +12,7 @@ The Ignite UI Dock Manager component provides means to manage the layout of your + iframe-src="{environment:demosBaseUrl}/layouts/dock-manager-sample/" alt="Angular Dock Manager Example"> diff --git a/en/components/drag-drop.md b/en/components/drag-drop.md index 67b1915300..38cc56cb20 100644 --- a/en/components/drag-drop.md +++ b/en/components/drag-drop.md @@ -14,7 +14,7 @@ Drag and drop icon to reposition it. + iframe-src="{environment:demosBaseUrl}/interactions/icons-sample/" alt="Angular Drag and Drop Example">
@@ -153,7 +153,7 @@ Drag the dialog using the handle in the following demo. + iframe-src="{environment:demosBaseUrl}/interactions/drag-dialog-sample/" >
@@ -176,7 +176,7 @@ Reorder items in the list using the drag handle. While dragging a list item othe + iframe-src="{environment:demosBaseUrl}/interactions/list-reorder-sample/" >
@@ -262,7 +262,7 @@ Drag e-mails on the right into the folders on the left. + iframe-src="{environment:demosBaseUrl}/interactions/email-sample/" >
@@ -280,7 +280,7 @@ Drag items around the kanban board. + iframe-src="{environment:demosBaseUrl}/interactions/kanban-sample/" >
diff --git a/en/components/drop-down-hierarchical-selection.md b/en/components/drop-down-hierarchical-selection.md index 1d2669c0a6..ae15191ea2 100644 --- a/en/components/drop-down-hierarchical-selection.md +++ b/en/components/drop-down-hierarchical-selection.md @@ -27,12 +27,12 @@ Additionally, a way to prevent the drop-down from closing on chip deletion would ### Demo + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-tree-hierarchical-selection/" > + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-tree-grid-hierarchical-selection/"> >[!NOTE] diff --git a/en/components/drop-down-virtual.md b/en/components/drop-down-virtual.md index 5e991e85cf..68a3209bd2 100644 --- a/en/components/drop-down-virtual.md +++ b/en/components/drop-down-virtual.md @@ -12,7 +12,7 @@ The Ignite UI for Angular Drop Down component can fully integrate with the [`Igx + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-virtual/" alt="Angular Virtual Drop Down Example">
@@ -247,7 +247,7 @@ The result of the above configuration is a drop-down that dynamically loads the + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-remote/" >
diff --git a/en/components/drop-down.md b/en/components/drop-down.md index c30da76528..76e5538b56 100644 --- a/en/components/drop-down.md +++ b/en/components/drop-down.md @@ -14,7 +14,7 @@ This Angular drop down example demonstrates the basic functionalities of a drop + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-1/" alt="Angular Drop Down Example">
@@ -144,7 +144,7 @@ export class MyDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-2/" >
@@ -190,7 +190,7 @@ If the sample is configured properly, a list of countries should be displayed as + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-3/" > ### Grouping hierarchical data @@ -265,7 +265,7 @@ You can see the results in the sample below: + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-5/" > ### Drop Down as menu @@ -330,7 +330,7 @@ export class MyMenuComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-menu/" > ### Multi-Level Drop Down menu @@ -398,7 +398,7 @@ The result from the above configurations could be seen in the below sample. + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-multi-level-menu/"> > [!NOTE] @@ -464,7 +464,7 @@ export class InputDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-4/" >
@@ -529,7 +529,7 @@ The last step is to pass the custom drop-down theme to a class or element select + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-styling/" >
diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 794a77eb49..995fa1a605 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -17,7 +17,7 @@ We've created this simple Angular Expansion Panel Example using Ignite UI Angula + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-1/" >
@@ -151,7 +151,7 @@ Below we have the results: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-2/" > @@ -206,7 +206,7 @@ Lets see the result from all the above changes: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-3/" > @@ -287,7 +287,7 @@ To find out more on how you can use Ignite UI theming engine [`click here`](them + iframe-src="{environment:demosBaseUrl}/layouts/expansion-styling/" > ## Angular Expansion Panel Animations @@ -350,7 +350,7 @@ You can see the results below: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-5/" > diff --git a/en/components/exporter-csv.md b/en/components/exporter-csv.md index f6ab04ebb4..50bce5f218 100644 --- a/en/components/exporter-csv.md +++ b/en/components/exporter-csv.md @@ -19,7 +19,7 @@ The exporting functionality is encapsulated in the [`IgxCsvExporterService`]({en + iframe-src="{environment:demosBaseUrl}/services/export-csv/" alt="Angular CSV Exporter Example">
@@ -120,7 +120,7 @@ public exportButtonHandler() { + iframe-src="{environment:demosBaseUrl}/services/export-csv-sample-1/" > diff --git a/en/components/exporter-excel.md b/en/components/exporter-excel.md index 1002cb7869..023d1c531d 100644 --- a/en/components/exporter-excel.md +++ b/en/components/exporter-excel.md @@ -18,7 +18,7 @@ The Ignite UI for Angular Excel Exporter service can export data in Microsoft® + iframe-src="{environment:demosBaseUrl}/services/export-excel/" alt="Angular Excel Exporter Example">
diff --git a/en/components/for-of.md b/en/components/for-of.md index 01154c9846..f74a40cf8c 100644 --- a/en/components/for-of.md +++ b/en/components/for-of.md @@ -13,7 +13,7 @@ _keywords: Angular Virtual ForOf Directive, Native Angular Components Suite, Ang + iframe-src="{environment:demosBaseUrl}/data-display/igx-for-sample-1/" alt="Angular Virtual For Directive Example">
@@ -131,7 +131,7 @@ Virtualization works similarly to Paging by slicing the data into smaller chucks + iframe-src="{environment:demosBaseUrl}/data-display/igx-for-sample-2/" >
diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md index 69dcf5a4e3..00d1219fe8 100644 --- a/en/components/general-changelog-dv.md +++ b/en/components/general-changelog-dv.md @@ -16,7 +16,35 @@ All notable changes for each version of Ignite UI for Angular are documented on * [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) -## **19.1.0** +## **20.0.1 (July 2025)** + +### igniteui-angular-maps (Geographic Map) + +* New [Azure Maps](geo-map-display-azure-imagery.md). This is a new geographic imagery mapping service provided by Microsoft® for the Infragistics Geographic Map. + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|------------------| +|36448|IgxRadialGauge|Radial label format properties do not work. (eg. Title, SubTitles)| + +### igniteui-angular-charts (Charts) + +* Add `MaximumExtent` and `MaximumExtentPercentage` properties for use with axis labels. + +## **20.0.0 (June 2025)** + +* Angular 20 support. + +## **19.0.1 (February 2025)** + +### igniteui-angular-maps (Geographic Map) + +> \[!Note] +> 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: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) ### igniteui-angular-charts (Charts) diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index 8f0368040a..0c4a072b5a 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -154,35 +154,33 @@ npm start ### Add components manually -#### Import modules +As of Angular 19, standalone components are the default way to build Angular apps, removing the need for `NgModules` and simplifying the process of adding components significantly. So let's use this to add an [**igxGrid**](../grid/grid.md) component to our app. -First we have to import the respective modules of the components we want to use in the **app.module.ts** file. We will go ahead and do this for the [**igxGrid**](../grid/grid.md)! Please note that some components have animations depending on BrowserAnimationsModule, so let’s import that one as well: +Before we start though, please note that some components have animations that require a provider as part of the `bootstrapApplication` call. ```typescript -// app.module.ts +// main.ts +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); +``` + +```typescript +// app/app.config.ts + +import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; - -// Here we import the IgxGridModule, so we can use the igxGrid! -import { IgxGridModule } from 'igniteui-angular'; -// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - IgxGridModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } +import { provideAnimations } from '@angular/platform-browser/animations'; + +const providers: Provider = [ + importProvidersFrom(BrowserModule), + provideAnimations() +]; + +export const appConfig: ApplicationConfig = { providers }; ``` #### Use components @@ -206,17 +204,19 @@ We are now ready to use the igxGrid in our markup! Let's go ahead and define it ``` -We will also define the data of the grid and the title of our application that are referenced from the **app.component.ts**: +We will also define the data of the grid and the title of our application that are referenced from the **app.component.ts**. As we are using standalone components we simply have to add the `IgxGridComponent` class to our app's imports, alongside any other components used in the template. In our example, as we are defining columns, we also have to add the `IgxColumnComponent` to the import array. ```typescript // app.component.ts import { Component } from '@angular/core'; +import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], + imports: [IgxGridComponent, IgxColumnComponent] }) export class AppComponent { localData = [ diff --git a/en/components/general/how-to/how-to-perform-crud.md b/en/components/general/how-to/how-to-perform-crud.md index 9c3e9c67a3..e8a8cd80f6 100644 --- a/en/components/general/how-to/how-to-perform-crud.md +++ b/en/components/general/how-to/how-to-perform-crud.md @@ -151,7 +151,7 @@ See the demo that was built following the guidance. Play around with it and try + iframe-src="{environment:demosBaseUrl}/grid/grid-crud/" > # Customizations diff --git a/en/components/general/localization.md b/en/components/general/localization.md index 6fd8453626..50077268d0 100644 --- a/en/components/general/localization.md +++ b/en/components/general/localization.md @@ -15,7 +15,7 @@ With only a few lines of code, users can easily change the localization strings diff --git a/en/components/geo-map-display-azure-imagery.md b/en/components/geo-map-display-azure-imagery.md new file mode 100644 index 0000000000..4fdc6f152a --- /dev/null +++ b/en/components/geo-map-display-azure-imagery.md @@ -0,0 +1,69 @@ +--- +title: Angular Map | Data Visualization Tools | Displaying Azure Imagery | Infragistics +_description: Use Infragistics' Angular to display imagery from Microsoft Azure Maps. View Ignite UI for Angular map tutorials! +_keywords: Angular map, azure maps, Ignite UI for Angular, Infragistics, imagery tile source, map background +mentionedTypes: ["XamGeographicMap", "AzureMapsMapImagery"] +--- + +# Angular Displaying Imagery from Azure Maps + +The Angular `AzureMapsMapImagery` is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The Ignite UI for Angular map component can display geographic imagery from Azure Maps in the map’s background content using the `AzureMapsMapImagery` class. + +## Angular Displaying Imagery from Azure Maps Example + + + +
+ + + + + +## Code Snippet + +The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) using `AzureMapsMapImagery` class. + +```html + + +``` + +```ts +import { IgxGeographicMapComponent } from 'igniteui-angular-maps'; +import { IgxAzureMapsMapImagery } from 'igniteui-angular-maps'; +// ... +const tileSource = new IgxAzureMapsMapImagery(); +tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY"; +tileSource.imageryStyle = AzureMapsImageryStyle.LabelsRoad; // or +tileSource.imageryStyle = AzureMapsImageryStyle.Aerial; // or +tileSource.imageryStyle = AzureMapsImageryStyle.Road; + +this.map.backgroundContent = tileSource; +``` + +## Properties + +The following table summarized properties of the `AzureMapsMapImagery` class: + +| Property Name | Property Type | Description | +|----------------|-----------------|---------------| +|`ApiKey`|string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| +|`ImageryStyle`|`AzureMapsImageryStyle`|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following `AzureMapsImageryStyle` enumeration values: | +|`AzureImageryRestUri`|string|Represents the property for setting the Azure Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| +|`CultureName`|string|Represents a property for setting the culture name for the tile source.| +|`IsDeferredLoad`|boolean|Represents the property that specifies whether or not the Azure Maps service should auto-initialized upon the assignment of valid property values.| +|`IsInitialized`|boolean|Represents the property that is set to True occurs when geographic imagery tiles from Azure Maps service have been initialized and they are ready for rendering in the map component.| +|`SubDomains`|`SubDomainsCollection`|Represents an image collection of URI sub domains| +|`TilePath`|string|Represents a property that sets the map tile image URI, this is the actual location of the Azure Maps| + +## API References + +* `AzureMapsImageryStyle` +* `AzureMapsMapImagery` +* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) diff --git a/en/components/geo-map-display-bing-imagery.md b/en/components/geo-map-display-bing-imagery.md index ab635573df..84707ff5d4 100644 --- a/en/components/geo-map-display-bing-imagery.md +++ b/en/components/geo-map-display-bing-imagery.md @@ -7,16 +7,19 @@ mentionedTypes: ["XamGeographicMap", "BingMapsMapImagery"] # Angular Displaying Imagery from Bing Maps +NOTE: 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: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + The Angular [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) class. ## Angular Displaying Imagery from Bing Maps Example - - + +
diff --git a/en/components/geo-map.md b/en/components/geo-map.md index 0c8a2d9b6b..4cde8d60c5 100644 --- a/en/components/geo-map.md +++ b/en/components/geo-map.md @@ -28,6 +28,12 @@ The map's Series property is used to support rendering an unlimited number of ge The map provides customizable navigation behaviors for navigating map content using mouse, keyboard, or code-behind. +NOTE: 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: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + ## Dependencies diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md index 6d0e905615..c241de5d15 100644 --- a/en/components/grid/grid.md +++ b/en/components/grid/grid.md @@ -576,7 +576,7 @@ configuration. Same goes for grouping and editing operations with or without tra @@ -681,7 +681,7 @@ And the result from this configuration is: @@ -763,7 +763,7 @@ And the result is: diff --git a/en/components/grid/groupby.md b/en/components/grid/groupby.md index 1e7ffc3278..c6c2f35a5e 100644 --- a/en/components/grid/groupby.md +++ b/en/components/grid/groupby.md @@ -14,7 +14,7 @@ This example presents the grouping capabilities of a large amount of data. Dragg + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby/" alt="Angular Grid Group By Example"> @@ -179,7 +179,7 @@ Groups that span multiple pages are split between them. The group row is visible + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-paging/" alt="Angular grid group by with paging example"> @@ -217,7 +217,7 @@ The sample below demonstrates custom grouping by `Date`, where the date values a + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-custom/" alt="Angular custom group by example"> @@ -467,7 +467,7 @@ In our example, we need to use `::ng-deep` for our chip theme: + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-styling/" > >[!NOTE] diff --git a/en/components/grid/paste-excel.md b/en/components/grid/paste-excel.md index 30fbc12177..784e9c48ed 100644 --- a/en/components/grid/paste-excel.md +++ b/en/components/grid/paste-excel.md @@ -24,7 +24,7 @@ The new data after the paste is decorated in Italic. + iframe-src="{environment:demosBaseUrl}/grid/grid-paste/" alt="Angular Paste from Excel Example">
diff --git a/en/components/grid/selection-based-aggregates.md b/en/components/grid/selection-based-aggregates.md index 487f37d578..e66ea94329 100644 --- a/en/components/grid/selection-based-aggregates.md +++ b/en/components/grid/selection-based-aggregates.md @@ -43,7 +43,7 @@ Change the selection to see summaries of the currently selected range. + iframe-src="{environment:demosBaseUrl}/grid/grid-selection-custom-summaries/" > diff --git a/en/components/grids_templates/advanced-filtering.md b/en/components/grids_templates/advanced-filtering.md index 23133d90ad..54e99f06ed 100644 --- a/en/components/grids_templates/advanced-filtering.md +++ b/en/components/grids_templates/advanced-filtering.md @@ -25,7 +25,7 @@ The Advanced filtering provides a dialog which allows the creation of groups wit + iframe-src="{environment:demosBaseUrl}/grid/grid-advanced-filtering/" alt="Angular @@igComponent Advanced Filtering Example"> } @@ -33,7 +33,7 @@ The Advanced filtering provides a dialog which allows the creation of groups wit + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-advanced-filtering/" alt="Angular @@igComponent Advanced Filtering Example"> } @@ -41,7 +41,7 @@ The Advanced filtering provides a dialog which allows the creation of groups wit + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-advanced-filtering/" alt="Angular @@igComponent Advanced Filtering Example"> } @@ -181,7 +181,7 @@ As you see the demo above the Advanced filtering dialog is hosted in an overlay + iframe-src="{environment:demosBaseUrl}/grid/grid-external-advanced-filtering/" > } @@ -190,7 +190,7 @@ As you see the demo above the Advanced filtering dialog is hosted in an overlay + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-external-advanced-filtering/" > } @@ -199,7 +199,7 @@ As you see the demo above the Advanced filtering dialog is hosted in an overlay + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-external-advanced-filtering/" > } @@ -302,7 +302,7 @@ $custom-query-builder: query-builder-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-advanced-filtering-style/" > } @@ -311,7 +311,7 @@ $custom-query-builder: query-builder-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-advanced-filtering-style/" > } @@ -320,7 +320,7 @@ $custom-query-builder: query-builder-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-advanced-filtering-style/" > } diff --git a/en/components/grids_templates/batch-editing.md b/en/components/grids_templates/batch-editing.md index 9da9961d27..f660e8050c 100644 --- a/en/components/grids_templates/batch-editing.md +++ b/en/components/grids_templates/batch-editing.md @@ -27,7 +27,7 @@ The following sample demonstrates a scenario, where the @@igObjectRef has [`batc @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-batch-editing/" alt="Angular @@igComponent Batch Editing and Transactions Example">
@@ -35,7 +35,7 @@ The following sample demonstrates a scenario, where the @@igObjectRef has [`batc @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-batchediting/" alt="Angular @@igComponent Batch Editing and Transactions Example">
@@ -43,7 +43,7 @@ The following sample demonstrates a scenario, where the @@igObjectRef has [`batc @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-batch-editing/" alt="Angular @@igComponent Batch Editing and Transactions Example">
@@ -236,7 +236,7 @@ Deleting a parent node in `@@igComponent` has some peculiarities. If you are usi + iframe-src="{environment:demosBaseUrl}/grid/remote-paging-batch-editing/" > } diff --git a/en/components/grids_templates/cascading-combos.md b/en/components/grids_templates/cascading-combos.md index b543d49156..23ec665283 100644 --- a/en/components/grids_templates/cascading-combos.md +++ b/en/components/grids_templates/cascading-combos.md @@ -13,7 +13,7 @@ The sample below demonstrates how `Grid` works with nested `Cascading Combos`. @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-cascading-combos/" alt="Angular @@igComponent Batch Editing and Transactions Example"> } diff --git a/en/components/grids_templates/cell-editing.md b/en/components/grids_templates/cell-editing.md index fbdc9f330b..30f14c1b25 100644 --- a/en/components/grids_templates/cell-editing.md +++ b/en/components/grids_templates/cell-editing.md @@ -32,7 +32,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation + iframe-src="{environment:demosBaseUrl}/grid/grid-editing/" alt="Angular @@igComponent cell editing and edit templates Example"> } @@ -40,7 +40,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-editing/" alt="Angular @@igComponent cell editing and edit templates Example"> } @@ -48,7 +48,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-editing/" alt="Angular @@igComponent cell editing and edit templates Example"> } @@ -163,7 +163,7 @@ This code is used in the sample below which implements an [`IgxSelectComponent`] + iframe-src="{environment:demosBaseUrl}/grid/grid-select/" >
@@ -259,7 +259,7 @@ Please check the full sample for further reference: + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-excel-style/" alt="Angular Grid Excel Style Editing Example"> @@ -490,7 +490,7 @@ The result of the above validation being applied to our `@@igSelector` can be se + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-events/" > } @@ -498,7 +498,7 @@ The result of the above validation being applied to our `@@igSelector` can be se + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-editing-events/" > } @@ -506,7 +506,7 @@ The result of the above validation being applied to our `@@igSelector` can be se + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-editing-events/" > } @@ -576,7 +576,7 @@ In addition to the steps above, we can also style the controls that are used for + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-style/" > } @@ -585,7 +585,7 @@ In addition to the steps above, we can also style the controls that are used for + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-editing-style/" > } @@ -594,7 +594,7 @@ In addition to the steps above, we can also style the controls that are used for + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-editing-style/" > } diff --git a/en/components/grids_templates/cell-merging.md b/en/components/grids_templates/cell-merging.md new file mode 100644 index 0000000000..694bb9ffb2 --- /dev/null +++ b/en/components/grids_templates/cell-merging.md @@ -0,0 +1,195 @@ +--- +title: Angular Grid Cell Merging - Ignite UI for Angular +_description: Position and size columns in a more powerful way, using the multi-row layout functionality in the Ignite UI for Angular Data Grid. Check out examples and demos! +_keywords: angular cell merging, cell merging, ignite ui for angular +--- + +# Angular Cell Merging + +The Ignite UI for Angular @@igComponent provides a Cell Merging feature that combines two or more adjacent cells with the same value into a single, larger cell. Merging is applied vertically within a column and helps improve readability by reducing duplicate values. The feature can be configured to merge cells either by default matching data values or by applying a custom condition. + +## Angular Cell Merging Example + +@@if(igxName === 'IgxGrid'){ + + +} +@@if(igxName === 'IgxHierarchicalGrid'){ + + +} +@@if(igxName === 'IgxTreeGrid'){ + + +} + +## Enabling and Using Cell Merging + +Cell merging in the grid is controlled at two levels: + - Grid-level merge mode – determines when merging is applied. + - Column-level merge toggle – determines which columns can merge cells. + +### Grid Merge Mode +The grid exposes a `cellMergeMode` property that accepts values from the `GridCellMergeMode` enum: + - `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state. + - `onSort` - Merges adjacent cells only when the column is sorted **(default value)**. + +```html +<@@igSelector [data]="data" [cellMergeMode]="cellMergeMode"> + ... + +``` +```ts +protected cellMergeMode: GridCellMergeMode = 'always'; +``` + +### Column Merge Toggle +At the column level, merging can be enabled or disabled with the `merge` property. + +```html + + +``` + +In the above example: + - The **OrderID** column will merge adjacent duplicate values. + - The **ShipperName** column will render normally without merging. + +### Combined Example + +```html +<@@igSelector [data]="data" [cellMergeMode]="cellMergeMode" [autoGenerate]="false"> + + + + +``` +```ts +protected cellMergeMode: GridCellMergeMode = 'onSort'; +``` +Here, the grid is set to merge only when columns are sorted, and both Category and Product columns are configured for merging. + +## Custom Merge Conditions +In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the `mergeStrategy` property. This strategy controls both how cells are compared and how merged ranges are calculated. + +### Merge Strategy Interface +A custom merge strategy must implement the `IGridMergeStrategy` interface: + +```ts +export interface IGridMergeStrategy { + merge: ( + data: any[], + field: string, + comparer: (prevRecord: any, currentRecord: any, field: string) => boolean, + result: any[], + activeRowIndex?: number, + grid?: GridType + ) => any[]; + + comparer: (prevRecord: any, record: any, field: string) => boolean; +} +``` +- `merge` - defines how merged cells are produced. +- `comparer` - defines the condition to decide if two adjacent records should be merged. + +@@if(igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid'){ +### Extending the Default Strategy + +If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in `DefaultMergeStrategy` and override the relevant methods. + +```ts +export class MyCustomStrategy extends DefaultMergeStrategy { + /* Merge only cells within their respective projects */ + public override comparer(prevRecord: any, record: any, field: string): boolean { + const a = prevRecord[field]; + const b = record[field]; + const projA = prevRecord['ProjectName']; + const projB = record['ProjectName']; + return a === b && projA === projB; + } +} +``` +} +@@if(igxName === 'IgxTreeGrid'){ +The `IgxTreeGrid` provides two built-in strategies that implement the `IGridMergeStrategy` interface: `DefaultTreeGridMergeStrategy` and `ByLevelTreeGridMergeStrategy`. `DefaultTreeGridMergeStrategy` merges all cells with the same value, regardless of their hierarchical level. In contrast, `ByLevelTreeGridMergeStrategy` only merges cells if they have the same value and are located at the same level, making level a required condition for merging. + +### Extending the Default Strategy + +If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either `DefaultTreeGridMergeStrategy` or `ByLevelTreeGridMergeStrategy`, and override the relevant methods. + +```ts +export class MyCustomStrategy extends DefaultTreeGridMergeStrategy { + /* Merge only cells within their respective projects */ + public override comparer(prevRecord: any, record: any, field: string): boolean { + const a = prevRecord[field]; + const b = record[field]; + const projA = prevRecord['ProjectName']; + const projB = record['ProjectName']; + return a === b && projA === projB; + } +} +``` +} + +### Applying a Custom Strategy +Once defined, assign the strategy to the grid through the `mergeStrategy` property: +```html +<@@igSelector [data]="data" [mergeStrategy]="customStrategy"> + + + +``` +```ts +protected customStrategy = new MyCustomStrategy(); +``` +@@if(igxName === 'IgxGrid'){ +### Demo + + +} + +## Feature Integration +Due to the specific behavior of merged cells it has to be noted how exactly it ties together with some of the other features of the grid: +@@if(igxName === 'IgxGrid'){ +- **Expand/Collapse**: if a feature (such as master-detail, grouping, etc.) generates a non-data row, then the cell merging is interrupted and the group will be split. +} +- **Excel export**: merged cells remain merged when exported to Excel. +- **Column pinning**: cells remain merged when a column is pinned and are displayed in the pinned area. +- **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. + +>[!NOTE] +> If a merged cell is clicked, the closest cell from the merge sequence will become active. + +- **Updating/Editing**: since activation breaks the merge sequence, only a single cell will be in edit mode. +- **Row selection**: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection. + +@@if(igxName === 'IgxGrid'){ +## Limitations +|Known Limitations| Description| +| --- | --- | +| Cell merging is not supported in combination with Multi-row Layout. | Both span complex layouts that don't make sense when combined. A warning will be thrown if such invalid configuration is detected. | +} + +## API References +* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) + +## Additional Resources +
+ +* [@@igComponent overview](@@igMainTopic.md) + +
+Our community is active and always welcoming to new ideas. + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/grids_templates/cell-selection.md b/en/components/grids_templates/cell-selection.md index 094ca66da2..0c300a65bd 100644 --- a/en/components/grids_templates/cell-selection.md +++ b/en/components/grids_templates/cell-selection.md @@ -34,7 +34,7 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-selection/" alt="Angular Cell Selection Example">
@@ -44,7 +44,7 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-selection/" >
@@ -53,7 +53,7 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-cell-selection/" >
@@ -80,7 +80,7 @@ How to select cells: + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-cell-selection/" >
@@ -91,7 +91,7 @@ How to select cells: + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-cell-selection/" >
@@ -319,7 +319,7 @@ With the custom theme applied, the selected grid cells are highlighted with our + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-cell-selection-style/" > } @@ -330,7 +330,7 @@ With the custom theme applied, the selected grid cells are highlighted with our + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-cell-style/" > } @@ -342,7 +342,7 @@ With the custom theme applied, the selected grid cells are highlighted with our + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-cell-selection-style/" > } diff --git a/en/components/grids_templates/clipboard-interactions.md b/en/components/grids_templates/clipboard-interactions.md index cdbd88778a..900b0ccc07 100644 --- a/en/components/grids_templates/clipboard-interactions.md +++ b/en/components/grids_templates/clipboard-interactions.md @@ -24,7 +24,7 @@ Copy to clipboard operations are now available in the @@igComponent. This functi + iframe-src="{environment:demosBaseUrl}/grid/grid-clipboard-operations-sample/" alt="Angular @@igComponent Clipboard Interactions Example">
@@ -33,7 +33,7 @@ Copy to clipboard operations are now available in the @@igComponent. This functi + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-clipboard-operations-sample/" alt="Angular @@igComponent Clipboard Interactions Example">
diff --git a/en/components/grids_templates/collapsible-column-groups.md b/en/components/grids_templates/collapsible-column-groups.md index bbf3f62d45..0c08a56b76 100644 --- a/en/components/grids_templates/collapsible-column-groups.md +++ b/en/components/grids_templates/collapsible-column-groups.md @@ -24,7 +24,7 @@ Multi-column headers allow you to have multiple levels of nested columns and col + iframe-src="{environment:demosBaseUrl}/grid/grid-collapsible-groups/" alt="Angular Grid Collapsible Column Groups Overview Example">
@@ -34,7 +34,7 @@ Multi-column headers allow you to have multiple levels of nested columns and col + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-collapsible-groups/" alt="Angular Grid Collapsible Column Groups Overview Example">
@@ -43,7 +43,7 @@ Multi-column headers allow you to have multiple levels of nested columns and col + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-collapsible-column-groups/" alt="Angular Grid Collapsible Column Groups Overview Example">
diff --git a/en/components/grids_templates/column-hiding.md b/en/components/grids_templates/column-hiding.md index f931221680..3e5853c9d9 100644 --- a/en/components/grids_templates/column-hiding.md +++ b/en/components/grids_templates/column-hiding.md @@ -32,7 +32,7 @@ The Ignite UI for Angular @@igComponent provides an [`IgxColumnActionsComponent` + iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-toolbar-sample/" alt="Angular @@igComponent Column Hiding Example">
@@ -41,7 +41,7 @@ The Ignite UI for Angular @@igComponent provides an [`IgxColumnActionsComponent` + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding-toolbar/" alt="Angular @@igComponent Column Hiding Example">
@@ -50,7 +50,7 @@ The Ignite UI for Angular @@igComponent provides an [`IgxColumnActionsComponent` + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-hiding/" alt="Angular @@igComponent Column Hiding Example">
@@ -443,7 +443,7 @@ If all went well, this is how our column hiding UI component should look like: + iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-sample/" >
@@ -452,7 +452,7 @@ If all went well, this is how our column hiding UI component should look like: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding/" >
@@ -528,7 +528,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-style/" >
@@ -538,7 +538,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding-style/" >
@@ -548,7 +548,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-column-hiding-style/" >
diff --git a/en/components/grids_templates/column-moving.md b/en/components/grids_templates/column-moving.md index f4438ea5b7..a8f4b6302c 100644 --- a/en/components/grids_templates/column-moving.md +++ b/en/components/grids_templates/column-moving.md @@ -47,7 +47,7 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin + iframe-src="{environment:demosBaseUrl}/grid/grid-moving-sample/" alt="Angular @@igComponent Column Moving Overview Example">
@@ -56,7 +56,7 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-moving/" alt="Angular @@igComponent Column Moving Overview Example">
@@ -65,7 +65,7 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-moving/" alt="Angular @@igComponent Column Moving Overview Example">
@@ -211,7 +211,7 @@ The last step is to **include** the component mixins with its respective theme: + iframe-src="{environment:demosBaseUrl}/grid/grid-moving-styled-sample/" > } @@ -221,7 +221,7 @@ The last step is to **include** the component mixins with its respective theme: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-moving-styled/" > } @@ -231,7 +231,7 @@ The last step is to **include** the component mixins with its respective theme: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-moving-styled/" > } diff --git a/en/components/grids_templates/column-pinning.md b/en/components/grids_templates/column-pinning.md index 1e4467f5b6..a2d92a8835 100644 --- a/en/components/grids_templates/column-pinning.md +++ b/en/components/grids_templates/column-pinning.md @@ -31,7 +31,7 @@ A column or multiple columns can be pinned to the left or right side of the Angu + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-toolbar-pinning/" alt="Angular @@igComponent Column Pinning Example"> } @@ -39,7 +39,7 @@ A column or multiple columns can be pinned to the left or right side of the Angu + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-pinning/" alt="Angular @@igComponent Column Pinning Example"> } @@ -47,7 +47,7 @@ A column or multiple columns can be pinned to the left or right side of the Angu + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-pinning/" alt="Angular @@igComponent Column Pinning Example"> } @@ -188,7 +188,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-right-pinning/" > } @@ -197,7 +197,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sample-right-pinning/" > } @@ -206,7 +206,36 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-sample-right-pinning/" > + + +} + +Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo bellow for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added ot the toolbar, or simply drag a column to another pinned one. + +@@if (igxName === 'IgxGrid') { + + + + +} + +@@if (igxName === 'IgxHierarchicalGrid') { + + + + +} + +@@if (igxName === 'IgxTreeGrid') { + + } @@ -310,7 +339,7 @@ public toggleColumn(col: ColumnType) { + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-pinning/" > } @@ -318,7 +347,7 @@ public toggleColumn(col: ColumnType) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-pinning/" > } @@ -326,7 +355,7 @@ public toggleColumn(col: ColumnType) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-pinning/" > } @@ -382,7 +411,7 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the + iframe-src="{environment:demosBaseUrl}/grid/grid-pinning-styling/" > >[!NOTE] diff --git a/en/components/grids_templates/column-resizing.md b/en/components/grids_templates/column-resizing.md index 248686a545..706418e279 100644 --- a/en/components/grids_templates/column-resizing.md +++ b/en/components/grids_templates/column-resizing.md @@ -32,7 +32,7 @@ With deferred grid column resizing, the user will see a temporary resize indicat + iframe-src="{environment:demosBaseUrl}/grid/grid-resizing-sample/" alt="Angular @@igComponent Column Resizing Example">
@@ -41,7 +41,7 @@ With deferred grid column resizing, the user will see a temporary resize indicat + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-resizing/" alt="Angular @@igComponent Column Resizing Example">
@@ -253,7 +253,7 @@ This approach is more performance optimized than auto-sizing post initialization + iframe-src="{environment:demosBaseUrl}/grid/grid-columnAutoResizing-sample/" alt="Angular @@igComponent Column Resizing Example">
@@ -262,7 +262,7 @@ This approach is more performance optimized than auto-sizing post initialization + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-columnAutoSizing-sample/" alt="Angular @@igComponent Column Resizing Example">
@@ -271,7 +271,7 @@ This approach is more performance optimized than auto-sizing post initialization + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-columnAutosizing-sample/" alt="Angular @@igComponent Column Resizing Example">
@@ -311,7 +311,7 @@ The last step is to **include** the component mixins with its respective theme: + iframe-src="{environment:demosBaseUrl}/grid/grid-resize-line-styling-sample/" > } @@ -320,7 +320,7 @@ The last step is to **include** the component mixins with its respective theme: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-resize-line-styling/" > } @@ -329,7 +329,7 @@ The last step is to **include** the component mixins with its respective theme: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-resize-line-styling/" > } diff --git a/en/components/grids_templates/column-selection.md b/en/components/grids_templates/column-selection.md index 9094e8eba6..e06751c196 100644 --- a/en/components/grids_templates/column-selection.md +++ b/en/components/grids_templates/column-selection.md @@ -42,7 +42,7 @@ The sample below demonstrates the three types of @@igComponent's **column select + iframe-src="{environment:demosBaseUrl}/@@igDemoBasePath/column-selection/" alt="Angular Column Selection Example">
@@ -70,7 +70,7 @@ The default selection mode is `none`. If set to `single` or `multiple` all of th + iframe-src="{environment:demosBaseUrl}/@@igDemoBasePath/column-group-selection/" >
@@ -153,7 +153,7 @@ The last step is to include the custom `igx-grid` theme. + iframe-src="{environment:demosBaseUrl}/@@igDemoBasePath/column-selection-styles/" > >[!NOTE] diff --git a/en/components/grids_templates/column-types.md b/en/components/grids_templates/column-types.md index f84a95d93c..97e48615c7 100644 --- a/en/components/grids_templates/column-types.md +++ b/en/components/grids_templates/column-types.md @@ -30,7 +30,7 @@ Ignite UI for Angular @@igComponent provides a default handling of *number*, *st + iframe-src="{environment:demosBaseUrl}/grid/grid-column-data-types/" > } @@if (igxName === 'IgxTreeGrid') { diff --git a/en/components/grids_templates/conditional-cell-styling.md b/en/components/grids_templates/conditional-cell-styling.md index 288b0a2ef0..6145d422c9 100644 --- a/en/components/grids_templates/conditional-cell-styling.md +++ b/en/components/grids_templates/conditional-cell-styling.md @@ -118,7 +118,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. + iframe-src="{environment:demosBaseUrl}/grid/grid-rowClasses-sample/" > } @@ -126,14 +126,14 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-classes/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-row-classes/" > }
@@ -230,7 +230,7 @@ public childRowStyles = { + iframe-src="{environment:demosBaseUrl}/grid/grid-rowStyles-sample/" > } @@ -238,14 +238,14 @@ public childRowStyles = { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-styles-sample/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-row-styles/" > }
@@ -411,7 +411,7 @@ public grammyClasses = { + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-styling/" > } @@ -420,7 +420,7 @@ public grammyClasses = { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-conditional-cell-style/" > } @@ -617,7 +617,7 @@ Define a `popin` animation + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-cellStyling/" > } @@ -625,7 +625,7 @@ Define a `popin` animation + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-cell-cellStyling/" > } diff --git a/en/components/grids_templates/display-density.md b/en/components/grids_templates/display-density.md index 4cc927edd0..d4caeb782b 100644 --- a/en/components/grids_templates/display-density.md +++ b/en/components/grids_templates/display-density.md @@ -33,7 +33,7 @@ _canonicalLink: grid/display-density + iframe-src="{environment:demosBaseUrl}/grid/grid-displayDensity/" alt="Angular @@igComponent Size Example">
@@ -42,7 +42,7 @@ _canonicalLink: grid/display-density + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-display-density/" alt="Angular @@igComponent Size Example">
@@ -51,7 +51,7 @@ _canonicalLink: grid/display-density + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-density/" alt="Angular @@igComponent Size Example">
diff --git a/en/components/grids_templates/editing.md b/en/components/grids_templates/editing.md index 48646eee17..f68d759b61 100644 --- a/en/components/grids_templates/editing.md +++ b/en/components/grids_templates/editing.md @@ -113,7 +113,7 @@ The following sample demonstrates the editing execution sequence in action: + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-lifecycle/" > } @@ -121,7 +121,7 @@ The following sample demonstrates the editing execution sequence in action: + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-editing-lifecycle/" > } @@ -129,7 +129,7 @@ The following sample demonstrates the editing execution sequence in action: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-editing-lifecycle/" > } diff --git a/en/components/grids_templates/excel-style-filtering.md b/en/components/grids_templates/excel-style-filtering.md index 871a0b73fd..5c0d903ec5 100644 --- a/en/components/grids_templates/excel-style-filtering.md +++ b/en/components/grids_templates/excel-style-filtering.md @@ -24,7 +24,7 @@ The grid Excel filtering provides an Excel like filtering UI for any Angular tab + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-1/" alt="Angular @@igComponent Excel Style Filtering Example"> } @@ -32,7 +32,7 @@ The grid Excel filtering provides an Excel like filtering UI for any Angular tab + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-1/" alt="Angular @@igComponent Excel Style Filtering Example"> } @@ -40,7 +40,7 @@ The grid Excel filtering provides an Excel like filtering UI for any Angular tab + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/" alt="Angular @@igComponent Excel Style Filtering Example"> } @@ -182,7 +182,7 @@ In the sample below 'Artist' column have all three features enabled, 'Debut' hav + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-2/" > } @@ -190,7 +190,7 @@ In the sample below 'Artist' column have all three features enabled, 'Debut' hav + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-2/" > } @@ -198,7 +198,7 @@ In the sample below 'Artist' column have all three features enabled, 'Debut' hav + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2/" > } @@ -327,7 +327,7 @@ You could also re-template the Excel style filtering icon in the column header u + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-3/" > } @@ -335,7 +335,7 @@ You could also re-template the Excel style filtering icon in the column header u + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-3/" > } @@ -343,7 +343,7 @@ You could also re-template the Excel style filtering icon in the column header u + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3/" > } @@ -373,7 +373,7 @@ By default, the @@igComponent component filters the data based on the original c + iframe-src="{environment:demosBaseUrl}/grid/grid-formatted-filtering-strategy/" > } @@ -382,7 +382,7 @@ By default, the @@igComponent component filters the data based on the original c + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-formatted-filtering-strategy/" > } @@ -391,7 +391,7 @@ By default, the @@igComponent component filters the data based on the original c + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-formatted-filtering-strategy/" > } @@ -407,7 +407,7 @@ By default, the Excel Style Filtering dialog displays the items in a list view. + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-tree-filter-view/" > } @@ -421,7 +421,7 @@ As you see at the demos above the default appearance of the Excel Style filterin + iframe-src="{environment:demosBaseUrl}/grid/grid-external-excel-style-filtering/" > } @@ -430,7 +430,7 @@ As you see at the demos above the default appearance of the Excel Style filterin + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-external-excel-style-filtering/" > } @@ -439,7 +439,7 @@ As you see at the demos above the default appearance of the Excel Style filterin + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/" > } @@ -501,7 +501,7 @@ However, elements that go outside of the grid (e.g. Excel Style filter) will con + iframe-src="{environment:demosBaseUrl}/grid/grid-external-outlet/" > } @@ -510,7 +510,7 @@ However, elements that go outside of the grid (e.g. Excel Style filter) will con + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-external-outlet/" > } @@ -519,7 +519,7 @@ However, elements that go outside of the grid (e.g. Excel Style filter) will con + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-external-outlet/" > } @@ -644,7 +644,7 @@ The last step is to **include** each component’s custom theme. We will also se + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-style/" > } @@ -653,7 +653,7 @@ The last step is to **include** each component’s custom theme. We will also se + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-style/" > } @@ -662,7 +662,7 @@ The last step is to **include** each component’s custom theme. We will also se + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/" > } diff --git a/en/components/grids_templates/export-excel.md b/en/components/grids_templates/export-excel.md index 64b2b6d7b4..d133a52022 100644 --- a/en/components/grids_templates/export-excel.md +++ b/en/components/grids_templates/export-excel.md @@ -59,7 +59,7 @@ The Excel Exporter service can export data to excel from the @@igxName. The data + iframe-src="{environment:demosBaseUrl}/services/export-excel-sample-1/" alt="Angular Excel Exporter Example"> } @@ -68,7 +68,7 @@ The Excel Exporter service can export data to excel from the @@igxName. The data + iframe-src="{environment:demosBaseUrl}/services/export-excel-tree-grid-sample/" alt="Angular Excel Exporter Example"> } @@ -77,7 +77,7 @@ The Excel Exporter service can export data to excel from the @@igxName. The data + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-export/" alt="Angular Excel Exporter Example"> } @@ -86,7 +86,7 @@ The Excel Exporter service can export data to excel from the @@igxName. The data + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-export/" alt="Angular Excel Exporter Example"> } @@ -179,7 +179,7 @@ To export grouped data you just need to group the @@igComponent by one or more c + iframe-src="{environment:demosBaseUrl}/services/export-excel-sample-1/" alt="Angular Grouped Data Excel Exporter Example"> } @@ -200,7 +200,7 @@ It is now possible to export @@igComponent with defined [multi-column headers](m + iframe-src="{environment:demosBaseUrl}/grid/multi-column-headers-export/" alt="Angular Multi-Column Headers Export"> } @@ -208,7 +208,7 @@ It is now possible to export @@igComponent with defined [multi-column headers](m + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-headers-export/" alt="Angular Multi-Column Headers Export"> } @@ -216,7 +216,7 @@ It is now possible to export @@igComponent with defined [multi-column headers](m + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column-export/" alt="Angular Multi-Column Headers Export"> } diff --git a/en/components/grids_templates/filtering.md b/en/components/grids_templates/filtering.md index b62975cd8b..fabd5c488f 100644 --- a/en/components/grids_templates/filtering.md +++ b/en/components/grids_templates/filtering.md @@ -32,7 +32,7 @@ The sample below demonstrates @@igComponent's **Quick filtering** user experienc + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-sample/" alt="Angular @@igComponent Filtering Example"> } @@ -40,7 +40,7 @@ The sample below demonstrates @@igComponent's **Quick filtering** user experienc + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering/" alt="Angular @@igComponent Filtering Example"> } @@ -48,7 +48,7 @@ The sample below demonstrates @@igComponent's **Quick filtering** user experienc + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering/" alt="Angular @@igComponent Filtering Example"> } @@ -457,7 +457,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-filter-conditions/" > } @@ -465,7 +465,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-custom/" > } @@ -473,7 +473,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-custom-filtering/" > } @@ -485,7 +485,7 @@ You can add a template marked with `igxFilterCellTemplate` in order to retemplat + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-template-sample/" > } @@ -493,7 +493,7 @@ You can add a template marked with `igxFilterCellTemplate` in order to retemplat + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-template/" > } @@ -501,7 +501,7 @@ You can add a template marked with `igxFilterCellTemplate` in order to retemplat + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering-template/" > } @@ -617,7 +617,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-style/" > } @@ -626,7 +626,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-style/" > } @@ -635,7 +635,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering-style/" > } diff --git a/en/components/grids_templates/keyboard-navigation.md b/en/components/grids_templates/keyboard-navigation.md index 853c295ea9..1e73c549e3 100644 --- a/en/components/grids_templates/keyboard-navigation.md +++ b/en/components/grids_templates/keyboard-navigation.md @@ -107,7 +107,7 @@ Practice all of the above mentioned actions in the demo sample below. Focus any + iframe-src="{environment:demosBaseUrl}/grid/grid-keyboardnav-guide/" >
@@ -116,7 +116,7 @@ Practice all of the above mentioned actions in the demo sample below. Focus any + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hgrid-keyboard-guide/" >
@@ -125,7 +125,7 @@ Practice all of the above mentioned actions in the demo sample below. Focus any + iframe-src="{environment:demosBaseUrl}/tree-grid/tgrid-keyboardnav-guide/" >
@@ -250,7 +250,7 @@ Use the demo below to try out the custom scenarios that we just implemented: + iframe-src="{environment:demosBaseUrl}/grid/grid-custom-keyboard-navigation/" > } @@ -278,7 +278,7 @@ Use the demo below to try out the custom scenarios that we just implemented: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-custom-kb-navigation/" > } @@ -303,7 +303,7 @@ Use the demo below to try out the custom scenarios that we just implemented: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-keyboard-navigation/" > } diff --git a/en/components/grids_templates/multi-column-headers.md b/en/components/grids_templates/multi-column-headers.md index 6cec6b8aaf..9cb50d4dc8 100644 --- a/en/components/grids_templates/multi-column-headers.md +++ b/en/components/grids_templates/multi-column-headers.md @@ -32,7 +32,7 @@ _canonicalLink: grid/multi-column-headers + iframe-src="{environment:demosBaseUrl}/grid/multi-column-headers/" alt="Angular @@igComponent Multi-column Headers Overview Example"> } @@ -40,7 +40,7 @@ _canonicalLink: grid/multi-column-headers + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-headers/" alt="Angular @@igComponent Multi-column Headers Overview Example"> } @@ -48,7 +48,7 @@ _canonicalLink: grid/multi-column-headers + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column/" alt="Angular @@igComponent Multi-column Headers Overview Example"> } @@ -236,7 +236,7 @@ The following sample demonstrates how to implement collapsible column groups usi + iframe-src="{environment:demosBaseUrl}/grid/multi-column-header-template/" > } @@ -244,7 +244,7 @@ The following sample demonstrates how to implement collapsible column groups usi + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-header-template/" > } @@ -252,7 +252,7 @@ The following sample demonstrates how to implement collapsible column groups usi + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column-template/" > } @@ -296,7 +296,7 @@ The last step is to **include** the component mixins: + iframe-src="{environment:demosBaseUrl}/grid/multi-column-headers-styling/" > } @@ -307,7 +307,7 @@ The last step is to **include** the component mixins: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-headers-styling/" > } @@ -318,7 +318,7 @@ The last step is to **include** the component mixins: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column-styling/" > } diff --git a/en/components/grids_templates/multi-row-layout.md b/en/components/grids_templates/multi-row-layout.md index 90b53e31a2..285799ca19 100644 --- a/en/components/grids_templates/multi-row-layout.md +++ b/en/components/grids_templates/multi-row-layout.md @@ -13,7 +13,7 @@ Multi-row Layout extends the rendering capabilities of the `igxGridComponent`. T + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-row-layout/" alt="Angular Multi-row Layout Example"> @@ -104,7 +104,7 @@ The demo below adds additional navigation down/up via the Enter and < + iframe-src="{environment:demosBaseUrl}/grid/grid-mrl-custom-navigation/" > @@ -177,7 +177,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-row-layout-styling/" > >[!NOTE] diff --git a/en/components/grids_templates/paging.md b/en/components/grids_templates/paging.md index 6050e3b967..5d8065db98 100644 --- a/en/components/grids_templates/paging.md +++ b/en/components/grids_templates/paging.md @@ -24,7 +24,7 @@ The following example represents @@igComponent pagination and exposes the option + iframe-src="{environment:demosBaseUrl}/grid/grid-paging-sample/" alt="Angular Pagination Example"> } @@ -32,7 +32,7 @@ The following example represents @@igComponent pagination and exposes the option + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-paging/" alt="Angular Pagination Example"> } @@ -40,7 +40,7 @@ The following example represents @@igComponent pagination and exposes the option + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-paging/" alt="Angular Pagination Example">
@@ -155,14 +155,14 @@ Due to certain limitations in how the child grids of an IgxHierarchicalGrid are @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-pager-sample/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-reusable-paginator/" > } @@ -170,7 +170,7 @@ Due to certain limitations in how the child grids of an IgxHierarchicalGrid are + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-reusable-paginator/" > } @@ -257,7 +257,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/grid/custom-grid-paging-style/" >
@@ -269,7 +269,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-paging-style/" > } @@ -281,7 +281,7 @@ The last step is to **include** the component mixins, each with its respective t + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-paging-style/" > } diff --git a/en/components/grids_templates/remote-data-operations.md b/en/components/grids_templates/remote-data-operations.md index caf382406e..1989c35b3d 100644 --- a/en/components/grids_templates/remote-data-operations.md +++ b/en/components/grids_templates/remote-data-operations.md @@ -32,7 +32,7 @@ The Ignite UI for Angular @@igComponent supports remote data operations such as + iframe-src="{environment:demosBaseUrl}/grid/grid-remote-filtering/" alt="Angular @@igComponent Remote Data Operations Overview Example"> } @@ -42,7 +42,7 @@ The Ignite UI for Angular @@igComponent supports remote data operations such as + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-remote-filtering/" alt="Angular @@igComponent Remote Data Operations Overview Example">
@@ -104,7 +104,7 @@ When requesting data, you need to utilize the [`IForOfState`]({environment:angul + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-4/" alt="Angular @@igComponent Remote Data Operations Overview Example"> @@ -163,7 +163,7 @@ public handlePreLoad() { + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-5/" > @@ -325,7 +325,7 @@ public columnValuesStrategy = (column: ColumnType, + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-load-on-demand/" > } @@ -350,7 +350,7 @@ public columnValuesStrategy = (column: ColumnType, + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-load-on-demand/" > } @@ -390,7 +390,7 @@ this.remoteValuesService.getColumnData( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/" > } @@ -590,7 +590,7 @@ public paginate(page: number) { + iframe-src="{environment:demosBaseUrl}/grid/remote-paging-default-template/" > } @@ -598,7 +598,7 @@ public paginate(page: number) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-remote-paging-default-template/" >
@@ -607,7 +607,7 @@ public paginate(page: number) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/remote-paging-default-template/" >
@@ -774,7 +774,7 @@ After all the changes above, the following result will be achieved. + iframe-src="{environment:demosBaseUrl}/grid/grid-remote-paging-sample/" > } @@ -782,7 +782,7 @@ After all the changes above, the following result will be achieved. + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-remote-paging/" >
@@ -791,7 +791,7 @@ After all the changes above, the following result will be achieved. + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-remote-paging/" >
@@ -805,7 +805,7 @@ In some cases you may want to define your own paging behavior and this is when w + iframe-src="{environment:demosBaseUrl}/grid/grid-custom-remote-paging-sample/" > @@ -908,7 +908,7 @@ As you can see in the **paginate** method, custom pagination logic is performed, + iframe-src="{environment:demosBaseUrl}/grid/remote-paging-batch-editing/" > } diff --git a/en/components/grids_templates/row-actions.md b/en/components/grids_templates/row-actions.md index 83d3df8a83..2bcb9a4746 100644 --- a/en/components/grids_templates/row-actions.md +++ b/en/components/grids_templates/row-actions.md @@ -108,20 +108,20 @@ These components expose templates giving flexibility for customization. For inst @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-action-strip/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-action-strip/" > } diff --git a/en/components/grids_templates/row-adding.md b/en/components/grids_templates/row-adding.md index 6417ad1d46..6007b6343e 100644 --- a/en/components/grids_templates/row-adding.md +++ b/en/components/grids_templates/row-adding.md @@ -32,7 +32,7 @@ The following sample demonstrates how to enable native row adding in the @@igCom + iframe-src="{environment:demosBaseUrl}/grid/grid-add-row/" >
@@ -41,7 +41,7 @@ The following sample demonstrates how to enable native row adding in the @@igCom + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-add-row/" alt="Angular @@igComponent Row Adding Example">
@@ -50,7 +50,7 @@ The following sample demonstrates how to enable native row adding in the @@igCom + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-add-row/" alt="Angular @@igComponent Row Adding Example">
diff --git a/en/components/grids_templates/row-drag.md b/en/components/grids_templates/row-drag.md index 3051d8063d..a2070b07b1 100644 --- a/en/components/grids_templates/row-drag.md +++ b/en/components/grids_templates/row-drag.md @@ -32,7 +32,7 @@ In Ignite UI for Angular @@igComponent, **RowDrag** is initialized on the root ` + iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-base/" alt="Angular @@igComponent Row Drag Example"> } @@ -41,7 +41,7 @@ In Ignite UI for Angular @@igComponent, **RowDrag** is initialized on the root ` + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag-base/" alt="Angular @@igComponent Row Drag Example">
@@ -51,7 +51,7 @@ In Ignite UI for Angular @@igComponent, **RowDrag** is initialized on the root ` + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-row-drag-base/" alt="Angular @@igComponent Row Drag Example">
@@ -240,7 +240,7 @@ The result of the configuration can be seem below in a `@@igSelector` with row d + iframe-src="{environment:demosBaseUrl}/grid/grid-multiple-row-drag/" >
@@ -249,7 +249,7 @@ The result of the configuration can be seem below in a `@@igSelector` with row d + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-row-drag/" >
@@ -279,7 +279,7 @@ The drag ghost can be templated on every grid level, making it possible to have + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-row-drag/" >
@@ -344,7 +344,7 @@ The result of the configuration can be seem below: + iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-to-grid/" > @@ -355,7 +355,7 @@ The result of the configuration can be seem below: + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag/" > @@ -366,7 +366,7 @@ The result of the configuration can be seem below: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-drag/" > @@ -383,7 +383,7 @@ Try to drag moons from the grid and drop them to their corresponding planets. Ro + iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag/" > @@ -592,7 +592,7 @@ Holding onto the drag icon will allow you to move a row anywhere in the grid: + iframe-src="{environment:demosBaseUrl}/grid/grid-row-reorder/" > } @@ -601,7 +601,7 @@ Notice that we also have row selection enabled and we preserve the selection whe + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-reordering/" > } @@ -610,7 +610,7 @@ Notice that we also have row selection enabled and we preserve the selection whe + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-row-reorder/" > } @@ -850,7 +850,7 @@ Following is the example of both scenarios described above - showing a drop indi + iframe-src="{environment:demosBaseUrl}/grid/grid-drop-indicator/" > } diff --git a/en/components/grids_templates/row-editing.md b/en/components/grids_templates/row-editing.md index 25a571bcda..b1dca6541e 100644 --- a/en/components/grids_templates/row-editing.md +++ b/en/components/grids_templates/row-editing.md @@ -26,7 +26,7 @@ The following sample demonstrates how to enable row editing in the @@igComponent + iframe-src="{environment:demosBaseUrl}/grid/grid-row-editing/" alt="Angular @@igComponent Row Editing Example">
@@ -35,7 +35,7 @@ The following sample demonstrates how to enable row editing in the @@igComponent + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-row-edit/" alt="Angular @@igComponent Row Editing Example">
@@ -44,7 +44,7 @@ The following sample demonstrates how to enable row editing in the @@igComponent + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-editing/" alt="Angular @@igComponent Row Editing Example">
@@ -413,7 +413,7 @@ After styling the banner and buttons, we also define a custom style for [the cel + iframe-src="{environment:demosBaseUrl}/grid/grid-row-edit-style/" >
@@ -424,7 +424,7 @@ After styling the banner and buttons, we also define a custom style for [the cel + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-edit-style/" > } @@ -435,7 +435,7 @@ After styling the banner and buttons, we also define a custom style for [the cel + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-row-edit-style/" > } diff --git a/en/components/grids_templates/row-pinning.md b/en/components/grids_templates/row-pinning.md index fdb9b06222..57997fd8b2 100644 --- a/en/components/grids_templates/row-pinning.md +++ b/en/components/grids_templates/row-pinning.md @@ -31,7 +31,7 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning/" alt="Angular @@igComponent Row Pinning Example"> } @@ -39,7 +39,7 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning/" alt="Angular @@igComponent Row Pinning Example"> } @@ -47,7 +47,7 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning/" alt="Angular @@igComponent Row Pinning Example"> } @@ -293,7 +293,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-extra-column/" > } @@ -301,7 +301,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning-extra-column/" > } @@ -309,7 +309,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning-extra-column/" > } @@ -368,7 +368,7 @@ This would allow reordering the rows and moving them between the pinned and unpi + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-drag/" > @@ -435,7 +435,7 @@ The last step is to pass the custom grid theme: + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-styling/" > } @@ -444,7 +444,7 @@ The last step is to pass the custom grid theme: + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning-styling/" > } @@ -453,7 +453,7 @@ The last step is to pass the custom grid theme: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning-styling/" > } diff --git a/en/components/grids_templates/row-selection.md b/en/components/grids_templates/row-selection.md index b89bc00ef2..660cb6b3a0 100644 --- a/en/components/grids_templates/row-selection.md +++ b/en/components/grids_templates/row-selection.md @@ -49,7 +49,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { + iframe-src="{environment:demosBaseUrl}/grid/grid-selection/" alt="Angular Row Selection Example">
@@ -58,7 +58,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-selection/" alt="Angular Row Selection Example">
@@ -67,7 +67,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-selection/" alt="Angular Row Selection Example">
@@ -447,7 +447,7 @@ This demo shows the usage of custom header and row selectors. The latter uses `r + iframe-src="{environment:demosBaseUrl}/grid/grid-selection-template-numbering/" >
@@ -456,7 +456,7 @@ This demo shows the usage of custom header and row selectors. The latter uses `r + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-selection-template-numbers/" >
@@ -465,7 +465,7 @@ This demo shows the usage of custom header and row selectors. The latter uses `r + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-selection-template-numbers/" >
@@ -477,7 +477,7 @@ This demo uses custom templates to resemble Excel-like header and row selectors. + iframe-src="{environment:demosBaseUrl}/grid/grid-selection-template-excel/" >
@@ -489,7 +489,7 @@ This demo prevents some rows from being selected using the `rowSelectionChanging + iframe-src="{environment:demosBaseUrl}/grid/grid-conditional-row-selectors/" >
@@ -498,7 +498,7 @@ This demo prevents some rows from being selected using the `rowSelectionChanging + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-conditional-row-selectors/" >
@@ -507,7 +507,7 @@ This demo prevents some rows from being selected using the `rowSelectionChanging + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-conditional-row-selectors/" >
diff --git a/en/components/grids_templates/search.md b/en/components/grids_templates/search.md index 1de6418e33..9720e854bd 100644 --- a/en/components/grids_templates/search.md +++ b/en/components/grids_templates/search.md @@ -34,7 +34,7 @@ The following example represents @@igComponent with search input box that allows + iframe-src="{environment:demosBaseUrl}/grid/grid-search-sample/" alt="Angular Search Example">
@@ -43,7 +43,7 @@ The following example represents @@igComponent with search input box that allows + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-search/" alt="Angular Search Example">
diff --git a/en/components/grids_templates/selection.md b/en/components/grids_templates/selection.md index 59210224fa..c9c13e593b 100644 --- a/en/components/grids_templates/selection.md +++ b/en/components/grids_templates/selection.md @@ -34,7 +34,7 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-selection/" alt="Angular Grid Selection Example">
@@ -44,7 +44,7 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-selection/" alt="Angular Grid Selection Example">
@@ -53,7 +53,7 @@ The sample below demonstrates the three types of @@igComponent's **cell selectio + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-cell-selection/" alt="Angular Grid Selection Example">
@@ -190,7 +190,7 @@ The template we are going to use to combine the grid with the context menu: + iframe-src="{environment:demosBaseUrl}/grid/grid-contextmenu-sample/" >
diff --git a/en/components/grids_templates/sizing.md b/en/components/grids_templates/sizing.md index 912e652e32..7379476d6e 100644 --- a/en/components/grids_templates/sizing.md +++ b/en/components/grids_templates/sizing.md @@ -266,6 +266,96 @@ The difference is that for the child grid, when `height` is set to percentages, --- } +## Grid Cell Spacing Control + +The [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) automatically adapts its internal spacing based on the [size](display-density.md) setting. You can further customize the padding and margins in grid header and body cells using CSS custom properties for spacing control. + +### Global Grid Spacing + +To reduce or increase spacing across all grid cells in your application: + +```css +/* Reduce all grid spacing by 20% */ +igx-grid { + --ig-spacing: 0.8; +} + +/* Increase spacing for better touch accessibility */ +igx-grid { + --ig-spacing: 1.2; +} +``` + +### Grid-Specific Spacing + +To adjust spacing for a specific grid instance: + +```css +/* Make a particular grid more compact */ +.my-compact-grid { + --ig-spacing: 0.6; +} + +/* Give a specific grid more breathing room */ +.my-spacious-grid { + --ig-spacing: 1.4; +} +``` + +### Directional Spacing Control + +You can control horizontal and vertical spacing independently: + +```css +/* Reduce only horizontal spacing (left/right padding) */ +.my-grid { + --ig-spacing-inline: 0.5; + --ig-spacing-block: 1.0; /* Keep vertical spacing normal */ +} + +/* Adjust vertical spacing for tighter row spacing */ +.my-grid { + --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */ + --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */ +} +``` + +### Size-Specific Spacing + +Different spacing multipliers can be applied based on the grid's display density: + +```css +.my-grid { + /* Compact density gets very tight spacing */ + --ig-spacing-small: 0.5; + + /* Medium density uses normal spacing */ + --ig-spacing-medium: 1.0; + + /* Comfortable density gets extra spacing */ + --ig-spacing-large: 1.3; +} +``` + +### Header vs Body Cell Spacing + +While the spacing properties affect both header and body cells, you can target them specifically if needed: + +```css +/* Reduce padding in header cells specifically */ +.my-grid igx-grid-header { + --ig-spacing: 0.7; +} + +/* Adjust spacing in data cells */ +.my-grid igx-grid-cell { + --ig-spacing: 0.9; +} +``` + +> [!Note] +> 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. + ## API References * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) diff --git a/en/components/grids_templates/sorting.md b/en/components/grids_templates/sorting.md index 24c500f5c1..2a9900b475 100644 --- a/en/components/grids_templates/sorting.md +++ b/en/components/grids_templates/sorting.md @@ -35,7 +35,7 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column + iframe-src="{environment:demosBaseUrl}/grid/grid-sorting-sample/" alt="Angular @@igComponent Sorting Overview Example"> } @@ -45,7 +45,7 @@ Additionally there is a custom context menu added for sorting using **@@igSelect + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-sorting/" alt="Angular @@igComponent Sorting Overview Example"> } @@ -55,7 +55,7 @@ Additionally there is a custom context menu added for sorting using **@@igSelect + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sorting/" alt="Angular @@igComponent Sorting Overview Example"> } @@ -84,7 +84,7 @@ The **@@igxName** provides a solution for this problem by indicating the index o + iframe-src="{environment:demosBaseUrl}/grid/grid-sorting-indicators/" > } @@ -276,7 +276,7 @@ The last step is to **include** the component mixins: + iframe-src="{environment:demosBaseUrl}/grid/grid-sorting-styling/" > } @@ -287,7 +287,7 @@ The last step is to **include** the component mixins: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-sorting-styling/" > } @@ -298,7 +298,7 @@ The last step is to **include** the component mixins: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sorting-styling/" > } diff --git a/en/components/grids_templates/state-persistence.md b/en/components/grids_templates/state-persistence.md index 437d47e57d..1b562911f9 100644 --- a/en/components/grids_templates/state-persistence.md +++ b/en/components/grids_templates/state-persistence.md @@ -333,7 +333,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/grid/grid-state/" > } @@ -343,7 +343,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-state/" > } @@ -353,7 +353,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-state/" > } @@ -362,7 +362,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-state-persistence/" > } @@ -412,7 +412,7 @@ public restoreState() { ``` + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-noop-persistence/" alt="Angular Pivot Noop Grid State Persistence Example"> } @@ -458,7 +458,7 @@ public restoreState() { + iframe-src="{environment:demosBaseUrl}/grid/grid-state-persistence/" alt="Angular Grid State Persistence Example"> } diff --git a/en/components/grids_templates/summaries.md b/en/components/grids_templates/summaries.md index f09b708362..67d9483fcc 100644 --- a/en/components/grids_templates/summaries.md +++ b/en/components/grids_templates/summaries.md @@ -32,7 +32,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu + iframe-src="{environment:demosBaseUrl}/grid/grid-summary/" alt="Angular @@igComponent Summaries Overview Example"> } @@ -40,7 +40,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary/" alt="Angular @@igComponent Summaries Overview Example"> } @@ -48,7 +48,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-summary/" alt="Angular @@igComponent Summaries Overview Example"> } @@ -368,7 +368,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-alldata-summaries/" > } @@ -376,7 +376,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-allData-summary/" > } @@ -384,7 +384,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-allData-summary/" > } @@ -411,7 +411,7 @@ When a default summary is defined, the height of the summary area is calculated + iframe-src="{environment:demosBaseUrl}/grid/grid-summary-template/" > } @@ -419,7 +419,7 @@ When a default summary is defined, the height of the summary area is calculated + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-summary-template/" > } @@ -427,7 +427,7 @@ When a default summary is defined, the height of the summary area is calculated + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hgrid-summary-template/" > } @@ -526,19 +526,19 @@ At runtime, summaries can also be dynamically disabled using the `disabledSummar @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-disable-summaries/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-disable-summaries/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-disable-summaries/" > } @@ -564,19 +564,19 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-summary-formatter/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-summary-formatter/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-summary-formatter/" > } @@ -605,7 +605,7 @@ The [`showSummaryOnCollapse`]({environment:angularApiUrl}/classes/@@igTypeDoc.ht + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-summary/" > } @@ -632,7 +632,7 @@ The [`showSummaryOnCollapse`]({environment:angularApiUrl}/classes/@@igTypeDoc.ht + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary2/" > } @@ -647,14 +647,14 @@ The [`IgxExcelExporterService`]({environment:angularApiUrl}/classes/IgxExcelExpo @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-summary-export/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary-export/" > } @@ -662,7 +662,7 @@ The [`IgxExcelExporterService`]({environment:angularApiUrl}/classes/IgxExcelExpo @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-summary-export/" > } @@ -752,7 +752,7 @@ The last step is to **include** the component custom theme: + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-summary-styling/" > } @@ -763,7 +763,7 @@ The last step is to **include** the component custom theme: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary-styling/" > } @@ -774,7 +774,7 @@ The last step is to **include** the component custom theme: + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-summary-styling/" > } diff --git a/en/components/grids_templates/toolbar.md b/en/components/grids_templates/toolbar.md index eb8e6f3fad..c082820d4d 100644 --- a/en/components/grids_templates/toolbar.md +++ b/en/components/grids_templates/toolbar.md @@ -32,7 +32,7 @@ or just any other custom content. The toolbar and the predefined UI components s + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-1/" alt="Angular Toolbar Grid Example"> } @@ -40,7 +40,7 @@ or just any other custom content. The toolbar and the predefined UI components s + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-4/" alt="Angular Toolbar Grid Example"> } @@ -48,7 +48,7 @@ or just any other custom content. The toolbar and the predefined UI components s + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-title/" alt="Angular Toolbar Grid Example"> } @@ -187,7 +187,7 @@ Listed below are the main features of the toolbar with example code for each of + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-2/" > } @@ -195,7 +195,7 @@ Listed below are the main features of the toolbar with example code for each of + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-1/" > } @@ -203,7 +203,7 @@ Listed below are the main features of the toolbar with example code for each of + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-options/" > } @@ -419,7 +419,7 @@ The following sample demonstrates how to customize the exported files: + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-3/" >
@@ -428,7 +428,7 @@ The following sample demonstrates how to customize the exported files: + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-2/" >
@@ -445,7 +445,7 @@ The sample below has significant amount of data. While the data is being exporte + iframe-src="{environment:demosBaseUrl}/grid/exporting-visualization/" >
@@ -454,7 +454,7 @@ The sample below has significant amount of data. While the data is being exporte + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-exporting-visualization/" >
@@ -504,7 +504,7 @@ The following sample demonstrates how to add an additional button to the toolbar + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-4/" >
@@ -513,7 +513,7 @@ The following sample demonstrates how to add an additional button to the toolbar + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-3/" >
@@ -522,7 +522,7 @@ The following sample demonstrates how to add an additional button to the toolbar + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-custom/" >
@@ -616,7 +616,7 @@ The last step is to **include** the newly created themes. + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-style/" >
@@ -626,7 +626,7 @@ The last step is to **include** the newly created themes. + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-style/" >
@@ -636,7 +636,7 @@ The last step is to **include** the newly created themes. + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-style/" >
diff --git a/en/components/grids_templates/validation.md b/en/components/grids_templates/validation.md index f059f6232e..3527f74451 100644 --- a/en/components/grids_templates/validation.md +++ b/en/components/grids_templates/validation.md @@ -29,7 +29,7 @@ The following sample demonstrates how to use the prebuilt `required`, `email` an @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-validator-service/" alt="Angular @@igComponent Validation Basic Example">
@@ -37,7 +37,7 @@ The following sample demonstrates how to use the prebuilt `required`, `email` an @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-validator-service/" alt="Angular @@igComponent Validation Basic Example">
@@ -45,7 +45,7 @@ The following sample demonstrates how to use the prebuilt `required`, `email` an @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-validator-service/" alt="Angular @@igComponent Validation Basic Example">
@@ -204,7 +204,7 @@ The below example demonstrates the above-mentioned customization options. @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-validator-service-extended/" alt="Angular @@igComponent Custom Validation Example">
@@ -212,7 +212,7 @@ The below example demonstrates the above-mentioned customization options. @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-validator-service-extended/" alt="Angular @@igComponent Custom Validation Example">
@@ -220,7 +220,7 @@ The below example demonstrates the above-mentioned customization options. @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-validator-service-extended/" alt="Angular @@igComponent Custom Validation Example">
@@ -550,7 +550,7 @@ The below sample demonstrates the cross-field validation in action. + iframe-src="{environment:demosBaseUrl}/grid/grid-cross-field-validator-service/" alt="Angular @@igComponent Cross-field Validation Example"> } @@ -560,7 +560,7 @@ The below sample demonstrates cross-field validation in a Hierarchical Grid for + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cross-field-validation/" alt="Angular @@igComponent Cross-field Validation Example"> } @@ -569,7 +569,7 @@ The below sample demonstrates the cross-field validation in action. + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-cross-field-validator-service/" alt="Angular @@igComponent Cross-field Validation Example"> } @@ -688,7 +688,7 @@ public cellStyles = { + iframe-src="{environment:demosBaseUrl}/grid/grid-validation-style/" > } @@ -697,7 +697,7 @@ public cellStyles = { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-validation-style/" > } @@ -708,7 +708,7 @@ public cellStyles = { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-validation-style/" > } diff --git a/en/components/grids_templates/virtualization.md b/en/components/grids_templates/virtualization.md index 6016b97901..253d05b6bd 100644 --- a/en/components/grids_templates/virtualization.md +++ b/en/components/grids_templates/virtualization.md @@ -31,7 +31,7 @@ In Ignite UI for Angular, the [@@igxName]({environment:angularApiUrl}/classes/@@ + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-2/" alt="Angular @@igComponent Virtualization and Performance Example"> } @@ -40,7 +40,7 @@ In Ignite UI for Angular, the [@@igxName]({environment:angularApiUrl}/classes/@@ + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-lod/" alt="Angular @@igComponent Virtualization and Performance Example">
diff --git a/en/components/hierarchicalgrid/hierarchical-grid.md b/en/components/hierarchicalgrid/hierarchical-grid.md index 3db771012b..789701818b 100644 --- a/en/components/hierarchicalgrid/hierarchical-grid.md +++ b/en/components/hierarchicalgrid/hierarchical-grid.md @@ -356,7 +356,7 @@ This way, due to Angular's [`ViewEncapsulation`](https://angular.io/api/core/Com + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-styling/" > >[!NOTE] diff --git a/en/components/hierarchicalgrid/load-on-demand.md b/en/components/hierarchicalgrid/load-on-demand.md index 2abdaa4535..554c677a77 100644 --- a/en/components/hierarchicalgrid/load-on-demand.md +++ b/en/components/hierarchicalgrid/load-on-demand.md @@ -14,7 +14,7 @@ This topic demonstrates how to configure Load on Demand by requesting data from + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-lod/" alt="Angular Hierarchical Grid Load On Demand Example">
diff --git a/en/components/icon-button.md b/en/components/icon-button.md index 36db7681d7..9991b06fa0 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -12,7 +12,7 @@ The Ignite UI for Angular Icon Button directive is intended to turn any icon int + iframe-src="{environment:demosBaseUrl}/data-entries/icon-button-overview/" alt="Angular Icon Button Example">
@@ -140,7 +140,7 @@ Users can choose one of the three predefined `igxIconButton` sizes by using the + iframe-src="{environment:demosBaseUrl}/data-entries/icon-button-size/" alt="Angular Icon Button Size Example">
@@ -185,7 +185,7 @@ This will generate a fully themed `contained icon button`, including appropriate + iframe-src="{environment:demosBaseUrl}/data-entries/icon-button-styling/" >
diff --git a/en/components/icon-service.md b/en/components/icon-service.md index a2125dd15a..f9b1f8ba0a 100644 --- a/en/components/icon-service.md +++ b/en/components/icon-service.md @@ -29,7 +29,7 @@ export class AppComponent implements OnInit { + iframe-src="{environment:demosBaseUrl}/data-display/icon-service/" alt="Icon Service Example"> ### Adding Icon Families diff --git a/en/components/icon.md b/en/components/icon.md index 18ba4e339d..f0e9bd6581 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -12,7 +12,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI + iframe-src="{environment:demosBaseUrl}/data-display/icon-sample-1/" alt="Angular Icon Example">
@@ -144,7 +144,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-display/svg-icon-sample/" > ## Material Symbols @@ -180,7 +180,7 @@ Now, we are ready to add the desired icon into our markup and customize it using + iframe-src="{environment:demosBaseUrl}/data-display/material-symbols/" > To learn more about Material Symbols styles please visit their [`official documentation`](https://fonts.google.com/icons). @@ -242,7 +242,7 @@ The last step is to pass the custom icon theme in our application: + iframe-src="{environment:demosBaseUrl}/data-display/icon-styling/" alt="Angular Icon Example"> ### SVG Limitations diff --git a/en/components/input-group.md b/en/components/input-group.md index 36994d1d8e..ec6b3fed3b 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -11,7 +11,7 @@ The `IgxInputGroupComponent` allows the user to enhance input elements like inpu + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-1/" alt="Angular Input Group Example">
@@ -99,7 +99,7 @@ The `igx-prefix` or `igxPrefix` and `igx-suffix` or `igxSuffix` directives can c + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-3/" alt="Angular Input Group Example">
@@ -122,7 +122,7 @@ The [`igx-hint`]({environment:angularApiUrl}/classes/igxhintdirective.html) dire This is how the phone field with hint looks: + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-4/" alt="Angular Input Group Example">
@@ -155,7 +155,7 @@ Ignite UI for Angular also provides styling for the input of `type="file"` and i + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-5/" > ### Input Group Theme @@ -171,7 +171,7 @@ The Ignite UI for Angular Input Group component can be used inside strictly type + iframe-src="{environment:demosBaseUrl}/data-entries/typed-form/" > ## Validation @@ -246,7 +246,7 @@ The result from the above configurations could be seen in the below sample. Star + iframe-src="{environment:demosBaseUrl}/data-entries/template-driven-form-validation/" > ### Reactive Forms @@ -320,7 +320,7 @@ The result from the above configurations could be seen in the below sample. Simi + iframe-src="{environment:demosBaseUrl}/data-entries/reactive-form-validation/" > ### Custom Validators @@ -433,7 +433,7 @@ The below sample demonstrates how the built-in validators could be used in combi + iframe-src="{environment:demosBaseUrl}/data-entries/reactive-form-custom-validation/" > ## Styling @@ -471,7 +471,7 @@ The last step is to include the newly created theme: + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-style/" > >[!NOTE] diff --git a/en/components/interactivity/right-to-left-support.md b/en/components/interactivity/right-to-left-support.md index 646275f3e2..0ded863e37 100644 --- a/en/components/interactivity/right-to-left-support.md +++ b/en/components/interactivity/right-to-left-support.md @@ -26,7 +26,7 @@ This section shows the accessibility (ARIA) support of the framework as well as + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-rtl-sample/" alt="Angular RTL Support Example"> diff --git a/en/components/label-input.md b/en/components/label-input.md index 4d5c3447f5..d6ab1b255b 100644 --- a/en/components/label-input.md +++ b/en/components/label-input.md @@ -12,7 +12,7 @@ The Ignite UI for Angular Input and Label directives are used to decorate and st + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-1/" alt="Angular Label & Input Example">
@@ -103,7 +103,7 @@ We can validate an `input` using the [`required`]({environment:angularApiUrl}/cl + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-2/" >
@@ -161,7 +161,7 @@ If you want the text in an input element, marked with `igxInput`, to be selected + iframe-src="{environment:demosBaseUrl}/data-entries/input-text-selection/" >
diff --git a/en/components/layout.md b/en/components/layout.md index b8f082f72e..36aa184fc9 100644 --- a/en/components/layout.md +++ b/en/components/layout.md @@ -14,7 +14,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI + iframe-src="{environment:demosBaseUrl}/layouts/layout-sample/" alt="Angular Layout Manager Example"> @@ -32,7 +32,7 @@ Use [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html + iframe-src="{environment:demosBaseUrl}/layouts/layout-direction-row/" > @@ -44,7 +44,7 @@ Use [`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html + iframe-src="{environment:demosBaseUrl}/layouts/layout-direction-column/" > @@ -61,7 +61,7 @@ Customize the order of the element by using `igxFlexOrder`. + iframe-src="{environment:demosBaseUrl}/layouts/layout-custom-order/" > @@ -73,7 +73,7 @@ Use [`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective. + iframe-src="{environment:demosBaseUrl}/layouts/layout-content-space/" > @@ -84,7 +84,7 @@ Use [`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective. + iframe-src="{environment:demosBaseUrl}/layouts/layout-justify-content/" > @@ -95,7 +95,7 @@ Use [`igxLayoutItemAlign`]({environment:angularApiUrl}/classes/igxlayoutdirectiv + iframe-src="{environment:demosBaseUrl}/layouts/layout-align-items/" > @@ -106,7 +106,7 @@ Use [`igxLayoutWrap`]({environment:angularApiUrl}/classes/igxlayoutdirective.htm + iframe-src="{environment:demosBaseUrl}/layouts/layout-wrap/" > >[!NOTE] diff --git a/en/components/linear-progress.md b/en/components/linear-progress.md index 804323a9ee..6640efe4e7 100644 --- a/en/components/linear-progress.md +++ b/en/components/linear-progress.md @@ -12,7 +12,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar/" alt="Angular Linear Progress Example">
@@ -101,7 +101,7 @@ So if we set up everything correctly, you should see the following in your brows + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-sample-1/" >
@@ -177,7 +177,7 @@ Let's take a look at how this turned out: + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-sample-2/" >
@@ -237,7 +237,7 @@ After completing the steps above, our progress bar should look like this: + iframe-src="{environment:demosBaseUrl}/data-display/linear-dynamic-sample/" >
@@ -275,7 +275,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-styling/" > ## API diff --git a/en/components/list.md b/en/components/list.md index 202e50fd45..47a421f384 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -13,7 +13,7 @@ The following example represents a list populated with contacts with a _name_ an + iframe-src="{environment:demosBaseUrl}/lists/list-sample-4/" alt="Angular List Example">
@@ -111,7 +111,7 @@ If all went great, this is how our empty list should look like: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-5/" > @@ -139,7 +139,7 @@ Sometimes there may be a delay in your data loading. In this case you can set th + iframe-src="{environment:demosBaseUrl}/lists/list-sample-6/" > @@ -163,7 +163,7 @@ If all went well, you should see the following in your browser: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-2/" > @@ -217,7 +217,7 @@ After all that our Angular list should now look like that: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-3/" > @@ -364,7 +364,7 @@ And here's the result of all that work: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-4/" >
@@ -477,7 +477,7 @@ Now try panning the list items for yourself: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-7/" >
@@ -555,7 +555,7 @@ Here's an example illustrating how the visual style of the items changes when us + iframe-src="{environment:demosBaseUrl}/lists/list-item-selection/" > By default, the `selected` property is set to `false`. We can toggle its value using an inline expression bound to the `(click)` event on each list item, effectively switching the visual state of the item each time it's clicked. @@ -602,7 +602,7 @@ The following sample demonstrates how to create a simple chat component using ** + iframe-src="{environment:demosBaseUrl}/lists/list-chat-sample/" >
@@ -638,7 +638,7 @@ The result is the following: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-8/" > For full list of parameters that you can change for the list component please refer to: [IgxListComponent Styles]({environment:sassApiUrl}/index.html#function-list-theme) diff --git a/en/components/mask.md b/en/components/mask.md index 28dd315135..ef82029ff5 100644 --- a/en/components/mask.md +++ b/en/components/mask.md @@ -12,7 +12,7 @@ By applying the [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-2/" alt="Angular Mask Example">
@@ -154,7 +154,7 @@ public clear() { + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-3/" > @@ -195,7 +195,7 @@ private notify(snackbar, message, input) { + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-1/" >
@@ -287,7 +287,7 @@ As a result, a '%' sign should be appended to the value on blur (i.e. when the u + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-4/" > @@ -311,7 +311,7 @@ value = null; + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-5/" > diff --git a/en/components/month-picker.md b/en/components/month-picker.md index ae4b3ce801..3bb7ce6e40 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -12,7 +12,7 @@ What you see here is a basic Angular Month Picker example with a the component's + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-sample-1/" alt="Angular Month Picker Example"> ## Getting Started with Ignite UI for Angular Month Picker @@ -147,7 +147,7 @@ Here is an example of localizing and formatting the month picker component: + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-sample-3/" > @@ -206,7 +206,7 @@ After everything's done, your component should look like this: + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-styling/" > diff --git a/en/components/navbar.md b/en/components/navbar.md index ab179554e5..2f786fc644 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -12,7 +12,7 @@ The Ignite UI for Angular [`IgxNavbarComponent`]({environment:angularApiUrl}/cla + iframe-src="{environment:demosBaseUrl}/menus/navbar/" alt="Angular Navbar Example">
@@ -127,7 +127,7 @@ If all went well, you should see the following in your browser: + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-1/" >
@@ -170,7 +170,7 @@ Finally, this is how our navbar should look like with its custom action button i + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-2/" >
@@ -211,7 +211,7 @@ If the sample is configured properly, you should see the following in your brows + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-3/" > > [!NOTE] @@ -264,7 +264,7 @@ If we want to provide a custom content for a navbar's title, we can achieve this + iframe-src="{environment:demosBaseUrl}/menus/navbar-custom-title/" >
@@ -303,7 +303,7 @@ The last step is to pass the newly created theme to the `css-vars` mixin: + iframe-src="{environment:demosBaseUrl}/menus/navbar-style/" >
diff --git a/en/components/navdrawer.md b/en/components/navdrawer.md index 4ce02e5d91..028e4f0b10 100644 --- a/en/components/navdrawer.md +++ b/en/components/navdrawer.md @@ -14,7 +14,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-simple/" alt="Angular Navigation Drawer Example">
@@ -258,7 +258,7 @@ Now the changed example should look like that: + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-pin/" > The drawer applies `flex-basis` on its host element, allowing the rest of the content to take up the remaining width. @@ -307,7 +307,7 @@ The mini variant is commonly used in a persistent setup, so we've set `pin` and + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-mini/" >
@@ -386,7 +386,7 @@ After all the steps above are completed, your app should look like that: + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-routing/" >
@@ -447,7 +447,7 @@ The example below presents the capabilities of a hierarchical structure by using + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-hierarchical/" >
@@ -495,7 +495,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-styling/" >
diff --git a/en/components/overlay-position.md b/en/components/overlay-position.md index 34b913bab8..f3e731c0fa 100644 --- a/en/components/overlay-position.md +++ b/en/components/overlay-position.md @@ -12,7 +12,7 @@ Position strategies determine where the content is displayed in the provided `Ig + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-1/" alt="Angular Positioning Strategies Example">
@@ -103,7 +103,7 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-1/" >
@@ -134,7 +134,7 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-2/" >
@@ -150,7 +150,7 @@ overlay.attach(element, { positionStrategy: myPositionStrategy }); + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-3/" >
diff --git a/en/components/overlay-scroll.md b/en/components/overlay-scroll.md index 54dd730bb4..d532b7de70 100644 --- a/en/components/overlay-scroll.md +++ b/en/components/overlay-scroll.md @@ -66,7 +66,7 @@ The demo below illustrates the difference between the separate [`scrollStrategie + iframe-src="{environment:demosBaseUrl}/interactions/overlay-scroll-sample-2/" >
@@ -79,7 +79,7 @@ The [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.h + iframe-src="{environment:demosBaseUrl}/interactions/overlay-scroll-sample-1/" >
diff --git a/en/components/overlay-styling.md b/en/components/overlay-styling.md index c9f6461674..79fe938e11 100644 --- a/en/components/overlay-styling.md +++ b/en/components/overlay-styling.md @@ -85,7 +85,7 @@ Now, the combo's list of items are properly rendered **inside** of our component + iframe-src="{environment:demosBaseUrl}/interactions/overlay-styling-simple/" > diff --git a/en/components/overlay.md b/en/components/overlay.md index 5eb79e49a9..e363818d53 100644 --- a/en/components/overlay.md +++ b/en/components/overlay.md @@ -16,7 +16,7 @@ The overlay service is fully integrated in the toggle directive. + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-1/" alt="Angular Overlay Example">
@@ -136,7 +136,7 @@ In the below demo, we can pass the [IgxCard](card.md#angular-card-example) compo + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-1/" >
@@ -203,7 +203,7 @@ const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings + iframe-src="{environment:demosBaseUrl}/interactions/overlay-preset-settings-sample/" > @@ -273,7 +273,7 @@ Using the [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysett + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-2/" >
diff --git a/en/components/paginator.md b/en/components/paginator.md index 2708020f82..961f78a972 100644 --- a/en/components/paginator.md +++ b/en/components/paginator.md @@ -17,7 +17,7 @@ The following Angular Pagination example shows a Paginator template demonstratin + iframe-src="{environment:demosBaseUrl}/pagination/main-pagination/" alt="Angular Paginator Example">
diff --git a/en/components/pivotGrid/pivot-grid-custom.md b/en/components/pivotGrid/pivot-grid-custom.md index 7550d12921..46eb02888d 100644 --- a/en/components/pivotGrid/pivot-grid-custom.md +++ b/en/components/pivotGrid/pivot-grid-custom.md @@ -19,7 +19,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { The following example show how to handle scenarios, where the data is already aggregated and how its structure should look like: + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-noop/" alt="Angular Pivot Grid Custom Predefined Aggregations Example"> Users have the ability to achieve certain scenarios by feeding the pivot grid with already aggregated data. diff --git a/en/components/pivotGrid/pivot-grid-features.md b/en/components/pivotGrid/pivot-grid-features.md index b4460525ab..7218a304c2 100644 --- a/en/components/pivotGrid/pivot-grid-features.md +++ b/en/components/pivotGrid/pivot-grid-features.md @@ -20,7 +20,7 @@ The Pivot Grid component has additional features and functionalities related to + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-features/" alt="Angular Pivot Grid with Pivot Selector Example"> ## Dimensions filtering @@ -177,7 +177,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-layout/" alt="Angular Pivot Grid with Horizontal Row Dimensions Layout"> ## Interactions diff --git a/en/components/pivotGrid/pivot-grid.md b/en/components/pivotGrid/pivot-grid.md index 3d38b35310..953e8d4da0 100644 --- a/en/components/pivotGrid/pivot-grid.md +++ b/en/components/pivotGrid/pivot-grid.md @@ -21,7 +21,7 @@ The following is an Angular Pivot Grid example in combination with the Angular P + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-datasource/" alt="Angular Pivot Grid with Pivot Selector Example"> ## Getting started with Ignite UI for Angular Pivot Grid @@ -295,7 +295,7 @@ Resulting in the following view, which groups the Product Categories unique colu + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-basic/" alt="Angular Pivot Grid Basic Example"> And if you want to streamline the entire app development process, you can try out our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) for your next Angular app. diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 68108c0862..f7869421ae 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -20,7 +20,7 @@ We’ve created this Angular Query Builder example to show you the default funct @@ -344,7 +344,7 @@ The last step is to **include** the new component themes using the `css-vars` mi + iframe-src="{environment:demosBaseUrl}/interactions/query-builder-style/" > > [!NOTE] diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 0a54092605..43c11d8098 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -14,7 +14,7 @@ _keywords: Angular Radio Group component, Angular Radio Group control, Ignite UI + iframe-src="{environment:demosBaseUrl}/data-entries/radio-sample-1/" alt="Angular Radio & Radio Group Example">
@@ -141,7 +141,7 @@ The final result would be something like that: + iframe-src="{environment:demosBaseUrl}/data-entries/radio-sample-2/" > ## Styling @@ -172,7 +172,7 @@ The last step is to pass the custom radio theme in our application: + iframe-src="{environment:demosBaseUrl}/data-entries/radio-styling-sample/" >
@@ -185,7 +185,7 @@ The last step is to pass the custom radio theme in our application: + iframe-src="{environment:demosBaseUrl}/data-entries/radio-group-sample/" >
@@ -249,7 +249,7 @@ public alignment = RadioGroupAlignment.vertical; + iframe-src="{environment:demosBaseUrl}/data-entries/radio-group-vertical/" >
diff --git a/en/components/rating.md b/en/components/rating.md index 6186da5570..7da70f0ef2 100644 --- a/en/components/rating.md +++ b/en/components/rating.md @@ -16,7 +16,7 @@ This Angular Star Rating example demonstrates how you can use Ignite UI Angular + iframe-src="{environment:demosBaseUrl}/grid/grid-with-rating/" alt="Angular Rating Example"> @@ -110,7 +110,7 @@ The following application shows one example of how this integration works in a r + iframe-src="{environment:demosBaseUrl}/data-entries/rating-form/" alt="Angular Rating Example"> For further information on the usage of the Rating component, you can check out [this topic]({environment:infragisticsBaseUrl}/products/ignite-ui-web-components/web-components/components/inputs/rating.html). diff --git a/en/components/ripple.md b/en/components/ripple.md index 25189d82f0..64873bf994 100644 --- a/en/components/ripple.md +++ b/en/components/ripple.md @@ -14,7 +14,7 @@ _keywords: Angular Ripple component, Angular Ripple Directive, Angular Ripple co + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-5/" alt="Angular Ripple Example">

Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free.

@@ -95,7 +95,7 @@ You can easily change the default ripple color using the `igxRipple`: + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-6/" alt="Angular Ripple Example"> ### Centered Ripple Effect @@ -110,7 +110,7 @@ By default, the ripple effect starts from the position of the click event. You c + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-3/" alt="Angular Ripple Example"> ### Ripple Duration @@ -125,7 +125,7 @@ We can use the [`igxRippleDuration`]({environment:angularApiUrl}/classes/igxripp + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-4/" alt="Angular Ripple Example"> ### Ripple Target @@ -143,7 +143,7 @@ Notice that no matter whether you click on the parent or the child element, the + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-2/" alt="Angular Ripple Example"> > [!NOTE] @@ -182,7 +182,7 @@ The next step is to pass the custom ripple theme: + iframe-src="{environment:demosBaseUrl}/interactions/ripple-styling/" alt="Angular Ripple Example"> ## API References diff --git a/en/components/select.md b/en/components/select.md index 0febdba362..2dfe76bf76 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -12,7 +12,7 @@ Below is a basic Angular Select example. It has a simple contextual menu that di + iframe-src="{environment:demosBaseUrl}/data-entries/select-sample-1/" alt="Angular Select Example"> ## Getting Started with Ignite UI for Angular Select @@ -137,7 +137,7 @@ The Select component supports the following directives applicable to the [Input ``` + iframe-src="{environment:demosBaseUrl}/data-entries/select-input-directives/" > >[!NOTE] @@ -185,7 +185,7 @@ Then in your template file you can iterate over the objects and access their ite + iframe-src="{environment:demosBaseUrl}/data-entries/select-sample-2/" > ### Header & Footer @@ -243,7 +243,7 @@ In this example, there are both header and footer ng-templates defined. In the h ``` + iframe-src="{environment:demosBaseUrl}/data-entries/select-header-footer/" > @@ -320,7 +320,7 @@ You can see that we create a [*PositionSettings*]({environment:angularApiUrl}/in + iframe-src="{environment:demosBaseUrl}/data-entries/select-sample-4/" > @@ -385,7 +385,7 @@ The last step is to pass the custom radio theme in our application: + iframe-src="{environment:demosBaseUrl}/data-entries/select-styling/" > diff --git a/en/components/simple-combo.md b/en/components/simple-combo.md index 743ef7342d..5ffba79fea 100644 --- a/en/components/simple-combo.md +++ b/en/components/simple-combo.md @@ -16,7 +16,7 @@ In this Angular Simple ComboBox example, you can see how users can select the ch + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-main/" alt="Angular Simple ComboBox Example">
@@ -140,7 +140,7 @@ export class MySimpleComboComponent implements OnInit { + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-usage/" > @@ -238,7 +238,7 @@ The following sample demonstrates a scenario where the [igx-simple-combo]({envir + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-cascading/" alt="Angular Cascading Scenario Example"> @@ -315,7 +315,7 @@ The sample below demonstrates remote binding using the [dataPreLoad]({environmen + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-remote/" alt="Angular Simple Combo Remote Binding Example"> ## Styling @@ -379,7 +379,7 @@ The last step is to include the component's theme. + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-styling/" > diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md index 1fabdcc114..71ce3f38ec 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -11,7 +11,7 @@ _keywords: angular slider, angular slider component, angular range slider compon + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-1/" alt="Angular Slider Example">
@@ -133,7 +133,7 @@ We should now see two-way data binding between our two components. + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-3/" > @@ -170,7 +170,7 @@ If the sample is configured properly, dragging the slider thumb should update th + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-2/" > @@ -226,7 +226,7 @@ export class SampleComponent { + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-4/" > >[!NOTE] @@ -252,7 +252,7 @@ This can be done by setting [`lowerBound`]({environment:angularApiUrl}/classes/i + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-5/" > @@ -290,7 +290,7 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-6/" > @@ -340,7 +340,7 @@ public type = SliderType.RANGE; + iframe-src="{environment:demosBaseUrl}/interactions/discrete-slider-ticks-bottom/" > @@ -375,7 +375,7 @@ We also rotate all viable labels by setting the [`TickLabelsOrientation`]({envir + iframe-src="{environment:demosBaseUrl}/interactions/slider-ticks-bottomtotop-labels/" > @@ -406,7 +406,7 @@ This mirrors the visualization of the **ticks** and displays them above and belo + iframe-src="{environment:demosBaseUrl}/interactions/slider-secondary-ticks-mirror/" > @@ -431,7 +431,7 @@ This example show how the tick labels and the thumb label works together. + iframe-src="{environment:demosBaseUrl}/interactions/slider-timeframe/" > @@ -476,7 +476,7 @@ In the **tickLabel** callback above, we are rounding the **value** of every **pr + iframe-src="{environment:demosBaseUrl}/interactions/slider-tick-labels-template/" > ## Styling @@ -514,7 +514,7 @@ This is the final result from applying our new theme. + iframe-src="{environment:demosBaseUrl}/interactions/slider-styling-sample/" > ## API References diff --git a/en/components/snackbar.md b/en/components/snackbar.md index 4eb43ca0f9..a2e1c02586 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -12,7 +12,7 @@ _keywords: Angular Snackbar component, Angular Snackbar control, Ignite UI for A + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-1/" alt="Angular Snackbar Example"> @@ -120,7 +120,7 @@ If the sample is configured properly, the first snackbar appears when the button + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-2/" > ### Display Time @@ -179,7 +179,7 @@ As a result, a message and three loading dots appear in the snackbar. + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-5/" > @@ -250,7 +250,7 @@ public restore() { + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4/" > ### Positioning @@ -310,7 +310,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-style/" >
diff --git a/en/components/splitter.md b/en/components/splitter.md index 40caa9d71f..8dabae4b06 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -12,7 +12,7 @@ The Ignite UI for Angular Splitter component provides the ability to create layo + iframe-src="{environment:demosBaseUrl}/layouts/splitter-horizontal-sample/" alt="Angular Splitter Example"> @@ -127,7 +127,7 @@ You can make the splitter collapsible or not by showing or hiding the splitter's + iframe-src="{environment:demosBaseUrl}/layouts/splitter-collapsible-sample/" > ### Configuring panes @@ -191,7 +191,7 @@ public typeVertical = SplitterType.Vertical; + iframe-src="{environment:demosBaseUrl}/layouts/splitter-nested-sample/" > @@ -246,7 +246,7 @@ This is the final result from applying your new theme. + iframe-src="{environment:demosBaseUrl}/layouts/splitter-styling-sample/" > ### Custom sizing diff --git a/en/components/stepper.md b/en/components/stepper.md index f6a5d41db4..d8262077d3 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -14,7 +14,7 @@ Note that the fourth step in our Angular stepper demo gets enabled only if the u + iframe-src="{environment:demosBaseUrl}/layouts/stepper-overview-sample/" alt="Angular Stepper Example">
@@ -23,7 +23,7 @@ Here is the a sample demonstrating how to achieve the above functionality using + iframe-src="{environment:demosBaseUrl}/layouts/stepper-sample-reactive-forms/" alt="Angular Stepper Example with Reactive Forms"> ## Getting Started with Ignite UI for Angular Stepper @@ -165,7 +165,7 @@ The sample below demonstrates how stepper [orientation]({environment:angularApiU + iframe-src="{environment:demosBaseUrl}/layouts/stepper-label-position-and-orientation-sample/" alt="Angular Stepper Orientation Example">
@@ -195,7 +195,7 @@ The following example demonstrates how to configure a linear stepper: + iframe-src="{environment:demosBaseUrl}/layouts/stepper-linear-sample/" alt="Angular Linear Stepper Example">
@@ -257,7 +257,7 @@ The sample below demonstrates all exposed step types and how they could be chang + iframe-src="{environment:demosBaseUrl}/layouts/stepper-steptypes-sample/" alt="Angular Step Types Example">
@@ -353,7 +353,7 @@ The sample below demonstrates a simple styling applied through the [Ignite UI fo + iframe-src="{environment:demosBaseUrl}/layouts/stepper-styling-sample/" alt="Angular Stepper Styling Example">
diff --git a/en/components/switch.md b/en/components/switch.md index 63a870109e..3343e19189 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -12,7 +12,7 @@ _keywords: Angular Switch component, Angular Switch control, Ignite UI for Angul + iframe-src="{environment:demosBaseUrl}/data-entries/switch-sample-1/" alt="Angular Switch Example">
@@ -116,7 +116,7 @@ And the final result should be something like that: + iframe-src="{environment:demosBaseUrl}/data-entries/switch-sample-2/" > ### Label Positioning @@ -160,7 +160,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/data-entries/switch-styling/" >
diff --git a/en/components/tabbar.md b/en/components/tabbar.md index a3863b1540..0a294f9df5 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -18,7 +18,7 @@ _keywords: Angular Bottom Nav component, Angular Bottom Navigation control, Igni + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-1/" alt="Angular Bottom Navigation Example"> @@ -234,7 +234,7 @@ After these modifications our Bottom Navigation should look similar to this: + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-2/" > @@ -376,7 +376,7 @@ The approach described above is used by the following sample to demonstrate rout + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-3/" > @@ -420,7 +420,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-style/" >
diff --git a/en/components/tabs.md b/en/components/tabs.md index a0676c50ab..f6dd6c6eae 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -21,7 +21,7 @@ This is a basic example of Angular Nested Tabs where we have one tab within anot + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-3/" alt="Angular Tabs Example">
@@ -147,7 +147,7 @@ If the sample is configured properly, the final result should look like that: + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-1/" alt="Angular Tabs Example"> @@ -165,7 +165,7 @@ Sample below demonstrates how tabs get aligned when switching between `tabAlignm + iframe-src="{environment:demosBaseUrl}/layouts/tabs-alignment/" > @@ -226,7 +226,7 @@ If the sample is configured properly, the tabs should look like the following ex + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-3/" >
@@ -254,7 +254,7 @@ You can also add you own custom tab header's prefix and suffix simply by using ` + iframe-src="{environment:demosBaseUrl}/layouts/tabs-header-prefix-suffix/" >
@@ -374,7 +374,7 @@ The above code creates an `igx-tabs` component with three tab items. Each tab it + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-4/" > > [!NOTE] @@ -422,7 +422,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/layouts/tabs-style/" >
diff --git a/en/components/texthighlight.md b/en/components/texthighlight.md index 2b7c7c6dde..efe5b1c56c 100644 --- a/en/components/texthighlight.md +++ b/en/components/texthighlight.md @@ -12,7 +12,7 @@ The [`IgxTextHighlightDirective`]({environment:angularApiUrl}/classes/igxtexthig + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-1/" alt="Angular TextHighlight Directive Example">
@@ -248,7 +248,7 @@ If the sample is configured properly, the final result should look like that: + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-1/" >
@@ -343,7 +343,7 @@ export class HomeComponent { + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-2/" >
@@ -435,7 +435,7 @@ As mentioned earlier, we can even combine them with a theme: + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-style/" >
diff --git a/en/components/themes/.DS_Store b/en/components/themes/.DS_Store deleted file mode 100644 index ae0c22e0c9..0000000000 Binary files a/en/components/themes/.DS_Store and /dev/null differ diff --git a/en/components/themes/misc/angular-material-theming.md b/en/components/themes/misc/angular-material-theming.md index 58b80d8406..d2ecc93dd1 100644 --- a/en/components/themes/misc/angular-material-theming.md +++ b/en/components/themes/misc/angular-material-theming.md @@ -22,7 +22,7 @@ The following article demonstrates how to use both Ignite UI and Angular Materia + iframe-src="{environment:demosBaseUrl}/theming/angular-sample/" >
diff --git a/en/components/themes/misc/bootstrap-theming.md b/en/components/themes/misc/bootstrap-theming.md index 1301cc5d64..906f9bbe14 100644 --- a/en/components/themes/misc/bootstrap-theming.md +++ b/en/components/themes/misc/bootstrap-theming.md @@ -18,7 +18,7 @@ The Ignite UI for Angular is a complete set of Material-based UI Widgets, Compon + iframe-src="{environment:demosBaseUrl}/theming/bootstrap-sample/" >
diff --git a/en/components/themes/sass/.DS_Store b/en/components/themes/sass/.DS_Store deleted file mode 100644 index 218afe85c5..0000000000 Binary files a/en/components/themes/sass/.DS_Store and /dev/null differ diff --git a/en/components/themes/spacing.md b/en/components/themes/spacing.md new file mode 100644 index 0000000000..d7f0800ca4 --- /dev/null +++ b/en/components/themes/spacing.md @@ -0,0 +1,138 @@ +--- +title: Spacing | Ignite UI for Angular +_description: The Ignite UI for Angular provides a way of adjusting paddings and margins with ease on application or component level. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Components, Native Angular Controls, Native Angular Components Library, spacing, padding, margin +--- + +# Spacing + +Spacing configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options for adjusting paddings and margins. + +Instead of using fixed values, we use CSS custom properties to adjust the spacing on an application or a component level. + +## How Spacing Works + +Ignite UI for Angular provides a sophisticated spacing system that scales dynamically based on component sizes (small, medium, large). The spacing system is built around CSS custom properties that allow you to control spacing at a global or component level without writing custom CSS. + +## The Relationship Between Sizing and Spacing + +The spacing system in Ignite UI is closely tied to component sizing. Components can have three different sizes: +- **Small** - Compact spacing for dense layouts +- **Medium** - Default balanced spacing. +- **Large** - Comfortable spacing for touch-friendly interfaces + +The spacing automatically adapts based on which size is active, ensuring consistent visual hierarchy throughout your application. + +## Core CSS Custom Properties + +The spacing system revolves around several key CSS custom properties: + +### Global Spacing Properties + +- `--ig-spacing` - The base spacing multiplier (default: 1) +- `--ig-spacing-small` - Spacing for small-sized components +- `--ig-spacing-medium` - Spacing for medium-sized components. +- `--ig-spacing-large` - Spacing for large-sized components + +### Directional Spacing Properties + +- `--ig-spacing-inline` - Controls horizontal spacing +- `--ig-spacing-block` - Controls vertical spacing +- `--ig-spacing-inline-small` - Horizontal spacing for small components +- `--ig-spacing-inline-medium` - Horizontal spacing for medium components +- `--ig-spacing-inline-large` - Horizontal spacing for large components +- `--ig-spacing-block-small` - Vertical spacing for small components +- `--ig-spacing-block-medium` - Vertical spacing for medium components +- `--ig-spacing-block-large` - Vertical spacing for large components + +## Size Detection Variables + +Components use CSS custom properties to automatically detect their current size: + +- `--is-small` - Set to 1 when component is small-sized, 0 otherwise. +- `--is-medium` - Set to 1 when component is medium-sized, 0 otherwise +- `--is-large` - Set to 1 when component is large-sized, 0 otherwise. +- `--component-size` - Numeric value indicating current size (1=small, 2=medium, 3=large). + +These variables are automatically managed by the theming system and change based on the component's size setting, controlled by `--ig-size`. + +## Practical Usage Examples + +### Global Spacing Control + +To make all components more compact across your entire application: + +```css +:root { + --ig-spacing: 0.8; /* 20% less spacing */ +} +``` + +To increase spacing for better touch accessibility: + +```css +:root { + --ig-spacing: 1.2; /* 20% more spacing */ +} +``` + +### Component-Specific Spacing + +To adjust spacing for a specific component type: + +```css +.my-grid { + --ig-spacing: 0.5; /* More compact grid, 50% of the original spacing in all sizes */ +} +``` + +### Directional Spacing Control + +To reduce only horizontal spacing while keeping vertical spacing normal: + +```css +:root { + --ig-spacing-inline: 0.7; + --ig-spacing-block: 1.0; +} +``` + +### Size-Specific Spacing + +To customize spacing for specific component sizes: + +```css +:root { + --ig-spacing-small: 0.5; /* Very tight for small components */ + --ig-spacing-medium: 1.0; /* Normal for medium components */ + --ig-spacing-large: 1.5; /* Extra spacious for large components */ +} +``` + +## How Spacing Multipliers Work + +The spacing system uses multipliers to scale base values: + +- Spacing values in components are multiplied by the active spacing variables +- For example, if a component has `8px` base padding and you set `--ig-spacing: 1.5`, the actual padding becomes `12px` +- Size-specific multipliers like `--ig-spacing-large` override the global `--ig-spacing` for large-sized components +- Directional multipliers like `--ig-spacing-inline` allow you to scale horizontal and vertical spacing independently + +This cascading approach ensures consistent spacing relationships while giving you fine-grained control through CSS custom properties alone. + +## API References +* [Utilities - Pad]({environment:sassApiUrl}/utilities#function-pad) +* [Utilities - Pad Inline]({environment:sassApiUrl}/utilities#function-pad-inline) +* [Utilities - Pad Block]({environment:sassApiUrl}/utilities#function-pad-block) + +### Sizing Functions and Mixins +* [Themes - Sizable Mixin]({environment:sassApiUrl}/themes#mixin-sizable) +* [Themes - Sizable Function]({environment:sassApiUrl}/themes#function-sizable) + +## Additional Resources +
+ +Our community is active and always welcoming to new ideas. + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/time-picker.md b/en/components/time-picker.md index c27decd5a9..a4ff554b4e 100644 --- a/en/components/time-picker.md +++ b/en/components/time-picker.md @@ -16,7 +16,7 @@ In general, users can enter a preferred time either through text input or by cho + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-dropdown/" >
@@ -156,7 +156,7 @@ And here's our templated Ignite UI for Angular Time Picker: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-5/" > ## Custom action buttons @@ -192,7 +192,7 @@ And there we have it, a re-templated time picker with dropdown, custom actions a + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-6/" >
@@ -248,7 +248,7 @@ In dialog mode, the dialog header displays the currently selected time in the pi + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-1/" alt="Angular Time Picker Example">
@@ -343,7 +343,7 @@ And there we have it: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-4/" >
@@ -355,7 +355,7 @@ To achieve that in template driven forms, use the `ngModel` to bind both compone + iframe-src="{environment:demosBaseUrl}/scheduling/template-driven-form/" >
@@ -364,7 +364,7 @@ In reactive forms, we can handle the [`valueChange`]({environment:angularApiUrl} + iframe-src="{environment:demosBaseUrl}/scheduling/reactive-form/" >
@@ -437,7 +437,7 @@ Now, the time picker's items are properly rendered **inside** of our component's + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-styling/" >
diff --git a/en/components/toast.md b/en/components/toast.md index 1b6259a070..4d482d5c18 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -12,7 +12,7 @@ _keywords: Angular Toast component, Angular Toast control, Ignite UI for Angular + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-2/" alt="Angular Toast Example">
@@ -127,7 +127,7 @@ In the other two components you can see in action how to pass different messages + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-3/" > ### Display Time @@ -171,7 +171,7 @@ public open(toast) { + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5/" >
@@ -211,7 +211,7 @@ The last step is to pass the custom toast theme: + iframe-src="{environment:demosBaseUrl}/notifications/toast-style/" >
diff --git a/en/components/toc.yml b/en/components/toc.yml index 993db402a6..3f895401ee 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -265,6 +265,9 @@ - name: State Persistence href: grid/state-persistence.md updated: false + - name: Cell Merging + href: grid/cell-merging.md + new: true - name: Tree Grid href: treegrid/tree-grid.md new: false @@ -406,6 +409,9 @@ - name: State Persistence href: treegrid/state-persistence.md new: false + - name: Cell Merging + href: treegrid/cell-merging.md + new: true - name: Hierarchical Grid href: hierarchicalgrid/hierarchical-grid.md new: false @@ -542,6 +548,9 @@ - name: State Persistence href: hierarchicalgrid/state-persistence.md new: false + - name: Cell Merging + href: hierarchicalgrid/cell-merging.md + new: true - name: Pivot Grid href: pivotGrid/pivot-grid.md new: false @@ -900,6 +909,9 @@ new: false - name: Size href: display-density.md +- name: Spacing + href: themes/spacing.md + new: true - name: Sass new: false items: @@ -1163,7 +1175,7 @@ - name: Date Range Picker href: date-range-picker.md new: false - updated: false + updated: true - name: Month Picker href: month-picker.md new: false diff --git a/en/components/toggle.md b/en/components/toggle.md index 898fc3bc36..5e9d75a2a0 100644 --- a/en/components/toggle.md +++ b/en/components/toggle.md @@ -13,7 +13,7 @@ _keywords: Angular Toggle directive, Angular Toggle control, Angular Toggle Comp + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-1/" alt="Angular Toggle Example"> @@ -147,7 +147,7 @@ This is how our toggle should look like now: + iframe-src="{environment:demosBaseUrl}/interactions/toggle/" > @@ -175,7 +175,7 @@ After these changes the toggle should work exactly in the same way. + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-2/" > @@ -201,7 +201,7 @@ If all went well, it will look like this: + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-3/" > @@ -231,7 +231,7 @@ public offsetToggleSet() { + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-4/" > diff --git a/en/components/tooltip.md b/en/components/tooltip.md index 9796e20867..a08f8681eb 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -13,7 +13,7 @@ While most tooltips have a limited number of available positions, with the [`igx + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-simple/" alt="Angular Tooltip Example">
@@ -153,7 +153,142 @@ If everything went well, you should see the sample shown in the [Tooltip Demo](# 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 [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) and the [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) properties of the [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) directive. Both properties are of type **number** and take time in milliseconds. > [!NOTE] -> The built-in UI interaction behavior of the [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) and its respective API methods work by taking [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) and [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) property values into account. Showing and hiding the tooltip through the API of the [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) does not take the [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) and [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) property values into account. If necessary, such logic would have to be implemented manually according to the application's specifics. +> The built-in UI interaction behavior of the [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) works by taking [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) and [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) property values into account. Showing and hiding the tooltip through the API or the API of the [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) does NOT take the [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) and [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) property values into account. If necessary, such logic would have to be implemented manually according to the application's specifics. + +### Overlay configuration + +Both the [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) and [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) directives use the [`IgxOverlayService`](overlay.md) to open and close the respective tooltip element. + +The [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) directive exposes a [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionSettings) property, which can be used to customize the animations of our tooltip, its position in the UI and a lot more! If this property is not set, then default position settings will be used. + +To further customize the tooltip, use the [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) property (inherited from the [`igxToggleAction`]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html)). + +```html + + info + + +
Her name is Madelyn James
+``` +```ts +public positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Top, + verticalStartPoint: VerticalAlignment.Bottom, + openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }), + closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }), + offset: 10 +} + +public overlaySettings: OverlaySettings = { + closeOnEscape: false, +}; +``` + +> [!NOTE] +> Any property that is set through the [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionsettings) or [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) will override the same property from the default settings and will have a direct impact on the tooltip. + +### Additional Properties + +Apart from the properties we've already covered, the [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) offers a variety of additional properties that allow you to further configure the tooltip's behavior and appearance. + +You can make the tooltip "sticky" using the [`sticky`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#sticky) property, which adds a close button and keeps the tooltip visible until the user closes it manually - either by clicking the close button or pressing the `Esc` key. This behavior overrides the default hover behavior, preventing the tooltip from disappearing when the user stops hovering over the target element. + +```html + + info + + +
Her name is Madelyn James
+``` + +To customize the default close button, use the [`closeButtonTemplate`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#closebuttontemplate) property. + +```html + + + info + + + + cancel + + +
Her name is Madelyn James
+``` + +> [!NOTE] +> Any custom content added via the `closeButtonTemplate` is rendered only when the tooltip is in sticky mode. + +Additionally, you can add an arrow indicator to the tooltip by using the [`hasArrow`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hasarrow) property. + +```html + + info + + +
Her name is Madelyn James
+``` + +The arrow element is positioned based on the provided position settings. If the directions and starting points do not correspond to any of the [predefined position values](#predefined-position-values), the arrow is positioned in the top middle side of the tooltip (default tooltip position `bottom`). + +#### Predefined position values + +| Position     | Horizontal Direction          | Horizontal Start Point         | Vertical Direction            | Vertical Start Point           | +|--------------|-------------------------------|--------------------------------|-------------------------------|--------------------------------| +| top          | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Top         | VerticalAlignment.Top          | +| top-start    | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Top          | +| top-end      | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Top          | +| bottom       | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       | +| bottom-start | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       | +| bottom-end   | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       | +| right        | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Middle      | VerticalAlignment.Middle       | +| right-start  | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Top          | +| right-end    | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Bottom       | +| left         | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Middle      | VerticalAlignment.Middle       | +| left-start   | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Top          | +| left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       | + + +#### Customizing the arrow's position + +To customize the arrow's position, you can override the `positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` method. + +For example: + +```ts +export class CustomStrategy extends TooltipPositioningStrategy { + constructor(settings?: PositionSettings) { + super(settings); + } + + public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void { + Object.assign(arrow.style, { + left: '-0.25rem', + transform: 'rotate(-45deg)', + [arrowFit.direction]: '-0.25rem', + }); + } +} + +public overlaySettings: OverlaySettings = { + positionStrategy: new CustomStrategy({ + horizontalDirection: HorizontalAlignment.Right, + horizontalStartPoint: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Bottom, + verticalStartPoint: VerticalAlignment.Bottom, + }) +}; +``` + +```html + + info + + +
Her name is Madelyn James
+``` ## Rich tooltip @@ -267,20 +402,11 @@ If all went well, this is how our location and tooltip should look like: + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-rich/" >
-## Overlay configuration - -Both the [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) and [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) directives use the [`IgxOverlayService`](overlay.md) to open and close the respective tooltip element. - -The [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) directive exposes an [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) property (inherited from the [`igxToggleAction`]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html)), which can be used to customize the animations of our tooltip, its position in the UI and a lot more! If this property is not set, then default overlay settings will be used. - -> [!NOTE] -> Any property that is set through the [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) will override the same property from the default overlay settings and will have a direct impact on the tooltip. - ## Styling To get started with styling the tooltip, we need to import the `index` file, where all the theme functions and component mixins live: @@ -333,14 +459,20 @@ So now our styled tooltip should look like this: + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-style/" >
## Accessibility -Elements with the [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) directive have an autogenerated [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id) property (if not set by the developer), a tooltip [`role`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#role) and the **aria-hidden** attribute that is automatically updated depending on whether the tooltip is visible or not. By setting the **aria-describedby** attribute of the target to its respective tooltip's [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id), a reference will be provided to the tooltip element. This provides screen readers the information needed to read out the tooltip's contents when the end-user triggers the tooltip. +The [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) is built with accessibility in mind and includes the following properties and ARIA attributes: + +- [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id) property - autogenerated if not set by the developer. +- [`role`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#role) - When the tooltip is in its default behavior, `role="tooltip"` is applied. If the [`sticky`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#sticky) property is enabled, the role changes to `status`. +- `aria-hidden` - automatically updated depending on whether the tooltip is visible or not. + +By setting the **aria-describedby** attribute of the target to its respective tooltip's [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id), a reference will be provided to the tooltip element. This provides screen readers the information needed to read out the tooltip's contents when the end-user triggers the tooltip. Extra care should be taken in the following scenarios: @@ -348,6 +480,13 @@ Extra care should be taken in the following scenarios: - The tooltip is used with a manually implemented behavior (e.g. manually show/hide) instead of the built-in one. - The target element is unfocusable. +## Notes and Limitations + +| Limitation | Description| +| ----------------------------------- | ---------- | +| Custom position strategy with arrow | The [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) directive uses the `TooltipPositionStrategy` to position the tooltip and arrow element. If a custom [`positionStrategy`]({environment:angularApiUrl}/interfaces/overlaysettings.html#positioningStrategy) is used and [`hasArrow`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hasarrow) is set to `true`, the custom strategy should extend the `TooltipPositionStrategy`. Otherwise, the arrow will not be displayed.| + + ## API References In this article we learned how to create, configure and style awesome tooltips for the elements on our page! We also used some additional Ignite UI for Angular components like icons and avatars to improve on the design of our application! The respective APIs are listed below: diff --git a/en/components/transaction-how-to-use.md b/en/components/transaction-how-to-use.md index 52813c15cb..d36b16dc16 100644 --- a/en/components/transaction-how-to-use.md +++ b/en/components/transaction-how-to-use.md @@ -17,7 +17,7 @@ In this topic we will use [`igxList`]({environment:angularApiUrl}/classes/igxlis + iframe-src="{environment:demosBaseUrl}/services/transaction-base/" alt="Angular How to use the Transaction service Example">
diff --git a/en/components/tree.md b/en/components/tree.md index e33ce9888b..0872e39f5c 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -18,7 +18,7 @@ In this basic Angular Tree example, you can see how to define an `igx-tree` and + iframe-src="{environment:demosBaseUrl}/lists/tree-basic-sample/" alt="Angular Tree Example">
@@ -324,7 +324,7 @@ The Ignite UI for Angular IgxTree can be rendered in such way that it requires t ### Demo + iframe-src="{environment:demosBaseUrl}/lists/tree-advanced-sample/" alt="Tree Load On Demand Example"> After the user clicks the expand icon, it is replaced by a loading indicator. When the [loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) property resolves to `false`, the loading indicator disappears and the children are loaded. @@ -356,7 +356,7 @@ The last step is to include the component's theme. + iframe-src="{environment:demosBaseUrl}/lists/tree-styling/" alt="Tree Styling"> ## Known Issues and Limitations diff --git a/en/components/treegrid/groupby.md b/en/components/treegrid/groupby.md index 6d7a960278..7beed66db7 100644 --- a/en/components/treegrid/groupby.md +++ b/en/components/treegrid/groupby.md @@ -101,7 +101,7 @@ public sorting = IgxGroupedTreeGridSorting.instance(); + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-group-by-load-on-demand/" alt="Angular Tree Grid Group By Load On Demand Example">
diff --git a/en/components/treegrid/load-on-demand.md b/en/components/treegrid/load-on-demand.md index b5ad5f5456..5e8b6d29d1 100644 --- a/en/components/treegrid/load-on-demand.md +++ b/en/components/treegrid/load-on-demand.md @@ -13,7 +13,7 @@ The Ignite UI for Angular [`IgxTreeGrid`]({environment:angularApiUrl}/classes/ig + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-load-on-demand/" alt="Angular Tree Grid Load On Demand Example">
diff --git a/en/components/treegrid/tree-grid.md b/en/components/treegrid/tree-grid.md index 713d50029e..3e3eaee232 100644 --- a/en/components/treegrid/tree-grid.md +++ b/en/components/treegrid/tree-grid.md @@ -327,7 +327,7 @@ The last step is to **include** the component theme in our application. + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-style/" alt="Angular tree grid styling demo"> >[!NOTE] diff --git a/en/images/general/AzureMapsImagery.png b/en/images/general/AzureMapsImagery.png new file mode 100644 index 0000000000..2c64f08178 Binary files /dev/null and b/en/images/general/AzureMapsImagery.png differ diff --git a/en/images/general/BingMapsImagery.png b/en/images/general/BingMapsImagery.png new file mode 100644 index 0000000000..717832e5dc Binary files /dev/null and b/en/images/general/BingMapsImagery.png differ diff --git a/en/images/general/BingMapsImagery2.png b/en/images/general/BingMapsImagery2.png new file mode 100644 index 0000000000..85fe3036f8 Binary files /dev/null and b/en/images/general/BingMapsImagery2.png differ diff --git a/en/images/general/igniteui-project.png b/en/images/general/igniteui-project.png index 4a26da130f..9b57caff8f 100644 Binary files a/en/images/general/igniteui-project.png and b/en/images/general/igniteui-project.png differ diff --git a/jp/components/accordion.md b/jp/components/accordion.md index e36beb8bd1..e9d3008622 100644 --- a/jp/components/accordion.md +++ b/jp/components/accordion.md @@ -20,7 +20,7 @@ Angular Accordion は、単一のコンテナーに表示されるクリック + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1/" alt="Angular Accordion の例">
@@ -204,7 +204,7 @@ Angular [Accordion コンポーネント]({environment:angularApiUrl}/classes/ig + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-3/" alt="Angular Accoridon の例">
@@ -240,7 +240,7 @@ Angular [Accordion コンポーネント]({environment:angularApiUrl}/classes/ig + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2/" alt="Angular Accordion の例">
@@ -295,7 +295,7 @@ $custom-panel-theme: expansion-panel-theme( + iframe-src="{environment:demosBaseUrl}/layouts/accordion-style/" alt="Angular Accordion スタイルの例"> ## API リファレンス diff --git a/jp/components/action-strip.md b/jp/components/action-strip.md index c50ffe9bfa..f151b7b5bc 100644 --- a/jp/components/action-strip.md +++ b/jp/components/action-strip.md @@ -15,7 +15,7 @@ Ignite UI for Angular Action Strip コンポーネントは、ホバーなどの + iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph/" alt="Angular Action Strip の例">
@@ -115,7 +115,7 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ + iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph-menu/" > ### アクション ストリップの再利用 @@ -154,7 +154,7 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ + iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip/" > > [!NOTE] @@ -190,7 +190,7 @@ $custom-strip: action-strip-theme( + iframe-src="{environment:demosBaseUrl}/menus/action-strip-styling/" > ## API と スタイル リファレンス diff --git a/jp/components/angular-reactive-form-validation.md b/jp/components/angular-reactive-form-validation.md index 06e5f3c734..029120e6bb 100644 --- a/jp/components/angular-reactive-form-validation.md +++ b/jp/components/angular-reactive-form-validation.md @@ -114,7 +114,7 @@ Angular リアクティブ フォーム検証の例では、必要なフィー diff --git a/jp/components/autocomplete.md b/jp/components/autocomplete.md index d2693b1f57..28f993f268 100644 --- a/jp/components/autocomplete.md +++ b/jp/components/autocomplete.md @@ -19,7 +19,7 @@ Angular Autocomplete は、入力中に候補のリストから項目を簡単 + iframe-src="{environment:demosBaseUrl}/data-entries/autocomplete/" alt="Angular Autocomplete の例">
@@ -217,7 +217,7 @@ export class AutocompleteComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/movie/" > diff --git a/jp/components/avatar.md b/jp/components/avatar.md index 255cd54655..afb2b04fc7 100644 --- a/jp/components/avatar.md +++ b/jp/components/avatar.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/avatar-sample-3/" alt="Angular Avatar の例">
@@ -184,7 +184,7 @@ $custom-avatar-theme: avatar-theme( + iframe-src="{environment:demosBaseUrl}/layouts/avatar-styling/" > ### カスタム サイズ変更 diff --git a/jp/components/badge.md b/jp/components/badge.md index e457e95fac..d44b7d78d9 100644 --- a/jp/components/badge.md +++ b/jp/components/badge.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-2/" alt="Angular Badge の例">
@@ -155,7 +155,7 @@ export class BadgeIconComponent implements OnInit { + iframe-src="{environment:demosBaseUrl}/data-display/badge-icon/" > ### リストのバッジ @@ -285,7 +285,7 @@ class Member { + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-3/" > ## スタイル設定 @@ -319,7 +319,7 @@ $custom-badge-theme: badge-theme( + iframe-src="{environment:demosBaseUrl}/data-display/badge-styling-sample/" > diff --git a/jp/components/banner.md b/jp/components/banner.md index 984b02a84c..538695c0d7 100644 --- a/jp/components/banner.md +++ b/jp/components/banner.md @@ -11,7 +11,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-1/" alt="Angular Banner の例">
@@ -151,7 +151,7 @@ Banner コンポーネントを表示するには、ボタン クリックで [` + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-2/" > @@ -186,7 +186,7 @@ export class MyBannerComponent { + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-3/" > @@ -251,7 +251,7 @@ export class MyBannerComponent { + iframe-src="{environment:demosBaseUrl}/notifications/banner-advanced-sample/" > @@ -286,7 +286,7 @@ $custom-banner-theme: banner-theme( + iframe-src="{environment:demosBaseUrl}/notifications/banner-styling/" > diff --git a/jp/components/button-group.md b/jp/components/button-group.md index 22eea39eed..6287d62aa7 100644 --- a/jp/components/button-group.md +++ b/jp/components/button-group.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-1/" alt="Angular Button Group の例">
@@ -134,7 +134,7 @@ public alignment = ButtonGroupAlignment.vertical; + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-2/" >
@@ -151,7 +151,7 @@ public alignment = ButtonGroupAlignment.vertical; + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-4/" > ### サイズ @@ -172,7 +172,7 @@ igx-buttongroup { + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-5/" > ### カスタム トグル ボタン @@ -244,7 +244,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-3/" > ## スタイル設定 @@ -280,7 +280,7 @@ $custom-button-group: button-group-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-style/" > ## API リファレンス diff --git a/jp/components/button.md b/jp/components/button.md index 69f52ebfe2..e741298135 100644 --- a/jp/components/button.md +++ b/jp/components/button.md @@ -19,7 +19,7 @@ Ignite UI for Angular Button ディレクティブを任意の button、span、d + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-sample-1/" alt="Angular Button の例">
@@ -243,7 +243,7 @@ protected get sizeStyle() { + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-display-density/" alt="Angular Button の例">
@@ -324,7 +324,7 @@ $custom-contained-theme: contained-button-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-style/" > ### カスタム サイズ変更 diff --git a/jp/components/calendar.md b/jp/components/calendar.md index 9a57bae50f..74e68d8295 100644 --- a/jp/components/calendar.md +++ b/jp/components/calendar.md @@ -22,7 +22,7 @@ Ignite UI for Angular Calendar パッケージを使用して、次の Angular C + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-5/" alt="Angular Calendar の例"> @@ -109,7 +109,7 @@ Ignite UI for Angular Calendar モジュールまたはディレクティブを + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-1/" > @@ -126,7 +126,7 @@ Ignite UI for Angular Calendar モジュールまたはディレクティブを + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-8/" > @@ -176,7 +176,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-2/" > @@ -207,7 +207,7 @@ export class CalendarSample6Component { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-6/" > @@ -258,7 +258,7 @@ export class CalendarSample7Component { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-7/" > @@ -276,7 +276,7 @@ export class CalendarSample7Component { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-1/" > @@ -319,7 +319,7 @@ public activeViewChanged(event: CalendarView) { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-3/" > @@ -331,7 +331,7 @@ public activeViewChanged(event: CalendarView) { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-days-view/" > @@ -340,7 +340,7 @@ public activeViewChanged(event: CalendarView) { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-months-view/" > @@ -349,7 +349,7 @@ public activeViewChanged(event: CalendarView) { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-years-view/" > @@ -408,7 +408,7 @@ Tab キーを使用してページを移動する場合、*igxCalendarComponent* + iframe-src="{environment:demosBaseUrl}/scheduling/multiview-calendar/" > ## カレンダーの方向 @@ -452,7 +452,7 @@ export class CalendarSample9Component { + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-9/" alt="Angular Calendar の方向の例"> ## スタイル設定 @@ -484,7 +484,7 @@ $custom-calendar-theme: calendar-theme( + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-styling-sample/" > diff --git a/jp/components/card.md b/jp/components/card.md index ba5a1e7403..02c2ec1766 100644 --- a/jp/components/card.md +++ b/jp/components/card.md @@ -17,7 +17,7 @@ Angular Card は、タイトル テキスト、説明、画像スタイル、CTA + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-0/" alt="Angular Card の例">
@@ -256,7 +256,7 @@ Angular Card に表示する画像や動画は、`igx-card-media` タグで囲 + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-2/" > @@ -295,7 +295,7 @@ Angular Card に表示する画像や動画は、`igx-card-media` タグで囲 + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-3/" > @@ -361,7 +361,7 @@ $colorful-card: card-theme( + iframe-src="{environment:demosBaseUrl}/layouts/card-styling-sample/" > diff --git a/jp/components/carousel.md b/jp/components/carousel.md index fcba0908f4..4df35e54b0 100644 --- a/jp/components/carousel.md +++ b/jp/components/carousel.md @@ -17,7 +17,7 @@ Angular Carousel コンポーネントを使用すると、アニメーション + iframe-src="{environment:demosBaseUrl}/layouts/carousel/" alt="Angular Carousel の例">
@@ -245,7 +245,7 @@ Angular カスタム カルーセル インジケーターを追加するには + iframe-src="{environment:demosBaseUrl}/layouts/carousel-with-components-sample/" > @@ -274,7 +274,7 @@ Angular カスタム カルーセル インジケーターを追加するには + iframe-src="{environment:demosBaseUrl}/layouts/carousel-animations-sample/" > @@ -374,7 +374,7 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ + iframe-src="{environment:demosBaseUrl}/layouts/carousel-no-navigation-sample/" > diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md index 6ee8608cd5..8750827edc 100644 --- a/jp/components/checkbox.md +++ b/jp/components/checkbox.md @@ -15,7 +15,7 @@ Ignite UI for Angular Checkbox コンポーネントは、特定の条件のバ + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-sample-1/" alt="Angular Checkbox の例">
@@ -125,7 +125,7 @@ igx-checkbox { + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-sample-2/" > ### ラベル配置 @@ -221,7 +221,7 @@ public toggleAll() { + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-sample-3/" > @@ -259,7 +259,7 @@ $custom-checkbox-theme: checkbox-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-styling/" > diff --git a/jp/components/chip.md b/jp/components/chip.md index 0e46ae6979..8c5c5fb1a1 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-display/chip-simple/" alt="Angular Chip の例">
@@ -192,7 +192,7 @@ public chipRemoved(event: IBaseChipEventArgs) { + iframe-src="{environment:demosBaseUrl}/data-display/chip-simple/" > ### Chip テンプレート @@ -320,7 +320,7 @@ public chipRemoved(event: IBaseChipEventArgs) { + iframe-src="{environment:demosBaseUrl}/data-display/chip-simple/" > ## Chip Area @@ -477,7 +477,7 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { + iframe-src="{environment:demosBaseUrl}/data-display/chip-area-sample/" > ## スタイル設定 @@ -513,7 +513,7 @@ $custom-theme: chip-theme( + iframe-src="{environment:demosBaseUrl}/data-display/chip-styling/" > ### カスタム サイズ変更 diff --git a/jp/components/circular-progress.md b/jp/components/circular-progress.md index 7b34a0acd7..b93428ae6d 100644 --- a/jp/components/circular-progress.md +++ b/jp/components/circular-progress.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-display/circular-progressbar/" alt="Angular Circular Progress の例">
@@ -103,7 +103,7 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ + iframe-src="{environment:demosBaseUrl}/data-display/circular-indeterminate-progressbar/" >
@@ -223,7 +223,7 @@ $custom-theme: progress-circular-theme( + iframe-src="{environment:demosBaseUrl}/data-display/circular-dynamic-sample/" >
@@ -261,7 +261,7 @@ $custom-theme: progress-circular-theme( + iframe-src="{environment:demosBaseUrl}/data-display/circular-styling-sample/" > ## API diff --git a/jp/components/combo-features.md b/jp/components/combo-features.md index 96ec87e6c4..81937f91f6 100644 --- a/jp/components/combo-features.md +++ b/jp/components/combo-features.md @@ -16,7 +16,7 @@ Ignite UI for Angular ComboBox コントロールは、データと値のバイ + iframe-src="{environment:demosBaseUrl}/lists/combo-features/" alt="Angular コンボボックス機能の例">
@@ -47,7 +47,7 @@ export class AppModule {}
@@ -56,8 +56,8 @@ export class AppModule {} Allow Custom Values Enable Grouping Disable Combo - Enable Filtering - Show Case-sensitive Icon + Disable Filtering + Show Case-sensitive Icon
``` @@ -67,7 +67,7 @@ export class AppModule {} ```typescript @ViewChild('combo', { read: IgxComboComponent }) public combo: IgxComboComponent; - public filterable = true; + public disableFiltering = false; public showSearchCaseIcon = true; public customValues = true; public disabled = false; @@ -130,7 +130,7 @@ export class CustomOverlayCombo { + iframe-src="{environment:demosBaseUrl}/lists/combo-overlay/" > @@ -140,12 +140,12 @@ export class CustomOverlayCombo { > コンボボックス コンポーネントは、デフォルトの配置ストラテジとして [AutoPositionStrategy]({environment:angularApiUrl}/classes/autopositionstrategy.html) を使用します。 ### フィルタリング -コンボボックスのフィルタリングがデフォルトで有効になります。無効にするには、[filterable]({environment:angularApiUrl}/classes/igxcombocomponent.html#filterable) プロパティを false に設定します。 +コンボボックスのフィルタリングがデフォルトで有効になります。無効にするには、[disableFiltering]({environment:angularApiUrl}/classes/igxcombocomponent.html#disableFiltering) プロパティを true に設定します。 フィルタリング オプションは、検索の大文字と小文字の区別を有効にすることでさらに拡張できます。大文字と小文字を区別するアイコンを検索入力に表示するには、[showSearchCaseIcon]({environment:angularApiUrl}/classes/IgxComboComponent.html#showSearchCaseIcon) プロパティを true に設定します。 ```html - + ```
diff --git a/jp/components/combo-remote.md b/jp/components/combo-remote.md index c7f2585dbf..f2e2c58802 100644 --- a/jp/components/combo-remote.md +++ b/jp/components/combo-remote.md @@ -16,7 +16,7 @@ Ignite UI for Angular ComboBox コンポーネントは、コンボボックス + iframe-src="{environment:demosBaseUrl}/lists/combo-remote/" alt="Angular コンボボックス リモート バインディングの例"> @@ -80,7 +80,7 @@ export class RemoteService { (closing)="onClosing()" (opened)="onOpened()" (closed)="onClosed()" - [filterable]="true"> + [disableFiltering]="false"> ``` diff --git a/jp/components/combo-templates.md b/jp/components/combo-templates.md index e394799f49..ad6b5cdf91 100644 --- a/jp/components/combo-templates.md +++ b/jp/components/combo-templates.md @@ -15,7 +15,7 @@ Ignite UI for Angular ComboBox コンポーネントでは、ヘッダー、フ + iframe-src="{environment:demosBaseUrl}/lists/combo-template/" alt="Angular コンボボックス テンプレートの例"> diff --git a/jp/components/combo.md b/jp/components/combo.md index 6c177b832d..0a2c395dfc 100644 --- a/jp/components/combo.md +++ b/jp/components/combo.md @@ -16,7 +16,7 @@ Angular ComboBox コンポーネントは、編集可能な機能を提供する + iframe-src="{environment:demosBaseUrl}/lists/combo-main/" alt="Angular ComboBox の例">
@@ -139,7 +139,7 @@ export class MyCombo { + iframe-src="{environment:demosBaseUrl}/lists/combo-valuekey/" > @@ -156,7 +156,7 @@ export class MyCombo { + iframe-src="{environment:demosBaseUrl}/lists/combo-binding/" > @@ -331,7 +331,7 @@ $custom-checkbox-theme: checkbox-theme( + iframe-src="{environment:demosBaseUrl}/lists/combo-styling/" > diff --git a/jp/components/date-picker.md b/jp/components/date-picker.md index d7f043527d..1c12826099 100644 --- a/jp/components/date-picker.md +++ b/jp/components/date-picker.md @@ -17,7 +17,7 @@ Ignite UI for Angular Date Picker コンポーネントを使用すると、ユ + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-1/" alt="Angular Date Picker の例">
@@ -202,7 +202,7 @@ export class SampleFormComponent { ``` + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-2/" >
@@ -219,7 +219,7 @@ export class SampleFormComponent { + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-3/" >
@@ -254,7 +254,7 @@ IgxDatePicker と [`IgxTimePicker`](time-picker.md) を一緒に使用する場 + iframe-src="{environment:demosBaseUrl}/scheduling/template-driven-form/" >
@@ -263,7 +263,7 @@ IgxDatePicker と [`IgxTimePicker`](time-picker.md) を一緒に使用する場 + iframe-src="{environment:demosBaseUrl}/scheduling/reactive-form/" >
@@ -325,7 +325,7 @@ $custom-datepicker-theme: calendar-theme( + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-styling-sample/" > ## API リファレンス diff --git a/jp/components/date-range-picker.md b/jp/components/date-range-picker.md index 55241ea9c9..a0baed6f38 100644 --- a/jp/components/date-range-picker.md +++ b/jp/components/date-range-picker.md @@ -7,14 +7,14 @@ _language: ja # Angular Date Range Picker (日付範囲ピッカー) コンポーネントの概要 -Angular Date Range Picker は、ユーザーが開始日と終了日の値を簡単に選択できるようにするテキスト入力とカレンダー ポップアップを含む軽量のコンポーネントです。範囲制限、フォーマット、データ範囲の選択、開始値と終了値のグループ化などの機能を使用して、アプリの要件に合わせてカスタマイズできます。Angular の Date Range Picker を使用すると、開発者はデフォルトのビュー プロパティを変更して、月、年、または複数年に設定することもできます。 +Angular Date Range Picker は、テキスト入力とカレンダー ポップアップを含む軽量なコンポーネントで、ユーザーが開始日と終了日を簡単に選択できます。日付範囲の制限や設定可能な日付フォーマットなど、さまざまなアプリケーション要件に合わせて高いカスタマイズ性を提供します。 ## Angular Date Range Picker の例 -コンポーネントの動作を示すために、この基本的な Angular Date Range Picker の例を作成しました。この場合、カレンダーのポップアップが表示され、ユーザーは開始日と終了日の値を選択できます。 +以下は、カレンダーのポップアップを使用して開始日と終了日を選択できる [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) コンポーネントのサンプルです。 + iframe-src="{environment:demosBaseUrl}/scheduling/basic-daterangepicker/" alt="Angular 日付範囲ピッカーの例">
@@ -22,17 +22,17 @@ Angular Date Range Picker は、ユーザーが開始日と終了日の値を簡 ## Ignite UI for Angular Date Range Picker を使用した作業の開始 -Ignite UI for Angular Date Range Picker コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。 +Ignite UI for Angular [`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) を使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。 ```cmd ng add igniteui-angular ``` -Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。 +Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。 次に、**app.module.ts** ファイルに `IgxDateRangePickerModule` をインポートします。 -`IgxDateRangePicker` は [**IgxCalendarComponent**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) を使用しますが、タッチ操作のために **BrowserAnimationsModule** と **HammerModule** (**オプション**) に依存関係があり、これらも `AppModule` に追加する必要があります。 +[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) は [**IgxCalendarComponent**]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) を使用しますが、タッチ操作のために **BrowserAnimationsModule** と**オプション**の **HammerModule** に依存関係があり、これらも `AppModule` に追加する必要があります。 ```typescript // app.module.ts @@ -51,7 +51,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; export class AppModule {} ``` -あるいは、`16.0.0` 以降、`IgxDateRangePickerComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 +あるいは、`16.0.0` 以降、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) をスタンドアロンの依存関係としてインポートすることも、[`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 ```typescript // home.component.ts @@ -75,7 +75,8 @@ export class HomeComponent {} Ignite UI for Angular Date Range Picker モジュールまたはディレクティブをインポートしたので、`igx-date-range-picker` コンポーネントの使用を開始できます。 ## Date Range Picker コンポーネントの使用 -### Date Range Picker の表示 + +### 表示および値 Date Range Picker をデフォルトのモードでインスタンス化するには、以下のコードを使用してください。 ```html @@ -87,30 +88,19 @@ public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, ``` >[!NOTE] -> Date Range Picker の値は開始日と終了日を含む [`DateRange`]({environment:angularApiUrl}/interfaces/daterange.html) 型です。 - -双方向のデータバインディングを作成するには、`ngModel` を使用します。 -```html - -``` - -### コンポーネントの投影 +> Date Range Picker の値は開始日と終了日を含む [`DateRange`]({environment:angularApiUrl}/interfaces/daterange.html) タイプです。 -デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します - [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) 、[`igxLabel`](label-input.md)、[`igx-hint / igxHint`](input-group.md#hint)、[`igx-prefix / igxPrefix`](input-group.md#prefix-および-suffix)、[`igx-suffix / igxSuffix`](input-group.md#prefix-および-suffix) ([`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) を除く) と同じです。詳細については、[Label および Input](label-input.md) トピックを参照してください。 +ピッカーは、日付を表示するために 「シングル インプット モード」 と 「2 インプット モード」 の 2 タイプのモードを提供します。シングル インプット モードでは、フィールドは編集不可で、日付範囲を入力して変更することはできません。一方で 2 インプット モードでは、開始日と終了日を別々の入力欄に入力して編集できます。 -さらに、Ignite UI for Angular Date Range Picker は [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) を投影するように構成できます。IgxPickerToggleComponent は、カレンダーの切り替えを制御し、[カレンダーの切り替え](#カレンダーの切り替え)セクションに示すように変更できます。 +カレンダーが表示されている場合、開始日と終了日を選択することで日付範囲を指定できます。最初の日付を選択すると、開始日と終了日の両方がその日付に設定され、次に日付を選ぶと終了日として設定されます。すでに範囲が選択されている状態で別の日付をクリックすると、新しい範囲の選択が開始されます。 +双方向のデータバインディングを作成するには、`ngModel` を使用します。 ```html - - - - Please choose start and end date! - - + ``` -### 個別の編集可能な入力の表示 -Angular Date Range Picker コンポーネントは、開始日と終了日の 2 つの入力を構成できます。これは、以下のデモに示すように、[`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) および [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) を日付範囲ピッカーの子として使用して実現できます。 +### 個別の編集可能なインプットの表示 +Angular Date Range Picker コンポーネントは、開始日と終了日の 2 インプットを構成できます。これは、以下のデモに示すように、[`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) および [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) を日付範囲ピッカーの子として使用して実現できます。 ```html @@ -123,47 +113,112 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2 ``` - [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) と [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) は、既存の [`IgxInputGroupComponent`](input-group.md) を拡張します。このような構成を操作するには、[`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) に定義する必要があります。さらに、[`IgxInputGroupComponent`](input-group.md) で利用可能なすべての他のコンポーネントおよびディレクティブも使用できます。 -- 両方の入力で日付編集を有効にするには、[`igxDateTimeEditor`](date-time-editor.md) ディレクティブでデコレートする必要があります。 - +- 両方のインプットで日付編集を有効にするには、[`igxDateTimeEditor`](date-time-editor.md) ディレクティブでデコレートする必要があります。 + iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-start-end/" > + + +### ポップアップ モード + +デフォルトでは、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) をクリックすると、カレンダーのポップアップが `dropdown` モードで表示されます。`Mode` プロパティを `dialog` に設定することで、カレンダーを `dialog` モードで開くこともできます。 +```html + +``` + +
-### ユーザー エクスペリエンス +シングル インプット (読み取り専用) のデフォルト構成では、インプットの任意の場所 (カレンダーのアイコンを含む) をクリックすると、カレンダーを開くことができます。開始日と終了日の 2 インプットがあり、ドロップダウン モードの場合、両方のインプットがデフォルトで編集可能なため、カレンダーはカレンダー アイコンからのみ開きます。`dialog` モードで 2 インプットを行う場合、インプット内の任意の場所をクリックするとカレンダーが開きます。 -単一の読み取り専用入力のデフォルト構成では、入力の任意の場所 (カレンダーのアイコンを含む) をクリックすると、カレンダーを開くことができます。開始日と終了日の 2 つの入力がある場合、両方の入力がデフォルトで編集可能なため、カレンダーはカレンダー アイコンからのみ開きます。 +範囲値はカレンダーから日付が選択されるときに設定されます。ドロップダウン モードでは、`Done` ボタンは使用できません。ダイアログ モードでは、`Cancel` ボタンを使用すると、閉じるときに選択を元に戻すことができます。 -カレンダーが表示されている場合、開始日と終了日を選択して範囲を選択できます。日付を選択すると、2 番目の日付が選択されるまで開始日と終了日が設定されます。選択された範囲がある場合、カレンダーでその他の日付をクリックすると、新しい範囲選択を開始します。 +### キーボード ナビゲーション -コンポーネントの読み取り専用入力で表示される場合、開始日と終了日はハイフン (-) で区切られます。Start と end に異なる入力を定義する場合、`to` で区切ります。後者はローカライズまたはテンプレートで上書きできます。詳細については、以下の[テンプレート化](#テンプレート化)の例を参照してください。 +[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) は直感的なキーボード ナビゲーションに対応しており、マウスを使わずに値の増減や入力マスクのセクション間の移動が可能です。 -## コード例 +使用可能なキーボード ナビゲーション オプションは、コンポーネントがシングル インプット モードか 2 インプット モードかによって異なります。 -### ラベル -日付範囲ピッカーのラベルを定義するには、以下のスニペットに示すように [`igxLabel`](label-input.md) ディレクティブを使用する必要があります。 +**2 インプット モード:** + +|キー|説明| +|----|-----------| +| ← | カレットを 1 文字左に移動します | +| → | カレットを 1 文字右に移動します | +| Ctrl + 左矢印 | カレットを現在の入力マスク セクションの先頭、またはすでに先頭にいる場合は前のセクションの先頭に移動します | +| Ctrl + 右矢印 | カレットを現在の入力マスク セクションの末尾、またはすでに末尾にいる場合は次のセクションの末尾に移動します | +| 上矢印 | 現在フォーカスされている入力マスクのセクションの値を 1 ステップ増加させます | +| 下矢印 | 現在フォーカスされている入力マスクのセクションの値を 1 ステップ減少させます | +| Home | カレットを入力マスクの先頭に移動します | +| End | カレットを入力マスクの末尾に移動します | +| Ctrl + ; | 現在の日付をコンポーネントの値として設定します | + +**シングル インプットおよび 2 インプット モードの両方:** + +|キー|説明| +|----|-----------| +| Alt + 下矢印 | カレンダーのドロップダウンを開きます | +| Alt + 上矢印 | カレンダーのドロップダウンを閉じます | + +[カレンダーのキーボード ナビゲーションセクション](calendar.md#キーボード-ナビゲーション)には、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。 + +
+ +## レイアウト + +### コンポーネントの投影 + +デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します ([`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)と同じです): [`igxLabel`](label-input.md)、[`igx-hint / igxHint`](input-group.md#hints)、[`igx-prefix / igxPrefix`](input-group.md#prefix--suffix)、[`igx-suffix / igxSuffix`](input-group.md#prefix--suffix) ([`IgxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html) を除く)。詳細については、[Label および Input](label-input.md) トピックを参照してください。 ```html - + + + Please choose start and end date! + + +``` + +または 2 インプットの場合: + +```html + + + ... + + + Please choose start and end date! + + ... + + + ... + + ... + ``` -### カレンダーの切り替え -単一の読み取り専用入力を使用するデフォルト構成では、デフォルトのカレンダーのアイコンがプレフィックスとして表示されます。カレンダーのアイコンは、[`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する [`igxPrefix`](input-group.md#prefix-および-suffix) または [`igxSuffix`](input-group.md#prefix-および-suffix) で設定できます。デフォルトの位置を変更し、アイコンをサフィックスとして表示するには、以下を実行する必要があります。 +#### アイコンの切り替えとクリア +デフォルト設定では、シングル インプット (読み取り専用) の場合、プレフィックスにデフォルトのカレンダー アイコンが表示され、サフィックスにはクリア アイコンが表示されます。これらのアイコンは、[`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) および [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html) を使用して変更または再定義できます。インプットの開始位置または終了位置を定義する [`igxPrefix`](input-group.md#prefix-および-suffix) または [`igxSuffix`](input-group.md#prefix-および-suffix) で設定できます。 ```html calendar_view_day + + clear + ``` -Date Range Picker に開始日と終了日の 2 つの入力がある場合、デフォルトでカレンダーアイコンを公開しません。[`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) は、[`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) または [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) の子として追加する必要があります。 +日付範囲ピッカーに開始日と終了日の 2 つの個別のインプットがある場合、デフォルトではこれらのアイコンは表示されません。[`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html) および [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html) は、[`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) または [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) の子として追加する必要があります。 ```html @@ -172,6 +227,9 @@ Date Range Picker に開始日と終了日の 2 つの入力がある場合、 calendar_view_day + + clear + ... @@ -180,58 +238,41 @@ Date Range Picker に開始日と終了日の 2 つの入力がある場合、 ``` -### ダイアログ モード - -[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) コンポーネントには、ドロップダウン (デフォルト) とダイアログの 2 つのモードがあります `dialog` モードに切り替えるには、以下の手順を実行します。 - -```html - -``` +### カスタムおよび定義済みの日付範囲 +[`customRanges`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#customRanges) プロパティを使用して、範囲選択を高速化するために、カレンダー ポップアップにカスタム日付範囲チップを追加することもできます。たとえば、現在の日付を終了日とし、今後 7 日間の範囲をすぐに選択できるカスタム日付範囲チップを作成できます。さらに、[`usePredefinedRanges`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#usePredefinedRanges) プロパティを設定すると、カスタム チップに加えて定義済みの範囲チップも表示されます。 - - +```ts +public today = new Date(); -
+public nextSeven = new Date( + this.today.getFullYear(), + this.today.getMonth(), + this.today.getDate() + 7 +); -範囲値はカレンダーから日付が選択されるときに設定されます。ドロップダウン モードでは、`Done` ボタンは使用できません。 +public customRanges: CustomDateRange[] = [ + { + label: 'Next 7 days', + dateRange: { + start: this.today, + end: this.nextSeven + } + } +]; +``` -### カスタム動作ボタン +```html + +``` -Date Range Picker のアクション ボタンは、[`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) ディレクティブを使用してテンプレート化できます。一般的なシナリオは、以下のデモのように、ユーザーが事前定義された範囲から選択できるようにすることです。 +さらに、[`igxPickerActions`]({environment:angularApiUrl}/classes/igxpickeractionsdirective.html) ディレクティブを使用してカスタム コンテンツまたはアクションをテンプレート化できます。次のデモでは、テンプレート化されたアクションとともに、定義済み範囲とカスタム範囲を示します。 - + iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-range-buttons/" > -### キーボード ナビゲーション ->[!NOTE] -> [ダイアログ モード](#ダイアログ-モード)のデモおよび[個別の編集可能な入力の表示](#個別の編集可能な入力の表示)を使用して、以下で定義するキーボードの組み合わせをお試しください。 - -[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) カレンダー UI をキーボードで開く、または閉じる動作は、`dropdown` モードでのみ使用でき、以下のキーの組み合わせでトリガーできます。 - -- Alt + 下矢印 - カレンダー UI を含むドロップダウンを開いてフォーカスします。 -- Alt + 上矢印 - ロップダウンを閉じて入力フィールド (2 つの異なる入力が使用されている場合は開始日の入力フィールド) にフォーカスします。 -- Esc - ドロップダウンを閉じて入力フィールド (2 つの異なる入力が使用されている場合は開始日の入力フィールド) にフォーカスします。 - -Date Range Picker のカレンダー UI 内のキーボード ナビゲーションは、すべてのモードと構成で使用できます。カレンダーを開くとフォーカスが取得され、以下のキーボードの組み合わせを使用できます。 - -- Enter - 開始日と終了日を選択します。 -- PageUp、PageDown、Shift + PageUp、Shift + PageDown、Home、End、Tab - カレンダーをナビゲートします。 - -[カレンダーのキーボード ナビゲーションセクション](calendar.md#キーボード-ナビゲーション)には、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。 - -2 つの異なる入力を使用する場合、[`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) ディレクティブの[キーボード ナビゲーション](date-time-editor.md#キーボード-ナビゲーション)は Date Range Picker コンポーネントにも適用できます。 - -- Ctrl / Cmd + 左矢印 / 右矢印 -日付セクション間を移動します。Ctrl / Cmd + 右矢印でセクションの最後に移動します。既にセクションの最後にある場合、次のセクションの最後に移動します。反対方向も同様です。 -- 上矢印 / 下矢印 - 日付部分を増減します。 -- Ctrl / Cmd + ; - エディターに現在の日時を設定します。 - -
- ### 書式設定 Date Range Picker コンポーネントはさまざまな表示および入力形式をサポートします。 @@ -252,11 +293,11 @@ Date Range Picker コンポーネントはさまざまな表示および入力 > `IgxDateRangePicker` が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。 ### フォームと検証 -Date Range Picker コンポーネントは、コア FormsModule [NgModel](https://angular.io/api/forms/NgModel) と [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl)、[`FormGroup`](https://angular.io/api/forms/FormGroup) など) のすべてのフォーム ディレクティブをサポートします。これには、[フォーム バリデータ](https://angular.io/api/forms/Validators)機能も含まれます。さらに、コンポーネントの[最小値と最大値](#最小値と最大値)もフォーム バリデータとして機能します。 +Date Range Picker コンポーネントは、コア [FormsModule](https://angular.io/api/forms/FormsModule) [NgModel](https://angular.io/api/forms/NgModel) と [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl)、[`FormGroup`](https://angular.io/api/forms/FormGroup) など) のすべてのフォーム ディレクティブをサポートします。これには、[フォーム バリデーター](https://angular.io/api/forms/Validators)機能も含まれます。さらに、コンポーネントの[最小値と最大値](#最小値と最大値)および [disabledDates](#無効な日付と特別な日付) はフォーム バリデーターとしても機能します。 -[NgModel](https://angular.io/api/forms/NgModel) とバリデータは、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) で、または個々の開始日と終了日で設定できます。 +[NgModel](https://angular.io/api/forms/NgModel) とバリデーターは、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) で、または個々の開始日と終了日で設定できます。 -次のスニペットと例は、テンプレート駆動型フォームで `required` バリデータを使用する方法を示しています。 +次のスニペットと例は、テンプレート駆動型フォームで `required` バリデーターを使用する方法を示しています。 最初に、コンポーネント レベルで実行される単一の読み取り専用範囲コンポーネントのモデルを設定する必要があります。 @@ -266,7 +307,7 @@ Date Range Picker コンポーネントは、コア FormsModule [NgModel](https: ``` -2 つの異なる入力を設定する場合も同じ構成を使用できます。この場合、検証は両方の入力に適用されます。 +2 つの異なるインプットを設定する場合も同じ構成を使用できます。この場合、検証は両方のインプットに適用されます。 ```html @@ -284,7 +325,7 @@ Date Range Picker コンポーネントは、コア FormsModule [NgModel](https: ``` -2 つの別々の入力を使用する場合、各入力でモデルと必要なプロパティを設定できます。注: 検証は各入力に固有です。 +2 つの別々のインプットを使用する場合、各インプットでモデルと必要なプロパティを設定できます。注: 検証は各インプットに固有です。 ```html @@ -299,7 +340,7 @@ Date Range Picker コンポーネントは、コア FormsModule [NgModel](https: + iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-validation/" >
@@ -329,7 +370,7 @@ public maxDate = new Date(2020, 11, 1); ``` -`IgxDateRangePickerComponent` はバリデータです。つまり、`minValue` と `maxValue` を内部で使用して有効性を制御します。`ngModel` で両方にアクセスすることもできます。 +`IgxDateRangePickerComponent` はバリデーターです。つまり、`minValue` と `maxValue` を内部で使用して有効性を制御します。`ngModel` で両方にアクセスすることもできます。 ```html @@ -347,6 +388,32 @@ public maxDate = new Date(2020, 11, 1); ``` +### 無効な日付と特別な日付 + +カレンダーで無効な日付を設定して、ユーザーが選択できる日付の範囲を絞り込むこともできます。無効にする日付を設定するには、[`disabledDates`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#disabledDates) プロパティを使用できます。 + +```ts +export class DateRangeSampleComponent implements OnInit { + @ViewChild('dateRange') public dateRange: IgxDateRangePicker; + + public minDate = new Date(2025, 4, 1); + public maxDate = new Date(2025, 4, 31); + + public ngOnInit() { + this.dateRange.disabledDates = [ + { + type: DateRangeType.Between, + dateRange: [minDate, maxDate] + } + ] as DateRangeDescriptor[]; + } +} +``` + +`DisabledDates` プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [カレンダーの無効日](calendar.md#angular-calendar-で日付を無効にする方法)。 + +同様に、カレンダーに 1 日または複数の日付を特別な日付として設定したい場合も可能です。この場合は `SpecialDates` プロパティを使用します。[特別な日付](./calendar.md#特別な日付) + ### テンプレート化 2 つのエディターを使用する場合、[`igxDateRangeSeparator`]({environment:angularApiUrl}/classes/igxdaterangeseparatordirective.html) ディレクティブを使用してデフォルトのセパレーターを置き換えることができます。以下は日付のセパレーターをハイフン `-` に変更する方法を示します。 @@ -363,6 +430,46 @@ public maxDate = new Date(2020, 11, 1); ``` +### カレンダー固有の設定 + +さまざまなプロパティを使用して、ポップアップ カレンダーをさらにカスタマイズできます。これらのプロパティがカレンダーにどのような影響を与えるかについては、[**IgxCalendarComponent**](calendar.md) のトピックをご覧ください。 + +|名前|タイプ|説明| +|--|--|--| +| `orientation` | 'vertical' または 'horizontal' | カレンダーを縦向きまたは横向きで表示するかを設定できます。 | +| `displayMonthsCount` | string | 一度に表示する月数 (1 または 2) を指定します。 | +| `showWeekNumbers` | string | カレンダーに週番号の列を表示するかどうかを設定します。 | +| `weekStart` | string | 週の最初の曜日を設定します。 | +| `hideOutsideDays` | boolean | 現在の月ビューの範囲外の日を非表示にします。 | +| `hideHeader` | boolean | カレンダー ヘッダーを非表示にします (ダイアログ モードでのみ適用されます)。 | +| `headerOrientation` | 'vertical' または 'horizontal' | カレンダーのヘッダーを縦方向または横方向に配置します (ダイアログ モードのみ)。 | +| `activeDate` | Date | カレンダーで最初にハイライト表示される日付を設定します。設定されていない場合は、現在の日付がアクティブ日付になります。 | + +```html + + +``` + +カレンダー ヘッダーのヘッダー、サブヘッダー、タイトル部分は、`igxCalendarHeader`、`igxCalendarSubheader`、`igxCalendarHeaderTitle` テンプレート ディレクティブを利用してカスタマイズできます。例: + +```html + + + {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }} + + + {{ format.year.combined }} + {{ format.month.combined | titlecase }} + + + My calendar + + +``` + ## スタイル設定 `igxDateRangePicker` のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 @@ -370,9 +477,9 @@ public maxDate = new Date(2020, 11, 1); ```scss @use "igniteui-angular/theming" as *; -// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。 +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` Date Range Picker コンポーネントは `date-range-picker-theme` を公開し、`igxInputGroupComponent`、`igxCalendar`、`igxOverlay` などの複数のコンポーネントおよびディレクティブを使用します。前述のコンポーネントおよびディレクティブのグローバル スタイル設定は `igxDateRangeComponent` に影響します。Date Range Picker コンポーネントは入力グループおよびカレンダーテーマを使用するため、[`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) および [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) を拡張する新しいテーマを作成し、それらのパラメーターの一部と日付範囲の選択テーマを使用して日付範囲ピッカーをスタイル設定する必要があります。単一のカスタム カラー パレットを使用して、すべてのテーマで使用する色を定義します。 @@ -444,17 +551,17 @@ $custom-calendar-theme: calendar-theme( + iframe-src="{environment:demosBaseUrl}/scheduling/styled-daterangepicker/" > ## アプリケーション デモ -以下のデモは、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) を使用する航空券のフォームを定義します。日付が選択されていない場合、検証エラーを表示するために [`IgxHint`]({environment:angularApiUrl}/classes/igxhintdirective.html) が使用されます。日付の選択は、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) の [`minValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#minValue) および [`maxValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#maxValue) プロパティによって制限されます。 +以下のデモは、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) を使用する航空券のフォームを定義します。日付が選択されていない場合、検証エラーを表示するために [`IgxHint`]({environment:angularApiUrl}/classes/igxhintdirective.html) が使用されます。日付の選択は、[`IgxDateRangePickerComponent`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html) の [`minValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#minValue) および [`maxValue`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#maxValue) プロパティによって制限されます。 + iframe-src="{environment:demosBaseUrl}/scheduling/flight-booking/" >
diff --git a/jp/components/date-time-editor.md b/jp/components/date-time-editor.md index 6674785cc4..3a1900a1ec 100644 --- a/jp/components/date-time-editor.md +++ b/jp/components/date-time-editor.md @@ -12,7 +12,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/scheduling/datetime-basic/" alt="Angular Date Time Editor 例">
@@ -180,7 +180,7 @@ public maxDate = new Date(2020, 11, 1); 以下のサンプルで両方を比較できます。 + iframe-src="{environment:demosBaseUrl}/scheduling/datetime-advanced/" >
diff --git a/jp/components/dialog.md b/jp/components/dialog.md index 63209c62dc..da09fc6f2f 100644 --- a/jp/components/dialog.md +++ b/jp/components/dialog.md @@ -12,7 +12,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-1/" alt="Angular Dialog の例">
@@ -118,7 +118,7 @@ Ignite UI for Angular Dialog Window モジュールまたはディレクティ + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-2/" >
@@ -167,7 +167,7 @@ Ignite UI for Angular Dialog Window モジュールまたはディレクティ + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-3/" >
@@ -319,7 +319,7 @@ $custom-button: contained-button-theme( + iframe-src="{environment:demosBaseUrl}/interactions/dialog-styling-sample/" >
diff --git a/jp/components/display-density.md b/jp/components/display-density.md index 436e28bd75..b782c03359 100644 --- a/jp/components/display-density.md +++ b/jp/components/display-density.md @@ -14,7 +14,7 @@ size 設定の表示は、大規模データセットのビジュアル表示を ## Angular サイズの例 + iframe-src="{environment:demosBaseUrl}/theming/density/" alt="Angular サイズの例">
@@ -44,35 +44,84 @@ igx-input-group { } ``` -## 独自のコンポーネントとレイアウトにサイズを組み込む +## CSS カスタム プロパティによるサイズの理解 -Ignite UI for Angular は、`--ig-size` CSS プロパティの変更に反応するレイアウトを実装できるようにするいくつかの Sass 関数とミックスインを公開します。 +Ignite UI のサイズ設定システムは、CSS カスタム プロパティのセットを通じて機能し、コンポーネントの寸法やスペーシングを自動的に調整します。`--ig-size ` プロパティを変更すると、コンポーネントはその変更を自動的に検出し、適切なサイズ値を適用します。 -以下は、`--ig-size` の値に基づいて要素の幅と高さを変更する方法の例です。 +### サイズ検出用変数 +コンポーネントは以下の CSS カスタム プロパティを利用してサイズ変更を検出し、それに応じて動作します。 + +- `--component-size` - グローバル `--ig-size` を数値にマッピングします (1=small、2=medium、3=large) +- `--is-small` - コンポーネントが Small の場合は 1、それ以外は 0 +- `--is-medium` - コンポーネントが Medium の場合は 1、それ以外は 0 +- `--is-large` - コンポーネントが Large の場合は 1、それ以外は 0 + +これらの変数は CSS の数式を用いて自動的に計算され、`--ig-size` が変更されるたびに更新されます。 + +### サイズ定数 + +テーマ設定システムでは、次の 3 つのサイズ定数が定義されています。 + +- `--ig-size-small` (値: 1) +- `--ig-size-medium` (値: 2) +- `--ig-size-large` (値: 3) + +## カスタム コンポーネントへのサイズ対応の組み込み + +Ignite UI の Sass ユーティリティを使用すると、カスタム コンポーネントをサイズ変更に対応させることができます。これらのユーティリティは、必要な CSS カスタム プロパティや数式を裏側で自動生成します。 + +### Sizable ミックスインと関数の使用 + +グローバル サイズ設定に応答するコンポーネントを作成する方法は次のとおりです。 ```html -
+
``` ```scss @use "igniteui-angular/theming" as *; -.my-elem { - // Make the element sizable +.my-responsive-element { + // The sizable mixin sets up size detection CSS custom properties @include sizable(); - // Define the default size of the element and hook it to the `--ig-size` property + // Connect to the global size system --component-size: var(--ig-size, var(--ig-size-large)); - // Define sizes for small (10px), medium (20px), and large (30px) + // Use the sizable function for responsive sizing --size: #{sizable(10px, 20px, 30px)}; width: var(--size); height: var(--size); } ``` -これで、`--ig-size` の値が変更されるたびに、`.my-elem` のサイズが変更されます。 +### Sizable システムの仕組み + +`@include sizable()` を使用すると、現在のコンポーネントサイズを検出する CSS カスタム プロパティが生成されます。 + +```css +.my-responsive-element { + --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1); + --is-medium: min( + clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), + clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) + ); + --is-small: clamp(0, var(--ig-size-medium, 2) - var(--component-size, 1), 1); +} +``` + +`sizable(10px, 20px, 30px)` 関数は、現在のサイズ設定に基づいて適切な値を自動的に選択する CSS 式を生成します。 + +```css +--size: max( + calc(var(--is-large, 1) * 30px), + calc(var(--is-medium, 1) * 20px), + calc(var(--is-small, 1) * 10px) +); +``` + +この仕組みでは、`clamp()`、`min()`、`max()`、`calc()` 関数を組み合わせた数式的アプローチにより、コンポーネントは現在の `--ig-size` 設定に基づいて自動的にサイズ値を切り替えることができます。 ## API リファレンス
diff --git a/jp/components/divider.md b/jp/components/divider.md index 5cbf00e5d3..48b9d94fcd 100644 --- a/jp/components/divider.md +++ b/jp/components/divider.md @@ -16,7 +16,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-1/" alt="Angular Divider の例"> ## Ignite UI for Angular Divider を使用した作業の開始 @@ -77,7 +77,7 @@ Ignite UI for Angular Divider モジュールまたはディレクティブを + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-2/" > @@ -91,7 +91,7 @@ Ignite UI for Angular Divider モジュールまたはディレクティブを + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-3/" > @@ -112,7 +112,7 @@ Ignite UI for Angular Divider モジュールまたはディレクティブを + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-4/" > diff --git a/jp/components/dock-manager.md b/jp/components/dock-manager.md index 7373df6835..d9636f997e 100644 --- a/jp/components/dock-manager.md +++ b/jp/components/dock-manager.md @@ -13,7 +13,7 @@ Ignite UI Dock Manager コンポーネントは、ペインでアプリケーシ + iframe-src="{environment:demosBaseUrl}/layouts/dock-manager-sample/" alt="Angular ドック マネージャーの例"> diff --git a/jp/components/drag-drop.md b/jp/components/drag-drop.md index fde80979d6..c1166c014f 100644 --- a/jp/components/drag-drop.md +++ b/jp/components/drag-drop.md @@ -15,7 +15,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/icons-sample/" alt="Angular Drag and Drop の例">
@@ -155,7 +155,7 @@ Angular アプリケーション内の要素をある場所から他の場所へ + iframe-src="{environment:demosBaseUrl}/interactions/drag-dialog-sample/" >
@@ -178,7 +178,7 @@ Angular アプリケーション内の要素をある場所から他の場所へ + iframe-src="{environment:demosBaseUrl}/interactions/list-reorder-sample/" >
@@ -265,7 +265,7 @@ public onDropped(event) { + iframe-src="{environment:demosBaseUrl}/interactions/email-sample/" >
@@ -283,7 +283,7 @@ public onDropped(event) { + iframe-src="{environment:demosBaseUrl}/interactions/kanban-sample/" >
diff --git a/jp/components/drop-down-hierarchical-selection.md b/jp/components/drop-down-hierarchical-selection.md index 772bdf316f..5d112b047a 100644 --- a/jp/components/drop-down-hierarchical-selection.md +++ b/jp/components/drop-down-hierarchical-selection.md @@ -28,12 +28,12 @@ DOM からチップを削除し、ツリー/グリッドから項目を選択解 ### デモ + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-tree-hierarchical-selection/" > + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-tree-grid-hierarchical-selection/"> >[!NOTE] diff --git a/jp/components/drop-down-virtual.md b/jp/components/drop-down-virtual.md index ff755f1edf..6ea008bf5f 100644 --- a/jp/components/drop-down-virtual.md +++ b/jp/components/drop-down-virtual.md @@ -13,7 +13,7 @@ Ignite UI for Angular Drop Down コンポーネントは、選択可能な項目 + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-virtual/" alt="Angular 仮想ドロップダウンの例">
@@ -248,7 +248,7 @@ export class DropDownRemoteComponent implements OnInit, OnDestroy { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-remote/" >
diff --git a/jp/components/drop-down.md b/jp/components/drop-down.md index 430a950b47..f513a58636 100644 --- a/jp/components/drop-down.md +++ b/jp/components/drop-down.md @@ -15,7 +15,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-1/" alt="Angular Drop Down の例">
@@ -145,7 +145,7 @@ export class MyDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-2/" >
@@ -191,7 +191,7 @@ export class MyDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-3/" > ### 階層データのグループ化 @@ -266,7 +266,7 @@ export class MyCustomDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-5/" > ### ドロップダウン メニュー @@ -331,7 +331,7 @@ export class MyMenuComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-menu/" > ### 複数レベルのドロップダウン メニュー @@ -399,7 +399,7 @@ public ngAfterViewInit(): void { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-multi-level-menu/"> > [!NOTE] @@ -465,7 +465,7 @@ export class InputDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-4/" >
@@ -530,7 +530,7 @@ $custom-drop-down-theme: drop-down-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-styling/" >
diff --git a/jp/components/expansion-panel.md b/jp/components/expansion-panel.md index 1376d44b29..69081c4287 100644 --- a/jp/components/expansion-panel.md +++ b/jp/components/expansion-panel.md @@ -18,7 +18,7 @@ Ignite UI Angular を使用して、この単純な Angular Expansion Panel の + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-1/" >
@@ -152,7 +152,7 @@ export class ExpansionPanelComponent { + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-2/" > @@ -207,7 +207,7 @@ Angular Expansion Panel は、パネルの縮小時に「更に表示」を描 + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-3/" > @@ -287,7 +287,7 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ + iframe-src="{environment:demosBaseUrl}/layouts/expansion-styling/" > ## Angular Expansion Panel のアニメーション @@ -350,7 +350,7 @@ export class ExpansionPanelComponent { + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-5/" > diff --git a/jp/components/exporter-csv.md b/jp/components/exporter-csv.md index 7e1b1fd284..2d507f0f3c 100644 --- a/jp/components/exporter-csv.md +++ b/jp/components/exporter-csv.md @@ -19,7 +19,7 @@ Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生デ + iframe-src="{environment:demosBaseUrl}/services/export-csv/" alt="Angular CSV Exporter の例">
@@ -119,7 +119,7 @@ public exportButtonHandler() { + iframe-src="{environment:demosBaseUrl}/services/export-csv-sample-1/" > diff --git a/jp/components/exporter-excel.md b/jp/components/exporter-excel.md index 2dbc58bf38..215ea45c4f 100644 --- a/jp/components/exporter-excel.md +++ b/jp/components/exporter-excel.md @@ -18,7 +18,7 @@ Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形 + iframe-src="{environment:demosBaseUrl}/services/export-excel/" alt="Angular Excel Exporter の例">
diff --git a/jp/components/for-of.md b/jp/components/for-of.md index fe1bff5224..8ade377f6c 100644 --- a/jp/components/for-of.md +++ b/jp/components/for-of.md @@ -14,7 +14,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-display/igx-for-sample-1/" alt="Angular 仮想スクロール ディレクティブの例">
@@ -132,7 +132,7 @@ Ignite UI for Angular ForOf モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/data-display/igx-for-sample-2/" >
diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md index 10545bcbeb..ce97071698 100644 --- a/jp/components/general-changelog-dv.md +++ b/jp/components/general-changelog-dv.md @@ -17,7 +17,31 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 * [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master) -## **25.1** +## **20.0.1 (July 2025)** + +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|------------------| +|36448|IgxRadialGauge|ラジアル ラベルの書式設定プロパティ (例: Title、SubTitles) が機能しない。| + +### igniteui-angular-charts (チャート) + +* 軸ラベルに使用できる `MaximumExtent` および `MaximumExtentPercentage` プロパティを追加しました。 + +## **20.0.0 (June 2025)** + +* Angular 20 のサポート。 + +## **19.0.1 (February 2025)** + +### igniteui-angular-maps 地理マップ + +> \[!Note] +> 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 +> 詳細は以下をご覧ください: + +[Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) ### igniteui-angular-charts (チャート) diff --git a/jp/components/general/getting-started.md b/jp/components/general/getting-started.md index 523e40cc72..0ea993dc01 100644 --- a/jp/components/general/getting-started.md +++ b/jp/components/general/getting-started.md @@ -153,35 +153,33 @@ npm start ### コンポーネントの自動追加 -#### モジュールのインポート +Angular 19 以降では、スタンドアロン コンポーネントが Angular アプリを構築するためのデフォルトの方法となり、`NgModules` が不要になりました。これにより、コンポーネントの追加プロセスが大幅に簡略化されます。ここでは、この仕組みを利用してアプリに [**igxGrid**](../grid/grid.md) コンポーネントを追加してみましょう。 -はじめに **app.module.ts** ファイルで使用するコンポーネントの各モジュールをインポートする必要があります。[**igxGrid**](../grid/grid.md) で実行します。BrowserAnimationsModule によってはアニメーションのあるコンポーネントがあることに注意してください。さっそくインポートしてみましょう。 +開始する前にご注意ください。一部のコンポーネントにはアニメーションがあり、それらを利用するには `bootstrapApplication` 呼び出しの一部としてプロバイダーが必要です。 ```typescript -// app.module.ts +// main.ts +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); +``` + +```typescript +// app/app.config.ts + +import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; - -// Here we import the IgxGridModule, so we can use the igxGrid! -import { IgxGridModule } from 'igniteui-angular'; -// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - IgxGridModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } +import { provideAnimations } from '@angular/platform-browser/animations'; + +const providers: Provider = [ + importProvidersFrom(BrowserModule), + provideAnimations() +]; + +export const appConfig: ApplicationConfig = { providers }; ``` #### コンポーネントの使用 @@ -205,17 +203,19 @@ igxGrid をマークアップで使用する準備ができました。**app.com ``` -**app.component.ts** から参照されるグリッド データとアプリケーションのタイトルを定義します。 +**app.component.ts** から参照されるグリッド データとアプリケーションのタイトルを定義します。スタンドアロン コンポーネントを使用している場合、テンプレート内で使用するコンポーネントを含め、`IgxGridComponent` クラスをアプリの imports に追加するだけで済みます。例では列を定義しているため、`IgxColumnComponent` も import 配列に追加する必要があります。 ```typescript // app.component.ts import { Component } from '@angular/core'; +import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], + imports: [IgxGridComponent, IgxColumnComponent] }) export class AppComponent { localData = [ diff --git a/jp/components/general/how-to/how-to-perform-crud.md b/jp/components/general/how-to/how-to-perform-crud.md index da387c6f80..99199306a3 100644 --- a/jp/components/general/how-to/how-to-perform-crud.md +++ b/jp/components/general/how-to/how-to-perform-crud.md @@ -152,7 +152,7 @@ this._crudService.delete(event.data).subscribe({ + iframe-src="{environment:demosBaseUrl}/grid/grid-crud/" > # カスタマイズ diff --git a/jp/components/general/how-to/signal-r-service-live-data.md b/jp/components/general/how-to/signal-r-service-live-data.md index e2f48544ac..6caf9b86af 100644 --- a/jp/components/general/how-to/signal-r-service-live-data.md +++ b/jp/components/general/how-to/signal-r-service-live-data.md @@ -42,7 +42,7 @@ SignalR はいくつかの転送を利用し、クライアントとサーバー + iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager/" alt="サービスを使用した Angular ライブデータ更新の例"> ## SignalR サーバーの構成 diff --git a/jp/components/general/localization.md b/jp/components/general/localization.md index 230163e326..0dd8bd8162 100644 --- a/jp/components/general/localization.md +++ b/jp/components/general/localization.md @@ -16,7 +16,7 @@ _language: ja diff --git a/jp/components/geo-map-display-bing-imagery.md b/jp/components/geo-map-display-bing-imagery.md index 2e725b1a9f..5ba77ca848 100644 --- a/jp/components/geo-map-display-bing-imagery.md +++ b/jp/components/geo-map-display-bing-imagery.md @@ -8,16 +8,19 @@ _language: ja # Angular Bing Maps 画像の表示 +注: 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 + +詳細は以下をご覧ください: + +[Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) は、Microsoft® 社が提供する地理的画像マッピング サービスです。世界の地理的画像タイルを 3 以上提供します。この地理的画像サービスは、www.bing.com/maps に直接アクセスして利用できます。Ignite UI for Angular マップ コンポーネントは、[`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) クラスを使用して、地図の背景コンテンツに Bing Maps の地理的画像を表示します。 ## Angular Bing Maps 画像の表示の例 - - + +
diff --git a/jp/components/geo-map.md b/jp/components/geo-map.md index 4e1665fcb4..6350a2c6e5 100644 --- a/jp/components/geo-map.md +++ b/jp/components/geo-map.md @@ -29,6 +29,12 @@ Angular 地図コンポーネントを使用すると、Bing Maps™ および O Map は、マウス、キーボード、またはコードビハインドを使用して、マップ コンテンツをナビゲーションするためのカスタマイズ可能なナビゲーション動作を提供します。 +注: 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。 + +詳細は以下をご覧ください: + +[Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + ## 依存関係 diff --git a/jp/components/grid/grid.md b/jp/components/grid/grid.md index e52faf1047..616a778727 100644 --- a/jp/components/grid/grid.md +++ b/jp/components/grid/grid.md @@ -573,7 +573,7 @@ interface AminoAcid { + iframe-src="{environment:demosBaseUrl}/grid/grid-nested-data-binding-2/" >
@@ -677,7 +677,7 @@ export const EMPLOYEE_DATA = [ @@ -760,7 +760,7 @@ export const DATA: any[] = [ diff --git a/jp/components/grid/groupby.md b/jp/components/grid/groupby.md index e1b15895c0..345890403d 100644 --- a/jp/components/grid/groupby.md +++ b/jp/components/grid/groupby.md @@ -15,7 +15,7 @@ Ignite UI for Angular Table または UI Grid の Group By 動作は、列の値 + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby/" alt="Angular Grid グループ化の例"> @@ -180,7 +180,7 @@ export interface IGroupByRecord { + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-paging/" alt="Angular ページングでグループ化の例"> @@ -218,7 +218,7 @@ igxGrid では、列ごとまたはグループ化式ごとにカスタム グ + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-custom/" alt="Angular カスタム グループ化の例"> @@ -471,7 +471,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-styling/" > >[!NOTE] diff --git a/jp/components/grid/paste-excel.md b/jp/components/grid/paste-excel.md index 009770fc33..156cccffb6 100644 --- a/jp/components/grid/paste-excel.md +++ b/jp/components/grid/paste-excel.md @@ -25,7 +25,7 @@ Ignite UI for Angular [`IgxGrid`]({environment:angularApiUrl}/classes/igxgridcom + iframe-src="{environment:demosBaseUrl}/grid/grid-paste/" alt="Angular Excel からデータを貼り付けるデ例">
diff --git a/jp/components/grid/selection-based-aggregates.md b/jp/components/grid/selection-based-aggregates.md index 20dad5ccbc..e3da5a10f9 100644 --- a/jp/components/grid/selection-based-aggregates.md +++ b/jp/components/grid/selection-based-aggregates.md @@ -43,7 +43,7 @@ const dates = data.filter(rec => isDate(rec)); + iframe-src="{environment:demosBaseUrl}/grid/grid-selection-custom-summaries/" > diff --git a/jp/components/grids_templates/advanced-filtering.md b/jp/components/grids_templates/advanced-filtering.md index f2b4714fd8..d59e15486f 100644 --- a/jp/components/grids_templates/advanced-filtering.md +++ b/jp/components/grids_templates/advanced-filtering.md @@ -26,7 +26,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-advanced-filtering/" alt="Angular @@igComponent 高度なフィルタリングの例"> } @@ -34,7 +34,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-advanced-filtering/" alt="Angular @@igComponent 高度なフィルタリングの例"> } @@ -42,7 +42,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-advanced-filtering/" alt="Angular @@igComponent 高度なフィルタリングの例"> } @@ -182,7 +182,7 @@ ngAfterViewInit(): void { + iframe-src="{environment:demosBaseUrl}/grid/grid-external-advanced-filtering/" > } @@ -191,7 +191,7 @@ ngAfterViewInit(): void { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-external-advanced-filtering/" > } @@ -200,7 +200,7 @@ ngAfterViewInit(): void { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-external-advanced-filtering/" > } @@ -304,7 +304,7 @@ $custom-query-builder: query-builder-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-advanced-filtering-style/" > } @@ -313,7 +313,7 @@ $custom-query-builder: query-builder-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-advanced-filtering-style/" > } @@ -322,7 +322,7 @@ $custom-query-builder: query-builder-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-advanced-filtering-style/" > } diff --git a/jp/components/grids_templates/batch-editing.md b/jp/components/grids_templates/batch-editing.md index 9845d91844..d53bda1caf 100644 --- a/jp/components/grids_templates/batch-editing.md +++ b/jp/components/grids_templates/batch-editing.md @@ -28,7 +28,7 @@ _language: ja @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-batch-editing/" alt="Angular @@igComponent 一括編集とトランザクションの例">
@@ -36,7 +36,7 @@ _language: ja @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-batchediting/" alt="Angular @@igComponent 一括編集とトランザクションの例">
@@ -44,7 +44,7 @@ _language: ja @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-batch-editing/" alt="Angular @@igComponent 一括編集とトランザクションの例">
@@ -237,7 +237,7 @@ export class HierarchicalGridBatchEditingSampleComponent { + iframe-src="{environment:demosBaseUrl}/grid/remote-paging-batch-editing/" > } diff --git a/jp/components/grids_templates/cascading-combos.md b/jp/components/grids_templates/cascading-combos.md index 79f5729a68..bc28d4f960 100644 --- a/jp/components/grids_templates/cascading-combos.md +++ b/jp/components/grids_templates/cascading-combos.md @@ -14,7 +14,7 @@ _language: ja @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-cascading-combos/" alt="Angular @@igComponent 一括編集とトランザクションの例"> } diff --git a/jp/components/grids_templates/cell-editing.md b/jp/components/grids_templates/cell-editing.md index d26e6dafd2..01b559a65d 100644 --- a/jp/components/grids_templates/cell-editing.md +++ b/jp/components/grids_templates/cell-editing.md @@ -33,7 +33,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Angular CRUD 操 + iframe-src="{environment:demosBaseUrl}/grid/grid-editing/" alt="Angular @@igComponent セル編集とセル テンプレートの例"> } @@ -41,7 +41,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Angular CRUD 操 + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-editing/" alt="Angular @@igComponent セル編集とセル テンプレートの例"> } @@ -49,7 +49,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Angular CRUD 操 + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-editing/" alt="Angular @@igComponent セル編集とセル テンプレートの例"> } @@ -164,7 +164,7 @@ public updateCell() { + iframe-src="{environment:demosBaseUrl}/grid/grid-select/" >
@@ -260,7 +260,7 @@ return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEdit + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-excel-style/" alt="Angular Grid Excel スタイル編集の例"> @@ -491,7 +491,7 @@ export class MyHGridEventsComponent { + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-events/" > } @@ -499,7 +499,7 @@ export class MyHGridEventsComponent { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-editing-events/" > } @@ -507,7 +507,7 @@ export class MyHGridEventsComponent { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-editing-events/" > } @@ -578,7 +578,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-style/" > } @@ -587,7 +587,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-editing-style/" > } @@ -596,7 +596,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-editing-style/" > } diff --git a/jp/components/grids_templates/cell-selection.md b/jp/components/grids_templates/cell-selection.md index 1e3300ccb7..9eb2eb08f1 100644 --- a/jp/components/grids_templates/cell-selection.md +++ b/jp/components/grids_templates/cell-selection.md @@ -35,7 +35,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-selection/" alt="Angular セル選択の例">
@@ -45,7 +45,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-selection/" >
@@ -54,7 +54,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-cell-selection/" >
@@ -81,7 +81,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-cell-selection/" >
@@ -92,7 +92,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-cell-selection/" >
@@ -319,7 +319,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-cell-selection-style/" > } @@ -330,7 +330,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-cell-style/" > } @@ -342,7 +342,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-cell-selection-style/" > } diff --git a/jp/components/grids_templates/clipboard-interactions.md b/jp/components/grids_templates/clipboard-interactions.md index 5165244659..4a6781d7d5 100644 --- a/jp/components/grids_templates/clipboard-interactions.md +++ b/jp/components/grids_templates/clipboard-interactions.md @@ -25,7 +25,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-clipboard-operations-sample/" alt="Angular @@igComponent クリップボード操作の例">
@@ -34,7 +34,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-clipboard-operations-sample/" alt="Angular @@igComponent クリップボード操作の例">
diff --git a/jp/components/grids_templates/collapsible-column-groups.md b/jp/components/grids_templates/collapsible-column-groups.md index a326c280e7..509a6cf3a8 100644 --- a/jp/components/grids_templates/collapsible-column-groups.md +++ b/jp/components/grids_templates/collapsible-column-groups.md @@ -25,7 +25,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-collapsible-groups/" alt="Angular グリッド列グループの縮小の例">
@@ -35,7 +35,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-collapsible-groups/" alt="Angular グリッド列グループの縮小の例">
@@ -44,7 +44,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-collapsible-column-groups/" alt="Angular グリッド列グループの縮小の例">
diff --git a/jp/components/grids_templates/column-hiding.md b/jp/components/grids_templates/column-hiding.md index a8cebe1107..50bbcbf265 100644 --- a/jp/components/grids_templates/column-hiding.md +++ b/jp/components/grids_templates/column-hiding.md @@ -33,7 +33,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm + iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-toolbar-sample/" alt="Angular @@igComponent 列非表示の例">
@@ -42,7 +42,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding-toolbar/" alt="Angular @@igComponent 列非表示の例">
@@ -51,7 +51,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-hiding/" alt="Angular @@igComponent 列非表示の例">
@@ -444,7 +444,7 @@ export class AppModule {} + iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-sample/" >
@@ -453,7 +453,7 @@ export class AppModule {} + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding/" >
@@ -529,7 +529,7 @@ $custom-button: button-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-style/" >
@@ -539,7 +539,7 @@ $custom-button: button-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding-style/" >
@@ -549,7 +549,7 @@ $custom-button: button-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-column-hiding-style/" >
diff --git a/jp/components/grids_templates/column-moving.md b/jp/components/grids_templates/column-moving.md index 5f26a41ecd..7e282813bb 100644 --- a/jp/components/grids_templates/column-moving.md +++ b/jp/components/grids_templates/column-moving.md @@ -48,7 +48,7 @@ Ignite UI for Angular の @@igComponent のコンポーネントは、標準ド + iframe-src="{environment:demosBaseUrl}/grid/grid-moving-sample/" alt="Angular @@igComponent 列移動の例">
@@ -57,7 +57,7 @@ Ignite UI for Angular の @@igComponent のコンポーネントは、標準ド + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-moving/" alt="Angular @@igComponent 列移動の例">
@@ -66,7 +66,7 @@ Ignite UI for Angular の @@igComponent のコンポーネントは、標準ド + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-moving/" alt="Angular @@igComponent 列移動の例">
@@ -212,7 +212,7 @@ $dark-grid-column-moving-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-moving-styled-sample/" > } @@ -222,7 +222,7 @@ $dark-grid-column-moving-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-moving-styled/" > } @@ -232,7 +232,7 @@ $dark-grid-column-moving-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-moving-styled/" > } diff --git a/jp/components/grids_templates/column-pinning.md b/jp/components/grids_templates/column-pinning.md index d66d85845a..a584747571 100644 --- a/jp/components/grids_templates/column-pinning.md +++ b/jp/components/grids_templates/column-pinning.md @@ -32,7 +32,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-toolbar-pinning/" alt="Angular @@igComponent 列ピン固定の例"> } @@ -40,7 +40,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-pinning/" alt="Angular @@igComponent 列ピン固定の例"> } @@ -48,7 +48,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-pinning/" alt="Angular @@igComponent 列ピン固定の例"> } @@ -189,7 +189,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-right-pinning/" > } @@ -198,7 +198,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sample-right-pinning/" > } @@ -207,7 +207,36 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End }; + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-sample-right-pinning/" > + + +} + +各列のピン固定位置を個別に指定できるため、グリッドの両側に列をピン固定して利便性を高め、データ セットの最適化を容易にすることができます。詳細については、以下のデモを参照してください。列をピン固定するには、ヘッダーをクリックして列を選択し、ツールバーに追加されたピン固定ボタンを使用するか、列を別のピン固定された列にドラッグします。 + +@@if (igxName === 'IgxGrid') { + + + + +} + +@@if (igxName === 'IgxHierarchicalGrid') { + + + + +} + +@@if (igxName === 'IgxTreeGrid') { + + } @@ -311,7 +340,7 @@ public toggleColumn(col: ColumnType) { + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-pinning/" > } @@ -319,7 +348,7 @@ public toggleColumn(col: ColumnType) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-pinning/" > } @@ -327,7 +356,7 @@ public toggleColumn(col: ColumnType) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-pinning/" > } @@ -383,7 +412,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-pinning-styling/" > >[!NOTE] diff --git a/jp/components/grids_templates/column-resizing.md b/jp/components/grids_templates/column-resizing.md index bc40d2a771..b4b17dc868 100644 --- a/jp/components/grids_templates/column-resizing.md +++ b/jp/components/grids_templates/column-resizing.md @@ -35,7 +35,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-resizing-sample/" alt="Angular @@igComponent 列サイズ変更の例">
@@ -44,7 +44,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-resizing/" alt="Angular @@igComponent 列サイズ変更の例">
@@ -53,7 +53,7 @@ _language: ja + iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing/" alt="Angular @@igComponent 列サイズ変更の例">
@@ -256,7 +256,7 @@ column.autosize(); + iframe-src="{environment:demosBaseUrl}/grid/grid-columnAutoResizing-sample/" alt="Angular @@igComponent 列のサイズ変更の例">
@@ -265,7 +265,7 @@ column.autosize(); + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-columnAutoSizing-sample/" alt="Angular @@igComponent 列のサイズ変更の例">
@@ -274,7 +274,7 @@ column.autosize(); + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-columnAutosizing-sample/" alt="Angular @@igComponent 列のサイズ変更の例">
@@ -314,7 +314,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-resize-line-styling-sample/" > } @@ -323,7 +323,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-resize-line-styling/" > } @@ -332,7 +332,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-resize-line-styling/" > } diff --git a/jp/components/grids_templates/column-selection.md b/jp/components/grids_templates/column-selection.md index 1565d19e1b..bdc132e81c 100644 --- a/jp/components/grids_templates/column-selection.md +++ b/jp/components/grids_templates/column-selection.md @@ -43,7 +43,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/@@igDemoBasePath/column-selection/" alt="Angular 列選択の例">
@@ -71,7 +71,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/@@igDemoBasePath/column-group-selection/" >
@@ -154,7 +154,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/@@igDemoBasePath/column-selection-styles/" > >[!NOTE] diff --git a/jp/components/grids_templates/column-types.md b/jp/components/grids_templates/column-types.md index fab769b3e2..c1f438a870 100644 --- a/jp/components/grids_templates/column-types.md +++ b/jp/components/grids_templates/column-types.md @@ -34,7 +34,7 @@ Ignite UI for Angular @@igComponent は、デフォルトおよび編集テン + iframe-src="{environment:demosBaseUrl}/grid/grid-column-data-types/" > } @@if (igxName === 'IgxTreeGrid') { diff --git a/jp/components/grids_templates/conditional-cell-styling.md b/jp/components/grids_templates/conditional-cell-styling.md index e2004fef19..210caa98f2 100644 --- a/jp/components/grids_templates/conditional-cell-styling.md +++ b/jp/components/grids_templates/conditional-cell-styling.md @@ -121,7 +121,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. + iframe-src="{environment:demosBaseUrl}/grid/grid-rowClasses-sample/" > } @@ -129,14 +129,14 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-classes/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-row-classes/" > }
@@ -233,7 +233,7 @@ public childRowStyles = { + iframe-src="{environment:demosBaseUrl}/grid/grid-rowStyles-sample/" > } @@ -241,14 +241,14 @@ public childRowStyles = { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-styles-sample/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-row-styles/" > }
@@ -414,7 +414,7 @@ public grammyClasses = { + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-styling/" > } @@ -423,7 +423,7 @@ public grammyClasses = { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-conditional-cell-style/" > } @@ -620,7 +620,7 @@ public updateCSS(css: string) { + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-cellStyling/" > } @@ -628,7 +628,7 @@ public updateCSS(css: string) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-cell-cellStyling/" > } diff --git a/jp/components/grids_templates/display-density.md b/jp/components/grids_templates/display-density.md index ba257ccecd..dcdacefcb6 100644 --- a/jp/components/grids_templates/display-density.md +++ b/jp/components/grids_templates/display-density.md @@ -34,7 +34,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-displayDensity/" alt="Angular @@igComponent サイズの例">
@@ -43,7 +43,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-display-density/" alt="Angular @@igComponent サイズの例">
@@ -52,7 +52,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-density/" alt="Angular @@igComponent サイズの例">
diff --git a/jp/components/grids_templates/editing.md b/jp/components/grids_templates/editing.md index de10331bcc..ea6f745a6d 100644 --- a/jp/components/grids_templates/editing.md +++ b/jp/components/grids_templates/editing.md @@ -114,7 +114,7 @@ const editorOptions: IColumnEditorOptions = { + iframe-src="{environment:demosBaseUrl}/grid/grid-editing-lifecycle/" > } @@ -122,7 +122,7 @@ const editorOptions: IColumnEditorOptions = { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-editing-lifecycle/" > } @@ -130,7 +130,7 @@ const editorOptions: IColumnEditorOptions = { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-editing-lifecycle/" > } diff --git a/jp/components/grids_templates/excel-style-filtering.md b/jp/components/grids_templates/excel-style-filtering.md index 6a94b91439..a7a8e495a3 100644 --- a/jp/components/grids_templates/excel-style-filtering.md +++ b/jp/components/grids_templates/excel-style-filtering.md @@ -25,7 +25,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-1/" alt="Angular @@igComponent Excel スタイル フィルタリングの例"> } @@ -33,7 +33,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-1/" alt="Angular @@igComponent Excel スタイル フィルタリングの例"> } @@ -41,7 +41,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/" alt="Angular @@igComponent Excel スタイル フィルタリングの例"> } @@ -183,7 +183,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-2/" > } @@ -191,7 +191,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-2/" > } @@ -199,7 +199,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2/" > } @@ -328,7 +328,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-3/" > } @@ -336,7 +336,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-3/" > } @@ -344,7 +344,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3/" > } @@ -374,7 +374,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は + iframe-src="{environment:demosBaseUrl}/grid/grid-formatted-filtering-strategy/" > } @@ -383,7 +383,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-formatted-filtering-strategy/" > } @@ -392,7 +392,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-formatted-filtering-strategy/" > } @@ -407,7 +407,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-tree-filter-view/" > } @@ -421,7 +421,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は + iframe-src="{environment:demosBaseUrl}/grid/grid-external-excel-style-filtering/" > } @@ -430,7 +430,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-external-excel-style-filtering/" > } @@ -439,7 +439,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/" > } @@ -501,7 +501,7 @@ Excel スタイル フィルタリング コンポーネントを設定するに + iframe-src="{environment:demosBaseUrl}/grid/grid-external-outlet/" > } @@ -510,7 +510,7 @@ Excel スタイル フィルタリング コンポーネントを設定するに + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-external-outlet/" > } @@ -519,7 +519,7 @@ Excel スタイル フィルタリング コンポーネントを設定するに + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-external-outlet/" > } @@ -644,7 +644,7 @@ $custom-list: list-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-style/" > } @@ -653,7 +653,7 @@ $custom-list: list-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-style/" > } @@ -662,7 +662,7 @@ $custom-list: list-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/" > } diff --git a/jp/components/grids_templates/export-excel.md b/jp/components/grids_templates/export-excel.md index 008628576b..75aa990a9a 100644 --- a/jp/components/grids_templates/export-excel.md +++ b/jp/components/grids_templates/export-excel.md @@ -63,7 +63,7 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス + iframe-src="{environment:demosBaseUrl}/services/export-excel-sample-1/" alt="Angular Excel Exporter の例"> } @@ -72,7 +72,7 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス + iframe-src="{environment:demosBaseUrl}/services/export-excel-tree-grid-sample/" alt="Angular Excel Exporter の例"> } @@ -81,7 +81,7 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-export/" alt="Angular Excel Exporter の例"> } @@ -90,7 +90,7 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-export/" alt="Angular Excel Exporter の例"> } @@ -184,7 +184,7 @@ public exportButtonHandler() { + iframe-src="{environment:demosBaseUrl}/services/export-excel-sample-1/" alt="Angular Grouped Data Excel Exporter の例"> } @@ -205,7 +205,7 @@ public exportButtonHandler() { + iframe-src="{environment:demosBaseUrl}/grid/multi-column-headers-export/" alt="Angular Multi-Column Headers Export"> } @@ -213,7 +213,7 @@ public exportButtonHandler() { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-headers-export/" alt="Angular Multi-Column Headers Export"> } @@ -221,7 +221,7 @@ public exportButtonHandler() { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column-export/" alt="Angular Multi-Column Headers Export"> } diff --git a/jp/components/grids_templates/filtering.md b/jp/components/grids_templates/filtering.md index c0bbf34070..57037e8d96 100644 --- a/jp/components/grids_templates/filtering.md +++ b/jp/components/grids_templates/filtering.md @@ -33,7 +33,7 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-sample/" alt="Angular @@igComponent フィルタリングの例"> } @@ -41,7 +41,7 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering/" alt="Angular @@igComponent フィルタリングの例"> } @@ -49,7 +49,7 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering/" alt="Angular @@igComponent フィルタリングの例"> } @@ -458,7 +458,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-filter-conditions/" > } @@ -466,7 +466,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-custom/" > } @@ -474,7 +474,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-custom-filtering/" > } @@ -486,7 +486,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-template-sample/" > } @@ -494,7 +494,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-template/" > } @@ -502,7 +502,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering-template/" > } @@ -618,7 +618,7 @@ $dark-button: button-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-style/" > } @@ -627,7 +627,7 @@ $dark-button: button-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-style/" > } @@ -636,7 +636,7 @@ $dark-button: button-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering-style/" > } diff --git a/jp/components/grids_templates/keyboard-navigation.md b/jp/components/grids_templates/keyboard-navigation.md index be1cd3a2b7..5fa06480f9 100644 --- a/jp/components/grids_templates/keyboard-navigation.md +++ b/jp/components/grids_templates/keyboard-navigation.md @@ -108,7 +108,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-keyboardnav-guide/" >
@@ -117,7 +117,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hgrid-keyboard-guide/" >
@@ -126,7 +126,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/tgrid-keyboardnav-guide/" >
@@ -254,7 +254,7 @@ public customKeydown(args: IGridKeydownEventArgs) { + iframe-src="{environment:demosBaseUrl}/grid/grid-custom-keyboard-navigation/" > } @@ -282,7 +282,7 @@ public customKeydown(args: IGridKeydownEventArgs) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-custom-kb-navigation/" > } @@ -309,7 +309,7 @@ public customKeydown(args: IGridKeydownEventArgs) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-keyboard-navigation/" > } diff --git a/jp/components/grids_templates/live-data.md b/jp/components/grids_templates/live-data.md index 50a0759453..586f1656b1 100644 --- a/jp/components/grids_templates/live-data.md +++ b/jp/components/grids_templates/live-data.md @@ -26,7 +26,7 @@ _language: ja + iframe-src="{environment:lobDemosBaseUrl}/grid-finjs?theme-switch=false/" alt="Angular 更新のライブデ例"> @@ -71,7 +71,7 @@ igxGrid コンポーネントは、サーバーからの高頻度の更新を簡 + iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager/" alt="サービスを使用した Angular ライブ データ更新の例"> ### ハブ接続の開始 @@ -151,7 +151,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll + iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs/" alt="Angular 更新のライブデ例"> diff --git a/jp/components/grids_templates/multi-column-headers.md b/jp/components/grids_templates/multi-column-headers.md index 2d40358a69..0246d604f2 100644 --- a/jp/components/grids_templates/multi-column-headers.md +++ b/jp/components/grids_templates/multi-column-headers.md @@ -33,7 +33,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/multi-column-headers/" alt="Angular @@igComponent 複数列ヘッダーの例"> } @@ -41,7 +41,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-headers/" alt="Angular @@igComponent 複数列ヘッダーの例"> } @@ -49,7 +49,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column/" alt="Angular @@igComponent 複数列ヘッダーの例"> } @@ -237,7 +237,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/multi-column-header-template/" > } @@ -245,7 +245,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-header-template/" > } @@ -253,7 +253,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column-template/" > } @@ -297,7 +297,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/multi-column-headers-styling/" > } @@ -308,7 +308,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-headers-styling/" > } @@ -319,7 +319,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column-styling/" > } diff --git a/jp/components/grids_templates/multi-row-layout.md b/jp/components/grids_templates/multi-row-layout.md index 126b2aff68..1de7cd1847 100644 --- a/jp/components/grids_templates/multi-row-layout.md +++ b/jp/components/grids_templates/multi-row-layout.md @@ -14,7 +14,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-row-layout/" alt="Angular 複数行レイアウトの例"> @@ -105,7 +105,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-mrl-custom-navigation/" > @@ -178,7 +178,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-row-layout-styling/" > >[!NOTE] diff --git a/jp/components/grids_templates/paging.md b/jp/components/grids_templates/paging.md index e7a45fc570..614d8ee736 100644 --- a/jp/components/grids_templates/paging.md +++ b/jp/components/grids_templates/paging.md @@ -26,7 +26,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-paging-sample/" alt="Angular ページネーションの例"> } @@ -34,7 +34,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-paging/" alt="Angular ページネーションの例"> } @@ -42,7 +42,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-paging/" alt="Angular ページネーションの例">
@@ -157,14 +157,14 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-pager-sample/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-reusable-paginator/" > } @@ -172,7 +172,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-reusable-paginator/" > } @@ -259,7 +259,7 @@ $dark-button: icon-button-theme( + iframe-src="{environment:demosBaseUrl}/grid/custom-grid-paging-style/" >
@@ -271,7 +271,7 @@ $dark-button: icon-button-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-paging-style/" > } @@ -283,7 +283,7 @@ $dark-button: icon-button-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-paging-style/" > } diff --git a/jp/components/grids_templates/remote-data-operations.md b/jp/components/grids_templates/remote-data-operations.md index 0c5cd057b6..027cfd88da 100644 --- a/jp/components/grids_templates/remote-data-operations.md +++ b/jp/components/grids_templates/remote-data-operations.md @@ -33,7 +33,7 @@ Ignite UI for Angular @@igComponent は、リモート仮想化、リモート + iframe-src="{environment:demosBaseUrl}/grid/grid-remote-filtering/" alt="Angular @@igComponent リモート データ操作の例"> } @@ -43,7 +43,7 @@ Ignite UI for Angular @@igComponent は、リモート仮想化、リモート + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-remote-filtering/" alt="Angular @@igComponent リモート データ操作の例">
@@ -105,7 +105,7 @@ public processData(reset) { + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-4/" alt="Angular @@igComponent リモート データ操作の例"> @@ -164,7 +164,7 @@ public handlePreLoad() { + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-5/" > @@ -326,7 +326,7 @@ public columnValuesStrategy = (column: ColumnType, + iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-load-on-demand/" > } @@ -351,7 +351,7 @@ public columnValuesStrategy = (column: ColumnType, + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-load-on-demand/" > } @@ -391,7 +391,7 @@ this.remoteValuesService.getColumnData( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/" > } @@ -591,7 +591,7 @@ public paginate(page: number) { + iframe-src="{environment:demosBaseUrl}/grid/remote-paging-default-template/" > } @@ -599,7 +599,7 @@ public paginate(page: number) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-remote-paging-default-template/" >
@@ -608,7 +608,7 @@ public paginate(page: number) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/remote-paging-default-template/" >
@@ -775,7 +775,7 @@ public mode = GridPagingMode.Remote; + iframe-src="{environment:demosBaseUrl}/grid/grid-remote-paging-sample/" > } @@ -783,7 +783,7 @@ public mode = GridPagingMode.Remote; + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-remote-paging/" >
@@ -792,7 +792,7 @@ public mode = GridPagingMode.Remote; + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-remote-paging/" >
@@ -806,7 +806,7 @@ public mode = GridPagingMode.Remote; + iframe-src="{environment:demosBaseUrl}/grid/grid-custom-remote-paging-sample/" > @@ -908,7 +908,7 @@ public paginate(page: number) { + iframe-src="{environment:demosBaseUrl}/grid/remote-paging-batch-editing/" > } diff --git a/jp/components/grids_templates/row-actions.md b/jp/components/grids_templates/row-actions.md index f1c20e13e5..183e34d22c 100644 --- a/jp/components/grids_templates/row-actions.md +++ b/jp/components/grids_templates/row-actions.md @@ -112,20 +112,20 @@ import { IgxActionStripModule } from 'igniteui-angular'; @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-action-strip/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-action-strip/" > } diff --git a/jp/components/grids_templates/row-adding.md b/jp/components/grids_templates/row-adding.md index 8fe5356753..a52ba5f813 100644 --- a/jp/components/grids_templates/row-adding.md +++ b/jp/components/grids_templates/row-adding.md @@ -34,7 +34,7 @@ _canonicalLink: grid/row-adding + iframe-src="{environment:demosBaseUrl}/grid/grid-add-row/" >
@@ -43,7 +43,7 @@ _canonicalLink: grid/row-adding + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-add-row/" alt="Angular @@igComponent 行追加の例">
@@ -52,7 +52,7 @@ _canonicalLink: grid/row-adding + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-add-row/" alt="Angular @@igComponent 行追加の例">
diff --git a/jp/components/grids_templates/row-drag.md b/jp/components/grids_templates/row-drag.md index da8d9630f4..25ed95bce4 100644 --- a/jp/components/grids_templates/row-drag.md +++ b/jp/components/grids_templates/row-drag.md @@ -33,7 +33,7 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec + iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-base/" alt="Angular @@igComponent 行ドラッグの例"> } @@ -42,7 +42,7 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag-base/" alt="Angular @@igComponent 行ドラッグの例">
@@ -52,7 +52,7 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-row-drag-base/" alt="Angular @@igComponent 行ドラッグの例">
@@ -241,7 +241,7 @@ export class @@igxNameRowDragComponent { + iframe-src="{environment:demosBaseUrl}/grid/grid-multiple-row-drag/" >
@@ -250,7 +250,7 @@ export class @@igxNameRowDragComponent { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-row-drag/" >
@@ -280,7 +280,7 @@ export class @@igxNameRowDragComponent { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-row-drag/" >
@@ -345,7 +345,7 @@ enum DragIcon { + iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-to-grid/" > @@ -356,7 +356,7 @@ enum DragIcon { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag/" > @@ -367,7 +367,7 @@ enum DragIcon { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-drag/" > @@ -384,7 +384,7 @@ enum DragIcon { + iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag/" > @@ -593,7 +593,7 @@ export class HGridRowReorderComponent { + iframe-src="{environment:demosBaseUrl}/grid/grid-row-reorder/" > } @@ -602,7 +602,7 @@ export class HGridRowReorderComponent { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-reordering/" > } @@ -611,7 +611,7 @@ export class HGridRowReorderComponent { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-row-reorder/" > } @@ -850,7 +850,7 @@ class MyGridScrollComponent { + iframe-src="{environment:demosBaseUrl}/grid/grid-drop-indicator/" > } diff --git a/jp/components/grids_templates/row-editing.md b/jp/components/grids_templates/row-editing.md index 97e6566766..8bd1ef3c73 100644 --- a/jp/components/grids_templates/row-editing.md +++ b/jp/components/grids_templates/row-editing.md @@ -28,7 +28,7 @@ _canonicalLink: grid/row-editing + iframe-src="{environment:demosBaseUrl}/grid/grid-row-editing/" alt="Angular @@igComponent 行編集の例">
@@ -37,7 +37,7 @@ _canonicalLink: grid/row-editing + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-row-edit/" alt="Angular @@igComponent 行編集の例">
@@ -46,7 +46,7 @@ _canonicalLink: grid/row-editing + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-editing/" alt="Angular @@igComponent 行編集の例">
@@ -415,7 +415,7 @@ $button-theme: button-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-row-edit-style/" >
@@ -426,7 +426,7 @@ $button-theme: button-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-edit-style/" > } @@ -437,7 +437,7 @@ $button-theme: button-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-row-edit-style/" > } diff --git a/jp/components/grids_templates/row-pinning.md b/jp/components/grids_templates/row-pinning.md index c538c32b7b..f772e0d9bc 100644 --- a/jp/components/grids_templates/row-pinning.md +++ b/jp/components/grids_templates/row-pinning.md @@ -32,7 +32,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning/" alt="Angular #@@igComponent 行ピン固定の例"> } @@ -40,7 +40,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning/" > } @@ -48,7 +48,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning/" > } @@ -294,7 +294,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-extra-column/" > } @@ -302,7 +302,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning-extra-column/" > } @@ -310,7 +310,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning-extra-column/" > } @@ -369,7 +369,7 @@ public onDropAllowed(args) { + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-drag/" > @@ -436,7 +436,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-styling/" > } @@ -445,7 +445,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning-styling/" > } @@ -454,7 +454,7 @@ $custom-grid-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning-styling/" > } diff --git a/jp/components/grids_templates/row-selection.md b/jp/components/grids_templates/row-selection.md index cd6d71314c..204917e83c 100644 --- a/jp/components/grids_templates/row-selection.md +++ b/jp/components/grids_templates/row-selection.md @@ -50,7 +50,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { + iframe-src="{environment:demosBaseUrl}/grid/grid-selection/" alt="Angular 行選択の例">
@@ -59,7 +59,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-selection/" alt="Angular 行選択の例">
@@ -68,7 +68,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-selection/" alt="Angular 行選択の例">
@@ -448,7 +448,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; + iframe-src="{environment:demosBaseUrl}/grid/grid-selection-template-numbering/" >
@@ -457,7 +457,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-selection-template-numbers/" >
@@ -466,7 +466,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-selection-template-numbers/" >
@@ -478,7 +478,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; + iframe-src="{environment:demosBaseUrl}/grid/grid-selection-template-excel/" >
@@ -490,7 +490,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; + iframe-src="{environment:demosBaseUrl}/grid/grid-conditional-row-selectors/" >
@@ -499,7 +499,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-conditional-row-selectors/" >
@@ -508,7 +508,7 @@ public childSelectedRows = ['Initiation', 'Emergency']; + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-conditional-row-selectors/" >
diff --git a/jp/components/grids_templates/search.md b/jp/components/grids_templates/search.md index 98f6cae8eb..deba20e4d7 100644 --- a/jp/components/grids_templates/search.md +++ b/jp/components/grids_templates/search.md @@ -35,7 +35,7 @@ Angular @@igComponent 検索により、データのコレクション内の値 + iframe-src="{environment:demosBaseUrl}/grid/grid-search-sample/" alt="Angular 検索の例">
@@ -44,7 +44,7 @@ Angular @@igComponent 検索により、データのコレクション内の値 + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-search/" alt="Angular 検索の例">
diff --git a/jp/components/grids_templates/selection.md b/jp/components/grids_templates/selection.md index f6d0a7af0f..be0f7a314c 100644 --- a/jp/components/grids_templates/selection.md +++ b/jp/components/grids_templates/selection.md @@ -35,7 +35,7 @@ Ignite UI for Angular @@igComponent を使用して、さまざまなイベン + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-selection/" alt="Angular Grid 選択の例">
@@ -45,7 +45,7 @@ Ignite UI for Angular @@igComponent を使用して、さまざまなイベン + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-selection/" alt="Angular Grid 選択の例">
@@ -54,7 +54,7 @@ Ignite UI for Angular @@igComponent を使用して、さまざまなイベン + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-cell-selection/" alt="Angular Grid 選択の例">
@@ -191,7 +191,7 @@ IgxGrid はコピーされたデータを取得し、コンテナー要素に貼 + iframe-src="{environment:demosBaseUrl}/grid/grid-contextmenu-sample/" >
diff --git a/jp/components/grids_templates/sizing.md b/jp/components/grids_templates/sizing.md index e562f3407f..9b3559bfba 100644 --- a/jp/components/grids_templates/sizing.md +++ b/jp/components/grids_templates/sizing.md @@ -267,6 +267,96 @@ _language: ja --- } +## グリッド セルのスペーシング制御 + +[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) は、[size](display-density.md) 設定に基づいて内部のスペーシングを自動的に適応させます。さらに、CSS カスタム プロパティを使用することで、グリッドのヘッダー セルやボディ セルのパディングやマージンをカスタマイズすることができます。 + +### グローバル グリッド スペーシング + +アプリケーション内のすべてのグリッド セルでスペーシングを縮小または拡大する場合: + +```css +/* Reduce all grid spacing by 20% */ +igx-grid { + --ig-spacing: 0.8; +} + +/* Increase spacing for better touch accessibility */ +igx-grid { + --ig-spacing: 1.2; +} +``` + +### グリッド固有のスペーシング + +特定のグリッド インスタンスのスペーシングを調整する場合: + +```css +/* Make a particular grid more compact */ +.my-compact-grid { + --ig-spacing: 0.6; +} + +/* Give a specific grid more breathing room */ +.my-spacious-grid { + --ig-spacing: 1.4; +} +``` + +### 方向別スペーシング制御 + +水平方向と垂直方向のスペーシングを個別に制御することができます: + +```css +/* Reduce only horizontal spacing (left/right padding) */ +.my-grid { + --ig-spacing-inline: 0.5; + --ig-spacing-block: 1.0; /* Keep vertical spacing normal */ +} + +/* Adjust vertical spacing for tighter row spacing */ +.my-grid { + --ig-spacing-inline: 1.0; /* Keep horizontal spacing normal */ + --ig-spacing-block: 0.7; /* Reduce vertical spacing (if applicable) */ +} +``` + +### サイズ固有のスペーシング + +グリッドの表示密度に応じて異なるスペーシング乗数を適用できます: + +```css +.my-grid { + /* Compact density gets very tight spacing */ + --ig-spacing-small: 0.5; + + /* Medium density uses normal spacing */ + --ig-spacing-medium: 1.0; + + /* Comfortable density gets extra spacing */ + --ig-spacing-large: 1.3; +} +``` + +### ヘッダー セルとボディ セルのスペーシング + +スペーシング プロパティはヘッダー セルとボディ セルの両方に影響しますが、必要に応じて個別にターゲット指定することも可能です。 + +```css +/* Reduce padding in header cells specifically */ +.my-grid igx-grid-header { + --ig-spacing: 0.7; +} + +/* Adjust spacing in data cells */ +.my-grid igx-grid-cell { + --ig-spacing: 0.9; +} +``` + +> [!Note] +> これらのスペーシング調整は、グリッドの表示密度と組み合わせて機能します。スペーシング乗数は、グリッドが compact、cosy または comfortable のどの密度モードであるかに応じて決定される基準スペーシング値に適用されます。 + ## API リファレンス * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) diff --git a/jp/components/grids_templates/sorting.md b/jp/components/grids_templates/sorting.md index ef92fa163f..d7924bedd2 100644 --- a/jp/components/grids_templates/sorting.md +++ b/jp/components/grids_templates/sorting.md @@ -36,7 +36,7 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー + iframe-src="{environment:demosBaseUrl}/grid/grid-sorting-sample/" alt="Angular @@igComponent ソートの例"> } @@ -46,7 +46,7 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-sorting/" alt="Angular @@igComponent ソートの例"> } @@ -56,7 +56,7 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sorting/" alt="Angular @@igComponent ソートの例"> } @@ -85,7 +85,7 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー + iframe-src="{environment:demosBaseUrl}/grid/grid-sorting-indicators/" > } @@ -277,7 +277,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-sorting-styling/" > } @@ -288,7 +288,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-sorting-styling/" > } @@ -299,7 +299,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sorting-styling/" > } diff --git a/jp/components/grids_templates/state-persistence.md b/jp/components/grids_templates/state-persistence.md index 1c228bc04f..2e70b6ad98 100644 --- a/jp/components/grids_templates/state-persistence.md +++ b/jp/components/grids_templates/state-persistence.md @@ -37,7 +37,7 @@ _language: ja # @@igComponent の状態保持 -igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ディレクティブがグリッドに適用されると、[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) および [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setState) メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。 +igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ディレクティブがグリッドに適用されると、[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) および [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setState) メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。 ## サポートされている機能 [`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ディレクティブは、以下の機能の状態の保存および復元をサポートします。 @@ -337,7 +337,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/grid/grid-state/" > } @@ -347,7 +347,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-state/" > } @@ -357,7 +357,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-state/" > } @@ -366,7 +366,7 @@ this.state.setState(state, ['filtering', 'rowIslands']); + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-state-persistence/" > } @@ -416,7 +416,7 @@ public restoreState() { ``` + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-noop-persistence/" alt="Angular ピボット Noop グリッド状態の保持の例"> } @@ -463,7 +463,7 @@ public restoreState() { + iframe-src="{environment:demosBaseUrl}/grid/grid-state-persistence/" alt="Angular Grid 状態保持の例"> } diff --git a/jp/components/grids_templates/summaries.md b/jp/components/grids_templates/summaries.md index 39ae3807c6..043789c074 100644 --- a/jp/components/grids_templates/summaries.md +++ b/jp/components/grids_templates/summaries.md @@ -35,7 +35,7 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ + iframe-src="{environment:demosBaseUrl}/grid/grid-summary/" alt="Angular @@igComponent 集計の例"> } @@ -43,7 +43,7 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary/" alt="Angular @@igComponent 集計の例"> } @@ -51,7 +51,7 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-summary/" alt="Angular @@igComponent 集計の例"> } @@ -370,7 +370,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-alldata-summaries/" > } @@ -378,7 +378,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-allData-summary/" > } @@ -386,7 +386,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-allData-summary/" > } @@ -413,7 +413,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-summary-template/" > } @@ -421,7 +421,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-summary-template/" > } @@ -429,7 +429,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hgrid-summary-template/" > } @@ -528,19 +528,19 @@ class MySummary extends IgxNumberSummaryOperand { @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-disable-summaries/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-disable-summaries/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-disable-summaries/" > } @@ -566,19 +566,19 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-summary-formatter/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-summary-formatter/" > } @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hGrid-summary-formatter/" > } @@ -607,7 +607,7 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-summary/" > } @@ -634,7 +634,7 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary2/" > } @@ -649,14 +649,14 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-summary-export/" > } @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary-export/" > } @@ -664,7 +664,7 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-summary-export/" > } @@ -754,7 +754,7 @@ $custom-theme: grid-summary-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-summary-styling/" > } @@ -765,7 +765,7 @@ $custom-theme: grid-summary-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary-styling/" > } @@ -776,7 +776,7 @@ $custom-theme: grid-summary-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-summary-styling/" > } diff --git a/jp/components/grids_templates/toolbar.md b/jp/components/grids_templates/toolbar.md index a2603797f9..cf31db1e19 100644 --- a/jp/components/grids_templates/toolbar.md +++ b/jp/components/grids_templates/toolbar.md @@ -34,7 +34,7 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-1/" alt="Angular ツールバー グリッドの例"> } @@ -42,7 +42,7 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-4/" alt="Angular ツールバー グリッドの例"> } @@ -50,7 +50,7 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-title/" alt="Angular ツールバー グリッドの例"> } @@ -186,7 +186,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-2/" > } @@ -194,7 +194,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-1/" > } @@ -202,7 +202,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-options/" > } @@ -411,7 +411,7 @@ configureExport(args: IGridToolbarExportEventArgs) { + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-3/" >
@@ -420,7 +420,7 @@ configureExport(args: IGridToolbarExportEventArgs) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-2/" >
@@ -436,7 +436,7 @@ configureExport(args: IGridToolbarExportEventArgs) { + iframe-src="{environment:demosBaseUrl}/grid/exporting-visualization/" >
@@ -445,7 +445,7 @@ configureExport(args: IGridToolbarExportEventArgs) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-exporting-visualization/" >
@@ -494,7 +494,7 @@ configureExport(args: IGridToolbarExportEventArgs) { + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-4/" >
@@ -503,7 +503,7 @@ configureExport(args: IGridToolbarExportEventArgs) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-3/" >
@@ -512,7 +512,7 @@ configureExport(args: IGridToolbarExportEventArgs) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-custom/" >
@@ -606,7 +606,7 @@ $dark-checkbox-theme: checkbox-theme( + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-style/" >
@@ -616,7 +616,7 @@ $dark-checkbox-theme: checkbox-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-style/" >
@@ -626,7 +626,7 @@ $dark-checkbox-theme: checkbox-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-style/" >
diff --git a/jp/components/grids_templates/validation.md b/jp/components/grids_templates/validation.md index 75764ea752..9ded80b5af 100644 --- a/jp/components/grids_templates/validation.md +++ b/jp/components/grids_templates/validation.md @@ -30,7 +30,7 @@ Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作する @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-validator-service/" alt="Angular @@igComponent 検証の基本例">
@@ -38,7 +38,7 @@ Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作する @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-validator-service/" alt="Angular @@igComponent 検証の基本例">
@@ -46,7 +46,7 @@ Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作する @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-validator-service/" alt="Angular @@igComponent 検証の基本例">
@@ -205,7 +205,7 @@ public cellEdit(evt) { @@if (igxName === 'IgxGrid') { + iframe-src="{environment:demosBaseUrl}/grid/grid-validator-service-extended/" alt="Angular @@igComponent カスタム検証の例">
@@ -213,7 +213,7 @@ public cellEdit(evt) { @@if (igxName === 'IgxTreeGrid') { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-validator-service-extended/" alt="Angular @@igComponent カスタム検証の例">
@@ -221,7 +221,7 @@ public cellEdit(evt) { @@if (igxName === 'IgxHierarchicalGrid') { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-validator-service-extended/" alt="Angular @@igComponent カスタム検証の例">
@@ -551,7 +551,7 @@ public stateMessage(cell: CellType) { + iframe-src="{environment:demosBaseUrl}/grid/grid-cross-field-validator-service/" alt="Angular @@igComponent クロス フィールド検証の例"> } @@ -561,7 +561,7 @@ public stateMessage(cell: CellType) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cross-field-validation/" alt="Angular @@igComponent クロス フィールド検証の例"> } @@ -570,7 +570,7 @@ public stateMessage(cell: CellType) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-cross-field-validator-service/" alt="Angular @@igComponent クロス フィールド検証の例"> } @@ -689,7 +689,7 @@ public cellStyles = { + iframe-src="{environment:demosBaseUrl}/grid/grid-validation-style/" > } @@ -698,7 +698,7 @@ public cellStyles = { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-validation-style/" > } @@ -709,7 +709,7 @@ public cellStyles = { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-validation-style/" > } diff --git a/jp/components/grids_templates/virtualization.md b/jp/components/grids_templates/virtualization.md index 821d13c2ba..cc47c58779 100644 --- a/jp/components/grids_templates/virtualization.md +++ b/jp/components/grids_templates/virtualization.md @@ -32,7 +32,7 @@ Ignite UI for Angular の [@@igxName]({environment:angularApiUrl}/classes/@@igTy + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-2/" alt="Angular @@igComponent 仮想化とパフォーマンスの例"> } @@ -41,7 +41,7 @@ Ignite UI for Angular の [@@igxName]({environment:angularApiUrl}/classes/@@igTy + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-lod/" alt="Angular @@igComponent 仮想化とパフォーマンスの例">
diff --git a/jp/components/hierarchicalgrid/hierarchical-grid.md b/jp/components/hierarchicalgrid/hierarchical-grid.md index dca69d3887..6b065d0ab6 100644 --- a/jp/components/hierarchicalgrid/hierarchical-grid.md +++ b/jp/components/hierarchicalgrid/hierarchical-grid.md @@ -14,7 +14,7 @@ Ignite UI for Angular Hierarchical Data Grid は、階層表形式データの + iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing/" alt="Angular 階層グリッドの例">
@@ -359,7 +359,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-styling/" > >[!NOTE] diff --git a/jp/components/hierarchicalgrid/load-on-demand.md b/jp/components/hierarchicalgrid/load-on-demand.md index 0d5929c522..8ad453719a 100644 --- a/jp/components/hierarchicalgrid/load-on-demand.md +++ b/jp/components/hierarchicalgrid/load-on-demand.md @@ -16,7 +16,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-lod/" alt="Angular 階層グリッド ロードオンデマンドの例">
diff --git a/jp/components/icon-button.md b/jp/components/icon-button.md index 33b19d82ff..da8859dd02 100644 --- a/jp/components/icon-button.md +++ b/jp/components/icon-button.md @@ -13,7 +13,7 @@ Ignite UI for Angular Icon Button ディレクティブを任意のアイコン + iframe-src="{environment:demosBaseUrl}/data-entries/icon-button-overview/" alt="Angular Icon Button の例">
@@ -141,7 +141,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-entries/icon-button-size/" alt="Angular Icon Button サイズの例">
@@ -186,7 +186,7 @@ $custom-contained: contained-icon-button-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/icon-button-styling/" >
diff --git a/jp/components/icon-service.md b/jp/components/icon-service.md index c243619775..eccef1c479 100644 --- a/jp/components/icon-service.md +++ b/jp/components/icon-service.md @@ -30,7 +30,7 @@ export class AppComponent implements OnInit { + iframe-src="{environment:demosBaseUrl}/data-display/icon-service/" alt="Icon Service の例"> ### アイコン ファミリの追加 diff --git a/jp/components/icon.md b/jp/components/icon.md index b0cadd6a07..c2f6a8073a 100644 --- a/jp/components/icon.md +++ b/jp/components/icon.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-display/icon-sample-1/" alt="Angular Icon の例">
@@ -145,7 +145,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-display/svg-icon-sample/" > ## マテリアル シンボル @@ -181,7 +181,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-display/material-symbols/" > マテリアル シンボル スタイルの詳細については、[`公式ドキュメント`](https://fonts.google.com/icons)をご覧ください。 @@ -242,7 +242,7 @@ $custom-icon-theme: icon-theme( + iframe-src="{environment:demosBaseUrl}/data-display/icon-styling/" alt="Angular Icon の例"> ### SVG の制限 diff --git a/jp/components/input-group.md b/jp/components/input-group.md index 34167fe90c..4a047f1f1c 100644 --- a/jp/components/input-group.md +++ b/jp/components/input-group.md @@ -12,7 +12,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-1/" alt="Angular Input Group の例">
@@ -100,7 +100,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-3/" alt="Angular Input Group の例">
@@ -123,7 +123,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ ヒントを追加した phone フィールドは以下のようになります。 + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-4/" alt="Angular Input Group の例">
@@ -157,7 +157,7 @@ Ignite UI for Angular は、`type="file"` の入力スタイルも提供し、 + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-5/" > ### Input Group テーマ @@ -173,7 +173,7 @@ Ignite UI for Angular Input Group コンポーネントは、Angular 14 のデ + iframe-src="{environment:demosBaseUrl}/data-entries/typed-form/" > ## 検証 @@ -248,7 +248,7 @@ Ignite UI for Angular Input Group コンポーネントは、Angular 14 のデ + iframe-src="{environment:demosBaseUrl}/data-entries/template-driven-form-validation/" > ### リアクティブ フォーム @@ -322,7 +322,7 @@ public get password() { + iframe-src="{environment:demosBaseUrl}/data-entries/reactive-form-validation/" > ### カスタム バリデータ @@ -435,7 +435,7 @@ constructor(fb: FormBuilder) { + iframe-src="{environment:demosBaseUrl}/data-entries/reactive-form-custom-validation/" > ## スタイル設定 @@ -473,7 +473,7 @@ $custom-input-group: input-group-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-style/" > >[!NOTE] diff --git a/jp/components/interactivity/right-to-left-support.md b/jp/components/interactivity/right-to-left-support.md index 5509c86cf4..674eee8253 100644 --- a/jp/components/interactivity/right-to-left-support.md +++ b/jp/components/interactivity/right-to-left-support.md @@ -26,7 +26,7 @@ _keywords: aria support, aria サポート, a11y, ignite ui for angular, infragi + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-rtl-sample/" alt="Angular RTL サポートの例"> diff --git a/jp/components/label-input.md b/jp/components/label-input.md index d14a89237a..7b8335405e 100644 --- a/jp/components/label-input.md +++ b/jp/components/label-input.md @@ -13,7 +13,7 @@ Ignite UI for Angular Input および Label ディレクティブを使用する + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-1/" alt="Angular Label および Input の例">
@@ -103,7 +103,7 @@ Label および Input ディレクティブのデフォルト スタイル設定 + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-2/" >
@@ -161,7 +161,7 @@ public user = { + iframe-src="{environment:demosBaseUrl}/data-entries/input-text-selection/" >
diff --git a/jp/components/layout.md b/jp/components/layout.md index ab273f3ee8..d7ee78e436 100644 --- a/jp/components/layout.md +++ b/jp/components/layout.md @@ -15,7 +15,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-sample/" alt="Angular Layout Manager 例"> @@ -33,7 +33,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-direction-row/" > @@ -45,7 +45,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-direction-column/" > @@ -62,7 +62,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-custom-order/" > @@ -74,7 +74,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-content-space/" > @@ -85,7 +85,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-justify-content/" > @@ -96,7 +96,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-align-items/" > @@ -107,7 +107,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/layout-wrap/" > diff --git a/jp/components/linear-progress.md b/jp/components/linear-progress.md index 07b8030ddb..0b5809cc73 100644 --- a/jp/components/linear-progress.md +++ b/jp/components/linear-progress.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar/" alt="Angular Linear Progress の例">
@@ -102,7 +102,7 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-sample-1/" >
@@ -178,7 +178,7 @@ public positionEnd: IgxTextAlign = IgxTextAlign.END; + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-sample-2/" >
@@ -237,7 +237,7 @@ public decrementProgress() { + iframe-src="{environment:demosBaseUrl}/data-display/linear-dynamic-sample/" >
@@ -275,7 +275,7 @@ $custom-theme: progress-linear-theme( + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-styling/" > ## API diff --git a/jp/components/list.md b/jp/components/list.md index 76f73c6fea..67993566cc 100644 --- a/jp/components/list.md +++ b/jp/components/list.md @@ -14,7 +14,7 @@ Ignite UI for Angular List コンポーネントは項目の行を表示し、 + iframe-src="{environment:demosBaseUrl}/lists/list-sample-4/" alt="Angular List の例">
@@ -112,7 +112,7 @@ Ignite UI for Angular List モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/lists/list-sample-5/" > @@ -140,7 +140,7 @@ Ignite UI for Angular List モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/lists/list-sample-6/" > @@ -164,7 +164,7 @@ Ignite UI for Angular List モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/lists/list-sample-2/" > @@ -217,7 +217,7 @@ public contacts = [{ + iframe-src="{environment:demosBaseUrl}/lists/list-sample-3/" > @@ -364,7 +364,7 @@ protected get sizeStyle() { + iframe-src="{environment:demosBaseUrl}/lists/list-sample-4/" >
@@ -477,7 +477,7 @@ public leftPanPerformed(args) { + iframe-src="{environment:demosBaseUrl}/lists/list-sample-7/" >
@@ -554,7 +554,7 @@ export class ContactListComponent { + iframe-src="{environment:demosBaseUrl}/lists/list-item-selection/" > デフォルトで、`selected` プロパティは `false` に設定されています。各リスト項目の `(click)` イベントにバインドされたインライン式を使用して値を切り替えることができ、クリックされるたびに項目の視覚的な状態を効果的に切り替えることができます。 @@ -601,7 +601,7 @@ igx-list-item { + iframe-src="{environment:demosBaseUrl}/lists/list-chat-sample/" >
@@ -637,7 +637,7 @@ $my-list-theme: list-theme( + iframe-src="{environment:demosBaseUrl}/lists/list-sample-8/" > リスト コンポーネントに変更できるパラメーターの完全なリストについては、[IgxListComponent スタイル]({environment:sassApiUrl}/themes#function-list-theme)を参照してください。 diff --git a/jp/components/mask.md b/jp/components/mask.md index 2d436ad22b..9f3da09cb3 100644 --- a/jp/components/mask.md +++ b/jp/components/mask.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-2/" alt="Angular Mask の例">
@@ -155,7 +155,7 @@ public clear() { + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-3/" > @@ -196,7 +196,7 @@ private notify(snackbar, message, input) { + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-1/" >
@@ -288,7 +288,7 @@ public inputFormat = new InputFormatPipe(); + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-4/" > @@ -312,7 +312,7 @@ value = null; + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-5/" > diff --git a/jp/components/month-picker.md b/jp/components/month-picker.md index 2ca39a1fed..ec0aaa1125 100644 --- a/jp/components/month-picker.md +++ b/jp/components/month-picker.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-sample-1/" alt="Angular Month Picker の例"> ## Ignite UI for Angular Month Picker を使用した作業の開始 @@ -148,7 +148,7 @@ Month Picker コンポーネントのローカライズとスタイル設定の + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-sample-3/" > @@ -208,7 +208,7 @@ $my-calendar-theme: calendar-theme( + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-styling/" > diff --git a/jp/components/navbar.md b/jp/components/navbar.md index 2293eb6d85..24044f6b88 100644 --- a/jp/components/navbar.md +++ b/jp/components/navbar.md @@ -13,7 +13,7 @@ Ignite UI for Angular [`IgxNavbarComponent`]({environment:angularApiUrl}/classes + iframe-src="{environment:demosBaseUrl}/menus/navbar/" alt="Angular Navbar の例">
@@ -128,7 +128,7 @@ export class AppModule {} + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-1/" >
@@ -171,7 +171,7 @@ export class AppModule {} + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-2/" >
@@ -212,7 +212,7 @@ export class NavbarSample3Component { + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-3/" > > [!NOTE] @@ -265,7 +265,7 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、 + iframe-src="{environment:demosBaseUrl}/menus/navbar-custom-title/" >
@@ -304,7 +304,7 @@ $custom-navbar-theme: navbar-theme( + iframe-src="{environment:demosBaseUrl}/menus/navbar-style/" >
diff --git a/jp/components/navdrawer.md b/jp/components/navdrawer.md index d8d16f8dcb..f38d964014 100644 --- a/jp/components/navdrawer.md +++ b/jp/components/navdrawer.md @@ -14,7 +14,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-simple/" alt="Angular Navigation Drawer 例">
@@ -257,7 +257,7 @@ export class AppComponent { + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-pin/" > Drawer は `flex-basis` をホスト要素に適用すると、残りのコンテンツが残りの幅に合わせます。 @@ -305,7 +305,7 @@ Drawer は `flex-basis` をホスト要素に適用すると、残りのコン + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-mini/" >
@@ -383,7 +383,7 @@ import { RouterModule } from '@angular/router'; + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-routing/" >
@@ -444,7 +444,7 @@ export const menusRoutes: Routes = [ + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-hierarchical/" >
@@ -492,7 +492,7 @@ $custom-theme: navdrawer-theme( + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-styling/" >
diff --git a/jp/components/overlay-position.md b/jp/components/overlay-position.md index 385906696a..63ea9d8d0e 100644 --- a/jp/components/overlay-position.md +++ b/jp/components/overlay-position.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-1/" alt="Angular 配置ストラテジの例">
@@ -104,7 +104,7 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-1/" >
@@ -135,7 +135,7 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-2/" >
@@ -151,7 +151,7 @@ overlay.attach(element, { positionStrategy: myPositionStrategy }); + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-3/" >
diff --git a/jp/components/overlay-scroll.md b/jp/components/overlay-scroll.md index 0c9f9c8c9d..4c4450d0fe 100644 --- a/jp/components/overlay-scroll.md +++ b/jp/components/overlay-scroll.md @@ -67,7 +67,7 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy"; + iframe-src="{environment:demosBaseUrl}/interactions/overlay-scroll-sample-2/" >
@@ -80,7 +80,7 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy"; + iframe-src="{environment:demosBaseUrl}/interactions/overlay-scroll-sample-1/" >
diff --git a/jp/components/overlay-styling.md b/jp/components/overlay-styling.md index cc036e10fc..3dc5317f7b 100644 --- a/jp/components/overlay-styling.md +++ b/jp/components/overlay-styling.md @@ -86,7 +86,7 @@ export class OverlayStylingComponent { + iframe-src="{environment:demosBaseUrl}/interactions/overlay-styling-simple/" > diff --git a/jp/components/overlay.md b/jp/components/overlay.md index 8e588f9a0f..8e0abcb185 100644 --- a/jp/components/overlay.md +++ b/jp/components/overlay.md @@ -17,7 +17,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-1/" alt="Angular Overlay の例">
@@ -137,7 +137,7 @@ Overlay サービスの [`attach()`]({environment:angularApiUrl}/classes/igxover + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-1/" >
@@ -204,7 +204,7 @@ const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings + iframe-src="{environment:demosBaseUrl}/interactions/overlay-preset-settings-sample/" > @@ -274,7 +274,7 @@ export class MyOverlayComponent implements OnDestroy { + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-2/" >
diff --git a/jp/components/paginator.md b/jp/components/paginator.md index 16a4ba5ca9..21ce2d00fd 100644 --- a/jp/components/paginator.md +++ b/jp/components/paginator.md @@ -18,7 +18,7 @@ Ignite UI for Angular Paginator を使用すると、データセットを複数 + iframe-src="{environment:demosBaseUrl}/pagination/main-pagination/" alt="Angular Paginator の例">
diff --git a/jp/components/pivotgrid/pivot-grid-custom.md b/jp/components/pivotgrid/pivot-grid-custom.md index 60b5eba1a5..dcaccb14d9 100644 --- a/jp/components/pivotgrid/pivot-grid-custom.md +++ b/jp/components/pivotgrid/pivot-grid-custom.md @@ -20,7 +20,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { 次の例は、データがすでに集計されているシナリオの処理方法と、その構造がどのように見えるかを示しています: + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-noop/" alt="Angular ピボット グリッドのカスタム定義済み集計の例"> ユーザーは、ピボット グリッドに既に集計されたデータをフィードすることで、特定のシナリオを実現できます。データがどのように表示されるかについていくつかの要件があり、ピボット ビューの階層に関するいくつかの詳細があります。たとえば、`rows` ディメンションで階層を宣言するには、次のようにします: diff --git a/jp/components/pivotgrid/pivot-grid-features.md b/jp/components/pivotgrid/pivot-grid-features.md index a636506a17..44d1512cfd 100644 --- a/jp/components/pivotgrid/pivot-grid-features.md +++ b/jp/components/pivotgrid/pivot-grid-features.md @@ -21,7 +21,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-features/" alt="Angular ピボット セレクターを備えたピボット グリッドの例"> ## ディメンション フィルタリング @@ -177,7 +177,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-layout/" alt="水平行ディメンション レイアウトの Angular ピボット グリッド"> ## インタラクション diff --git a/jp/components/pivotgrid/pivot-grid.md b/jp/components/pivotgrid/pivot-grid.md index 2179e39f55..1d68d0adcf 100644 --- a/jp/components/pivotgrid/pivot-grid.md +++ b/jp/components/pivotgrid/pivot-grid.md @@ -22,7 +22,7 @@ Angular ピボット グリッド コンポーネントは、ピボット テー + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-datasource/" alt="Angular ピボット セレクターを備えたピボット グリッドの例"> ## Ignite UI for Angular Pivot Grid を使用した作業の開始 @@ -295,7 +295,7 @@ public data = [ + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-basic/" alt="Angular ピボット グリッドの基本例"> また、アプリ開発プロセス全体を合理化したい場合は、次回の Angular アプリ開発から [WYSIWYG App Builder™](https://jp.infragistics.com/products/appbuilder) を試すことができます。 diff --git a/jp/components/query-builder-model.md b/jp/components/query-builder-model.md index 3e68899f3d..e75778e140 100644 --- a/jp/components/query-builder-model.md +++ b/jp/components/query-builder-model.md @@ -15,7 +15,7 @@ Angular Query Builder は、シリアル化/逆シリアル化可能な JSON 形 + iframe-src="{environment:demosBaseUrl}/interactions/query-builder-request-sample/" > ## クエリ ビルダー モデル @@ -215,7 +215,7 @@ SELECT * FROM Suppliers WHERE supplierId IN ( + iframe-src="{environment:demosBaseUrl}/interactions/query-builder-sql-sample/" > ## API リファレンス diff --git a/jp/components/query-builder.md b/jp/components/query-builder.md index a9bad0dbc7..526005af5a 100644 --- a/jp/components/query-builder.md +++ b/jp/components/query-builder.md @@ -21,7 +21,7 @@ Angular Query Builder は、[Angular コンポーネント](https://jp.infragist @@ -265,7 +265,7 @@ this.ordersFields = [ + iframe-src="{environment:demosBaseUrl}/interactions/query-builder-template-sample/" alt="Angular Query Builder テンプレートの例"> ## スタイル設定 @@ -345,7 +345,7 @@ $custom-icon-button: outlined-icon-button-theme( + iframe-src="{environment:demosBaseUrl}/interactions/query-builder-style/" > > [!NOTE] diff --git a/jp/components/radio-button.md b/jp/components/radio-button.md index fa6745e283..75024e4c29 100644 --- a/jp/components/radio-button.md +++ b/jp/components/radio-button.md @@ -15,7 +15,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-entries/radio-sample-1/" alt="Angular Radio & Radio Group の例">
@@ -142,7 +142,7 @@ public selectedColor: string = this.colors[3].hex; + iframe-src="{environment:demosBaseUrl}/data-entries/radio-sample-2/" > ## スタイル設定 @@ -173,7 +173,7 @@ $custom-radio-theme: radio-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/radio-styling-sample/" >
@@ -187,7 +187,7 @@ $custom-radio-theme: radio-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/radio-group-sample/" >
@@ -251,7 +251,7 @@ public alignment = RadioGroupAlignment.vertical; + iframe-src="{environment:demosBaseUrl}/data-entries/radio-group-vertical/" >
diff --git a/jp/components/rating.md b/jp/components/rating.md index b24683ac52..8d66d1f8ad 100644 --- a/jp/components/rating.md +++ b/jp/components/rating.md @@ -17,7 +17,7 @@ Ignite UI Angular Star Rating コンポーネントは、igniteui-webcomponents + iframe-src="{environment:demosBaseUrl}/grid/grid-with-rating/" alt="Angular Rating の例"> @@ -111,7 +111,7 @@ export class HomeComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/rating-form/" alt="Angular Rating の例"> Rating コンポーネントの使用方法の詳細については、[このトピック]({environment:infragisticsBaseUrl}/products/ignite-ui-web-components/web-components/components/inputs/rating.html)を参照してください。 diff --git a/jp/components/ripple.md b/jp/components/ripple.md index ccb029af74..37c32a735e 100644 --- a/jp/components/ripple.md +++ b/jp/components/ripple.md @@ -15,7 +15,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-5/" alt="Angular Ripple の例">

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

@@ -95,7 +95,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-6/" alt="Angular Ripple の例"> ### 中央揃えのリップル エフェクト @@ -110,7 +110,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-3/" alt="Angular Ripple の例"> ### リップルの期間 @@ -125,7 +125,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-4/" alt="Angular Ripple の例"> ### リップルの対象要素 @@ -143,7 +143,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-2/" alt="Angular Ripple の例"> > [!NOTE] @@ -182,7 +182,7 @@ $custom-ripple-theme: ripple-theme( + iframe-src="{environment:demosBaseUrl}/interactions/ripple-styling/" alt="Angular Ripple の例"> ## API リファレンス diff --git a/jp/components/select.md b/jp/components/select.md index 45356b52aa..876d001ea8 100644 --- a/jp/components/select.md +++ b/jp/components/select.md @@ -13,7 +13,7 @@ Angular Select は、事前定義された値のリストから 1 つの値を + iframe-src="{environment:demosBaseUrl}/data-entries/select-sample-1/" alt="Angular Select の例"> ## Ignite UI for Angular Select を使用した作業の開始 @@ -139,7 +139,7 @@ Select コンポーネントは、[入力グループ](input-group.md)に適用 ``` + iframe-src="{environment:demosBaseUrl}/data-entries/select-input-directives/" > >[!NOTE] @@ -188,7 +188,7 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: + iframe-src="{environment:demosBaseUrl}/data-entries/select-sample-2/" > ### ヘッダーとフッター @@ -248,7 +248,7 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: ``` + iframe-src="{environment:demosBaseUrl}/data-entries/select-header-footer/" > @@ -325,7 +325,7 @@ export class MyClass implements OnInit { + iframe-src="{environment:demosBaseUrl}/data-entries/select-sample-4/" > @@ -390,7 +390,7 @@ $custom-select-theme: select-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/select-styling/" > diff --git a/jp/components/simple-combo.md b/jp/components/simple-combo.md index 228ae0302c..c5c07fa3d2 100644 --- a/jp/components/simple-combo.md +++ b/jp/components/simple-combo.md @@ -17,7 +17,7 @@ Angular Single Select ComboBox コンポーネントは、単一の選択を可 + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-main/" alt="Angular Simple ComboBox の例">
@@ -141,7 +141,7 @@ export class MySimpleComboComponent implements OnInit { + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-usage/" > @@ -239,7 +239,7 @@ Simple ComboBox が開かれ、リスト項目がフォーカスされている + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-cascading/" alt="Angular カスケーディングの例"> @@ -316,7 +316,7 @@ Ignite UI for Angular Simple ComboBox コンポーネントは、コンボボッ + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-remote/" alt="Angular Simple Combo リモート バインディングの例"> ## スタイル設定 @@ -380,7 +380,7 @@ $custom-drop-down-theme: drop-down-theme( + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-styling/" > diff --git a/jp/components/slider/slider.md b/jp/components/slider/slider.md index 358194ca89..011cf181c4 100644 --- a/jp/components/slider/slider.md +++ b/jp/components/slider/slider.md @@ -12,7 +12,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-1/" alt="Angular Slider の例">
@@ -134,7 +134,7 @@ export class SampleComponent { + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-3/" > @@ -171,7 +171,7 @@ public volume = 20; + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-2/" > @@ -227,7 +227,7 @@ export class SampleComponent { + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-4/" > >[!NOTE] @@ -254,7 +254,7 @@ export class SampleComponent { + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-5/" > @@ -292,7 +292,7 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-6/" > @@ -342,7 +342,7 @@ public type = SliderType.RANGE; + iframe-src="{environment:demosBaseUrl}/interactions/discrete-slider-ticks-bottom/" > @@ -378,7 +378,7 @@ public type = SliderType.RANGE; + iframe-src="{environment:demosBaseUrl}/interactions/slider-ticks-bottomtotop-labels/" > @@ -409,7 +409,7 @@ public type = SliderType.RANGE; + iframe-src="{environment:demosBaseUrl}/interactions/slider-secondary-ticks-mirror/" > @@ -434,7 +434,7 @@ public type = SliderType.RANGE; + iframe-src="{environment:demosBaseUrl}/interactions/slider-timeframe/" > @@ -479,7 +479,7 @@ public type = SliderType.RANGE; + iframe-src="{environment:demosBaseUrl}/interactions/slider-tick-labels-template/" > ## スタイル設定 @@ -517,7 +517,7 @@ $custom-slider-theme: slider-theme( + iframe-src="{environment:demosBaseUrl}/interactions/slider-styling-sample/" > ## API リファレンス diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md index d994554d1b..29544d3fff 100644 --- a/jp/components/snackbar.md +++ b/jp/components/snackbar.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-1/" alt="Angular Snackbar の例"> @@ -121,7 +121,7 @@ public close(element) { + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-2/" > ### 表示時間 @@ -180,7 +180,7 @@ Snackbar の内容をカスタマイズして、メッセージやボタンよ + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-5/" > @@ -251,7 +251,7 @@ public restore() { + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4/" > ### 配置 @@ -311,7 +311,7 @@ $dark-snackbar: snackbar-theme( + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-style/" >
diff --git a/jp/components/splitter.md b/jp/components/splitter.md index f53a10c5c1..387b6279db 100644 --- a/jp/components/splitter.md +++ b/jp/components/splitter.md @@ -12,7 +12,7 @@ Ignite UI for Angular Splitter コンポーネントはレイアウトを作成 + iframe-src="{environment:demosBaseUrl}/layouts/splitter-horizontal-sample/" alt="Angular スプリッターの例"> @@ -127,7 +127,7 @@ public type = SplitterType.Horizontal; + iframe-src="{environment:demosBaseUrl}/layouts/splitter-collapsible-sample/" > ### ペインの構成 @@ -191,7 +191,7 @@ public typeVertical = SplitterType.Vertical; + iframe-src="{environment:demosBaseUrl}/layouts/splitter-nested-sample/" > @@ -246,7 +246,7 @@ $splitter-theme: splitter-theme( + iframe-src="{environment:demosBaseUrl}/layouts/splitter-styling-sample/" > ### カスタム サイズ変更 diff --git a/jp/components/stepper.md b/jp/components/stepper.md index 044c12766c..a778321139 100644 --- a/jp/components/stepper.md +++ b/jp/components/stepper.md @@ -15,7 +15,7 @@ Angular ステッパー デモの 4 番目のステップは、2 番目のステ + iframe-src="{environment:demosBaseUrl}/layouts/stepper-overview-sample/" alt="Angular Stepper の例">
@@ -24,7 +24,7 @@ Angular ステッパー デモの 4 番目のステップは、2 番目のステ + iframe-src="{environment:demosBaseUrl}/layouts/stepper-sample-reactive-forms/" alt="リアクティブ フォームを使用した Angular Stepper の例"> ## Ignite UI for Angular Stepper を使用した作業の開始 @@ -165,7 +165,7 @@ Angular Stepper モジュールまたはディレクティブをインポート + iframe-src="{environment:demosBaseUrl}/layouts/stepper-label-position-and-orientation-sample/" alt="Angular Stepper 向きの例">
@@ -195,7 +195,7 @@ Angular Stepper モジュールまたはディレクティブをインポート + iframe-src="{environment:demosBaseUrl}/layouts/stepper-linear-sample/" alt="Angular Linear Stepper の例">
@@ -257,7 +257,7 @@ Ignite UI for Angular Stepper では、タイトル、インジケーターな + iframe-src="{environment:demosBaseUrl}/layouts/stepper-steptypes-sample/" alt="Angular ステップ タイプの例">
@@ -353,7 +353,7 @@ $stepper-theme: stepper-theme( + iframe-src="{environment:demosBaseUrl}/layouts/stepper-linear-sample/" alt="Angular Linear Stepper スタイル設定の例">
diff --git a/jp/components/switch.md b/jp/components/switch.md index d4fc7db17b..41c6f156fc 100644 --- a/jp/components/switch.md +++ b/jp/components/switch.md @@ -14,7 +14,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/data-entries/switch-sample-1/" alt="Angular Switch の例">
@@ -118,7 +118,7 @@ igx-switch { + iframe-src="{environment:demosBaseUrl}/data-entries/switch-sample-2/" > ### ラベル位置 @@ -162,7 +162,7 @@ $custom-switch-theme: switch-theme( + iframe-src="{environment:demosBaseUrl}/data-entries/switch-styling/" >
diff --git a/jp/components/tabbar.md b/jp/components/tabbar.md index 1e1a3d8508..957b639163 100644 --- a/jp/components/tabbar.md +++ b/jp/components/tabbar.md @@ -19,7 +19,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-1/" alt="Angular Bottom Navigation の例"> @@ -235,7 +235,7 @@ Bottom Navigation は以下のようになります。 + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-2/" > @@ -377,7 +377,7 @@ export class TabbarRoutingModule { } + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-3/" > @@ -421,7 +421,7 @@ $dark-bottom-nav: bottom-nav-theme( + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-style/" >
diff --git a/jp/components/tabs.md b/jp/components/tabs.md index 530f87eb4d..3aeb671d94 100644 --- a/jp/components/tabs.md +++ b/jp/components/tabs.md @@ -22,7 +22,7 @@ Ignite UI for Angular [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabsco + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-3/" alt="Angular Tabs の例">
@@ -148,7 +148,7 @@ Ignite UI for Angular Tabs モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-1/" alt="Angular Tabs の例"> @@ -166,7 +166,7 @@ Ignite UI for Angular Tabs モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/layouts/tabs-alignment/" > @@ -226,7 +226,7 @@ Ignite UI for Angular Tabs モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-3/" >
@@ -254,7 +254,7 @@ Ignite UI for Angular Tabs モジュールまたはディレクティブをイ + iframe-src="{environment:demosBaseUrl}/layouts/tabs-header-prefix-suffix/" >
@@ -374,7 +374,7 @@ export class AppRoutingModule { } + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-4/" > > [!NOTE] @@ -422,7 +422,7 @@ $dark-tabs: tabs-theme( + iframe-src="{environment:demosBaseUrl}/layouts/tabs-style/" >
diff --git a/jp/components/texthighlight.md b/jp/components/texthighlight.md index 093047cf61..4c80ee6596 100644 --- a/jp/components/texthighlight.md +++ b/jp/components/texthighlight.md @@ -13,7 +13,7 @@ Ignite UI for Angular の [`IgxTextHighlightDirective`]({environment:angularApiU + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-1/" alt="Angular TextHighlight ディレクティブの例">
@@ -249,7 +249,7 @@ export class HomeComponent { + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-1/" >
@@ -344,7 +344,7 @@ export class HomeComponent { + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-2/" >
@@ -436,7 +436,7 @@ $dark-highlight: highlight-theme( + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-style/" >
diff --git a/jp/components/themes/misc/angular-material-theming.md b/jp/components/themes/misc/angular-material-theming.md index 6a2d7dded6..d6a388f243 100644 --- a/jp/components/themes/misc/angular-material-theming.md +++ b/jp/components/themes/misc/angular-material-theming.md @@ -24,7 +24,7 @@ Ignite UI for Angular は、マテリアル ベースの UI ウィジェット + iframe-src="{environment:demosBaseUrl}/theming/angular-sample/" >
diff --git a/jp/components/themes/misc/bootstrap-theming.md b/jp/components/themes/misc/bootstrap-theming.md index bb0e297981..14b2412c5a 100644 --- a/jp/components/themes/misc/bootstrap-theming.md +++ b/jp/components/themes/misc/bootstrap-theming.md @@ -20,7 +20,7 @@ Ignite UI for Angular は、マテリアル ベースの UI ウィジェット + iframe-src="{environment:demosBaseUrl}/theming/bootstrap-sample/" >
diff --git a/jp/components/themes/roundness.md b/jp/components/themes/roundness.md index e4455f60ad..522f9b96bc 100644 --- a/jp/components/themes/roundness.md +++ b/jp/components/themes/roundness.md @@ -61,4 +61,4 @@ igx-chip { コミュニティに参加して新しいアイデアをご提案ください。 * [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) diff --git a/jp/components/themes/spacing.md b/jp/components/themes/spacing.md new file mode 100644 index 0000000000..75181dcf03 --- /dev/null +++ b/jp/components/themes/spacing.md @@ -0,0 +1,139 @@ +--- +title: スペーシング | Ignite UI for Angular +_description: Ignite UI for Angular は、アプリケーション レベルまたはコンポーネント レベルでパディングとマージンを簡単に調整する方法を提供します。 +_keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コンポーネント, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, スペーシング, パディング, マージン +_language: ja +--- + +# スペーシング + +スペーシングの設定は、大量のデータを視覚的に表現する際に大きく役立ちます。Ignite UI for Angular では、パディングやマージンを調整するためのあらかじめ定義されたオプションを提供しています。 + +固定値を使用する代わりに、アプリケーションやコンポーネント単位でスペーシングを調整できるように、CSS カスタム プロパティを使用しています。 + +## スペーシングの仕組み + +Ignite UI for Angular では、コンポーネントのサイズ (small、medium、large) に応じて動的にスケールする高度なスペーシング システムを提供しています。このシステムは CSS カスタム プロパティを中心に構築されており、カスタム CSS を記述することなく、グローバルまたはコンポーネント単位でスペーシングを制御できます。 + +## サイズとスペーシングの関係 + +Ignite UI のスペーシング システムは、コンポーネント サイズと密接に関連しています。コンポーネントには 3 つの異なるサイズがあります。 +- **Small** - 密度の高いレイアウトに適したコンパクトなスペーシング +- **Medium** - デフォルトのバランスの取れたスペーシング +- **Large** - タッチ操作に適した余裕のあるスペーシング + +アクティブなサイズに応じてスペーシングが自動的に適応し、アプリケーション全体で一貫したビジュアル階層を維持します。 + +## コア CSS カスタム プロパティ + +スペーシング システムは、以下の主要な CSS カスタム プロパティを中心に構成されています。 + +### グローバル スペーシング プロパティ + +- `--ig-spacing` - 基本のスペーシング乗数 (デフォルト: 1) +- `--ig-spacing-small` - Small サイズのコンポーネント用スペーシング +- `--ig-spacing-medium` - Medium サイズのコンポーネント用スペーシング +- `--ig-spacing-large` - Large サイズのコンポーネント用スペーシング + +### 方向別スペーシング プロパティ + +- `--ig-spacing-inline` - 水平方向のスペーシング制御 +- `--ig-spacing-block` - 垂直方向のスペーシング制御 +- `--ig-spacing-inline-small` - Small コンポーネント用の水平方向スペーシング +- `--ig-spacing-inline-medium` - Medium コンポーネント用の水平方向スペーシング +- `--ig-spacing-inline-large` - Large コンポーネント用の水平方向スペーシング +- `--ig-spacing-block-small` - Small コンポーネント用の垂直方向スペーシング +- `--ig-spacing-block-medium` - Medium コンポーネント用の垂直方向スペーシング +- `--ig-spacing-block-large` - Large コンポーネント用の垂直方向スペーシング + +## サイズ検出用変数 + +コンポーネントは以下の CSS カスタム プロパティを利用して、自身のサイズを自動的に検出します。 + +- `--is-small` - コンポーネントが Small の場合は 1、それ以外は 0 +- `--is-medium` - コンポーネントが Medium の場合は 1、それ以外は 0 +- `--is-large` - コンポーネントが Large の場合は 1、それ以外は 0 +- `--component-size` - 現在のサイズを示す数値 (1=Small、2=Medium、3=Large) + +これらの変数はテーマ システムによって自動的に管理され、`--ig-size` によって制御されるコンポーネントのサイズ設定に基づいて変化します。 + +## 実用的な使用例 + +### グローバル スペーシング制御 + +アプリケーション全体のコンポーネントをよりコンパクトにする場合: + +```css +:root { + --ig-spacing: 0.8; /* 20% less spacing */ +} +``` + +タッチ操作のアクセシビリティを高めるためにスペーシングを広げる場合: + +```css +:root { + --ig-spacing: 1.2; /* 20% more spacing */ +} +``` + +### コンポーネント固有のスペーシング + +特定のコンポーネントタイプのスペーシングを調整する場合: + +```css +.my-grid { + --ig-spacing: 0.5; /* More compact grid, 50% of the original spacing in all sizes */ +} +``` + +### 方向別スペーシング制御 + +水平方向のスペーシングのみを減らし、垂直方向は通常のままにする場合: + +```css +:root { + --ig-spacing-inline: 0.7; + --ig-spacing-block: 1.0; +} +``` + +### サイズ固有のスペーシング + +特定のコンポーネントサイズに対してスペーシングをカスタマイズする場合: + +```css +:root { + --ig-spacing-small: 0.5; /* Very tight for small components */ + --ig-spacing-medium: 1.0; /* Normal for medium components */ + --ig-spacing-large: 1.5; /* Extra spacious for large components */ +} +``` + +## スペーシング乗数の仕組み + +スペーシング システムでは、乗数を用いて基準値をスケーリングします。 + +- コンポーネント内のスペーシング値は、アクティブなスペーシング変数で乗算されます。 +- 例: コンポーネントに `8px` の基本パディングがあり、`--ig-spacing: 1.5` を設定した場合、実際のパディングは `12px` になります。 +- `--ig-spacing-large` のようなサイズ固有の乗数は、大サイズのコンポーネントに対して `--ig-spacing` をオーバーライドします。 +- `--ig-spacing-inline` のような方向別乗数を使用すると、水平方向と垂直方向を個別にスケーリングできます。 + +このカスケード式の仕組みにより、一貫したスペーシング関係を維持しつつ、CSS カスタム プロパティだけで細かい制御が可能になります。 + +## API リファレンス +* [ユーティリティ - Pad]({environment:sassApiUrl}/utilities#function-pad) +* [ユーティリティ - Pad Inline]({environment:sassApiUrl}/utilities#function-pad-inline) +* [ユーティリティ - Pad Block]({environment:sassApiUrl}/utilities#function-pad-block) + +### サイズ関数とミックスイン +* [テーマ - Sizable ミックスイン]({environment:sassApiUrl}/themes#mixin-sizable) +* [テーマ - Sizable 関数]({environment:sassApiUrl}/themes#function-sizable) + +## その他のリソース +
+ +コミュニティに参加して新しいアイデアをご提案ください。 + +* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) diff --git a/jp/components/time-picker.md b/jp/components/time-picker.md index ce6749c771..5d47134bcb 100644 --- a/jp/components/time-picker.md +++ b/jp/components/time-picker.md @@ -17,7 +17,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-dropdown/" >
@@ -157,7 +157,7 @@ public date: Date = new Date(); + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-5/" > ## カスタム動作ボタン @@ -193,7 +193,7 @@ public selectNow(timePicker: IgxTimePickerComponent) { + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-6/" >
@@ -249,7 +249,7 @@ public mode = PickerInteractionMode.Dialog; + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-1/" alt="Angular Time Picker の例">
@@ -344,7 +344,7 @@ public onValidationFailed() { + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-4/" >
@@ -356,7 +356,7 @@ public onValidationFailed() { + iframe-src="{environment:demosBaseUrl}/scheduling/template-driven-form/" >
@@ -365,7 +365,7 @@ public onValidationFailed() { + iframe-src="{environment:demosBaseUrl}/scheduling/reactive-form/" >
@@ -440,7 +440,7 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-styling/" >
diff --git a/jp/components/toast.md b/jp/components/toast.md index cfda7d39bc..b883a1a2fa 100644 --- a/jp/components/toast.md +++ b/jp/components/toast.md @@ -13,7 +13,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-2/" alt="Angular Toast の例">
@@ -128,7 +128,7 @@ public showMessage() { + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-3/" > ### 表示期間 @@ -172,7 +172,7 @@ public open(toast) { + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5/" >
@@ -212,7 +212,7 @@ $custom-toast-theme: toast-theme( + iframe-src="{environment:demosBaseUrl}/notifications/toast-style/" >
diff --git a/jp/components/toc.yml b/jp/components/toc.yml index d540638f4a..47a124c088 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -903,6 +903,9 @@ new: false - name: サイズ href: display-density.md +- name: スペーシング + href: themes/spacing.md + new: true - name: Sass new: false items: diff --git a/jp/components/toggle.md b/jp/components/toggle.md index 3c8439cb0d..a6d710403e 100644 --- a/jp/components/toggle.md +++ b/jp/components/toggle.md @@ -14,7 +14,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-1/" alt="Angular Toggle の例"> @@ -148,7 +148,7 @@ export class Class { + iframe-src="{environment:demosBaseUrl}/interactions/toggle/" > @@ -176,7 +176,7 @@ export class Class { + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-2/" > @@ -202,7 +202,7 @@ export class Class { + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-3/" > @@ -232,7 +232,7 @@ public offsetToggleSet() { + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-4/" > diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md index da11a22659..39fe3f9a52 100644 --- a/jp/components/tooltip.md +++ b/jp/components/tooltip.md @@ -14,7 +14,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-simple/" alt="Angular Tooltip の例">
@@ -153,7 +153,142 @@ avatar をターゲットにして、[`igxTooltipTarget`]({environment:angularAp ツールチップを表示または非表示にするまでの時間を制御する場合は、[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブの [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。 > [!NOTE] -> ビルトイン UI インタラクションの動作と [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) および [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティ値を考慮します。[`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API によるツールチップを表示および非表示は、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) and [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティ値を考慮しません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 +> [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の組み込み UI インタラクションは、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) および [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API を使用する場合、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) や [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 + +### オーバーレイ構成 + +[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) と [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.md) を使用してツールチップ要素を開閉します。 + +[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionSettings) プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。 + +さらに詳細なカスタマイズには、[`igxToggleAction`]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) から継承された [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) プロパティを使用します。 + +```html + + info + + +
Her name is Madelyn James
+``` +```ts +public positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Top, + verticalStartPoint: VerticalAlignment.Bottom, + openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }), + closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }), + offset: 10 +} + +public overlaySettings: OverlaySettings = { + closeOnEscape: false, +}; +``` + +> [!NOTE] +> [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionsettings) または [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) で設定したプロパティは、デフォルト設定の同じプロパティをオーバーライドし、ツールチップの動作に直接影響します。 + +### 追加のプロパティ + +これまでに説明したプロパティの他に、[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ではツールチップの動作や外観をさらに構成できるさまざまな追加プロパティが用意されています。 + +[`sticky`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#sticky) プロパティを有効にするとツールチップが「固定」され、閉じるボタンが表示されます。ユーザーが閉じるボタンをクリックするか `Esc` キーを押すまでツールチップは表示されたままになります。この動作はデフォルトのホバー挙動をオーバーライドし、ターゲット要素からカーソルを外してもツールチップが消えなくなります。 + +```html + + info + + +
Her name is Madelyn James
+``` + +デフォルトの閉じるボタンをカスタマイズするには、[`closeButtonTemplate`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#closebuttontemplate) プロパティを使用します。 + +```html + + + info + + + + cancel + + +
Her name is Madelyn James
+``` + +> [!NOTE] +> `closeButtonTemplate` で追加したカスタム コンテンツは、sticky モードのときのみレンダリングされます。 + +[`hasArrow`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hasarrow) プロパティを使用すると、ツールチップに矢印を追加できます。 + +```html + + info + + +
Her name is Madelyn James
+``` + +矢印要素は、指定された配置設定に基づいて配置されます。方向や開始点が[定義済みの配置値](#定義済みの配置値)に一致しない場合、矢印はツールチップの上部中央側に配置されます (デフォルトのツールチップの配置は `bottom`)。 + +#### 定義済みの配置値 + +| 配置     | 水平方向          | 水平開始点         | 垂直方向            | 垂直開始点           | +|--------------|-------------------------------|--------------------------------|-------------------------------|--------------------------------| +| top          | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Top         | VerticalAlignment.Top          | +| top-start    | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Top          | +| top-end      | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Top          | +| bottom       | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       | +| bottom-start | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       | +| bottom-end   | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       | +| right        | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Middle      | VerticalAlignment.Middle       | +| right-start  | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Top          | +| right-end    | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Bottom       | +| left         | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Middle      | VerticalAlignment.Middle       | +| left-start   | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Top          | +| left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       | + + +#### 矢印の配置をカスタマイズする + +矢印の配置をカスタマイズするには、`positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` メソッドをオーバーライドできます。 + +例: + +```ts +export class CustomStrategy extends TooltipPositioningStrategy { + constructor(settings?: PositionSettings) { + super(settings); + } + + public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void { + Object.assign(arrow.style, { + left: '-0.25rem', + transform: 'rotate(-45deg)', + [arrowFit.direction]: '-0.25rem', + }); + } +} + +public overlaySettings: OverlaySettings = { + positionStrategy: new CustomStrategy({ + horizontalDirection: HorizontalAlignment.Right, + horizontalStartPoint: HorizontalAlignment.Right, + verticalDirection: VerticalAlignment.Bottom, + verticalStartPoint: VerticalAlignment.Bottom, + }) +}; +``` + +```html + + info + + +
Her name is Madelyn James
+``` ## 高機能なツールチップ @@ -267,20 +402,11 @@ export class AppModule {} + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-rich/" >
-## オーバーレイ構成 - -[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) および [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは、[`IgxOverlayService`](overlay.md) を使用して各ツールチップ要素を開くか閉じるかします。 - -[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは、[`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaySettings) プロパティ ([`igxToggleAction`]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) から継承します。) を公開し、ツールチップ アニメーション、UI 状の配置などのカスタマイズが可能です。プロパティを設定しない場合は、デフォルト オーバーレイ設定が使用されます。 - -> [!NOTE] -> [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaySettings) で設定したプロパティは、デフォルト オーバーレイ設定の同じプロパティをオーバーライドし、ツールチップに直接影響があります。 - ## スタイル設定 ツールチップのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 @@ -333,14 +459,20 @@ $dark-tooltip: tooltip-theme( + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-style/" >
## ユーザー補助 -[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) ディレクティブを持つ要素には、自動生成された [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id) プロパティ (開発者によって設定されていない場合)、ツールチップ [`role`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#role)、およびツールチップが表示されているかどうかに応じて自動的に更新される **aria-hidden** 属性があります。ターゲットの **aria-describedby** 属性をそれぞれのツールチップの [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id) に設定することにより、ツールチップ要素への参照が提供されます。エンドユーザーがツールチップへアクセスしたときにツールチップのコンテンツにアクセスするために必要な情報であるスクリーン リーダーを提供します。 +[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) はアクセシビリティを考慮して構築されており、以下のプロパティや ARIA 属性が含まれています。 + +- [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id) プロパティ - 開発者が設定しない場合、自動生成されます。 +- [`role`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#role) - ツールチップがデフォルトの動作になっている場合、`role="tooltip"` が適用されます。[`sticky`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#sticky) プロパティが有効な場合、ロールは `status` に変更されます。 +- `aria-hidden` - ツールチップが表示されているかどうかに応じて自動的に更新されます。 + +ターゲットの **aria-describedby** 属性をそれぞれのツールチップの [`id`]({environment:angularApiUrl}/classes/igxtooltipdirective.html#id) に設定することにより、ツールチップ要素への参照が提供されます。エンドユーザーがツールチップへアクセスしたときにツールチップのコンテンツにアクセスするために必要な情報であるスクリーン リーダーを提供します。 以下の状況では十分な注意が必要です。 @@ -348,6 +480,12 @@ $dark-tooltip: tooltip-theme( - ツールチップは、ビルトインではなく手動で実装された動作とともに使用されます (手動による表示/非表示など)。 - ターゲット要素はフォーカスできません。 +## 注意と制限 + +| 制限 | 説明| +| ----------------------------------- | ---------- | +| カスタム配置ストラテジと矢印 | [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは `TooltipPositionStrategy` を使用してツールチップと矢印を配置します。カスタムの [`positionStrategy`]({environment:angularApiUrl}/interfaces/overlaysettings.html#positioningStrategy) を使用する場合、かつ [`hasArrow`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hasarrow) を `true` に設定する場合、そのカスタム ストラテジは `TooltipPositionStrategy` を継承している必要があります。そうでない場合、矢印は表示されません。| + ## API リファレンス このトピックでは、ページ要素にツールチップを作成する方法について学習しました。アプリケーションのデザインを改善するために、アイコンやアバターなどその他の Ignite UI for Angular コンポーネントも使用しました。各 API は以下の通りです。 diff --git a/jp/components/transaction-how-to-use.md b/jp/components/transaction-how-to-use.md index 5ded035215..d2d2613b6f 100644 --- a/jp/components/transaction-how-to-use.md +++ b/jp/components/transaction-how-to-use.md @@ -18,7 +18,7 @@ Ignite UI for Angular グリッドコンポーネントの [`igxTransactionServi + iframe-src="{environment:demosBaseUrl}/services/transaction-base/" alt="Angular トランザクション サービスの使用方法の例">
diff --git a/jp/components/tree.md b/jp/components/tree.md index 7a950734b8..367b3ba5c1 100644 --- a/jp/components/tree.md +++ b/jp/components/tree.md @@ -19,7 +19,7 @@ Angular Tree コンポーネントを使用すると、ユーザーは親子関 + iframe-src="{environment:demosBaseUrl}/lists/tree-basic-sample/" alt="Angular Tree の例">
@@ -325,7 +325,7 @@ Ignite UI for Angular IgxTree は、サーバーから最小限のデータの ### デモ + iframe-src="{environment:demosBaseUrl}/lists/tree-advanced-sample/" alt="Tree ロードオンデマンドの例"> ユーザーが展開アイコンをクリックすると、ロード アイコンに変わります。[Loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) プロパティが `false` に解決されると、読み込みインジケーターが消え、子が読み込まれます。 @@ -358,7 +358,7 @@ $custom-tree-theme: tree-theme( + iframe-src="{environment:demosBaseUrl}/lists/tree-styling/" alt="Tree のスタイル設定"> ## 既知の問題と制限 diff --git a/jp/components/treegrid/groupby.md b/jp/components/treegrid/groupby.md index c8ebb34e5b..06290325ed 100644 --- a/jp/components/treegrid/groupby.md +++ b/jp/components/treegrid/groupby.md @@ -49,7 +49,7 @@ _language: ja + iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs/" alt="Angular Tree Grid グループ化の例">
@@ -102,7 +102,7 @@ public sorting = IgxGroupedTreeGridSorting.instance(); + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-group-by-load-on-demand/" alt="Angular Tree Grid グループ化 ロード オン デマンドの例">
diff --git a/jp/components/treegrid/load-on-demand.md b/jp/components/treegrid/load-on-demand.md index 7fed15bcf4..839ee17557 100644 --- a/jp/components/treegrid/load-on-demand.md +++ b/jp/components/treegrid/load-on-demand.md @@ -14,7 +14,7 @@ Ignite UI for Angular [`IgxTreeGrid`]({environment:angularApiUrl}/classes/igxtre + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-load-on-demand/" alt="Angular ツリー グリッド ロードオンデマンドの例">
diff --git a/jp/components/treegrid/tree-grid.md b/jp/components/treegrid/tree-grid.md index 47ac5c970c..7cfa420225 100644 --- a/jp/components/treegrid/tree-grid.md +++ b/jp/components/treegrid/tree-grid.md @@ -328,7 +328,7 @@ $custom-theme: grid-theme( + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-style/" alt="Angular ツリー グリッド スタイル設定のデモ"> >[!NOTE] diff --git a/jp/images/general/BingMapsImagery.png b/jp/images/general/BingMapsImagery.png new file mode 100644 index 0000000000..717832e5dc Binary files /dev/null and b/jp/images/general/BingMapsImagery.png differ diff --git a/jp/images/general/BingMapsImagery2.png b/jp/images/general/BingMapsImagery2.png new file mode 100644 index 0000000000..85fe3036f8 Binary files /dev/null and b/jp/images/general/BingMapsImagery2.png differ diff --git a/jp/images/general/igniteui-project.PNG b/jp/images/general/igniteui-project.PNG index 4a26da130f..9b57caff8f 100644 Binary files a/jp/images/general/igniteui-project.PNG and b/jp/images/general/igniteui-project.PNG differ diff --git a/kr/components/action-strip.md b/kr/components/action-strip.md index 597d4cb8cb..55ba348ee8 100644 --- a/kr/components/action-strip.md +++ b/kr/components/action-strip.md @@ -16,7 +16,7 @@ The Ignite UI for Angular Action Strip component provides an overlay area contai + iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph/" > @@ -59,7 +59,7 @@ For scenarios where more than three action items will be shown, it is best to us + iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph-menu/" > @@ -95,7 +95,7 @@ This can be utilized via grid action components and we are providing two default + iframe-src="{environment:demosBaseUrl}/grid/grid-action-strip/" > @@ -132,7 +132,7 @@ When `$legacy-support` is set to `true`, include the component theme like this: + iframe-src="{environment:demosBaseUrl}/menus/action-strip-styling/" > diff --git a/kr/components/autocomplete.md b/kr/components/autocomplete.md index 56ec94eff4..1813373f6a 100644 --- a/kr/components/autocomplete.md +++ b/kr/components/autocomplete.md @@ -20,7 +20,7 @@ The following sample demonstrates simple use of the `igx-autocomplete` directive + iframe-src="{environment:demosBaseUrl}/data-entries/autocomplete/" >
@@ -202,7 +202,7 @@ The following sample demonstrates an autocomplete, which allows selecting a cine + iframe-src="{environment:demosBaseUrl}/data-entries/movie/" > @@ -232,7 +232,7 @@ For the purpose of the sample there is a delay in the data loading, in order to + iframe-src="{environment:demosBaseUrl}/data-entries/autocomplete-remote/" >
diff --git a/kr/components/avatar.md b/kr/components/avatar.md index 66af3ae571..702806c935 100644 --- a/kr/components/avatar.md +++ b/kr/components/avatar.md @@ -15,7 +15,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/layouts/avatar-sample-3/" >
diff --git a/kr/components/badge.md b/kr/components/badge.md index f518a7796d..06e500fbc3 100644 --- a/kr/components/badge.md +++ b/kr/components/badge.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-3/" >
@@ -126,7 +126,7 @@ If the sample is configured properly, a list with members' name and status shoul + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-1/" > @@ -158,7 +158,7 @@ Let's add an avatar in front of every chat member. To do this, put another div e + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-2/" > @@ -209,7 +209,7 @@ If the sample is configured properly, a list of members should be displayed and + iframe-src="{environment:demosBaseUrl}/data-display/badge-sample-3/" > diff --git a/kr/components/banner.md b/kr/components/banner.md index 17127f1445..c56e31b6ed 100644 --- a/kr/components/banner.md +++ b/kr/components/banner.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Banner Component provides a way to easily display a pr + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-4/" >
@@ -61,7 +61,7 @@ The banner appears relative to where the element was inserted in the page templa + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-1/" > @@ -170,7 +170,7 @@ The results of the templated banner can be seen in the below demo: + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-2/" > @@ -207,7 +207,7 @@ export class MyBannerComponent { + iframe-src="{environment:demosBaseUrl}/notifications/banner-sample-3/" > diff --git a/kr/components/button-group.md b/kr/components/button-group.md index 452105881a..914a073ded 100644 --- a/kr/components/button-group.md +++ b/kr/components/button-group.md @@ -12,7 +12,7 @@ The [**igx-buttongroup**]({environment:angularApiUrl}/classes/igxbuttongroupcomp + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-1/" >
@@ -71,7 +71,7 @@ igx-buttongroup{ + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-2/" >
@@ -97,7 +97,7 @@ Use the the [`multiSelection`]({environment:angularApiUrl}/classes/igxbuttongrou + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-4/" > @@ -140,7 +140,7 @@ public selectDensity(event) { + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-5/" > @@ -214,7 +214,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-3/" > diff --git a/kr/components/button.md b/kr/components/button.md index ae51b9c4d8..4bb56636b1 100644 --- a/kr/components/button.md +++ b/kr/components/button.md @@ -14,7 +14,7 @@ The Button directive within Ignite UI for Angular is intended to be used on any + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-sample-1/" >
@@ -178,7 +178,7 @@ And the final result: + iframe-src="{environment:demosBaseUrl}/data-entries/buttons-display-density/" >
diff --git a/kr/components/calendar.md b/kr/components/calendar.md index b986dec7fe..4a6596b937 100644 --- a/kr/components/calendar.md +++ b/kr/components/calendar.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Calendar component is developed as a native [Angular c + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-5/" > @@ -63,7 +63,7 @@ Notice that the calendar header is not rendered when the selection is either `mu + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-1/" > @@ -114,7 +114,7 @@ Great, we should now have a calendar with customized dates display that also cha + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-2/" > @@ -157,7 +157,7 @@ Use the demo below to play around (change selection, navigate through months and + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-3/" > @@ -239,7 +239,7 @@ Having implemented this conditional templating and date parsing we should get co + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-4/" > @@ -281,7 +281,7 @@ This is the result. + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-6/" > @@ -334,7 +334,7 @@ Result: + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-sample-7/" > @@ -347,7 +347,7 @@ Result: + iframe-src="{environment:demosBaseUrl}/scheduling/multiview-calendar/" > @@ -360,7 +360,7 @@ There are separate views provided by the [`IgxCalendarModule`]({environment:angu + iframe-src="{environment:demosBaseUrl}/scheduling/calendar-views/" > diff --git a/kr/components/card.md b/kr/components/card.md index b98edc99a0..27c461cc96 100644 --- a/kr/components/card.md +++ b/kr/components/card.md @@ -17,7 +17,7 @@ The Ignite UI for Angular [`IgxCardComponent`]({environment:angularApiUrl}/class + iframe-src="{environment:demosBaseUrl}/layouts/card/" >
@@ -61,7 +61,7 @@ If all went well, you should see the following card in your browser: + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-1/" > @@ -110,7 +110,7 @@ At this point the card should look similar to the following: + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-2/" > @@ -177,7 +177,7 @@ Easy, right? Let's see how it turned out in the browser: + iframe-src="{environment:demosBaseUrl}/layouts/card-sample-3/" > diff --git a/kr/components/carousel.md b/kr/components/carousel.md index 0916456f1f..f533a4ffa5 100644 --- a/kr/components/carousel.md +++ b/kr/components/carousel.md @@ -51,7 +51,7 @@ This is enough to have the carousel instantiated on our page, let's have a look + iframe-src="{environment:demosBaseUrl}/layouts/carousel-sample-1/" > ### Displaying slides using the ngFor directive @@ -109,7 +109,7 @@ Let's see what we have now, sure looks better with the arrows standing out clear + iframe-src="{environment:demosBaseUrl}/layouts/carousel-sample-2/" > @@ -200,7 +200,7 @@ Following all the steps above brings us a nice and functional carousel that the + iframe-src="{environment:demosBaseUrl}/layouts/carousel-sample-3/" > diff --git a/kr/components/checkbox.md b/kr/components/checkbox.md index 6516311d7e..6a46c514db 100644 --- a/kr/components/checkbox.md +++ b/kr/components/checkbox.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-sample-2/" >
diff --git a/kr/components/chip.md b/kr/components/chip.md index de97251d9a..6f2177a916 100644 --- a/kr/components/chip.md +++ b/kr/components/chip.md @@ -14,7 +14,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-display/chip-sample/" > @@ -313,7 +313,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo + iframe-src="{environment:demosBaseUrl}/data-display/chip-styling/" > diff --git a/kr/components/circular-progress.md b/kr/components/circular-progress.md index fdb2cfb6f8..569463a170 100644 --- a/kr/components/circular-progress.md +++ b/kr/components/circular-progress.md @@ -21,7 +21,7 @@ The following example specifies the animation duration set to 5 seconds. + iframe-src="{environment:demosBaseUrl}/data-display/circular-progressbar/" >
@@ -116,7 +116,7 @@ And now if we set up everything correctly we should have the folllowing displaye + iframe-src="{environment:demosBaseUrl}/data-display/circular-progressbar/" >
diff --git a/kr/components/combo-features.md b/kr/components/combo-features.md index 3815b28d78..34ee67496c 100644 --- a/kr/components/combo-features.md +++ b/kr/components/combo-features.md @@ -18,7 +18,7 @@ The following demo demonstrates some of the combo features that are enabled/disa + iframe-src="{environment:demosBaseUrl}/lists/combo-features/" >
diff --git a/kr/components/combo-remote.md b/kr/components/combo-remote.md index 07146d0d84..860c65b2d9 100644 --- a/kr/components/combo-remote.md +++ b/kr/components/combo-remote.md @@ -16,7 +16,7 @@ The sample below demonstrates remote binding using combo API - defining [valueKe + iframe-src="{environment:demosBaseUrl}/lists/combo-remote/" > diff --git a/kr/components/combo-templates.md b/kr/components/combo-templates.md index 5b2ecd1998..489315d490 100644 --- a/kr/components/combo-templates.md +++ b/kr/components/combo-templates.md @@ -17,7 +17,7 @@ Custom templates for different areas of the [igx-combo]({environment:angularApiU + iframe-src="{environment:demosBaseUrl}/lists/combo-template/" > diff --git a/kr/components/combo.md b/kr/components/combo.md index 07cef96a1c..9db2ae2a9f 100644 --- a/kr/components/combo.md +++ b/kr/components/combo.md @@ -21,7 +21,7 @@ Drop Down items are **virtualized**, which guarantees smooth work, even if the [ + iframe-src="{environment:demosBaseUrl}/lists/combo/" >
diff --git a/kr/components/date-picker.md b/kr/components/date-picker.md index 40750000db..a971d1015f 100644 --- a/kr/components/date-picker.md +++ b/kr/components/date-picker.md @@ -11,7 +11,7 @@ The Ignite UI for Angular Date Picker Component lets users pick a single date th + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-1/" alt="Angular Date Picker Example">
@@ -159,7 +159,7 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker ``` + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-2/" >
@@ -175,7 +175,7 @@ More information about these can be found in the [`IgxDateTimeEditor`](date-time + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-sample-3/" >
@@ -209,7 +209,7 @@ To achieve that in template driven forms, use the `ngModel` to bind both compone + iframe-src="{environment:demosBaseUrl}/scheduling/template-driven-form/" >
@@ -218,7 +218,7 @@ In reactive forms, we can handle the [`valueChange`]({environment:angularApiUrl} + iframe-src="{environment:demosBaseUrl}/scheduling/reactive-form/" >
@@ -298,7 +298,7 @@ If the component is using the [`Emulated`](themes/sass/component-themes.md#view- + iframe-src="{environment:demosBaseUrl}/scheduling/datepicker-styling-sample/" > ## API References diff --git a/kr/components/dialog.md b/kr/components/dialog.md index b626a549d7..1071814353 100644 --- a/kr/components/dialog.md +++ b/kr/components/dialog.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/interactions/dialog/" >
@@ -56,7 +56,7 @@ To add alert, in the template of our email component we can add the following co + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-1/" >
@@ -81,7 +81,7 @@ To add standard dialog, in the template of our file manager component we can add + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-2/" >
@@ -122,7 +122,7 @@ Also we can add two groups of label and input decorated with the [**igxLabel**]( + iframe-src="{environment:demosBaseUrl}/interactions/dialog-sample-3/" >
@@ -151,7 +151,7 @@ Dialog title area can be customized using `igxDialogTitle` directive or `igx-dia + iframe-src="{environment:demosBaseUrl}/interactions/custom-dialog-sample/" >
diff --git a/kr/components/display-density.md b/kr/components/display-density.md index edd7c5b532..114fd3b070 100644 --- a/kr/components/display-density.md +++ b/kr/components/display-density.md @@ -15,7 +15,7 @@ Using the [DisplayDensityToken]({environment:angularApiUrl}/index.html#displayde + iframe-src="{environment:demosBaseUrl}/theming/density/" >
diff --git a/kr/components/divider.md b/kr/components/divider.md index c3c566d791..addf2401a4 100644 --- a/kr/components/divider.md +++ b/kr/components/divider.md @@ -17,7 +17,7 @@ By default the divider is a solid horizontal line. + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-1/" > @@ -36,7 +36,7 @@ By adding the `vertical` attribute and setting its value to `true`, you can chan + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-2/" > @@ -50,7 +50,7 @@ To change the default look simply use the `type` attribute of the divider and se + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-3/" > @@ -71,7 +71,7 @@ To inset the divider, set the `middle` attribute of the divider to `true` and pr + iframe-src="{environment:demosBaseUrl}/layouts/divider-sample-4/" > diff --git a/kr/components/drag-drop.md b/kr/components/drag-drop.md index 88f386f766..f63e67953b 100644 --- a/kr/components/drag-drop.md +++ b/kr/components/drag-drop.md @@ -15,7 +15,7 @@ Drag and drop icon to reposition it. + iframe-src="{environment:demosBaseUrl}/interactions/icons-sample/" >
diff --git a/kr/components/drop-down-virtual.md b/kr/components/drop-down-virtual.md index 71e2d72852..ee2a671735 100644 --- a/kr/components/drop-down-virtual.md +++ b/kr/components/drop-down-virtual.md @@ -15,7 +15,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-virtual/" >
@@ -132,7 +132,7 @@ You can view the configured example below: + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-virtual/" >
@@ -251,7 +251,7 @@ The result of the above configuration is a drop-down that dynamically loads the + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-remote/" >
diff --git a/kr/components/drop-down.md b/kr/components/drop-down.md index 1f13583545..9a2a38358d 100644 --- a/kr/components/drop-down.md +++ b/kr/components/drop-down.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-4/" >
@@ -74,7 +74,7 @@ If the sample is configured properly, a dropdown with several options should be + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-1/" > @@ -111,7 +111,7 @@ export class MyDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-2/" > @@ -157,7 +157,7 @@ If the sample is configured properly, a list of countries should be displayed a + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-3/" > @@ -235,7 +235,7 @@ You can see the results in the sample below: + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-5/" > @@ -294,7 +294,7 @@ export class MyMenuComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-menu/" > @@ -358,7 +358,7 @@ export class InputDropDownComponent { + iframe-src="{environment:demosBaseUrl}/data-entries/dropdown-sample-4/" >
diff --git a/kr/components/expansion-panel.md b/kr/components/expansion-panel.md index c253fbf04e..83950db88c 100644 --- a/kr/components/expansion-panel.md +++ b/kr/components/expansion-panel.md @@ -16,7 +16,7 @@ The [`IgxExpansionPanel`]({environment:angularApiUrl}/classes/igxexpansionpanelc + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-1/" >
@@ -96,7 +96,7 @@ You can see the results below: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-1/" > @@ -151,7 +151,7 @@ Below we have the results: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-2/" > @@ -244,7 +244,7 @@ After applying all of the changes to our initial component, here is the final re + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-3/" > @@ -341,7 +341,7 @@ You can see the results below: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-6/" > @@ -518,7 +518,7 @@ You can see the results below: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-5/" > @@ -620,7 +620,7 @@ You can see the results below: + iframe-src="{environment:demosBaseUrl}/layouts/expansion-sample-7/" > diff --git a/kr/components/exporter-csv.md b/kr/components/exporter-csv.md index dad4a862d9..f0d17538c9 100644 --- a/kr/components/exporter-csv.md +++ b/kr/components/exporter-csv.md @@ -19,7 +19,7 @@ The exporting functionality is encapsulated in the [`IgxCsvExporterService`]({en + iframe-src="{environment:demosBaseUrl}/services/export-csv/" >
@@ -115,7 +115,7 @@ public exportButtonHandler() { + iframe-src="{environment:demosBaseUrl}/services/export-csv-sample-1/" > diff --git a/kr/components/for-of.md b/kr/components/for-of.md index 02a3847336..4d5a82afa5 100644 --- a/kr/components/for-of.md +++ b/kr/components/for-of.md @@ -14,7 +14,7 @@ In Ignite UI for Angular, [`igxForOf`]({environment:angularApiUrl}/classes/igxfo + iframe-src="{environment:demosBaseUrl}/data-display/igx-for-sample-1/" > diff --git a/kr/components/general/localization.md b/kr/components/general/localization.md index 56967a8e14..297a96351b 100644 --- a/kr/components/general/localization.md +++ b/kr/components/general/localization.md @@ -12,7 +12,7 @@ With only a few lines of code, users can easily localize the strings in Ignite U + iframe-src="{environment:demosBaseUrl}/services/localization-sample-1/" > diff --git a/kr/components/geo-map-display-bing-imagery.md b/kr/components/geo-map-display-bing-imagery.md index fe5b3936bc..8335c949ad 100644 --- a/kr/components/geo-map-display-bing-imagery.md +++ b/kr/components/geo-map-display-bing-imagery.md @@ -6,18 +6,21 @@ _language: kr mentionedTypes: ["XamGeographicMap", "ShapefileConverter"] --- +NOTE: 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: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + # Angular Binding Imagery from Bing Maps Bing Maps is Microsoft’s® licensed geographic imagery mapping service. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component displays geographic imagery from Bing Maps in the map’s background content using the [`IgxBingMapsMapImagery`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxbingmapsmapimagery.html) class. However, by default the map component displays geographic imagery from the Open Street Maps in the map background content requiring you to configure the control to display Bing Maps’ geographic imagery. Prior to using Bing Maps’ geographic imagery, you must register and obtain a Bing Map API key from www.bingmapsportal.com You must use the Bing Maps’ API key to set the BingMapsMapImagery object’s ApiKey property. ## Demo - - + +
diff --git a/kr/components/geo-map.md b/kr/components/geo-map.md index 9289dd7c3c..c5b1042517 100644 --- a/kr/components/geo-map.md +++ b/kr/components/geo-map.md @@ -27,6 +27,12 @@ The map's Series property is used to support rendering an unlimited number of ge The map provides customizable navigation behaviors for navigating map content using mouse, keyboard, or code-behind. +NOTE: 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: + +[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) + ## Dependencies diff --git a/kr/components/grid/groupby.md b/kr/components/grid/groupby.md index 014611b991..70015b0f72 100644 --- a/kr/components/grid/groupby.md +++ b/kr/components/grid/groupby.md @@ -15,7 +15,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby/" > @@ -117,7 +117,7 @@ Groups that span multiple pages are split between them. The group row is visible + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-paging/" > @@ -284,7 +284,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-styling/" > diff --git a/kr/components/grid/paste-excel.md b/kr/components/grid/paste-excel.md index b04eff7b80..3687114071 100644 --- a/kr/components/grid/paste-excel.md +++ b/kr/components/grid/paste-excel.md @@ -25,7 +25,7 @@ Ignite UI for Angular [`IgxGrid`]({environment:angularApiUrl}/classes/igxgridcom + iframe-src="{environment:demosBaseUrl}/grid/grid-paste/" >
diff --git a/kr/components/grid/selection-based-aggregates.md b/kr/components/grid/selection-based-aggregates.md index 26c35d083c..1a4d463edf 100644 --- a/kr/components/grid/selection-based-aggregates.md +++ b/kr/components/grid/selection-based-aggregates.md @@ -44,7 +44,7 @@ Change the selection to see summaries of the currently selected range. + iframe-src="{environment:demosBaseUrl}/grid/grid-selection-custom-summaries/" > diff --git a/kr/components/grids_templates/batch-editing.md b/kr/components/grids_templates/batch-editing.md index eae86d5975..f0cc2ed60e 100644 --- a/kr/components/grids_templates/batch-editing.md +++ b/kr/components/grids_templates/batch-editing.md @@ -48,7 +48,7 @@ _keywords: angular crud, ignite ui for angular, infragistics + iframe-src="{environment:demosBaseUrl}/grid/grid-batch-editing/" >
@@ -59,7 +59,7 @@ _keywords: angular crud, ignite ui for angular, infragistics + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-batchediting/" >
@@ -68,7 +68,7 @@ _keywords: angular crud, ignite ui for angular, infragistics + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-batch-editing/" >
diff --git a/kr/components/grids_templates/collapsible-column-groups.md b/kr/components/grids_templates/collapsible-column-groups.md index 5031dc8fc3..c282878e52 100644 --- a/kr/components/grids_templates/collapsible-column-groups.md +++ b/kr/components/grids_templates/collapsible-column-groups.md @@ -15,7 +15,7 @@ Multi-column headers allow you to have multiple levels of nested columns and col + iframe-src="{environment:demosBaseUrl}/grid/grid-collapsible-groups/" >
@@ -25,7 +25,7 @@ Multi-column headers allow you to have multiple levels of nested columns and col + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-collapsible-groups/" >
@@ -34,7 +34,7 @@ Multi-column headers allow you to have multiple levels of nested columns and col + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-collapsible-column-groups/" >
diff --git a/kr/components/grids_templates/column-resizing.md b/kr/components/grids_templates/column-resizing.md index 4f89911ffd..2cad7ad2d3 100644 --- a/kr/components/grids_templates/column-resizing.md +++ b/kr/components/grids_templates/column-resizing.md @@ -34,7 +34,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/grid/grid-resizing-sample/" >
@@ -43,7 +43,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-resizing/" >
diff --git a/kr/components/grids_templates/conditional-cell-styling.md b/kr/components/grids_templates/conditional-cell-styling.md index 828fd2f8db..6625c684a1 100644 --- a/kr/components/grids_templates/conditional-cell-styling.md +++ b/kr/components/grids_templates/conditional-cell-styling.md @@ -32,7 +32,7 @@ This can be achieved by setting the [`IgxColumnComponent`]({environment:angularA + iframe-src="{environment:demosBaseUrl}/grid/grid-cell-styling/" > } @@ -41,7 +41,7 @@ This can be achieved by setting the [`IgxColumnComponent`]({environment:angularA + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-conditional-cell-style/" > } diff --git a/kr/components/grids_templates/display-density.md b/kr/components/grids_templates/display-density.md index f3c6e82c4a..90dc9bb970 100644 --- a/kr/components/grids_templates/display-density.md +++ b/kr/components/grids_templates/display-density.md @@ -34,7 +34,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/grid/grid-displayDensity/" >
@@ -43,7 +43,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-display-density/" >
@@ -52,7 +52,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-density/" >
diff --git a/kr/components/grids_templates/editing.md b/kr/components/grids_templates/editing.md index 17e289881c..5adee2a090 100644 --- a/kr/components/grids_templates/editing.md +++ b/kr/components/grids_templates/editing.md @@ -31,7 +31,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation + iframe-src="{environment:demosBaseUrl}/grid/grid-editing/" > } @@ -39,7 +39,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-editing/" > } @@ -47,7 +47,7 @@ Ignite UI for Angular @@igComponent component provides a great data manipulation + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-editing/" > } diff --git a/kr/components/grids_templates/export-excel.md b/kr/components/grids_templates/export-excel.md index b8ff1bd740..78eb3b8978 100644 --- a/kr/components/grids_templates/export-excel.md +++ b/kr/components/grids_templates/export-excel.md @@ -35,7 +35,7 @@ The Excel Exporter service can export data to excel from the @@igxName. The data + iframe-src="{environment:demosBaseUrl}/services/export-excel-sample-1/" > } @@ -43,7 +43,7 @@ The Excel Exporter service can export data to excel from the @@igxName. The data + iframe-src="{environment:demosBaseUrl}/services/export-excel-tree-grid-sample/" > } diff --git a/kr/components/grids_templates/filtering.md b/kr/components/grids_templates/filtering.md index 8f2059d85f..712423fecd 100644 --- a/kr/components/grids_templates/filtering.md +++ b/kr/components/grids_templates/filtering.md @@ -30,7 +30,7 @@ Angular grid filtering enables you to display only the records which meet specif + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-sample/" > } @@ -38,7 +38,7 @@ Angular grid filtering enables you to display only the records which meet specif + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering/" > } @@ -46,7 +46,7 @@ Angular grid filtering enables you to display only the records which meet specif + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering/" > } @@ -308,7 +308,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-filter-conditions/" > } @@ -316,7 +316,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-custom/" > } @@ -324,7 +324,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-custom-filtering/" > } @@ -336,7 +336,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-filtering-template-sample/" > } @@ -344,7 +344,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-filtering-template/" > } @@ -352,7 +352,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering-template/" > } diff --git a/kr/components/grids_templates/keyboard-navigation.md b/kr/components/grids_templates/keyboard-navigation.md index dc0198697a..d023bf64bc 100644 --- a/kr/components/grids_templates/keyboard-navigation.md +++ b/kr/components/grids_templates/keyboard-navigation.md @@ -107,7 +107,7 @@ You can try the `actions below` in order to observe the custom keyboard navigati + iframe-src="{environment:demosBaseUrl}/grid/grid-custom-keyboard-navigation/" > } @@ -172,7 +172,7 @@ You can try the `actions below` in order to observe the custom keyboard navigati + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-custom-kb-navigation/" > } @@ -217,7 +217,7 @@ You can try the `actions below` in order to observe the custom keyboard navigati + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-keyboard-navigation/" > } diff --git a/kr/components/grids_templates/multi-column-headers.md b/kr/components/grids_templates/multi-column-headers.md index 525723f365..706e09605c 100644 --- a/kr/components/grids_templates/multi-column-headers.md +++ b/kr/components/grids_templates/multi-column-headers.md @@ -30,7 +30,7 @@ _keywords: column headers, ignite ui for angular, infragistics + iframe-src="{environment:demosBaseUrl}/grid/multi-column-headers/" > } @@ -38,7 +38,7 @@ _keywords: column headers, ignite ui for angular, infragistics + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-multi-column-headers/" > } @@ -46,7 +46,7 @@ _keywords: column headers, ignite ui for angular, infragistics + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-multi-column/" > } diff --git a/kr/components/grids_templates/multi-row-layout.md b/kr/components/grids_templates/multi-row-layout.md index f36325a67a..229d180c02 100644 --- a/kr/components/grids_templates/multi-row-layout.md +++ b/kr/components/grids_templates/multi-row-layout.md @@ -14,7 +14,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-row-layout/" > @@ -107,7 +107,7 @@ The demo below adds additional navigation down/up via the Enter and < + iframe-src="{environment:demosBaseUrl}/grid/grid-mrl-custom-navigation/" > @@ -246,7 +246,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo + iframe-src="{environment:demosBaseUrl}/grid/grid-multi-row-layout-styling/" > diff --git a/kr/components/grids_templates/paging.md b/kr/components/grids_templates/paging.md index d4086f52e0..09d22e5ff0 100644 --- a/kr/components/grids_templates/paging.md +++ b/kr/components/grids_templates/paging.md @@ -33,7 +33,7 @@ Ignite UI for Angular @@igComponent에서 **Paging**은 루트 `@@igSelector` + iframe-src="{environment:demosBaseUrl}/grid/grid-paging-sample/" > } @@ -41,7 +41,7 @@ Ignite UI for Angular @@igComponent에서 **Paging**은 루트 `@@igSelector` + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-paging/" > } @@ -49,7 +49,7 @@ Ignite UI for Angular @@igComponent에서 **Paging**은 루트 `@@igSelector` + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-paging/" >
@@ -445,7 +445,7 @@ public changeTemplate() { + iframe-src="{environment:demosBaseUrl}/grid/grid-remote-paging-sample/" > } @@ -453,7 +453,7 @@ public changeTemplate() { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-remote-paging/" >
diff --git a/kr/components/grids_templates/row-pinning.md b/kr/components/grids_templates/row-pinning.md index 51f8461d6a..2f9c5e428d 100644 --- a/kr/components/grids_templates/row-pinning.md +++ b/kr/components/grids_templates/row-pinning.md @@ -29,7 +29,7 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning/" > } @@ -37,7 +37,7 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning/" > } @@ -45,7 +45,7 @@ One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning/" > } @@ -291,7 +291,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-extra-column/" > } @@ -299,7 +299,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning-extra-column/" > } @@ -307,7 +307,7 @@ public togglePinning(row: IgxGridRow, event) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning-extra-column/" > } @@ -366,7 +366,7 @@ This would allow reordering the rows and moving them between the pinned and unpi + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-drag/" > @@ -447,7 +447,7 @@ If the component is using an [`Emulated`](themes/sass/component-themes.md#view-e + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning-styling/" > } @@ -456,7 +456,7 @@ If the component is using an [`Emulated`](themes/sass/component-themes.md#view-e + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning-styling/" > } @@ -465,7 +465,7 @@ If the component is using an [`Emulated`](themes/sass/component-themes.md#view-e + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning-styling/" > } diff --git a/kr/components/grids_templates/search.md b/kr/components/grids_templates/search.md index 9b956f53f4..7ef27e9708 100644 --- a/kr/components/grids_templates/search.md +++ b/kr/components/grids_templates/search.md @@ -30,7 +30,7 @@ While browsers natively provide content search functionality, most of the time t + iframe-src="{environment:demosBaseUrl}/grid/grid-search-sample/" >
@@ -39,7 +39,7 @@ While browsers natively provide content search functionality, most of the time t + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-search/" >
diff --git a/kr/components/grids_templates/sorting.md b/kr/components/grids_templates/sorting.md index 1d06b27312..df3426c62b 100644 --- a/kr/components/grids_templates/sorting.md +++ b/kr/components/grids_templates/sorting.md @@ -30,7 +30,7 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column + iframe-src="{environment:demosBaseUrl}/grid/grid-sorting-sample/" > } @@ -38,7 +38,7 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-sorting/" > } @@ -46,7 +46,7 @@ In Ignite UI for Angular @@igComponent, data sorting is enabled on a per-column + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sorting/" > } diff --git a/kr/components/grids_templates/state-persistence.md b/kr/components/grids_templates/state-persistence.md index fdb3b63d36..499583d137 100644 --- a/kr/components/grids_templates/state-persistence.md +++ b/kr/components/grids_templates/state-persistence.md @@ -93,7 +93,7 @@ The usefullnes of thеse simple to use single-point API's allows you to achieve + iframe-src="{environment:demosBaseUrl}/grid/grid-state/" > } @@ -116,7 +116,7 @@ public initColumns(column: IgxColumnComponent) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-state/" > } @@ -124,7 +124,7 @@ public initColumns(column: IgxColumnComponent) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-state/" > } --> diff --git a/kr/components/grids_templates/summaries.md b/kr/components/grids_templates/summaries.md index daf2b62ed5..2d88a764a2 100644 --- a/kr/components/grids_templates/summaries.md +++ b/kr/components/grids_templates/summaries.md @@ -30,7 +30,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu + iframe-src="{environment:demosBaseUrl}/grid/grid-summary/" > } @@ -38,7 +38,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary/" > } @@ -46,7 +46,7 @@ The Angular UI grid in Ignite UI for Angular has a **summaries** feature that fu + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-summary/" > } @@ -299,7 +299,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-alldata-summaries/" > } @@ -307,7 +307,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-allData-summary/" > } @@ -315,7 +315,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-allData-summary/" > } @@ -342,7 +342,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/grid/grid-groupby-summary/" > } @@ -366,7 +366,7 @@ class MySummary extends IgxNumberSummaryOperand { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-summary2/" > } diff --git a/kr/components/grids_templates/toolbar.md b/kr/components/grids_templates/toolbar.md index c3e3306d72..71da278081 100644 --- a/kr/components/grids_templates/toolbar.md +++ b/kr/components/grids_templates/toolbar.md @@ -39,7 +39,7 @@ or just any other custom content. The toolbar and the predefined UI components s + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-1/" > } @@ -47,7 +47,7 @@ or just any other custom content. The toolbar and the predefined UI components s + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-4/" > } @@ -55,7 +55,7 @@ or just any other custom content. The toolbar and the predefined UI components s + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-title/" > } @@ -160,7 +160,7 @@ Listed below are the main features of the toolbar with example code for each of + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-2/" > } @@ -168,7 +168,7 @@ Listed below are the main features of the toolbar with example code for each of + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-1/" > } @@ -176,7 +176,7 @@ Listed below are the main features of the toolbar with example code for each of + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-options/" > } @@ -251,7 +251,7 @@ public toolbarExportingHandler(args) { + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-3/" >
@@ -260,7 +260,7 @@ public toolbarExportingHandler(args) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-2/" >
@@ -295,7 +295,7 @@ public toolbarExportingHandler(args) { + iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-sample-4/" >
@@ -304,7 +304,7 @@ public toolbarExportingHandler(args) { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-3/" >
@@ -313,7 +313,7 @@ public toolbarExportingHandler(args) { + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-custom/" >
diff --git a/kr/components/grids_templates/virtualization.md b/kr/components/grids_templates/virtualization.md index 09edfe43e0..789031d861 100644 --- a/kr/components/grids_templates/virtualization.md +++ b/kr/components/grids_templates/virtualization.md @@ -32,7 +32,7 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-2/" > } @@ -41,7 +41,7 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-lod/" >
@@ -70,7 +70,7 @@ Ignite UI for Angular에서 [@@igxName]({environment:angularApiUrl}/classes/@@ig + iframe-src="{environment:demosBaseUrl}/grid/grid-sample-4/" > @@ -118,7 +118,7 @@ public processData() { + iframe-src="{environment:demosBaseUrl}/grid/grid-remote-filtering/" > } @@ -163,7 +163,7 @@ public processData() { + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-remote-filtering/" >
diff --git a/kr/components/hierarchicalgrid/hierarchical-grid.md b/kr/components/hierarchicalgrid/hierarchical-grid.md index 7c6009d628..b4cbffb30d 100644 --- a/kr/components/hierarchicalgrid/hierarchical-grid.md +++ b/kr/components/hierarchicalgrid/hierarchical-grid.md @@ -406,7 +406,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-styling/" > diff --git a/kr/components/icon.md b/kr/components/icon.md index 43e505ff09..5dde0c08a9 100644 --- a/kr/components/icon.md +++ b/kr/components/icon.md @@ -14,7 +14,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-display/icon-sample-1/" > @@ -104,7 +104,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/data-display/svg-icon-sample/" > ### Styling @@ -203,7 +203,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo + iframe-src="{environment:demosBaseUrl}/data-display/icon-styling/" > diff --git a/kr/components/input-group-reactive-forms.md b/kr/components/input-group-reactive-forms.md index fa595c59b4..96e58ab49c 100644 --- a/kr/components/input-group-reactive-forms.md +++ b/kr/components/input-group-reactive-forms.md @@ -17,7 +17,7 @@ The following demo demonstrates [`igx-input-group`]({environment:angularApiUrl}/ + iframe-src="{environment:demosBaseUrl}/data-entries/reactive-forms/" >
diff --git a/kr/components/input-group.md b/kr/components/input-group.md index aa0cd2b0f9..fa7387ac67 100644 --- a/kr/components/input-group.md +++ b/kr/components/input-group.md @@ -13,7 +13,7 @@ Input groups in the Ignite UI for Angular controls allow developers to create ea + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-6/" >
@@ -93,7 +93,7 @@ Our inputs could be styled differently by using the [`type`]({environment:angula + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-5/" > diff --git a/kr/components/label-input.md b/kr/components/label-input.md index 71d3c4b142..f3344addab 100644 --- a/kr/components/label-input.md +++ b/kr/components/label-input.md @@ -15,7 +15,7 @@ The Ignite UI for Angular Input and Label directives are used to create single-l + iframe-src="{environment:demosBaseUrl}/data-entries/input-group-sample-2/" >
diff --git a/kr/components/layout.md b/kr/components/layout.md index a3d21f73a0..3dc29e119e 100644 --- a/kr/components/layout.md +++ b/kr/components/layout.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/layouts/layout/" >
diff --git a/kr/components/linear-progress.md b/kr/components/linear-progress.md index fbb01b8a95..11e84ccc6e 100644 --- a/kr/components/linear-progress.md +++ b/kr/components/linear-progress.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-sample-1/" >
@@ -89,7 +89,7 @@ If all went well, you should see something like the following in your browser: + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar/" >
@@ -159,7 +159,7 @@ So if we set up everything correctly, let's see what happened in the browser: + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-sample-1/" >
@@ -253,7 +253,7 @@ And now let's see it in the browser: + iframe-src="{environment:demosBaseUrl}/data-display/linear-progressbar-sample-2/" >
diff --git a/kr/components/list.md b/kr/components/list.md index e00b38ada5..eddaa883c3 100644 --- a/kr/components/list.md +++ b/kr/components/list.md @@ -15,7 +15,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/lists/list-sample-4/" >
@@ -70,7 +70,7 @@ If all went great, this is how our empty list should look like: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-5/" > @@ -99,7 +99,7 @@ Sometimes there may be a delay in your data loading. In this case you can set th + iframe-src="{environment:demosBaseUrl}/lists/list-sample-6/" > @@ -123,7 +123,7 @@ If all went well, you should see the following in your browser: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-2/" > @@ -191,7 +191,7 @@ After all that our list should now look like that: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-3/" > @@ -368,7 +368,7 @@ And here's the result of all that work: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-4/" >
@@ -514,7 +514,7 @@ Now try panning the list items for yourself: + iframe-src="{environment:demosBaseUrl}/lists/list-sample-7/" >
@@ -590,7 +590,7 @@ Here's an example, in which we apply a background color to the list according to + iframe-src="{environment:demosBaseUrl}/lists/list-item-selection/" > What we are doing is we are adding an additional `selected` property to each data member, which defaults to `false`. Upon list item click, we're resetting all the `selected` properties in the data collection and setting the one corresponding to the clicked item to `true`. Based on the selected property, we're applying a css class to the list item which gives it the selected background. diff --git a/kr/components/mask.md b/kr/components/mask.md index 33e6d6a9af..4e82dfb551 100644 --- a/kr/components/mask.md +++ b/kr/components/mask.md @@ -13,7 +13,7 @@ By applying [`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.htm + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-1/" >
@@ -76,7 +76,7 @@ If the sample is configured properly, an input with the applied formatting mask + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-2/" > @@ -118,7 +118,7 @@ public clear() { + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-3/" > @@ -261,7 +261,7 @@ As a result, a '%' sign should be appended to the value on blur (i.e. when the u + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-4/" > @@ -283,7 +283,7 @@ value = null; + iframe-src="{environment:demosBaseUrl}/data-display/mask-sample-5/" > diff --git a/kr/components/month-picker.md b/kr/components/month-picker.md index 483ffa6580..f94cbaf75f 100644 --- a/kr/components/month-picker.md +++ b/kr/components/month-picker.md @@ -14,7 +14,7 @@ What you see here is a basic Angular Month Picker example with a the component's + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-sample-1/" > @@ -104,7 +104,7 @@ Here is an example of modifying the default format options of the month picker: + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-sample-2/" > @@ -132,7 +132,7 @@ Here is an example of localizing the month picker component: + iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-sample-3/" > diff --git a/kr/components/navbar.md b/kr/components/navbar.md index 64de4b13cb..1d836c718c 100644 --- a/kr/components/navbar.md +++ b/kr/components/navbar.md @@ -16,7 +16,7 @@ The Ignite UI for Angular [`IgxNavbarComponent`]({environment:angularApiUrl}/cla + iframe-src="{environment:demosBaseUrl}/menus/navbar/" >
@@ -95,7 +95,7 @@ If all went well, you should see the following in your browser: + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-1/" >
@@ -136,7 +136,7 @@ Finally, this is how our navbar should look like with its custom action icon: + iframe-src="{environment:demosBaseUrl}/menus/navbar-sample-2/" >
diff --git a/kr/components/navdrawer.md b/kr/components/navdrawer.md index bbccddf141..18f21792f4 100644 --- a/kr/components/navdrawer.md +++ b/kr/components/navdrawer.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer/" >
@@ -101,7 +101,7 @@ And the final result should look like this: + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-simple/" > @@ -140,7 +140,7 @@ Here's how that would would look applied to the previous example: + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-pin/" > @@ -189,7 +189,7 @@ The mini variant is commonly used in a persistent setup, so we've set `pin` and + iframe-src="{environment:demosBaseUrl}/menus/navigation-drawer-mini/" > diff --git a/kr/components/overlay-position.md b/kr/components/overlay-position.md index eabeab6ae3..fe59725cfe 100644 --- a/kr/components/overlay-position.md +++ b/kr/components/overlay-position.md @@ -108,7 +108,7 @@ Changing the horizontal and/or vertical direction of the positioning settings de + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-1/" >
@@ -142,7 +142,7 @@ In the demo below, the overlay element will position itself starting from the ta + iframe-src="{environment:demosBaseUrl}/interactions/overlay-position-sample-2/" >
diff --git a/kr/components/overlay-scroll.md b/kr/components/overlay-scroll.md index 47f5d5697f..f986942c1a 100644 --- a/kr/components/overlay-scroll.md +++ b/kr/components/overlay-scroll.md @@ -68,7 +68,7 @@ The demo below illustrates the difference between the separate [`scrollStrategie + iframe-src="{environment:demosBaseUrl}/interactions/overlay-scroll-sample-2/" >
@@ -81,7 +81,7 @@ If the [`modal`] ({environment:angularApiUrl}/interfaces/overlaysettings.html#mo + iframe-src="{environment:demosBaseUrl}/interactions/overlay-scroll-sample-1/" >
diff --git a/kr/components/overlay.md b/kr/components/overlay.md index aab4cde6ff..87ab678516 100644 --- a/kr/components/overlay.md +++ b/kr/components/overlay.md @@ -105,7 +105,7 @@ In the below demo, we can pass the [IgxCard](card.md#card-demo) through the over + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-1/" >
@@ -190,7 +190,7 @@ Using the [`overlaySettings`] ({environment:angularApiUrl}/interfaces/overlayset + iframe-src="{environment:demosBaseUrl}/interactions/overlay-sample-main-2/" >
diff --git a/kr/components/pivotgrid/pivot-grid-custom.md b/kr/components/pivotgrid/pivot-grid-custom.md index dd1fb96312..6fe7e0d2eb 100644 --- a/kr/components/pivotgrid/pivot-grid-custom.md +++ b/kr/components/pivotgrid/pivot-grid-custom.md @@ -19,7 +19,7 @@ public pivotConfigHierarchy: IPivotConfiguration = { The following example show how to handle scenarios, where the data is already aggregated and how its structure should look like: + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-noop/" alt="Angular Pivot Grid Custom Predefined Aggregations Example"> Users have the ability to achieve certain scenarios by feeding the pivot grid with already aggregated data. diff --git a/kr/components/pivotgrid/pivot-grid-features.md b/kr/components/pivotgrid/pivot-grid-features.md index 34427544d3..b3b43ea163 100644 --- a/kr/components/pivotgrid/pivot-grid-features.md +++ b/kr/components/pivotgrid/pivot-grid-features.md @@ -20,7 +20,7 @@ The Pivot Grid component has additional features and functionalities related to + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-features/" alt="Angular Pivot Grid with Pivot Selector Example"> ## Dimensions filtering diff --git a/kr/components/pivotgrid/pivot-grid.md b/kr/components/pivotgrid/pivot-grid.md index 0cc05ec662..6d5de58632 100644 --- a/kr/components/pivotgrid/pivot-grid.md +++ b/kr/components/pivotgrid/pivot-grid.md @@ -16,7 +16,7 @@ It can be used as a stand-alone component as well as in combination with the Ang + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-datasource/" alt="Angular Pivot Grid with Pivot Selector Example"> # Angular Pivot Grid Configuration @@ -217,7 +217,7 @@ Resulting in the following view, which groups the Product Categories unique colu + iframe-src="{environment:demosBaseUrl}/pivot-grid/pivot-grid-basic/" alt="Angular Pivot Grid Basic Example"> diff --git a/kr/components/query-builder.md b/kr/components/query-builder.md index 267a987502..55d105b496 100644 --- a/kr/components/query-builder.md +++ b/kr/components/query-builder.md @@ -16,7 +16,7 @@ The [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybui + iframe-src="{environment:demosBaseUrl}/interactions/query-builder/query-builder-main/" alt="Angular Query Builder Example">
@@ -360,7 +360,7 @@ Don't forget to include the themes in the same way as it was demonstrated above. + iframe-src="{environment:demosBaseUrl}/interactions/query-builder/query-builder-style/" > >[!NOTE] diff --git a/kr/components/radio-button.md b/kr/components/radio-button.md index 9feeb3a0d7..b8b2fb30ae 100644 --- a/kr/components/radio-button.md +++ b/kr/components/radio-button.md @@ -15,7 +15,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-entries/radio-sample-2/" >
@@ -110,7 +110,7 @@ The Ignite UI for Angular Radio Group directive provides a grouping container th + iframe-src="{environment:demosBaseUrl}/data-entries/radio-group-sample/" >
diff --git a/kr/components/rating.md b/kr/components/rating.md index cf8739e1bf..ab95bb81f6 100644 --- a/kr/components/rating.md +++ b/kr/components/rating.md @@ -11,7 +11,7 @@ The Ignite UI Rating component allows users to view and provide feedback. + iframe-src="{environment:demosBaseUrl}/grid/grid-with-rating/" alt="Angular Rating Example"> @@ -83,7 +83,7 @@ The following application shows one example of how this integration works in a r + iframe-src="{environment:demosBaseUrl}/data-entries/rating-form/" alt="Angular Rating Example"> For further information on the usage of the Rating component, you can check out [this topic]({environment:infragisticsBaseUrl}/products/ignite-ui-web-components/web-components/components/inputs/rating.html). diff --git a/kr/components/ripple.md b/kr/components/ripple.md index b4a054c687..db634c5ac1 100644 --- a/kr/components/ripple.md +++ b/kr/components/ripple.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/interactions/ripple-sample-1/" >
@@ -200,7 +200,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo + iframe-src="{environment:demosBaseUrl}/interactions/ripple-styling/" > diff --git a/kr/components/roundness.md b/kr/components/roundness.md index c1a48ded1f..1e99f823ac 100644 --- a/kr/components/roundness.md +++ b/kr/components/roundness.md @@ -53,7 +53,7 @@ The result from the above code snippets is: + iframe-src="{environment:demosBaseUrl}/theming/shadows-sample/" >
diff --git a/kr/components/shadows.md b/kr/components/shadows.md index 28a65f320c..f9b47dc230 100644 --- a/kr/components/shadows.md +++ b/kr/components/shadows.md @@ -231,7 +231,7 @@ Here is The result from the above code snippets: + iframe-src="{environment:demosBaseUrl}/theming/shadows-sample/" >
diff --git a/kr/components/simple-combo.md b/kr/components/simple-combo.md index 6c394f38f4..2c64f1f3a0 100644 --- a/kr/components/simple-combo.md +++ b/kr/components/simple-combo.md @@ -17,7 +17,7 @@ In this Angular Simple ComboBox example, you can see how users can select the ch + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-main/" alt="Angular Simple ComboBox Example"> @@ -104,7 +104,7 @@ export class MySimpleComboComponent { + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-usage/" > @@ -202,7 +202,7 @@ The following sample demonstrates a scenario where the [igx-simple-combo]({envir + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-cascading/" alt="Angular Cascading Scenario Example">
@@ -323,7 +323,7 @@ The last step is to include the component's theme. + iframe-src="{environment:demosBaseUrl}/lists/simple-combo-styling/" > diff --git a/kr/components/slider/slider-ticks.md b/kr/components/slider/slider-ticks.md index 66ef6c52f5..8c88648de7 100644 --- a/kr/components/slider/slider-ticks.md +++ b/kr/components/slider/slider-ticks.md @@ -44,7 +44,7 @@ public type = SliderType.RANGE; + iframe-src="{environment:demosBaseUrl}/interactions/discrete-slider-ticks-bottom/" > @@ -99,7 +99,7 @@ export class PriceRange { + iframe-src="{environment:demosBaseUrl}/interactions/slider-ticks-bottomtotop-labels/" > @@ -134,7 +134,7 @@ The two buttons above are used just to control/update slider's **value**, but le + iframe-src="{environment:demosBaseUrl}/interactions/slider-secondary-ticks-mirror/" > @@ -158,7 +158,7 @@ public ticksOrientation = TicksOrientation.Top; + iframe-src="{environment:demosBaseUrl}/interactions/slider-primary-ticks-top/" > @@ -182,7 +182,7 @@ The feature has been aligned with the **labels view** feature as well. Let's see + iframe-src="{environment:demosBaseUrl}/interactions/slider-timeframe/" > @@ -227,7 +227,7 @@ From the **tackLabel** callback above, we can see that every **primary** tick ** + iframe-src="{environment:demosBaseUrl}/interactions/slider-tick-labels-template/" > diff --git a/kr/components/slider/slider.md b/kr/components/slider/slider.md index 0d8cc7cb02..377343c490 100644 --- a/kr/components/slider/slider.md +++ b/kr/components/slider/slider.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-1/" >
@@ -66,7 +66,7 @@ If the sample is configured properly, dragging the slider thumb should update th + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-2/" > @@ -115,7 +115,7 @@ If the sample is configured properly, dragging the slider thumb should update th + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-3/" > @@ -149,7 +149,7 @@ class PriceRange { + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-4/" > @@ -164,7 +164,7 @@ In some cases, values near to the minimum and maximum are not appropriate. You c + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-5/" > @@ -212,7 +212,7 @@ If the sample is configured properly, the final result should look like that: + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-1/" > @@ -252,7 +252,7 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd + iframe-src="{environment:demosBaseUrl}/interactions/slider-sample-6/" > diff --git a/kr/components/snackbar.md b/kr/components/snackbar.md index 7de1a14490..0a689b4933 100644 --- a/kr/components/snackbar.md +++ b/kr/components/snackbar.md @@ -12,7 +12,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4/" >
@@ -150,7 +150,7 @@ As a result, a message and three loading dots appear in the snackbar. + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-5/" > #### Snackbar in list @@ -232,7 +232,7 @@ public restore() { + iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4/" > diff --git a/kr/components/splitter.md b/kr/components/splitter.md index 5aa1ed924f..844dfeaad9 100644 --- a/kr/components/splitter.md +++ b/kr/components/splitter.md @@ -12,7 +12,7 @@ The Ignite UI for Angular Splitter component provides the ability to create layo + iframe-src="{environment:demosBaseUrl}/layouts/splitter-horizontal-sample/" > @@ -130,7 +130,7 @@ public typeVertical = SplitterType.Vertical; + iframe-src="{environment:demosBaseUrl}/layouts/splitter-nested-sample/" > @@ -199,7 +199,7 @@ This is the final result from applying your new theme. + iframe-src="{environment:demosBaseUrl}/layouts/splitter-styling-sample/" > diff --git a/kr/components/switch.md b/kr/components/switch.md index 0bdfafbd64..bceba9faeb 100644 --- a/kr/components/switch.md +++ b/kr/components/switch.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/data-entries/switch-sample-2/" >
diff --git a/kr/components/tabbar.md b/kr/components/tabbar.md index 097d889f53..ce27989eb5 100644 --- a/kr/components/tabbar.md +++ b/kr/components/tabbar.md @@ -18,7 +18,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/layouts/tabbar/" > @@ -56,7 +56,7 @@ If all went well, you should see the following in your browser: + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-1/" > @@ -157,7 +157,7 @@ After these modifications our Bottom Navigation should look similar to this: + iframe-src="{environment:demosBaseUrl}/layouts/tabbar-sample-2/" > diff --git a/kr/components/tabs.md b/kr/components/tabs.md index dec620c584..5889be815f 100644 --- a/kr/components/tabs.md +++ b/kr/components/tabs.md @@ -13,7 +13,7 @@ The [`igx-tabs`]({environment:angularApiUrl}/classes/igxtabscomponent.html) comp + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-3/" >
@@ -56,7 +56,7 @@ If the sample is configured properly, the final result should look like that: + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-1/" > @@ -99,7 +99,7 @@ Nevertheless what type of tabs you have chosen, the tab header width is limited + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-2/" > @@ -158,7 +158,7 @@ If the sample is configured properly, the tabs should look like the following ex + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-3/" > @@ -289,7 +289,7 @@ public ngOnInit() { + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-4/" > @@ -380,7 +380,7 @@ const routes: Routes = [ + iframe-src="{environment:demosBaseUrl}/layouts/tabs-sample-5/" > diff --git a/kr/components/texthighlight.md b/kr/components/texthighlight.md index 0bca80908c..cd5b14e03a 100644 --- a/kr/components/texthighlight.md +++ b/kr/components/texthighlight.md @@ -13,7 +13,7 @@ The [`IgxTextHighlight`]({environment:angularApiUrl}/classes/igxtexthighlightdir + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-1/" >
@@ -179,7 +179,7 @@ If the sample is configured properly, the final result should look like that: + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-1/" > @@ -264,7 +264,7 @@ All the rest of the code in the .ts file is identical to the single container ex + iframe-src="{environment:demosBaseUrl}/data-display/text-highlight-2/" > diff --git a/kr/components/themes/examples.md b/kr/components/themes/examples.md index bd6c8e90ce..1de3ced94d 100644 --- a/kr/components/themes/examples.md +++ b/kr/components/themes/examples.md @@ -12,7 +12,7 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them + iframe-src="{environment:demosBaseUrl}/theming/theme-chooser/" >
@@ -38,7 +38,7 @@ The result from the above code snippet looks like this: + iframe-src="{environment:demosBaseUrl}/theming/default-theme-sample/" >
@@ -202,7 +202,7 @@ And the result is: + iframe-src="{environment:demosBaseUrl}/theming/dark-theme-sample/" >
@@ -307,7 +307,7 @@ Now we can easily change our defined themes with only a `click` event: + iframe-src="{environment:demosBaseUrl}/theming/theme-chooser/" >
diff --git a/kr/components/themes/theming-demo.md b/kr/components/themes/theming-demo.md index b78c852142..51d1280b54 100644 --- a/kr/components/themes/theming-demo.md +++ b/kr/components/themes/theming-demo.md @@ -12,7 +12,7 @@ The **Ignite UI for Angular Theming** provides you the ability to customize them + iframe-src="{environment:demosBaseUrl}/theme-chooser/" >
@@ -38,7 +38,7 @@ The result from the above code snippet looks like this: + iframe-src="{environment:demosBaseUrl}/default-theme-sample/" >
@@ -202,7 +202,7 @@ And the result is: + iframe-src="{environment:demosBaseUrl}/dark-theme-sample/" >
@@ -307,7 +307,7 @@ Now we can easily change our defined themes with only a `click` event: + iframe-src="{environment:demosBaseUrl}/theme-chooser/" >
diff --git a/kr/components/time-picker.md b/kr/components/time-picker.md index f5efaca8b2..662b421aa3 100644 --- a/kr/components/time-picker.md +++ b/kr/components/time-picker.md @@ -15,7 +15,7 @@ In general, users can enter a preferred time either through text input or by cho + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-1/" >
@@ -53,7 +53,7 @@ And here's our templated Ignite UI for Angular Time Picker: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-1/" >
@@ -76,7 +76,7 @@ And there we have it: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-2/" >
@@ -107,7 +107,7 @@ The result is as follows: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-8/" >
@@ -124,7 +124,7 @@ And there we have it: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-3/" >
@@ -175,7 +175,7 @@ And there we have it: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-4/" >
@@ -215,7 +215,7 @@ And there we have it: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-dropdown/" >
@@ -253,7 +253,7 @@ And there we have it: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-5/" > @@ -300,7 +300,7 @@ And there we have it, a re-templated Ignite UI for Angular Time Picker with drop + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-6/" > @@ -337,7 +337,7 @@ The result is as follows: + iframe-src="{environment:demosBaseUrl}/scheduling/timepicker-sample-7/" >
diff --git a/kr/components/toast.md b/kr/components/toast.md index f525079300..b1e7f23372 100644 --- a/kr/components/toast.md +++ b/kr/components/toast.md @@ -13,7 +13,7 @@ _language: kr + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-1/" >
@@ -118,7 +118,7 @@ public open(toast) { + iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5/" > diff --git a/kr/components/toggle.md b/kr/components/toggle.md index 437665969a..21858dc2b6 100644 --- a/kr/components/toggle.md +++ b/kr/components/toggle.md @@ -14,7 +14,7 @@ The [`igxToggle`]({environment:angularApiUrl}/classes/igxtoggledirective.html) d + iframe-src="{environment:demosBaseUrl}/interactions/toggle/" > @@ -79,7 +79,7 @@ If all went well, you should see the following in your browser: + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-1/" > @@ -141,7 +141,7 @@ The [`igxToggle`]({environment:angularApiUrl}/classes/igxtoggledirective.html) u + iframe-src="{environment:demosBaseUrl}/interactions/toggle/" > @@ -180,7 +180,7 @@ After these changes the toggle should work exactly in the same way. + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-2/" > @@ -218,7 +218,7 @@ If all went well, it will look like this: + iframe-src="{environment:demosBaseUrl}/interactions/toggle-sample-3/" > diff --git a/kr/components/tooltip.md b/kr/components/tooltip.md index f05a75729d..f6f7ad7d74 100644 --- a/kr/components/tooltip.md +++ b/kr/components/tooltip.md @@ -15,7 +15,7 @@ While most tooltips have a limited number of available positions, with the [`igx + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-simple/" >
@@ -310,7 +310,7 @@ If all went well, this is how our location and tooltip should look like: + iframe-src="{environment:demosBaseUrl}/interactions/tooltip-rich/" >
diff --git a/kr/components/treegrid/load-on-demand.md b/kr/components/treegrid/load-on-demand.md index d531af9c9d..899567520f 100644 --- a/kr/components/treegrid/load-on-demand.md +++ b/kr/components/treegrid/load-on-demand.md @@ -14,7 +14,7 @@ Ignite UI for Angular [`IgxTreeGrid`]({environment:angularApiUrl}/classes/igxtre + iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-load-on-demand/" >
diff --git a/kr/images/general/BingMapsImagery.png b/kr/images/general/BingMapsImagery.png new file mode 100644 index 0000000000..717832e5dc Binary files /dev/null and b/kr/images/general/BingMapsImagery.png differ diff --git a/kr/images/general/BingMapsImagery2.png b/kr/images/general/BingMapsImagery2.png new file mode 100644 index 0000000000..85fe3036f8 Binary files /dev/null and b/kr/images/general/BingMapsImagery2.png differ diff --git a/package-lock.json b/package-lock.json index 6d4bd2470d..879f6135ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "ISC", "dependencies": { - "igniteui-docfx-template": "^3.9.0" + "igniteui-docfx-template": "^3.9.4" }, "devDependencies": { "@stackblitz/sdk": "^1.11.0", @@ -2236,9 +2236,9 @@ ] }, "node_modules/igniteui-docfx-template": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.9.0.tgz", - "integrity": "sha512-/4aCEImB6F0h4TYeNMboHjOVPg7NokR9DhpHu6NNmNpAcgiMe1OIU6NsvKHl723jhZq1iZmf9Zxc3RlirfvBgQ==", + "version": "3.9.4", + "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.9.4.tgz", + "integrity": "sha512-c4lgIcX1Jq5xz2b6aIjxZJHgbweTmFMjyobJqDD4wr0NP/93OlwMxF6gJjOm50xE6AjAI9u/6cpdc9RNvjCJxA==", "dependencies": { "@stackblitz/sdk": "^1.11.0", "anchor-js": "^4.3.0", @@ -6303,9 +6303,9 @@ "dev": true }, "igniteui-docfx-template": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.9.0.tgz", - "integrity": "sha512-/4aCEImB6F0h4TYeNMboHjOVPg7NokR9DhpHu6NNmNpAcgiMe1OIU6NsvKHl723jhZq1iZmf9Zxc3RlirfvBgQ==", + "version": "3.9.4", + "resolved": "https://registry.npmjs.org/igniteui-docfx-template/-/igniteui-docfx-template-3.9.4.tgz", + "integrity": "sha512-c4lgIcX1Jq5xz2b6aIjxZJHgbweTmFMjyobJqDD4wr0NP/93OlwMxF6gJjOm50xE6AjAI9u/6cpdc9RNvjCJxA==", "requires": { "@stackblitz/sdk": "^1.11.0", "anchor-js": "^4.3.0", diff --git a/package.json b/package.json index cfb0fd52b3..ea6b93496b 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "author": "Infragistics", "license": "ISC", "dependencies": { - "igniteui-docfx-template": "^3.9.0" + "igniteui-docfx-template": "^3.9.4" }, "devDependencies": { "@stackblitz/sdk": "^1.11.0",