From 56b48cfa2ac72337eb61a8eb9cd514862a4047a7 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Mon, 22 Jan 2024 16:55:29 +0200 Subject: [PATCH 01/23] Adding all combo topics for React --- doc/en/components/inputs/combo/features.md | 81 +++++++++++++++++++ doc/en/components/inputs/combo/overview.md | 67 +++++++++++++++ .../inputs/combo/single-selection.md | 14 ++++ doc/en/components/inputs/combo/templates.md | 38 +++++++++ docfx/en/components/toc.json | 2 +- 5 files changed, 201 insertions(+), 1 deletion(-) diff --git a/doc/en/components/inputs/combo/features.md b/doc/en/components/inputs/combo/features.md index 0569e39fc..70db67382 100644 --- a/doc/en/components/inputs/combo/features.md +++ b/doc/en/components/inputs/combo/features.md @@ -43,6 +43,18 @@ You will also need to link an additional CSS file to apply the styling to the `S + + +```tsx +import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrComboModule.register(); +IgrSwitchModule.register(); +``` + + + Then, we will add event handlers to all switch components so that we can control the combo features by toggling the switches: ```ts @@ -105,6 +117,24 @@ switchDisable.addEventListener("igcChange", () => { } ``` +```tsx +const comboRef = useRef(null); +const switchCaseSensitiveRef = useRef(null); + +const disableFiltering = (switchComponent: IgrSwitch) => { + comboRef.current.disableFiltering = + switchCaseSensitiveRef.current.disabled = switchComponent.checked; +}; + +const showCaseSencitiveIcon = (switchComponent: IgrSwitch) => { + comboRef.current.caseSensitiveIcon = switchComponent.checked; +}; + +const disableCombo = (switchComponent: IgrSwitch) => { + comboRef.current.disabled = switchComponent.checked; +}; +``` + Note that grouping is enabled/disabled by setting the `GroupKey` property to a corresponding data source field: ```ts @@ -126,6 +156,12 @@ switchGroup.addEventListener("igcChange", () => { } ``` +```tsx +const enableGrouping = (switchComponent: IgrSwitch) => { + comboRef.current.groupKey = switchComponent.checked ? "country" : undefined; + }; +``` + ## Features ### Filtering @@ -142,6 +178,10 @@ Filtering options can be further enhanced by enabling the search case sensitivit ``` +```tsx + +``` + #### Filtering Options The {ProductName} `ComboBox` component exposes one more filtering property that allows passing configuration of both `FilterKey` and `CaseSensitive` options. The `FilterKey` indicates which data source field should be used for filtering the list of options. The `CaseSensitive` option indicates if the filtering should be case-sensitive or not. @@ -157,6 +197,15 @@ const options = { combo.filteringOptions = options; ``` +```tsx +const options = { + filterKey: 'country', + caseSensitive: true +}; + +comboRef.current.filteringOptions = options; +``` + ### Grouping Defining a `GroupKey` option will group the items, according to the provided key: @@ -169,6 +218,10 @@ Defining a `GroupKey` option will group the items, according to the provided key ``` +```tsx + +``` + > [!Note] > The `GroupKey` property will only have effect if your data source consists of complex objects. @@ -184,6 +237,10 @@ The ComboBox component also exposes an option for setting whether groups should ``` +```tsx + +``` + ### Label The `Combo` label can be set easily using the `Label` property: @@ -196,6 +253,10 @@ The `Combo` label can be set easily using the `Label` property: ``` +```tsx + +``` + ### Placeholder A placeholder text can be specified for both the ComboBox component input and the search input placed inside the dropdown menu: @@ -208,6 +269,10 @@ A placeholder text can be specified for both the ComboBox component input and th ``` +```tsx + +``` + ### Autofocus If you want your ComboBox to be automatically focused on page load you can use the following code: @@ -220,6 +285,10 @@ If you want your ComboBox to be automatically focused on page load you can use t ``` +```tsx + +``` + ### Search Input Focus The ComboBox search input is focused by default. To disable this feature and move the focus to the list of options use the `AutofocusList` property as shown below: @@ -232,6 +301,10 @@ The ComboBox search input is focused by default. To disable this feature and mov ``` +```tsx + +``` + ### Required The ComboBox can be marked as required by setting the required property. @@ -244,6 +317,10 @@ The ComboBox can be marked as required by setting the required property. ``` +```tsx + +``` + ### Disable ComboBox You can disable the ComboBox using the `Disabled` property: @@ -256,6 +333,10 @@ You can disable the ComboBox using the `Disabled` property: ``` +```tsx + +``` + ## API Reference diff --git a/doc/en/components/inputs/combo/overview.md b/doc/en/components/inputs/combo/overview.md index eaceff02c..013613e50 100644 --- a/doc/en/components/inputs/combo/overview.md +++ b/doc/en/components/inputs/combo/overview.md @@ -58,6 +58,25 @@ You will also need to link an additional CSS file to apply the styling to the `C ``` + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the {Platform} `ComboBox`, its necessary CSS, and register its module, like so: + +```tsx +import { IgrComboModule, IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrComboModule.register(); +``` + + + >[!WARNING] > The `Combo` component doesn't work with the standard `
` element. Use `Form` instead. @@ -119,6 +138,26 @@ export class Sample { } ``` +```tsx +interface City { + id: string; + name: string; +} + +const cities: City[] = [ + { name: "London", id: "UK01" }, + { name: "Sofia", id: "BG01" }, + { name: "New York", id: "NY01" }, +]; + + +``` + ### Data value and display properties When the combo is bound to a list of complex data (i.e. objects), we need to specify a property that the control will use to handle item selection. The component exposes the following properties: @@ -148,6 +187,16 @@ console.log(combo.value); combo.value = ['NY01', 'UK01']; ``` +```tsx +const comboRef = useRef(null); + +// Given the overview example from above this will return ['BG01'] +console.log(comboRef.current.value); + +// Change the selected items to New York and London +comboRef.current.value = ['NY01', 'UK01']; +``` + ### Selection API The combo component exposes APIs that allow you to change the currently selected items. @@ -191,6 +240,12 @@ combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']); } ``` +```tsx +// Select/deselect items by their IDs as valueKey is set to 'id' +comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]); +comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]); +``` + #### Select/deselect all items: ```ts // Select/deselect all items @@ -210,6 +265,12 @@ combo.deselect(); } ``` +```tsx +// Select/deselect all items +comboRef.current.select([]); +comboRef.current.deselect([]); +``` + If the `ValueKey` property is omitted, you will have to list the items you wish to select/deselect as objects references: ```ts @@ -218,6 +279,12 @@ combo.select([cities[1], cities[5]]); combo.deselect([cities[1], cities[5]]); ``` +```tsx +// Select/deselect values by object references when no valueKey is provided +comboRef.current.select([cities[1], cities[5]]); +comboRef.current.deselect([cities[1], cities[5]]); +``` + `sample="/inputs/combo/selection", height="380", alt="{Platform} Combo Selection Example"` diff --git a/doc/en/components/inputs/combo/single-selection.md b/doc/en/components/inputs/combo/single-selection.md index 072962c4c..21f28c461 100644 --- a/doc/en/components/inputs/combo/single-selection.md +++ b/doc/en/components/inputs/combo/single-selection.md @@ -21,6 +21,10 @@ To enable single-selection and quick filtering, set the `SingleSelect` property ``` +```tsx + +``` + `sample="/inputs/combo/simplified", height="400", alt="{Platform} Single Selection Combo Example"`
@@ -50,6 +54,11 @@ combo.select('BG01'); } ``` +```tsx +// select the item matching the 'BG01' value of the value key field. +comboRef.current.select('BG01'); +``` + To deselect an item without making a new selection, call the `deselect` method. #### Deselecting items: @@ -69,6 +78,11 @@ combo.deselect('BG01'); } ``` +```tsx +// deselect the item matching the 'BG01' value of the value key field. +comboRef.current.select('BG01'); +``` + ## Disabled features Naturally, some configuration options will have no effect in a single selection ComboBox. diff --git a/doc/en/components/inputs/combo/templates.md b/doc/en/components/inputs/combo/templates.md index 13ad32ee6..6c0d5477e 100644 --- a/doc/en/components/inputs/combo/templates.md +++ b/doc/en/components/inputs/combo/templates.md @@ -120,6 +120,14 @@ To render a custom header above the list of options pass content to the `header` ``` +```tsx + +
+ Header content goes here +
+ +``` + ### Footer Slot To render a custom footer below the list of options pass content to the `footer` slot: @@ -137,6 +145,14 @@ To render a custom footer below the list of options pass content to the `footer` ``` +```tsx + +
+ Footer content goes here +
+ +``` + ### Empty List Slot To render a custom content when the filtering operation returns no result, use the `empty` slot: @@ -152,6 +168,12 @@ To render a custom content when the filtering operation returns no result, use t ``` +```tsx + +
¯\_(ツ)_/¯
+ +``` + ### Toggle Icon Slot The toggle icon in the combo input can also be modified via the `toggle-icon` slot: @@ -167,6 +189,14 @@ The toggle icon in the combo input can also be modified via the `toggle-icon` sl ``` +```tsx + + + + + +``` + ### Clear Icon Slot The clear icon can be changed via the `clear-icon` slot: @@ -182,6 +212,14 @@ The clear icon can be changed via the `clear-icon` slot: ``` +```tsx + + + + + +``` + ## API Reference diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index e05b20a36..c7ca05ac0 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -1616,7 +1616,7 @@ "href": "inputs/chip.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Combo Box", "href": "inputs/combo/overview.md", "items": [ From c6898263f1241578afb09f39fa0cab5da7a0d95c Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 23 Jan 2024 09:54:20 +0200 Subject: [PATCH 02/23] Fixing code snippets in the added combo topics --- doc/en/components/inputs/combo/features.md | 42 ++++++++++--------- doc/en/components/inputs/combo/overview.md | 12 ++++++ .../inputs/combo/single-selection.md | 10 ++++- 3 files changed, 44 insertions(+), 20 deletions(-) diff --git a/doc/en/components/inputs/combo/features.md b/doc/en/components/inputs/combo/features.md index 70db67382..dadf42f1c 100644 --- a/doc/en/components/inputs/combo/features.md +++ b/doc/en/components/inputs/combo/features.md @@ -57,6 +57,24 @@ IgrSwitchModule.register(); Then, we will add event handlers to all switch components so that we can control the combo features by toggling the switches: +```tsx +const comboRef = useRef(null); +const switchCaseSensitiveRef = useRef(null); + +const disableFiltering = (switchComponent: IgrSwitch) => { + comboRef.current.disableFiltering = + switchCaseSensitiveRef.current.disabled = switchComponent.checked; +}; + +const showCaseSencitiveIcon = (switchComponent: IgrSwitch) => { + comboRef.current.caseSensitiveIcon = switchComponent.checked; +}; + +const disableCombo = (switchComponent: IgrSwitch) => { + comboRef.current.disabled = switchComponent.checked; +}; +``` + ```ts let combo = document.getElementById('combo') as IgcComboComponent; @@ -117,24 +135,6 @@ switchDisable.addEventListener("igcChange", () => { } ``` -```tsx -const comboRef = useRef(null); -const switchCaseSensitiveRef = useRef(null); - -const disableFiltering = (switchComponent: IgrSwitch) => { - comboRef.current.disableFiltering = - switchCaseSensitiveRef.current.disabled = switchComponent.checked; -}; - -const showCaseSencitiveIcon = (switchComponent: IgrSwitch) => { - comboRef.current.caseSensitiveIcon = switchComponent.checked; -}; - -const disableCombo = (switchComponent: IgrSwitch) => { - comboRef.current.disabled = switchComponent.checked; -}; -``` - Note that grouping is enabled/disabled by setting the `GroupKey` property to a corresponding data source field: ```ts @@ -159,7 +159,7 @@ switchGroup.addEventListener("igcChange", () => { ```tsx const enableGrouping = (switchComponent: IgrSwitch) => { comboRef.current.groupKey = switchComponent.checked ? "country" : undefined; - }; +}; ``` ## Features @@ -188,6 +188,7 @@ The {ProductName} `ComboBox` component exposes one more filtering property that The following code snippet shows how to filter the cities from our data source by country instead of name. We are also making the filtering case-sensitive by default: + ```ts const options = { filterKey: 'country', @@ -196,7 +197,9 @@ const options = { combo.filteringOptions = options; ``` + + ```tsx const options = { filterKey: 'country', @@ -205,6 +208,7 @@ const options = { comboRef.current.filteringOptions = options; ``` + ### Grouping diff --git a/doc/en/components/inputs/combo/overview.md b/doc/en/components/inputs/combo/overview.md index 013613e50..3a51aa942 100644 --- a/doc/en/components/inputs/combo/overview.md +++ b/doc/en/components/inputs/combo/overview.md @@ -204,11 +204,13 @@ The combo component exposes APIs that allow you to change the currently selected Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the `select` and `deselect` methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a `ValueKey` for your combo component, then you should pass the value keys of the items you would like to select/deselect: #### Select/deselect some items: + ```ts // Select/deselect items by their IDs as valueKey is set to 'id' combo.select(['BG01', 'BG02', 'BG03', 'BG04']); combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']); ``` + ```razor ```tsx // Select/deselect items by their IDs as valueKey is set to 'id' comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]); comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]); ``` + #### Select/deselect all items: + ```ts // Select/deselect all items combo.select(); combo.deselect(); ``` + ```razor @code { @@ -265,25 +271,31 @@ combo.deselect(); } ``` + ```tsx // Select/deselect all items comboRef.current.select([]); comboRef.current.deselect([]); ``` + If the `ValueKey` property is omitted, you will have to list the items you wish to select/deselect as objects references: + ```ts // Select/deselect values by object references when no valueKey is provided combo.select([cities[1], cities[5]]); combo.deselect([cities[1], cities[5]]); ``` + + ```tsx // Select/deselect values by object references when no valueKey is provided comboRef.current.select([cities[1], cities[5]]); comboRef.current.deselect([cities[1], cities[5]]); ``` + `sample="/inputs/combo/selection", height="380", alt="{Platform} Combo Selection Example"` diff --git a/doc/en/components/inputs/combo/single-selection.md b/doc/en/components/inputs/combo/single-selection.md index 21f28c461..690cafdac 100644 --- a/doc/en/components/inputs/combo/single-selection.md +++ b/doc/en/components/inputs/combo/single-selection.md @@ -39,10 +39,12 @@ Here's how to select/deselect an item programmatically in a single selection com #### Selecting items: + ```ts // select the item matching the 'BG01' value of the value key field. combo.select('BG01'); ``` + ```razor @@ -54,19 +56,23 @@ combo.select('BG01'); } ``` + ```tsx // select the item matching the 'BG01' value of the value key field. comboRef.current.select('BG01'); ``` + To deselect an item without making a new selection, call the `deselect` method. #### Deselecting items: + ```ts // deselect the item matching the 'BG01' value of the value key field. combo.deselect('BG01'); ``` + ```razor @@ -78,10 +84,12 @@ combo.deselect('BG01'); } ``` + ```tsx // deselect the item matching the 'BG01' value of the value key field. -comboRef.current.select('BG01'); +comboRef.current.deselect('BG01'); ``` + ## Disabled features From 3bef481ce5dea1cd2fbfaf6a1ef72c8b18c769e4 Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Wed, 24 Jan 2024 16:27:20 +0200 Subject: [PATCH 03/23] docs(date-time-input): add topic for React --- doc/en/components/inputs/date-time-input.md | 71 ++++++++++++++++++--- docfx/en/components/toc.json | 2 +- 2 files changed, 63 insertions(+), 10 deletions(-) diff --git a/doc/en/components/inputs/date-time-input.md b/doc/en/components/inputs/date-time-input.md index 8092b0385..62727e56e 100644 --- a/doc/en/components/inputs/date-time-input.md +++ b/doc/en/components/inputs/date-time-input.md @@ -33,6 +33,24 @@ For a complete introduction to the {ProductName}, read the [*Getting Started*](. + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the `DateTimeInput`, its necessary CSS, and register its module, like so: + +```tsx +import { IgrDateTimeInput, IgrDateTimeInputModule } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +IgrDateTimeInputModule.register(); +``` + + + Before using the `DateTimeInput`, you need to register it as follows: @@ -40,7 +58,7 @@ Before using the `DateTimeInput`, you need to register it as follows: ### Value binding -The easiest way to set the value of the `DateTimeInput` component is by passing a Date object to the `value` property: +The easiest way to set the value of the `DateTimeInput` component is by passing a Date object to the `Value` property: ```typescript const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent; @@ -49,12 +67,19 @@ const date = new Date(); input.value = date; ``` +```tsx +public dateTimeInputRef(input: IgrDateTimeInput) { + if (!input) { return; } + input.value = new Date(); +} +``` + The `DateTimeInput` also accepts [ISO 8601](https://tc39.es/ecma262/#sec-date-time-string-format) strings. The string can be a full `ISO` string, in the format `YYYY-MM-DDTHH:mm:ss.sssZ` or it could be separated into date-only and time-only portions. ##### Date-only -If a date-only string is bound to the `value` property of the component, it needs to be in the format `YYYY-MM-DD`. The `inputFormat` is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be `T00:00:00`. +If a date-only string is bound to the `Value` property of the component, it needs to be in the format `YYYY-MM-DD`. The `InputFormat` is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be `T00:00:00`. ##### Time-only Time-only strings are normally not defined in the `ECMA` specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - `HH:mm:ss`. The 12 hour format is not supported. @@ -84,10 +109,10 @@ The `DateTimeInput` has intuitive keyboard navigation that makes it easy to incr The `DateTimeInput` supports different display and input formats. -It uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) which allows it to support predefined format options, such as `long` and `short`, `medium` and `full`. Additionally, it can also accept a custom string constructed from supported characters, such as `dd-MM-yy`. Also, if no `displayFormat` is provided, the component will use the `inputFormat` as such. +It uses [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) which allows it to support predefined format options, such as `long` and `short`, `medium` and `full`. Additionally, it can also accept a custom string constructed from supported characters, such as `dd-MM-yy`. Also, if no `DisplayFormat` is provided, the component will use the `InputFormat` as such. ### Input Format -The table bellow shows formats that are supported by the component's `inputFormat`: +The table bellow shows formats that are supported by the component's `InputFormat`: |Format|Description| |-------|----------| @@ -105,12 +130,16 @@ The table bellow shows formats that are supported by the component's `inputForma | `mm` | Minutes with an explicitly set leading zero. | | `tt` | AM/PM section for 12-hour format. | -To set a specific input format, pass it as a string to the `DateTimeInput`. This will set both the expected user input format and the `mask`. Additionally, the `inputFormat` is locale based, so if none is provided, the editor will default to `dd/MM/yyyy`. +To set a specific input format, pass it as a string to the `DateTimeInput`. This will set both the expected user input format and the `mask`. Additionally, the `InputFormat` is locale based, so if none is provided, the editor will default to `dd/MM/yyyy`. ```html ``` +```tsx + +``` + If all went well, you should see the following in your browser: `sample="/inputs/date-time-input/input-format-display-format", height="150", alt="{Platform} Date Time Input Input Format Display Format Example"` @@ -170,7 +199,7 @@ Furthermore, users can construct a displayFormat string using the supported symb ## Min/max value -You can specify `minValue` and `maxValue` properties to restrict input and control the validity of the component. Just like the `value` property, they can be of type `string`. +You can specify `MinValue` and `MaxValue` properties to restrict input and control the validity of the component. Just like the `Value` property, they can be of type `string`. ```ts const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent; @@ -182,17 +211,28 @@ input.minValue = new Date(2021, 0, 1); ``` +```tsx +public dateTimeInputRef(input: IgrDateTimeInput) { + if (!input) { return; } + input.minValue = new Date(2021, 0, 1); +} +``` + +```tsx + +``` + If all went well, the component will be `invalid` if the value is greater or lower than the given dates. Check out the example below: `sample="/inputs/date-time-input/min-max-value", height="150", alt="{Platform} Date Time Input Min Max Value Example"` ## Step up/down -The `DateTimeInput` exposes public `stepUp` and `stepDown` methods. They increment or decrement a specific `DatePart` of the currently set date and time and can be used in a couple of ways. +The `DateTimeInput` exposes public `StepUp` and `StepDown` methods. They increment or decrement a specific `DatePart` of the currently set date and time and can be used in a couple of ways. -In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified `inputFormat` and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional `delta` parameter of type number which can be used to set the stepUp/stepDown step. +In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified `InputFormat` and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional `delta` parameter of type number which can be used to set the stepUp/stepDown step. -Additionally, `spinDelta` is a property that can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, mouse wheel or with the `stepUp` and `stepDown` methods, as long as they don't have the delta parameter provided since it will take precedence over `spinDelta`. +Additionally, `SpinDelta` is a property that can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, mouse wheel or with the `StepUp` and `StepDown` methods, as long as they don't have the delta parameter provided since it will take precedence over `SpinDelta`. ```ts const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent; @@ -206,6 +246,19 @@ const spinDelta: DatePartDeltas = { input.spinDelta = spinDelta; ``` +```tsx +private spinDelta: IgrDatePartDeltas = { + date: 2, + month: 3, + year: 10, +}; + +public dateTimeInputRef(input: IgrDateTimeInput) { + if (!input) { return; } + input.spinDelta = this.spinDelta; +} +``` + Try it in the example below: `sample="/inputs/date-time-input/step-up-down", height="150", alt="{Platform} Date Time Input Step Up/Down Example"` diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index eb7e28747..66d38a169 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -1671,7 +1671,7 @@ "href": "inputs/mask-input.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Date Time Input", "href": "inputs/date-time-input.md" }, From addf198ae0008f9ae5c201c2206c87943d988ff6 Mon Sep 17 00:00:00 2001 From: IvanKitanov17 Date: Thu, 28 Mar 2024 09:47:42 +0200 Subject: [PATCH 04/23] Add hgrid row-drag topic --- doc/en/components/grids/_shared/row-drag.md | 49 +++++++++++++++++++++ docfx/en/components/toc.json | 2 +- 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/doc/en/components/grids/_shared/row-drag.md b/doc/en/components/grids/_shared/row-drag.md index 4a1201d9a..f87dd1fd1 100644 --- a/doc/en/components/grids/_shared/row-drag.md +++ b/doc/en/components/grids/_shared/row-drag.md @@ -316,6 +316,55 @@ The drag handle icon can be templated using the grid's `DragIndicatorIconTemplat To do so, we can use the `DragIndicatorIcon` to pass a template inside of the `{ComponentSelector}`'s body: + + +```tsx + function dragIndicatorIconTemplate(ctx: IgrHierarchicalGridEmptyTemplateContext) { + return ( + <> + + + ); + } + + + +``` + +```razor + + + +private RenderFragment dragIndicatorIconTemplate = (context) => +{ + return @
+ +
; +}; +``` + + + +```html +<{ComponentSelector} row-draggable="true"> + +`` + +```ts +constructor() { + var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent; + grid.dragIndicatorIcon = this.dragIndicatorIconTemplate; +} + +public dragIndicatorIconTemplate = (ctx: IgcHierarchicalGridEmptyTemplateContext) => { + return html``; +} +``` + + + + + ```html <{ComponentSelector}> diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index 4af519a1b..9711fe405 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -495,7 +495,7 @@ "status": "NEW" }, { - "exclude": ["Angular", "Blazor", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Row Dragging", "href": "grids/hierarchical-grid/row-drag.md", "status": "NEW" From adef97a2cdfaf0ed5687b69e313ee0bec7755b89 Mon Sep 17 00:00:00 2001 From: IvanKitanov17 Date: Thu, 28 Mar 2024 14:46:37 +0200 Subject: [PATCH 05/23] Adding code snippets for row-reorder sample --- doc/en/components/grids/_shared/row-drag.md | 94 +++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/doc/en/components/grids/_shared/row-drag.md b/doc/en/components/grids/_shared/row-drag.md index f87dd1fd1..e6c1afbaf 100644 --- a/doc/en/components/grids/_shared/row-drag.md +++ b/doc/en/components/grids/_shared/row-drag.md @@ -740,6 +740,8 @@ export class TreeGridRowReorderComponent { + + ```typescript export class HGridRowReorderComponent { public rowDragStart(args: any): void { @@ -791,6 +793,98 @@ export class HGridRowReorderComponent { } ``` + + + +```tsx + public webHierarchicalGridReorderRowHandler(sender: IgrHierarchicalGrid, args: IgrRowDragEndEventArgs): void { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = this.hierarchicalGrid; + grid.collapseAll(); + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); + } + + public getCurrentRowIndex(rowList: any[], cursorPosition: any) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; + } +``` + + + +```typescript +public webGridReorderRowHandler(args: CustomEvent): void { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0] as any; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +} +public getCurrentRowIndex(rowList: any[], cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + + +```razor + + +//In JavaScript +igRegisterScript("WebGridReorderRowHandler", (args) => { + const ghostElement = args.detail.dragDirective.ghostElement; + const dragElementPos = ghostElement.getBoundingClientRect(); + const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; + const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); + const currRowIndex = this.getCurrentRowIndex(rows, + { x: dragElementPos.x, y: dragElementPos.y }); + if (currRowIndex === -1) { return; } + // remove the row that was dragged and place it onto its new location + grid.deleteRow(args.detail.dragData.key); + grid.data.splice(currRowIndex, 0, args.detail.dragData.data); +}, false); + +function getCurrentRowIndex(rowList, cursorPosition) { + for (const row of rowList) { + const rowRect = row.getBoundingClientRect(); + if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && + cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { + // return the index of the targeted row + return parseInt(row.attributes["data-rowindex"].value); + } + } + return -1; +} +``` + + With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. From a8a3b6840b724d88eb19dda3980effc63fa91718 Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Fri, 29 Mar 2024 15:46:09 +0200 Subject: [PATCH 06/23] docs(date-time-input): update topic --- doc/en/components/inputs/date-time-input.md | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/doc/en/components/inputs/date-time-input.md b/doc/en/components/inputs/date-time-input.md index 62727e56e..bfe00ba39 100644 --- a/doc/en/components/inputs/date-time-input.md +++ b/doc/en/components/inputs/date-time-input.md @@ -232,8 +232,12 @@ The `DateTimeInput` exposes public `StepUp` and `StepDown` methods. They increme In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified `InputFormat` and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional `delta` parameter of type number which can be used to set the stepUp/stepDown step. + + Additionally, `SpinDelta` is a property that can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, mouse wheel or with the `StepUp` and `StepDown` methods, as long as they don't have the delta parameter provided since it will take precedence over `SpinDelta`. + + ```ts const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent; @@ -246,19 +250,6 @@ const spinDelta: DatePartDeltas = { input.spinDelta = spinDelta; ``` -```tsx -private spinDelta: IgrDatePartDeltas = { - date: 2, - month: 3, - year: 10, -}; - -public dateTimeInputRef(input: IgrDateTimeInput) { - if (!input) { return; } - input.spinDelta = this.spinDelta; -} -``` - Try it in the example below: `sample="/inputs/date-time-input/step-up-down", height="150", alt="{Platform} Date Time Input Step Up/Down Example"` From ce78c7a392565ede790280fb6c8346d69288f3e9 Mon Sep 17 00:00:00 2001 From: IvanKitanov17 Date: Mon, 1 Apr 2024 08:27:37 +0300 Subject: [PATCH 07/23] docs(tabs): Add tabs topic for react --- doc/en/components/layouts/tabs.md | 23 +++++++++++++++++++++-- docfx/en/components/toc.json | 2 +- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/doc/en/components/layouts/tabs.md b/doc/en/components/layouts/tabs.md index d7a11d6e0..b2a7cb3b1 100644 --- a/doc/en/components/layouts/tabs.md +++ b/doc/en/components/layouts/tabs.md @@ -19,7 +19,7 @@ The {Platform} Tabs example below displays three different tabs aligned in a sin ## How to use Tabs with {ProductName} - + First, you need to install the {ProductName} by running the following command: @@ -27,10 +27,14 @@ First, you need to install the {ProductName} by running the following command: npm install {PackageWebComponents} ``` - + Before using the `Tabs`, you need to register it as follows: +```tsx +IgrTabsModule.register(); +``` + ```razor // in Program.cs file @@ -70,6 +74,17 @@ Simple `Tabs` declaration is done as follows: ``` +```tsx + + Tab 1 + Tab 2 + Tab 3 + Panel 1 + Panel 2 + Panel 3 + +``` + ### Selection The `Tabs` emits `Change` event when the user selects an item either by key press or click. The `Select` method allows you to select a tab by specifying its panel as string value. @@ -90,6 +105,10 @@ A tab is disabled by setting the `Disabled` attribute: Tab 1 ``` +```tsx +Tab 1 +``` + ### Alignment The `Alignment` property controls how {Platform} tabs are positioned. It accepts the following values: diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index 9711fe405..047dece82 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -1505,7 +1505,7 @@ "status": "" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Tabs", "href": "layouts/tabs.md", "status": "" From 823c1bc81b183982ce7bcaf0de20b091f7ab7f5a Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Tue, 2 Apr 2024 11:58:57 +0300 Subject: [PATCH 08/23] docs(tab): Adressing comments --- doc/en/components/layouts/tabs.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/doc/en/components/layouts/tabs.md b/doc/en/components/layouts/tabs.md index b2a7cb3b1..35759dfe2 100644 --- a/doc/en/components/layouts/tabs.md +++ b/doc/en/components/layouts/tabs.md @@ -19,7 +19,7 @@ The {Platform} Tabs example below displays three different tabs aligned in a sin ## How to use Tabs with {ProductName} - + First, you need to install the {ProductName} by running the following command: @@ -27,11 +27,23 @@ First, you need to install the {ProductName} by running the following command: npm install {PackageWebComponents} ``` - + + + + +First, you need to the install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + + Before using the `Tabs`, you need to register it as follows: ```tsx +import { IgrTabsModule, IgrTabs, IgrTab, IgrTabPanel} from "igniteui-react"; + IgrTabsModule.register(); ``` From afd517cec62ecdbaf528b5c6b35ccb15444c0ecc Mon Sep 17 00:00:00 2001 From: IvanKitanov17 Date: Wed, 3 Apr 2024 15:02:46 +0300 Subject: [PATCH 09/23] docs(tab):Making Styling into separate section --- doc/en/components/layouts/tabs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/en/components/layouts/tabs.md b/doc/en/components/layouts/tabs.md index 35759dfe2..443c25be9 100644 --- a/doc/en/components/layouts/tabs.md +++ b/doc/en/components/layouts/tabs.md @@ -162,7 +162,7 @@ Each tab has default slot to display information - icon, text or both and `prefi -### Styling +## Styling The `Tabs` component exposes CSS parts for all of its elements: From 020d42984ac19a7a8c6e1f1cabafb8db03523666 Mon Sep 17 00:00:00 2001 From: IvanKitanov17 Date: Thu, 4 Apr 2024 07:55:57 +0300 Subject: [PATCH 10/23] docs(tab):Reverting unnecessary changes --- doc/en/components/grids/_shared/row-drag.md | 145 -------------------- docfx/en/components/toc.json | 2 +- 2 files changed, 1 insertion(+), 146 deletions(-) diff --git a/doc/en/components/grids/_shared/row-drag.md b/doc/en/components/grids/_shared/row-drag.md index e6c1afbaf..6f9b56bf9 100644 --- a/doc/en/components/grids/_shared/row-drag.md +++ b/doc/en/components/grids/_shared/row-drag.md @@ -316,55 +316,6 @@ The drag handle icon can be templated using the grid's `DragIndicatorIconTemplat To do so, we can use the `DragIndicatorIcon` to pass a template inside of the `{ComponentSelector}`'s body: - - -```tsx - function dragIndicatorIconTemplate(ctx: IgrHierarchicalGridEmptyTemplateContext) { - return ( - <> - - - ); - } - - - -``` - -```razor - - - -private RenderFragment dragIndicatorIconTemplate = (context) => -{ - return @
- -
; -}; -``` - - - -```html -<{ComponentSelector} row-draggable="true"> - -`` - -```ts -constructor() { - var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent; - grid.dragIndicatorIcon = this.dragIndicatorIconTemplate; -} - -public dragIndicatorIconTemplate = (ctx: IgcHierarchicalGridEmptyTemplateContext) => { - return html``; -} -``` - - - - - ```html <{ComponentSelector}> @@ -740,8 +691,6 @@ export class TreeGridRowReorderComponent { - - ```typescript export class HGridRowReorderComponent { public rowDragStart(args: any): void { @@ -793,100 +742,6 @@ export class HGridRowReorderComponent { } ``` - - - -```tsx - public webHierarchicalGridReorderRowHandler(sender: IgrHierarchicalGrid, args: IgrRowDragEndEventArgs): void { - const ghostElement = args.detail.dragDirective.ghostElement; - const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = this.hierarchicalGrid; - grid.collapseAll(); - const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); - const currRowIndex = this.getCurrentRowIndex(rows, - { x: dragElementPos.x, y: dragElementPos.y }); - if (currRowIndex === -1) { return; } - // remove the row that was dragged and place it onto its new location - grid.deleteRow(args.detail.dragData.key); - grid.data.splice(currRowIndex, 0, args.detail.dragData.data); - } - - public getCurrentRowIndex(rowList: any[], cursorPosition: any) { - for (const row of rowList) { - const rowRect = row.getBoundingClientRect(); - if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && - cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { - // return the index of the targeted row - return parseInt(row.attributes["data-rowindex"].value); - } - } - return -1; - } -``` - - - -```typescript -public webGridReorderRowHandler(args: CustomEvent): void { - const ghostElement = args.detail.dragDirective.ghostElement; - const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0] as any; - const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row")); - const currRowIndex = this.getCurrentRowIndex(rows, - { x: dragElementPos.x, y: dragElementPos.y }); - if (currRowIndex === -1) { return; } - // remove the row that was dragged and place it onto its new location - grid.deleteRow(args.detail.dragData.key); - grid.data.splice(currRowIndex, 0, args.detail.dragData.data); -} -public getCurrentRowIndex(rowList: any[], cursorPosition) { - for (const row of rowList) { - const rowRect = row.getBoundingClientRect(); - if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && - cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { - // return the index of the targeted row - return parseInt(row.attributes["data-rowindex"].value); - } - } - return -1; -} -``` - - - -```razor - - -//In JavaScript -igRegisterScript("WebGridReorderRowHandler", (args) => { - const ghostElement = args.detail.dragDirective.ghostElement; - const dragElementPos = ghostElement.getBoundingClientRect(); - const grid = document.getElementsByTagName("igc-hierarchical-grid")[0]; - const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-hierarchical-grid-row")); - const currRowIndex = this.getCurrentRowIndex(rows, - { x: dragElementPos.x, y: dragElementPos.y }); - if (currRowIndex === -1) { return; } - // remove the row that was dragged and place it onto its new location - grid.deleteRow(args.detail.dragData.key); - grid.data.splice(currRowIndex, 0, args.detail.dragData.data); -}, false); - -function getCurrentRowIndex(rowList, cursorPosition) { - for (const row of rowList) { - const rowRect = row.getBoundingClientRect(); - if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY && - cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) { - // return the index of the targeted row - return parseInt(row.attributes["data-rowindex"].value); - } - } - return -1; -} -``` - - - - With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index 2ffc78f49..063e1b296 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -495,7 +495,7 @@ "status": "NEW" }, { - "exclude": ["Angular"], + "exclude": ["Angular", "Blazor", "React", "WebComponents"], "name": "Row Dragging", "href": "grids/hierarchical-grid/row-drag.md", "status": "NEW" From 56b6d76e13ece8d8e53de3f17fc89052e16390b7 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Mon, 8 Apr 2024 14:47:18 +0300 Subject: [PATCH 11/23] docs(grids): list correct dependencies --- doc/en/components/grids/data-grid.md | 6 +----- doc/en/components/grids/hierarchical-grid/overview.md | 7 +------ doc/en/components/grids/tree-grid/overview.md | 6 +----- 3 files changed, 3 insertions(+), 16 deletions(-) diff --git a/doc/en/components/grids/data-grid.md b/doc/en/components/grids/data-grid.md index b31cd760b..1784901f7 100644 --- a/doc/en/components/grids/data-grid.md +++ b/doc/en/components/grids/data-grid.md @@ -70,7 +70,7 @@ In this {ProductName} Grid example, you can see how users can do both basic and ### Dependencies -To get started with the {Platform} Data Grid, first you need to install the {ProductName} package. +To get started with the {Platform} Data Grid, first you need to install the {ProductName} grids package. @@ -93,13 +93,9 @@ Afterwards, you may start implementing the control by adding the following names -When installing the {Platform} grid package, the core, inputs and layout packages must also be installed. ```cmd -npm install --save {PackageCore} npm install --save {PackageGrids} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} ``` You also need to include the following import to use the grid: diff --git a/doc/en/components/grids/hierarchical-grid/overview.md b/doc/en/components/grids/hierarchical-grid/overview.md index 6bc5b02c1..5f12bc9a7 100644 --- a/doc/en/components/grids/hierarchical-grid/overview.md +++ b/doc/en/components/grids/hierarchical-grid/overview.md @@ -20,7 +20,7 @@ In this {Platform} grid example you can see how users can visualize hierarchical ### Dependencies -To get started with the {Platform} hierarchical grid, first you need to install the {ProductName} package. +To get started with the {Platform} hierarchical grid, first you need to install the {ProductName} grids package. @@ -45,13 +45,8 @@ Afterwards, you may start implementing the control by adding the following names -When installing the {Platform} hierarchical grid package, the core package must also be installed. - ```cmd -npm install --save {PackageCore} npm install --save {PackageGrids} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} ``` You also need to include the following import to use the grid: diff --git a/doc/en/components/grids/tree-grid/overview.md b/doc/en/components/grids/tree-grid/overview.md index 6c82d4ae6..b2058e7fb 100644 --- a/doc/en/components/grids/tree-grid/overview.md +++ b/doc/en/components/grids/tree-grid/overview.md @@ -23,7 +23,7 @@ In this example, you can see how users can manipulate hierarchical or flat data. ### Dependencies -To get started with the {Platform} tree grid, first you need to install the {ProductName} package. +To get started with the {Platform} tree grid, first you need to install the {ProductName} grids package. @@ -48,12 +48,8 @@ Afterwards, you may start implementing the control by adding the following names -When installing the {Platform} tree grid package, the core package must also be installed. - ```cmd -npm install --save {PackageCore} npm install --save {PackageGrids} -npm install --save {PackageInputs} ``` From 0845fb1f443343e204736016b10206e6eeb7430a Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Mon, 22 Apr 2024 15:22:18 +0300 Subject: [PATCH 12/23] Fix typo and fix the item and group header templates --- doc/en/components/inputs/combo/features.md | 2 +- doc/en/components/inputs/combo/templates.md | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/doc/en/components/inputs/combo/features.md b/doc/en/components/inputs/combo/features.md index dadf42f1c..c4cb5b94b 100644 --- a/doc/en/components/inputs/combo/features.md +++ b/doc/en/components/inputs/combo/features.md @@ -66,7 +66,7 @@ const disableFiltering = (switchComponent: IgrSwitch) => { switchCaseSensitiveRef.current.disabled = switchComponent.checked; }; -const showCaseSencitiveIcon = (switchComponent: IgrSwitch) => { +const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => { comboRef.current.caseSensitiveIcon = switchComponent.checked; }; diff --git a/doc/en/components/inputs/combo/templates.md b/doc/en/components/inputs/combo/templates.md index 6c0d5477e..921d64113 100644 --- a/doc/en/components/inputs/combo/templates.md +++ b/doc/en/components/inputs/combo/templates.md @@ -21,6 +21,7 @@ The {ProductName} ComboBox component allows defining custom templates for differ The `itemTemplate` is a custom template that if defined should be used when rendering items in the list of options. + ```ts import { ComboItemTemplate } from 'igniteui-webcomponents'; @@ -32,6 +33,7 @@ const itemTemplate: ComboItemTemplate = ({ item }) => { combo.itemTempate = itemTemplate; ``` + To template your items in a Blazor app, you need to define a template in a separate JavaScript file. Let's create a new file under the `wwwroot` directory called `templates.js`. @@ -69,6 +71,7 @@ Then in our application we can refer to the template we declared via the `ItemTe The `groupHeaderTemplate` is a custom template that if defined should be used when rendering group headers in the list of options. + ```ts import { ComboItemTemplate } from 'igniteui-webcomponents'; @@ -78,6 +81,7 @@ const groupHeaderTemplate: ComboItemTemplate = ({ item }) => { combo.groupHeaderTemplate = groupHeaderTemplate; ``` + First define the group header template: From 79e013f27efeab222463da01a9924125f34a4f3b Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 23 Apr 2024 10:10:20 +0300 Subject: [PATCH 13/23] Include item template and group header template snippets for React --- doc/en/components/inputs/combo/templates.md | 38 +++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/doc/en/components/inputs/combo/templates.md b/doc/en/components/inputs/combo/templates.md index 921d64113..196d6b855 100644 --- a/doc/en/components/inputs/combo/templates.md +++ b/doc/en/components/inputs/combo/templates.md @@ -64,9 +64,26 @@ Then in our application we can refer to the template we declared via the `ItemTe ```razor ``` - + +```tsx + + +function renderItemTemplate(props: { dataContext: any}): any { + return ( + {props.dataContext.name} [{props.dataContext.id}] + ); +} +``` + + ### Group Header Template The `groupHeaderTemplate` is a custom template that if defined should be used when rendering group headers in the list of options. @@ -101,9 +118,26 @@ Then in our application we can refer to the template we declared via the `GroupH ```razor ``` - + +```tsx + + +function renderGroupHeaderTemplate(props: { dataContext: any}): any { + return ( + Country of {props.dataContext.country} + ); +} +``` + + ## Slots Other than custom templates, the {ProductName} ComboBox component exposes several slots that allow users to pass custom content to different combo parts. From b4d251b59927fef48e58b292adbf96a765b93878 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Tue, 23 Apr 2024 12:02:26 +0300 Subject: [PATCH 14/23] docs(grids): list igniteui-react as a dependency --- doc/en/components/grids/data-grid.md | 13 +++++++++++-- .../components/grids/hierarchical-grid/overview.md | 13 +++++++++++-- doc/en/components/grids/tree-grid/overview.md | 11 ++++++++++- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/doc/en/components/grids/data-grid.md b/doc/en/components/grids/data-grid.md index 1784901f7..cc9e3dacc 100644 --- a/doc/en/components/grids/data-grid.md +++ b/doc/en/components/grids/data-grid.md @@ -70,7 +70,7 @@ In this {ProductName} Grid example, you can see how users can do both basic and ### Dependencies -To get started with the {Platform} Data Grid, first you need to install the {ProductName} grids package. +To get started with the {Platform} Data Grid, first you need to install the {PackageCommon} package.`{PackageGrids}` package.`{PackageCommon}` and `{PackageGrids}` packages. @@ -92,11 +92,20 @@ Afterwards, you may start implementing the control by adding the following names ``` - + +```cmd +npm install --save {PackageGrids} +``` + + ```cmd +npm install --save {PackageCommon} npm install --save {PackageGrids} ``` + + + You also need to include the following import to use the grid: diff --git a/doc/en/components/grids/hierarchical-grid/overview.md b/doc/en/components/grids/hierarchical-grid/overview.md index 7c056fb37..e7c8f8a84 100644 --- a/doc/en/components/grids/hierarchical-grid/overview.md +++ b/doc/en/components/grids/hierarchical-grid/overview.md @@ -20,7 +20,7 @@ In this {Platform} grid example you can see how users can visualize hierarchical ### Dependencies -To get started with the {Platform} hierarchical grid, first you need to install the {ProductName} grids package. +To get started with the {Platform} hierarchical grid, first you need to install the {PackageCommon} package.`{PackageGrids}` package.`{PackageCommon}` and `{PackageGrids}` packages. @@ -43,11 +43,20 @@ Afterwards, you may start implementing the control by adding the following names - + +```cmd +npm install --save {PackageGrids} +``` + + ```cmd +npm install --save {PackageCommon} npm install --save {PackageGrids} ``` + + + You also need to include the following import to use the grid: diff --git a/doc/en/components/grids/tree-grid/overview.md b/doc/en/components/grids/tree-grid/overview.md index b2058e7fb..4a2c2bc31 100644 --- a/doc/en/components/grids/tree-grid/overview.md +++ b/doc/en/components/grids/tree-grid/overview.md @@ -23,7 +23,7 @@ In this example, you can see how users can manipulate hierarchical or flat data. ### Dependencies -To get started with the {Platform} tree grid, first you need to install the {ProductName} grids package. +To get started with the {Platform} tree grid, first you need to install the {PackageCommon} package.`{PackageGrids}` package.`{PackageCommon}` and `{PackageGrids}` packages. @@ -48,9 +48,18 @@ Afterwards, you may start implementing the control by adding the following names + ```cmd npm install --save {PackageGrids} ``` + + + +```cmd +npm install --save {PackageCommon} +npm install --save {PackageGrids} +``` + From 5f7b4b19d0dab0c436da30083023c0580391166f Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Wed, 24 Apr 2024 16:48:29 +0300 Subject: [PATCH 15/23] docs(tree-grid): enable column types sample --- doc/en/components/grids/_shared/column-types.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/doc/en/components/grids/_shared/column-types.md b/doc/en/components/grids/_shared/column-types.md index 5fae37101..b474a520b 100644 --- a/doc/en/components/grids/_shared/column-types.md +++ b/doc/en/components/grids/_shared/column-types.md @@ -11,14 +11,14 @@ namespace: Infragistics.Controls The {Platform} {ComponentTitle} provides a default handling of *number*, *string*, *date*, *boolean*, *currency* and *percent* column data types, based on which the appearance of the default and editing templates will be present. - + ## {Platform} {ComponentTitle} Column Types Example `sample="/{ComponentSample}/column-data-types", height="550", alt="{Platform} {ComponentTitle} column data types"` - + ## {Platform} {ComponentTitle} Default Template @@ -624,4 +624,3 @@ public init(column: IgxColumnComponent) { * For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) * [Editing](editing.md) * [Summaries](summaries.md) - From 39d3c7263f10538d0e542e1cca8aac623aa26e90 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Wed, 24 Apr 2024 15:56:48 -0400 Subject: [PATCH 16/23] mdd-chart-highlighting mdd-chart-highlighting --- doc/en/components/bullet-graph.md | 74 +++++++++++++++++ .../components/charts/types/treemap-chart.md | 14 ++++ doc/en/components/linear-gauge.md | 81 +++++++++++++++++++ doc/en/components/radial-gauge.md | 69 ++++++++++++++++ 4 files changed, 238 insertions(+) diff --git a/doc/en/components/bullet-graph.md b/doc/en/components/bullet-graph.md index 91e63c485..fc10393b7 100644 --- a/doc/en/components/bullet-graph.md +++ b/doc/en/components/bullet-graph.md @@ -257,6 +257,80 @@ Performance value is the primary measure displayed by the component and it is vi `sample="/gauges/bullet-graph/measures", height="125", alt="{Platform} bullet graph measures"` +## Highlight Value + +The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the `Value` appear with a lower opacity. A good example is if `Value` is 50 and `HighlightValue` is set to 25. This would represent a performance of 50% regardless of what the value of `TargetValue` is set to. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue` to something lower than `Value`. + +```html + + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + +`sample="/gauges/bullet-graph/highlight-needle", height="125", alt="{Platform} bullet graph highlight needle"` ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. diff --git a/doc/en/components/charts/types/treemap-chart.md b/doc/en/components/charts/types/treemap-chart.md index 82823a569..6bc142535 100644 --- a/doc/en/components/charts/types/treemap-chart.md +++ b/doc/en/components/charts/types/treemap-chart.md @@ -94,7 +94,21 @@ In the following example, the treemap demonstrates the ability of changing the l `sample="/charts/tree-map/styling", height="600", alt="{Platform} Treemap Styling"` +### {Platform} Treemap Highlighting +In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set `HighlightingMode`to Brighten or FadeOthers. + +`sample="/charts/tree-map/highlighting", height="600", alt="{Platform} Treemap Highlighting"` + +## {Platform} Treemap Percent based highlighting + +`HighlightedItemsSource`: Specifies the datasource to read highlighted values from. If null then highlighted values are read from the ItemsSource property. +`HighlightedValueMemberPath`: Specifies the name of the property in the datasource where the highlighted values are read. +`HighlightedValueOpacity`: Controls the opacity of the normal value behind the highlighted value. +`HighlightedValuesDisplayMode`: Enables or disables highlighted values. + - Auto: The treemap decides what mode to use. + - Overlay: The treemap displays highlighted values over top the normal value with a slight opacity applied to the normal value. + - Hidden: The treemap does not show highlighted values.
diff --git a/doc/en/components/linear-gauge.md b/doc/en/components/linear-gauge.md index 0e4c63f30..fd5e6cf19 100644 --- a/doc/en/components/linear-gauge.md +++ b/doc/en/components/linear-gauge.md @@ -254,6 +254,87 @@ This is the primary measure displayed by the linear gauge component and is visua `sample="/gauges/linear-gauge/needle", height="125", alt="{Platform} linear gauge needle"` +## Highlight Needle + +The linear gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. + +```html + + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + +`sample="/gauges/linear-gauge/highlight-needle", height="125", alt="{Platform} linear gauge highlight needle"` ## Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state. diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index f2936624a..a2bb32d7c 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -649,6 +649,75 @@ You can enable an interactive mode of the gauge (using `IsNeedleDraggingEnabled` `sample="/gauges/radial-gauge/needle", height="320", alt="{Platform} radial gauge needle"` +## Highlight Needle + +The radial gauge can be modified to show a second needle. This will make the main needle's `Value` appear with a lower opacity. To enable this first set `HighlightValueDisplayMode` to Overlay and then apply a `HighlightValue`. + +```html + + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + +`sample="/gauges/radial-gauge/highlight-needle", height="125", alt="{Platform} radial gauge highlight needle"` ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the radial gauge with all features and visuals enabled. From 73bc66882b652123b58fd73ca07d2e9767af4217 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Thu, 25 Apr 2024 13:58:55 -0400 Subject: [PATCH 17/23] mdd-data-filtering mdd-data-filtering --- .../charts/features/chart-data-filtering | 53 +++++++++++++++++++ .../components/general-changelog-dv-blazor.md | 4 ++ .../components/general-changelog-dv-react.md | 2 + doc/en/components/general-changelog-dv-wc.md | 2 + doc/en/components/general-changelog-dv.md | 2 + .../charts/features/chart-data-filtering | 53 +++++++++++++++++++ .../charts/features/chart-data-filtering | 53 +++++++++++++++++++ 7 files changed, 169 insertions(+) create mode 100644 doc/en/components/charts/features/chart-data-filtering create mode 100644 doc/jp/components/charts/features/chart-data-filtering create mode 100644 doc/kr/components/charts/features/chart-data-filtering diff --git a/doc/en/components/charts/features/chart-data-filtering b/doc/en/components/charts/features/chart-data-filtering new file mode 100644 index 000000000..5b6e0ff95 --- /dev/null +++ b/doc/en/components/charts/features/chart-data-filtering @@ -0,0 +1,53 @@ +--- +title: {Platform} Chart Data Filtering | Data Visualization | Infragistics +_description: Infragistics' {Platform} Chart Data Filtering +_keywords: {Platform} Charts, Filtering, Infragistics +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +--- + +# {Platform} Chart Data Filtering + +Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. + +A complete list of valid expressions and keywords to form a query string can be found here: + +[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris) + +> NOTE: Any incorrect filter applied will result with an empty chart. + +## {Platform} Chart Data Filter Example + +The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the `InitialFilter` property, to update the chart visual and thus filtering out the other decades out. + +`sample="/charts/category-chart/data-filter", height="500", alt="{Platform} Data Filter Example"` + +
+ +The `InitialFilter` property is a string that requires the following syntax in order to filter properly. The value requires sets of parenthesesthat include both the filter expression definition, column and value associated with the record(s) filtering in. + +eg. To show all countries that start with the letter B: + +"(startswith(Country, 'B'))" + +eg. Concatenating more than one expression: + +"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))" + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- `CategoryChart` +- `IsTransitionInEnabled` +- `TransitionInDuration` +- `TransitionInMode` \ No newline at end of file diff --git a/doc/en/components/general-changelog-dv-blazor.md b/doc/en/components/general-changelog-dv-blazor.md index ea19f4ec9..9dcc4a5c0 100644 --- a/doc/en/components/general-changelog-dv-blazor.md +++ b/doc/en/components/general-changelog-dv-blazor.md @@ -12,6 +12,10 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerChanges-23-2-APR2}** +### {PackageCharts} (Charts) + +Data Filtering via the `InitialFilter` property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. + - `XamBulletGraph` - The Performance bar will now reflect a difference between the value and new `HighlightValue` when the `HighlightValueDisplayMode` is applied to the 'Overlay' setting. The highlight value will show a filtered/subset measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time. - `XamLinearGauge` diff --git a/doc/en/components/general-changelog-dv-react.md b/doc/en/components/general-changelog-dv-react.md index e62da127a..28204b91b 100644 --- a/doc/en/components/general-changelog-dv-react.md +++ b/doc/en/components/general-changelog-dv-react.md @@ -13,6 +13,8 @@ All notable changes for each version of {ProductName} are documented on this pag ### {PackageCharts} + - New Data Filtering via the `InitialFilter` property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. + - `XamRadialChart` - New Label Mode The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. diff --git a/doc/en/components/general-changelog-dv-wc.md b/doc/en/components/general-changelog-dv-wc.md index 01cbf1b8c..d03e13944 100644 --- a/doc/en/components/general-changelog-dv-wc.md +++ b/doc/en/components/general-changelog-dv-wc.md @@ -13,6 +13,8 @@ All notable changes for each version of {ProductName} are documented on this pag ### {PackageCharts} + - New Data Filtering via the `InitialFilter` property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. + - `XamRadialChart` - New Label Mode The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. diff --git a/doc/en/components/general-changelog-dv.md b/doc/en/components/general-changelog-dv.md index efa8200c1..eb8c6cc6b 100644 --- a/doc/en/components/general-changelog-dv.md +++ b/doc/en/components/general-changelog-dv.md @@ -19,6 +19,8 @@ All notable changes for each version of {ProductName} are documented on this pag ### {PackageCharts} + - New Data Filtering via the `InitialFilter` property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. + - `XamRadialChart` - New Label Mode The `CategoryAngleAxis` for the now exposes a `LabelMode` property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area. diff --git a/doc/jp/components/charts/features/chart-data-filtering b/doc/jp/components/charts/features/chart-data-filtering new file mode 100644 index 000000000..5b6e0ff95 --- /dev/null +++ b/doc/jp/components/charts/features/chart-data-filtering @@ -0,0 +1,53 @@ +--- +title: {Platform} Chart Data Filtering | Data Visualization | Infragistics +_description: Infragistics' {Platform} Chart Data Filtering +_keywords: {Platform} Charts, Filtering, Infragistics +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +--- + +# {Platform} Chart Data Filtering + +Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. + +A complete list of valid expressions and keywords to form a query string can be found here: + +[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris) + +> NOTE: Any incorrect filter applied will result with an empty chart. + +## {Platform} Chart Data Filter Example + +The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the `InitialFilter` property, to update the chart visual and thus filtering out the other decades out. + +`sample="/charts/category-chart/data-filter", height="500", alt="{Platform} Data Filter Example"` + +
+ +The `InitialFilter` property is a string that requires the following syntax in order to filter properly. The value requires sets of parenthesesthat include both the filter expression definition, column and value associated with the record(s) filtering in. + +eg. To show all countries that start with the letter B: + +"(startswith(Country, 'B'))" + +eg. Concatenating more than one expression: + +"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))" + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- `CategoryChart` +- `IsTransitionInEnabled` +- `TransitionInDuration` +- `TransitionInMode` \ No newline at end of file diff --git a/doc/kr/components/charts/features/chart-data-filtering b/doc/kr/components/charts/features/chart-data-filtering new file mode 100644 index 000000000..5b6e0ff95 --- /dev/null +++ b/doc/kr/components/charts/features/chart-data-filtering @@ -0,0 +1,53 @@ +--- +title: {Platform} Chart Data Filtering | Data Visualization | Infragistics +_description: Infragistics' {Platform} Chart Data Filtering +_keywords: {Platform} Charts, Filtering, Infragistics +mentionedTypes: ["CategoryChart"] +namespace: Infragistics.Controls.Charts +--- + +# {Platform} Chart Data Filtering + +Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart. + +A complete list of valid expressions and keywords to form a query string can be found here: + +[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris) + +> NOTE: Any incorrect filter applied will result with an empty chart. + +## {Platform} Chart Data Filter Example + +The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the `InitialFilter` property, to update the chart visual and thus filtering out the other decades out. + +`sample="/charts/category-chart/data-filter", height="500", alt="{Platform} Data Filter Example"` + +
+ +The `InitialFilter` property is a string that requires the following syntax in order to filter properly. The value requires sets of parenthesesthat include both the filter expression definition, column and value associated with the record(s) filtering in. + +eg. To show all countries that start with the letter B: + +"(startswith(Country, 'B'))" + +eg. Concatenating more than one expression: + +"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))" + + +## Additional Resources + +You can find more information about related chart features in these topics: + +- [Chart Annotations](chart-annotations.md) +- [Chart Highlighting](chart-highlighting.md) +- [Chart Tooltips](chart-tooltips.md) + +## API References + +The following is a list of API members mentioned in the above sections: + +- `CategoryChart` +- `IsTransitionInEnabled` +- `TransitionInDuration` +- `TransitionInMode` \ No newline at end of file From f425b25c0d6247106174d0228548eca95ebf5818 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Fri, 26 Apr 2024 13:06:01 +0300 Subject: [PATCH 18/23] Updating JA - Combo topics, Tabs. --- doc/jp/components/inputs/combo/features.md | 85 +++++++++++++++++++ doc/jp/components/inputs/combo/overview.md | 81 +++++++++++++++++- .../inputs/combo/single-selection.md | 22 +++++ doc/jp/components/inputs/combo/templates.md | 78 +++++++++++++++++ doc/jp/components/layouts/tabs.md | 34 +++++++- docfx/jp/components/toc.json | 4 +- 6 files changed, 300 insertions(+), 4 deletions(-) diff --git a/doc/jp/components/inputs/combo/features.md b/doc/jp/components/inputs/combo/features.md index 4ee7bdd38..1aaad9e5b 100644 --- a/doc/jp/components/inputs/combo/features.md +++ b/doc/jp/components/inputs/combo/features.md @@ -44,8 +44,38 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); + + +```tsx +import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrComboModule.register(); +IgrSwitchModule.register(); +``` + + + 次に、スイッチを切り替えてコンボ機能を制御できるように、すべてのスイッチ コンポーネントにイベント ハンドラーを追加します。 +```tsx +const comboRef = useRef(null); +const switchCaseSensitiveRef = useRef(null); + +const disableFiltering = (switchComponent: IgrSwitch) => { + comboRef.current.disableFiltering = + switchCaseSensitiveRef.current.disabled = switchComponent.checked; +}; + +const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => { + comboRef.current.caseSensitiveIcon = switchComponent.checked; +}; + +const disableCombo = (switchComponent: IgrSwitch) => { + comboRef.current.disabled = switchComponent.checked; +}; +``` + ```ts let combo = document.getElementById('combo') as IgcComboComponent; @@ -127,6 +157,12 @@ switchGroup.addEventListener("igcChange", () => { } ``` +```tsx +const enableGrouping = (switchComponent: IgrSwitch) => { + comboRef.current.groupKey = switchComponent.checked ? "country" : undefined; +}; +``` + ## 機能 ### フィルタリング @@ -143,12 +179,17 @@ switchGroup.addEventListener("igcChange", () => { ``` +```tsx + +``` + #### フィルタリング オプション {ProductName} `ComboBox` コンポーネントは、`FilterKey` オプションと `CaseSensitive` オプションの両方の構成を渡すことができるフィルター プロパティをもう 1 つ公開しています。`FilterKey` は、オプションのリストをフィルタリングするためにどのデータ ソース フィールドを使用する必要があるかを示します。`CaseSensitive` オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。 次のコード スニペットは、名前ではなく国でデータ ソースから都市をフィルター処理する方法を示しています。また、デフォルトで大文字と小文字を区別するフィルタリングを行います。 + ```ts const options = { filterKey: 'country', @@ -157,6 +198,18 @@ const options = { combo.filteringOptions = options; ``` + + + +```tsx +const options = { + filterKey: 'country', + caseSensitive: true +}; + +comboRef.current.filteringOptions = options; +``` + ### グループ化 @@ -170,6 +223,10 @@ combo.filteringOptions = options; ``` +```tsx + +``` + > [!Note] > `GroupKey` プロパティは、データ ソースが複雑なオブジェクトで構成されている場合にのみ有効です。 @@ -185,6 +242,10 @@ combo.filteringOptions = options; ``` +```tsx + +``` + ### ラベル `Combo` ラベルは、`Label` プロパティを使用して簡単に設定できます。 @@ -197,6 +258,10 @@ combo.filteringOptions = options; ``` +```tsx + +``` + ### プレースホルダー コンボボックス コンポーネント入力とドロップダウン メニュー内に配置された検索入力の両方に、プレースホルダー テキストを指定できます。 @@ -209,6 +274,10 @@ combo.filteringOptions = options; ``` +```tsx + +``` + ### オートフォーカス コンボボックスをページの読み込みに自動的にフォーカスさせたい場合は、次のコードを使用できます。 @@ -221,6 +290,10 @@ combo.filteringOptions = options; ``` +```tsx + +``` + ### 検索入力のフォーカス コンボボックスの検索入力はデフォルトでフォーカスされています。この機能を無効にしてフォーカスをオプションのリストに移動するには、以下に示すように `AutofocusList` プロパティを使用します。 @@ -233,6 +306,10 @@ combo.filteringOptions = options; ``` +```tsx + +``` + ### 必須 required プロパティを設定することで、コンボボックスを必須としてマークできます。 @@ -245,6 +322,10 @@ required プロパティを設定することで、コンボボックスを必 ``` +```tsx + +``` + ### コンボボックスを無効にする `Disabled` プロパティを使用してコンボボックスを無効にできます。 @@ -257,6 +338,10 @@ required プロパティを設定することで、コンボボックスを必 ``` +```tsx + +``` + ## API リファレンス diff --git a/doc/jp/components/inputs/combo/overview.md b/doc/jp/components/inputs/combo/overview.md index a5a9f0068..61bc59d9e 100644 --- a/doc/jp/components/inputs/combo/overview.md +++ b/doc/jp/components/inputs/combo/overview.md @@ -59,6 +59,25 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); ``` + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、{Platform} `ComboBox` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { IgrComboModule, IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrComboModule.register(); +``` + + + >[!WARNING] > `Combo` コンポーネントは標準の `` 要素では機能しません。代わりに `Form` を使用してください。 @@ -120,6 +139,26 @@ export class Sample { } ``` +```tsx +interface City { + id: string; + name: string; +} + +const cities: City[] = [ + { name: "London", id: "UK01" }, + { name: "Sofia", id: "BG01" }, + { name: "New York", id: "NY01" }, +]; + + +``` + ### データ値と表示プロパティ コンボは複雑なデータ (オブジェクト) の配列にバインドされている場合、コントロールが項目の選択を処理するために使用するプロパティを指定する必要があります。コンポーネントは以下のプロパティを公開します: @@ -149,6 +188,16 @@ console.log(combo.value); combo.value = ['NY01', 'UK01']; ``` +```tsx +const comboRef = useRef(null); + +// Given the overview example from above this will return ['BG01'] +console.log(comboRef.current.value); + +// Change the selected items to New York and London +comboRef.current.value = ['NY01', 'UK01']; +``` + ### 選択 API コンボ コンポーネントは、現在選択されている項目を変更できる API を公開します。 @@ -156,11 +205,13 @@ combo.value = ['NY01', 'UK01']; ユーザーの操作によってオプションのリストから項目を選択する以外に、プログラムで項目を選択することもできます。これは、`select` および `deselect` メソッドを介して行われます。項目の配列をこれらのメソッドに渡すことができます。メソッドが引数なしで呼び出された場合、呼び出されたメソッドに応じて、すべての項目が選択 / 選択解除されます。コンボ コンポーネントに `ValueKey` を指定した場合は、選択 / 選択解除する項目の値キーを渡す必要があります。 #### 一部の項目を選択 / 選択解除: + ```ts // Select/deselect items by their IDs as valueKey is set to 'id' combo.select(['BG01', 'BG02', 'BG03', 'BG04']); combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']); ``` + ```razor +```tsx +// Select/deselect items by their IDs as valueKey is set to 'id' +comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]); +comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]); +``` + + #### すべての項目を選択 / 選択解除: + ```ts // Select/deselect all items combo.select(); combo.deselect(); ``` + ```razor @code { @@ -211,15 +272,33 @@ combo.deselect(); } ``` + +```tsx +// Select/deselect all items +comboRef.current.select([]); +comboRef.current.deselect([]); +``` + + `ValueKey` プロパティを省略した場合は、オブジェクト参照として選択 / 選択解除する項目を列挙する必要があります。 + ```ts // Select/deselect values by object references when no valueKey is provided combo.select([cities[1], cities[5]]); combo.deselect([cities[1], cities[5]]); ``` + + + +```tsx +// Select/deselect values by object references when no valueKey is provided +comboRef.current.select([cities[1], cities[5]]); +comboRef.current.deselect([cities[1], cities[5]]); +``` + -`sample="/inputs/combo/selection", height="400", alt="{Platform} Combo 選択の例"` +`sample="/inputs/combo/selection", height="380", alt="{Platform} Combo 選択の例"` diff --git a/doc/jp/components/inputs/combo/single-selection.md b/doc/jp/components/inputs/combo/single-selection.md index 0ec80bd4d..501820b4f 100644 --- a/doc/jp/components/inputs/combo/single-selection.md +++ b/doc/jp/components/inputs/combo/single-selection.md @@ -22,6 +22,10 @@ _language: ja ``` +```tsx + +``` + `sample="/inputs/combo/simplified", height="400", alt="{Platform} 単一選択コンボの例"`
@@ -36,10 +40,12 @@ _language: ja #### 項目の選択: + ```ts // select the item matching the 'BG01' value of the value key field. combo.select('BG01'); ``` + ```razor @@ -51,14 +57,23 @@ combo.select('BG01'); } ``` + +```tsx +// select the item matching the 'BG01' value of the value key field. +comboRef.current.select('BG01'); +``` + + 新たに選択せずに項目の選択を解除するには、`deselect` メソッドを呼び出します。 #### 項目の選択解除: + ```ts // deselect the item matching the 'BG01' value of the value key field. combo.deselect('BG01'); ``` + ```razor @@ -70,6 +85,13 @@ combo.deselect('BG01'); } ``` + +```tsx +// deselect the item matching the 'BG01' value of the value key field. +comboRef.current.deselect('BG01'); +``` + + ## 無効な機能 当然のことながら、一部の構成オプションは単一選択 ComboBox では効果がありません。 diff --git a/doc/jp/components/inputs/combo/templates.md b/doc/jp/components/inputs/combo/templates.md index 9286e2e11..266dcb53d 100644 --- a/doc/jp/components/inputs/combo/templates.md +++ b/doc/jp/components/inputs/combo/templates.md @@ -22,6 +22,7 @@ _language: ja `itemTemplate` はカスタム テンプレートであり、定義されている場合は、オプションのリスト内の項目を描画するときに使用する必要があります。 + ```ts import { ComboItemTemplate } from 'igniteui-webcomponents'; @@ -33,6 +34,7 @@ const itemTemplate: ComboItemTemplate = ({ item }) => { combo.itemTempate = itemTemplate; ``` + Blazor アプリで項目をテンプレート化するには、別の JavaScript ファイルでテンプレートを定義する必要があります。`wwwroot` ディレクトリの下に `templates.js` という名前の新しいファイルを作成します。 @@ -66,10 +68,29 @@ igRegisterScript("ComboItemTemplate", itemTemplate, false); + +```tsx + + +function renderItemTemplate(props: { dataContext: any}): any { + return ( + {props.dataContext.name} [{props.dataContext.id}] + ); +} +``` + + ### Group Header Template (グループ ヘッダー テンプレート) `groupHeaderTemplate` はカスタム テンプレートであり、定義されている場合は、オプションのリストでグループ ヘッダーを描画するときに使用する必要があります。 + ```ts import { ComboItemTemplate } from 'igniteui-webcomponents'; @@ -79,6 +100,7 @@ const groupHeaderTemplate: ComboItemTemplate = ({ item }) => { combo.groupHeaderTemplate = groupHeaderTemplate; ``` + まず、グループ ヘッダー テンプレートを定義します。 @@ -101,6 +123,24 @@ igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false) + +```tsx + + +function renderGroupHeaderTemplate(props: { dataContext: any}): any { + return ( + Country of {props.dataContext.country} + ); +} +``` + + ## スロット カスタム テンプレート以外に、{ProductName} コンボボックス コンポーネントは、ユーザーがカスタム コンテンツをさまざまなコンボ パーツに渡すことを可能にするいくつかのスロットを公開します。 @@ -121,6 +161,14 @@ igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false) ``` +```tsx + +
+ Header content goes here +
+ +``` + ### フッター スロット オプションのリストの下にカスタム フッターをレンダリングするには、コンテンツを `footer` スロットに渡します。 @@ -138,6 +186,14 @@ igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false) ``` +```tsx + +
+ Footer content goes here +
+ +``` + ### 空のリスト スロット フィルタリング操作で結果が返されない場合にカスタム コンテンツをレンダリングするには、`empty` スロットを使用します。 @@ -153,6 +209,12 @@ igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false) ``` +```tsx + +
¯\_(ツ)_/¯
+ +``` + ### トグル アイコン スロット コンボ入力のトグル アイコンは、`toggle-icon` スロットを介して変更することもできます。 @@ -168,6 +230,14 @@ igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false) ``` +```tsx + + + + + +``` + ### クリア アイコン スロット クリア アイコンは、`clear-icon` スロットを介して変更できます。 @@ -183,6 +253,14 @@ igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false) ``` +```tsx + + + + + +``` + ## API リファレンス diff --git a/doc/jp/components/layouts/tabs.md b/doc/jp/components/layouts/tabs.md index 345a2a93f..8aace8288 100644 --- a/doc/jp/components/layouts/tabs.md +++ b/doc/jp/components/layouts/tabs.md @@ -21,6 +21,7 @@ _language: ja ## {ProductName} でタブを使用する方法 + まず、次のコマンドを実行して {ProductName} をインストールする必要があります: ```cmd @@ -29,8 +30,24 @@ npm install {PackageWebComponents} + + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + + + `Tabs` を使用する前に、次のように登録する必要があります: +```tsx +import { IgrTabsModule, IgrTabs, IgrTab, IgrTabPanel} from "igniteui-react"; + +IgrTabsModule.register(); +``` + ```razor // in Program.cs file @@ -70,6 +87,17 @@ defineComponents(IgcTabsComponent); ``` +```tsx + + Tab 1 + Tab 2 + Tab 3 + Panel 1 + Panel 2 + Panel 3 + +``` + ### 選択 ユーザーがキーを押すかクリックして項目を選択すると、`Tabs` は `Change` イベントを発行します。`Select` メソッドを使用すると、パネルを文字列値として指定してタブを選択できます。 @@ -90,6 +118,10 @@ defineComponents(IgcTabsComponent); Tab 1 ``` +```tsx +Tab 1 +``` + ### 配置 `Alignment` プロパティは、{Platform} タブの配置方法を制御します。プロパティは以下の値を含みます: @@ -131,7 +163,7 @@ defineComponents(IgcTabsComponent); -### スタイル設定 +## スタイル設定 `Tabs` コンポーネントは、そのすべての要素の CSS パーツを公開します。 diff --git a/docfx/jp/components/toc.json b/docfx/jp/components/toc.json index 481ea4b37..dd8e46cf0 100644 --- a/docfx/jp/components/toc.json +++ b/docfx/jp/components/toc.json @@ -1521,7 +1521,7 @@ "status": "" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "タブ", "href": "layouts/tabs.md", "status": "" @@ -1653,7 +1653,7 @@ "href": "inputs/chip.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "コンボ ボックス", "href": "inputs/combo/overview.md", "items": [ From 2891952d392c59cd7ec211fcf47532d19b95fb9c Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Mon, 29 Apr 2024 12:32:47 -0400 Subject: [PATCH 19/23] Update treemap-chart.md --- doc/en/components/charts/types/treemap-chart.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/doc/en/components/charts/types/treemap-chart.md b/doc/en/components/charts/types/treemap-chart.md index 6bc142535..7f15e750f 100644 --- a/doc/en/components/charts/types/treemap-chart.md +++ b/doc/en/components/charts/types/treemap-chart.md @@ -102,7 +102,7 @@ In the following example, the treemap demonstrates the ability of node highlight ## {Platform} Treemap Percent based highlighting -`HighlightedItemsSource`: Specifies the datasource to read highlighted values from. If null then highlighted values are read from the ItemsSource property. +`HighlightedItemsSource`: Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property. `HighlightedValueMemberPath`: Specifies the name of the property in the datasource where the highlighted values are read. `HighlightedValueOpacity`: Controls the opacity of the normal value behind the highlighted value. `HighlightedValuesDisplayMode`: Enables or disables highlighted values. @@ -110,6 +110,8 @@ In the following example, the treemap demonstrates the ability of node highlight - Overlay: The treemap displays highlighted values over top the normal value with a slight opacity applied to the normal value. - Hidden: The treemap does not show highlighted values. +`sample="/charts/tree-map/highlighting-percent-based", height="600", alt="{Platform} Treemap Percent based Highlighting"` +
## Additional Resources From 7bba65a8dd1f45c5501fc7d2cfc06703e409f082 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Thu, 16 May 2024 12:54:05 +0300 Subject: [PATCH 20/23] Update JA for #1243, #1283 and #1284, other fixes --- doc/jp/components/bullet-graph.md | 78 ++++++++++++++- doc/jp/components/charts/chart-features.md | 8 +- doc/jp/components/charts/chart-overview.md | 4 +- .../charts/features/chart-animations.md | 2 +- .../charts/features/chart-highlight-filter.md | 36 +++---- .../charts/features/chart-highlighting.md | 38 ++++---- .../charts/features/chart-markers.md | 2 +- .../charts/features/chart-performance.md | 6 +- .../charts/features/chart-trendlines.md | 2 +- .../components/charts/types/bubble-chart.md | 2 +- doc/jp/components/charts/types/pie-chart.md | 2 +- doc/jp/components/charts/types/polar-chart.md | 2 +- .../components/charts/types/scatter-chart.md | 2 +- .../components/charts/types/treemap-chart.md | 17 ++++ .../excel-library-using-worksheets.md | 2 +- .../components/general-changelog-dv-blazor.md | 20 ++-- .../components/general-changelog-dv-react.md | 18 ++-- doc/jp/components/general-changelog-dv-wc.md | 18 ++-- doc/jp/components/general-changelog-dv.md | 18 ++-- .../geo-map-type-scatter-bubble-series.md | 2 +- .../grids/_shared/cell-selection.md | 2 +- .../grids/_shared/column-selection.md | 2 +- .../grids/_shared/conditional-cell-styling.md | 2 +- .../components/grids/_shared/row-selection.md | 2 +- doc/jp/components/grids/_shared/search.md | 16 +-- doc/jp/components/grids/data-grid.md | 17 ++-- .../grids/data-grid/cell-selection.md | 2 +- doc/jp/components/grids/data-grid/overview.md | 2 +- .../grids/data-grid/row-highlighting.md | 18 ++-- doc/jp/components/grids/grid/master-detail.md | 2 +- .../grids/hierarchical-grid/overview.md | 18 ++-- doc/jp/components/grids/theming.md | 2 +- doc/jp/components/grids/tree-grid/overview.md | 13 ++- .../inputs/combo/single-selection.md | 2 +- doc/jp/components/layouts/dock-manager.md | 2 +- doc/jp/components/linear-gauge.md | 97 +++++++++++++++++-- doc/jp/components/radial-gauge.md | 73 +++++++++++++- doc/jp/components/scheduling/calendar.md | 2 +- .../spreadsheet-conditional-formatting.md | 2 +- 39 files changed, 411 insertions(+), 144 deletions(-) diff --git a/doc/jp/components/bullet-graph.md b/doc/jp/components/bullet-graph.md index 0f483f953..ae1447e02 100644 --- a/doc/jp/components/bullet-graph.md +++ b/doc/jp/components/bullet-graph.md @@ -258,9 +258,83 @@ MaximumValue="55" TargetValue="43"> `sample="/gauges/bullet-graph/measures", height="125", alt="{Platform} ブレット グラフ メジャー"` +## Highlight Value + +バレット グラフのパフォーマンス値をさらに変更して、進捗状況をハイライト値として表示することもできます。これにより、`Value` が低い不透明度で表示されます。良い例としては、`Value` が 50 で、`HighlightValue` が 25 に設定されている場合です。これは、`TargetValue` の値が何に設定されているかに関係なく、50% のパフォーマンスを表します。これを有効にするには、まず `HighlightValueDisplayMode` を Overlay に設定し、次に `HighlightValue` を `Value` よりも低い値に適用します。 + +```html + + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + +`sample="/gauges/bullet-graph/highlight-needle", height="125", alt="{Platform} バレット グラフの針のハイライト"` ## 比較範囲 -範囲はスケールで指定した値の範囲を強調表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。 +範囲はスケールで指定した値の範囲をハイライト表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。 ```html ## スケール -スケールはゲージで値の全範囲を強調表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (`IsScaleInverted` プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。 +スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (`IsScaleInverted` プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。 ```html -## 強調表示 +## ハイライト表示 -線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときに強調表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、[チャート強調表示](features/chart-highlighting.md)トピックを参照してください。 +線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、[チャートのハイライト表示](features/chart-highlighting.md)トピックを参照してください。 -`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} 強調表示の例"` +`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} ハイライト表示の例"` diff --git a/doc/jp/components/charts/chart-overview.md b/doc/jp/components/charts/chart-overview.md index 172f4c279..b41d79035 100644 --- a/doc/jp/components/charts/chart-overview.md +++ b/doc/jp/components/charts/chart-overview.md @@ -172,7 +172,7 @@ _language: ja ### {Platform} 散布図 -{Platform} 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差を強調表示し、科学データや統計データをプロットするためによく使用されます。{Platform} 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。[散布図](types/scatter-chart.md)の詳細をご覧ください。 +{Platform} 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。{Platform} 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。[散布図](types/scatter-chart.md)の詳細をご覧ください。 `sample="/charts/data-chart/scatter-point-chart", height="600", alt="{Platform} 散布マーカー チャート"` @@ -274,7 +274,7 @@ alt="{Platform} チャート インタラクティブなパニングとズーム ### マーカー、ツールチップ、およびテンプレート -10 個の[マーカー タイプ](features/chart-markers.md)のいずれかを使用するか、独自の[マーカー-テンプレート](features/chart-markers.md#{PlatformLower}-チャート-マーカーのテンプレート)を作成して、データを強調表示するか、シンプルな[ツールチップ](features/chart-tooltips.md)または[カスタム ツールチップ](features/chart-tooltips.md#{PlatformLower}-チャート-ツールチップ-テンプレート)を使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。 +10 個の[マーカー タイプ](features/chart-markers.md)のいずれかを使用するか、独自の[マーカー-テンプレート](features/chart-markers.md#{PlatformLower}-チャート-マーカーのテンプレート)を作成して、データをハイライト表示するか、シンプルな[ツールチップ](features/chart-tooltips.md)または[カスタム ツールチップ](features/chart-tooltips.md#{PlatformLower}-チャート-ツールチップ-テンプレート)を使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。 {Platform} チャート マーカー、ツールチップ、およびテンプレート diff --git a/doc/jp/components/charts/features/chart-animations.md b/doc/jp/components/charts/features/chart-animations.md index bb580ed57..40dceff84 100644 --- a/doc/jp/components/charts/features/chart-animations.md +++ b/doc/jp/components/charts/features/chart-animations.md @@ -28,7 +28,7 @@ _language: ja 関連するチャートタイプの詳細については、以下のトピックを参照してください。 - [チャート注釈](chart-annotations.md) -- [チャート強調表示](chart-highlighting.md) +- [チャートのハイライト表示](chart-highlighting.md) - [チャート ツールチップ](chart-tooltips.md) ## API リファレンス diff --git a/doc/jp/components/charts/features/chart-highlight-filter.md b/doc/jp/components/charts/features/chart-highlight-filter.md index 56df8a586..980892708 100644 --- a/doc/jp/components/charts/features/chart-highlight-filter.md +++ b/doc/jp/components/charts/features/chart-highlight-filter.md @@ -1,46 +1,46 @@ --- -title: {Platform} チャート強調表示フィルター | データ可視化 | インフラジスティックス -_description: Infragistics の {Platform} チャート強調表示フィルター -_keywords: {Platform} Charts, Highlighting, Filtering, Infragistics, {Platform} チャート, 強調表示, フィルターリング, インフラジスティックス +title: {Platform} チャートのハイライト表示フィルター | データ可視化 | インフラジスティックス +_description: Infragistics の {Platform} チャートのハイライト表示フィルター +_keywords: {Platform} Charts, Highlighting, Filtering, Infragistics, {Platform} チャート, ハイライト表示, フィルターリング, インフラジスティックス mentionedTypes: ["CategoryChart", "XamDataChart", "Series", "HighlightedValuesDisplayMode"] namespace: Infragistics.Controls.Charts _language: ja --- -# {Platform} Chart 強調表示フィルター +# {Platform} チャートのハイライト表示フィルター -{ProductName} Chart コンポーネントは、プロットされたデータのサブセットを表示できるようにすることで、これらのチャートにプロットされた系列の視覚化を強化できるデータ強調表示オーバーレイをサポートしています。これを有効にすると、列シリーズおよびエリア シリーズ タイプの場合は不透明度を下げて全体セットが表示され、線シリーズ タイプの場合は破線が表示されることで、データのサブセットが強調表示されます。これは、データセットの目標値と実際の値などを視覚化するのに役立ちます。以下の例で、この機能を説明します。 +{ProductName} チャート コンポーネントは、プロットされたデータのサブセットを表示できるようにすることで、これらのチャートにプロットされた系列の視覚化を強化できるデータハイライト表示オーバーレイをサポートしています。これを有効にすると、列シリーズおよびエリア シリーズ タイプの場合は不透明度を下げて全体セットが表示され、線シリーズ タイプの場合は破線が表示されることで、データのサブセットがハイライト表示されます。これは、データセットの目標値と実際の値などを視覚化するのに役立ちます。以下の例で、この機能を説明します。 -`sample="/charts/data-chart/chart-highlight-filter-multiple-series", height="500", alt="{Platform} 強調表示フィルターの例"` +`sample="/charts/data-chart/chart-highlight-filter-multiple-series", height="500", alt="{Platform} ハイライト表示フィルターの例"` -データ強調表示機能は `XamDataChart` および `CategoryChart` でサポートされていますが、これらのコントロールの動作の性質上、それぞれ異なる方法で構成されることに注意してください。ただし、この機能で変わらない点は、強調表示を表示したい場合は `HighlightedValuesDisplayMode` プロパティを `Overlay` に設定する必要があることです。以下では、強調表示フィルター機能のさまざまな設定について説明します。 +データハイライト表示機能は `XamDataChart` および `CategoryChart` でサポートされていますが、これらのコントロールの動作の性質上、それぞれ異なる方法で構成されることに注意してください。ただし、この機能で変わらない点は、ハイライト表示を表示したい場合は `HighlightedValuesDisplayMode` プロパティを `Overlay` に設定する必要があることです。以下では、ハイライト表示フィルター機能のさまざまな設定について説明します。 -## DataChart での強調表示フィルターの使用 +## DataChart でのハイライト表示フィルターの使用 -`XamDataChart` では、強調表示フィルター API の多くは主に、強調表示するデータのサブセットを表すコレクションに `HighlightedItemsSource` プロパティを設定することによって、シリーズ自体で発生します。`HighlightedItemsSource` 内の項目の数は、強調表示するシリーズの `ItemsSource` にバインドされているデータの数と一致する必要があります。カテゴリ シリーズの場合は、デフォルトで強調表示パスとして定義した `ValueMemberPath` が使用されます。このページの上部にあるサンプルでは、​​`XamDataChart` の `HighlightedItemsSource` を使用してオーバーレイを表示しています。 +`XamDataChart` では、ハイライト表示フィルター API の多くは主に、ハイライト表示するデータのサブセットを表すコレクションに `HighlightedItemsSource` プロパティを設定することによって、シリーズ自体で発生します。`HighlightedItemsSource` 内の項目の数は、ハイライト表示するシリーズの `ItemsSource` にバインドされているデータの数と一致する必要があります。カテゴリ シリーズの場合は、デフォルトでハイライト表示パスとして定義した `ValueMemberPath` が使用されます。このページの上部にあるサンプルでは、​​`XamDataChart` の `HighlightedItemsSource` を使用してオーバーレイを表示しています。 -シリーズの `HighlightedItemsSource` と `ItemsSource` の間でスキーマが一致しない場合は、シリーズの `HighlightedValueMemberPath` プロパティを使用してこれを構成できます。さらに、シリーズ自体の `ItemsSource` を強調表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、`HighlightedItemsSource` を提供せずに、`HighlightedValueMemberPath` プロパティをそのパスに設定するだけで行われます。 +シリーズの `HighlightedItemsSource` と `ItemsSource` の間でスキーマが一致しない場合は、シリーズの `HighlightedValueMemberPath` プロパティを使用してこれを構成できます。さらに、シリーズ自体の `ItemsSource` をハイライト表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、`HighlightedItemsSource` を提供せずに、`HighlightedValueMemberPath` プロパティをそのパスに設定するだけで行われます。 列およびエリア シリーズ の場合の不透明度の低減は、シリーズの `HighlightedValuesFadeOpacity` プロパティを設定することで構成できます。オーバーレイをまったく表示したくない場合は、`HighlightedValuesDisplayMode` プロパティを `Hidden` に設定することもできます。 -強調表示フィルターによって表示されるシリーズの部分は、チャートの凡例レイヤーとツールチップ レイヤーに個別に表示されます。`HighlightedTitleSuffix` を設定することで、ツールチップと凡例に表示されるタイトルを構成できます。これにより、指定した値がシリーズの `Title` の末尾に追加されます。 +ハイライト表示フィルターによって表示されるシリーズの部分は、チャートの凡例レイヤーとツールチップ レイヤーに個別に表示されます。`HighlightedTitleSuffix` を設定することで、ツールチップと凡例に表示されるタイトルを構成できます。これにより、指定した値がシリーズの `Title` の末尾に追加されます。 -次の例は、`HighlightedValueMemberPath` を使用した `XamDataChart` コントロール内のデータ強調表示オーバーレイ機能の使用法を示しています。 +次の例は、`HighlightedValueMemberPath` を使用した `XamDataChart` コントロール内のデータハイライト表示オーバーレイ機能の使用法を示しています。 -`sample="/charts/data-chart/chart-highlight-filter", height="500", alt="{Platform} 強調表示フィルターの例"` +`sample="/charts/data-chart/chart-highlight-filter", height="500", alt="{Platform} ハイライト表示フィルターの例"` -## CategoryChart での強調表示フィルターの使用 +## CategoryChart でのハイライト表示フィルターの使用 -`CategoryChart` 強調表示フィルターは、`InitialHighlightFilter` プロパティを設定することによってチャート上で発生します。`CategoryChart` は、デフォルトで、基になるデータ項目のすべてのプロパティを考慮します。そのため、データのサブセットをフィルタリングできるようにデータをグループ化および集計できるように、チャート上でも `InitialGroups` を定義する必要があります。`InitialGroups` を基になるデータ項目の値パスに設定して、重複した値を持つパスでグループ化することができます。 +`CategoryChart` ハイライト表示フィルターは、`InitialHighlightFilter` プロパティを設定することによってチャート上で発生します。`CategoryChart` は、デフォルトで、基になるデータ項目のすべてのプロパティを考慮します。そのため、データのサブセットをフィルタリングできるようにデータをグループ化および集計できるように、チャート上でも `InitialGroups` を定義する必要があります。`InitialGroups` を基になるデータ項目の値パスに設定して、重複した値を持つパスでグループ化することができます。 `XamDataChart` と同様に、`HighlightedValuesDisplayMode` プロパティも `CategoryChart` で公開されます。オーバーレイを表示したくない場合は、このプロパティを `Hidden` に設定できます。 -以下の例は、`CategoryChart` コントロール内でのデータ強調表示オーバーレイ機能の使用法を示しています。 +以下の例は、`CategoryChart` コントロール内でのデータハイライト表示オーバーレイ機能の使用法を示しています。 -`sample="/charts/category-chart/chart-highlight-filter", height="500", alt="{Platform} 強調表示フィルターの例"` +`sample="/charts/category-chart/chart-highlight-filter", height="500", alt="{Platform} ハイライト表示フィルターの例"` -検索入力を作成します。input 要素を取得することで、その現在の値を取得できます。これにより、`{ComponentName}` の `FindNext` メソッドと `FindPrev` メソッドを使用して、`SearchText` が出現するすべての箇所を強調表示し、(呼び出したメソッドに応じて) 次 / 前の箇所にスクロールできるようになります。 +検索入力を作成します。input 要素を取得することで、その現在の値を取得できます。これにより、`{ComponentName}` の `FindNext` メソッドと `FindPrev` メソッドを使用して、`SearchText` が出現するすべての箇所をハイライト表示し、(呼び出したメソッドに応じて) 次 / 前の箇所にスクロールできるようになります。 @@ -137,7 +137,7 @@ const [searchText, setSearchText] = useState('') -検索入力を作成します。`searchText` を新しく作成したinput要素の `value` プロパティにバインドし、`inputOccured` イベントをサブスクライブすることで、ユーザーによるすべての `searchText` の変更を検出できます。これにより、`{ComponentName}` の `findNext` メソッドと `findPrev` メソッドを使用して、`searchText` が出現するすべての箇所を強調表示し、(呼び出したメソッドに応じて) 次 / 前の箇所にスクロールできるようになります。 +検索入力を作成します。`searchText` を新しく作成したinput要素の `value` プロパティにバインドし、`inputOccured` イベントをサブスクライブすることで、ユーザーによるすべての `searchText` の変更を検出できます。これにより、`{ComponentName}` の `findNext` メソッドと `findPrev` メソッドを使用して、`searchText` が出現するすべての箇所をハイライト表示し、(呼び出したメソッドに応じて) 次 / 前の箇所にスクロールできるようになります。 `FindNext` と `FindPrev` メソッドの両方に 3 つの引数があります。 @@ -146,7 +146,7 @@ const [searchText, setSearchText] = useState('') - (オプション) `CaseSensitive`: **boolean** (検索で完全一致するかどうか、デフォルト値は false)。 - (オプション) `ExactMatch`: **boolean** (検索で完全一致するかどうか、デフォルト値は false)。 -完全一致で検索した場合、検索 API は `SearchText` と完全一致 (大文字小文字の区別を含む) するセル値のみ結果として強調表示します。たとえば、文字列 'software' と 'Software' は大文字小文字を区別しない場合は完全一致となります。 +完全一致で検索した場合、検索 API は `SearchText` と完全一致 (大文字小文字の区別を含む) するセル値のみ結果としてハイライト表示します。たとえば、文字列 'software' と 'Software' は大文字小文字を区別しない場合は完全一致となります。 上記のメソッドは **number** 値を返します (`{ComponentName}` で指定した文字列が含まれる回数)。 @@ -496,7 +496,7 @@ function updateSearch() { ### 保持 -`{ComponentName}` のフィルターやソート、レコードの追加や削除をする場合を想定します。そのような処理の後、現在の検索が自動的に更新されて `SearchText` に一致するテキストが保持されます。更に検索がページングで動作し、`{ComponentName}` の `PerPage` プロパティの変更時も強調表示が保持されます。 +`{ComponentName}` のフィルターやソート、レコードの追加や削除をする場合を想定します。そのような処理の後、現在の検索が自動的に更新されて `SearchText` に一致するテキストが保持されます。更に検索がページングで動作し、`{ComponentName}` の `PerPage` プロパティの変更時もハイライト表示が保持されます。 ### アイコンの追加 @@ -579,7 +579,7 @@ builder.Services.AddIgniteUIBlazor( -[InputGroup](../input-group.md) 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、`{ComponentName}` の `ClearSearch` メソッドを呼び出して強調表示をクリアします。 +[InputGroup](../input-group.md) 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、`{ComponentName}` の `ClearSearch` メソッドを呼び出してハイライト表示をクリアします。 @@ -638,7 +638,7 @@ constructor() { -`Input` 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、`{ComponentName}` の `ClearSearch` メソッドを呼び出して強調表示をクリアします。 +`Input` 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、`{ComponentName}` の `ClearSearch` メソッドを呼び出してハイライト表示をクリアします。 @@ -938,8 +938,8 @@ function nextSearch() { |制限|説明| |--- |--- | -|テンプレートを使用したセル内の検索|検索機能の強調表示が、デフォルトのセルテンプレートに対してのみ機能する問題。カスタム セル テンプレートを含む列がある場合、強調表示が機能しないため、列フォーマッタなどの代替アプローチを使用するか、`Searchable` (検索可能な) プロパティを false に設定します。| -|セル テキストが切れる問題| セル内のテキストが長すぎるために検索テキストが省略記号によって切れている場合も、セルまでスクロールして一致カウントに含まれますが、強調表示はされません。 | +|テンプレートを使用したセル内の検索|検索機能のハイライト表示が、デフォルトのセルテンプレートに対してのみ機能する問題。カスタム セル テンプレートを含む列がある場合、ハイライト表示が機能しないため、列フォーマッタなどの代替アプローチを使用するか、`Searchable` (検索可能な) プロパティを false に設定します。| +|セル テキストが切れる問題| セル内のテキストが長すぎるために検索テキストが省略記号によって切れている場合も、セルまでスクロールして一致カウントに含まれますが、ハイライト表示はされません。 | ## API リファレンス diff --git a/doc/jp/components/grids/data-grid.md b/doc/jp/components/grids/data-grid.md index 7705b5ed7..e4c3785e2 100644 --- a/doc/jp/components/grids/data-grid.md +++ b/doc/jp/components/grids/data-grid.md @@ -71,7 +71,7 @@ _language: ja ### 依存関係 -{Platform} Data Grid を初期化するには、{ProductName} パッケージをインストールする必要があります。 +{Platform} Data Grid を初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 @@ -93,15 +93,20 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック ``` - -{Platform} グリッドのパッケージをインストールするときに、core (コア)、inputs (入力)、および layouts (レイアウト) パッケージもインストールする必要があります。 + +```cmd +npm install --save {PackageGrids} +``` + + ```cmd -npm install --save {PackageCore} +npm install --save {PackageCommon} npm install --save {PackageGrids} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} ``` + + + グリッドを使用するには、次のインポートも含める必要があります。 diff --git a/doc/jp/components/grids/data-grid/cell-selection.md b/doc/jp/components/grids/data-grid/cell-selection.md index cfff43a43..7cb3f810c 100644 --- a/doc/jp/components/grids/data-grid/cell-selection.md +++ b/doc/jp/components/grids/data-grid/cell-selection.md @@ -1,6 +1,6 @@ --- title: {Platform} データ グリッド | セル選択 | 選択 | インフラジスティックス -_description: インフラジスティックスの {Platform} データ グリッドのセルおよび行選択を使用して、テーブルの領域を強調表示します。{ProductName} テーブルの単一行選択または複数行選択を設定する方法について説明します。 +_description: インフラジスティックスの {Platform} データ グリッドのセルおよび行選択を使用して、テーブルの領域をハイライト表示します。{ProductName} テーブルの単一行選択または複数行選択を設定する方法について説明します。 _keywords: {Platform} Table, Data Grid, cell selection, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, セル選択, インフラジスティックス mentionedTypes: ['Infragistics.Controls.Grid.Implementation.Grid', 'Infragistics.Controls.Grid.Implementation.GridSelectionMode'] namespace: Infragistics.Controls diff --git a/doc/jp/components/grids/data-grid/overview.md b/doc/jp/components/grids/data-grid/overview.md index e7826094d..b9ab16918 100644 --- a/doc/jp/components/grids/data-grid/overview.md +++ b/doc/jp/components/grids/data-grid/overview.md @@ -464,7 +464,7 @@ Blazor データ グリッドの作成について詳しくは、このチュー - [パフォーマンス](performance.md) - [行のピン固定](row-pinning.md) - [行グループ](row-grouping.md) -- [行の強調表示](row-highlighting.md) +- [行のハイライト表示](row-highlighting.md) diff --git a/doc/jp/components/grids/data-grid/row-highlighting.md b/doc/jp/components/grids/data-grid/row-highlighting.md index 73ff58d62..962c6a380 100644 --- a/doc/jp/components/grids/data-grid/row-highlighting.md +++ b/doc/jp/components/grids/data-grid/row-highlighting.md @@ -1,7 +1,7 @@ --- -title: {Platform} Data Grid | 行の強調表示 | インフラジスティックス -_description: マウスオーバーでインフラジスティックス {Platform} データ グリッドの行強調表示の構成。{ProductName} テーブルの行強調表示を設定する方法について説明します。 -_keywords: {Platform} Table, Data Grid, row highlighting, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 行の強調表示, インフラジスティックス +title: {Platform} Data Grid | 行のハイライト表示 | インフラジスティックス +_description: マウスオーバーでインフラジスティックス {Platform} データ グリッドの行ハイライト表示の構成。{ProductName} テーブルの行ハイライト表示を設定する方法について説明します。 +_keywords: {Platform} Table, Data Grid, row highlighting, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 行のハイライト表示, インフラジスティックス mentionedTypes: ['Infragistics.Controls.Grid.Implementation.Grid', 'Infragistics.Controls.Grid.Implementation.Column'] namespace: Infragistics.Controls _canonicalLink: {CanonicalLinkToGridMain} @@ -15,14 +15,14 @@ _language: ja -# {Platform} Grid 強調表示 +# {Platform} Grid ハイライト表示 -{ProductName} Data Table / Data Grid は、行の強調表示の構成をサポートします。 +{ProductName} Data Table / Data Grid は、行のハイライト表示の構成をサポートします。 -## {Platform} Grid 強調表示の例 +## {Platform} Grid ハイライト表示の例 -`sample="/grids/data-grid/row-highlighting", height="600", alt="{Platform} Grid 強調表示の例"` +`sample="/grids/data-grid/row-highlighting", height="600", alt="{Platform} Grid ハイライト表示の例"` @@ -30,13 +30,13 @@ _language: ja ## 概要 -{Platform} データ内のレコードの強調表示は、{Platform} グリッド の `IsRowHoverEnabled` ブール値プロパティを設定して切り替えることができます。これはデフォルトで有効になっていることに注意してください。 +{Platform} データ内のレコードのハイライト表示は、{Platform} グリッド の `IsRowHoverEnabled` ブール値プロパティを設定して切り替えることができます。これはデフォルトで有効になっていることに注意してください。 さらに、`RowHoverBackground` 文字列プロパティを 16 進数値に設定して色を設定できます。 ## コード スニペット -以下は、{Platform} データ グリッドで行の強調表示を有効にし、青色を適用する方法を示します。 +以下は、{Platform} データ グリッドで行のハイライト表示を有効にし、青色を適用する方法を示します。 ```tsx ` 定義を含む詳細ビュー内のグリッドをテンプレート化する際に親グリッドもそれらの列をレンダリングします。 | これは、ネストされたグリッドで autoGenerate=true を使用して回避できます。これらの列の要素を変更する必要がある場合、`ColumnInit` イベントを使用できます。| | 詳細テンプレートは Excel にエクスポートされません。| 詳細テンプレートにはあらゆる種類のコンテンツが含まれているため、Excel にエクスポートすることはできません。| -| 検索機能は、詳細テンプレートの要素を強調表示しません。 | | +| 検索機能は、詳細テンプレートの要素をハイライト表示しません。 | | ## API リファレンス diff --git a/doc/jp/components/grids/hierarchical-grid/overview.md b/doc/jp/components/grids/hierarchical-grid/overview.md index 7c20aec0f..1ba27b97b 100644 --- a/doc/jp/components/grids/hierarchical-grid/overview.md +++ b/doc/jp/components/grids/hierarchical-grid/overview.md @@ -21,7 +21,7 @@ _language: ja ### 依存関係 -{Platform} 階層グリッドを初期化するには、{ProductName} パッケージをインストールする必要があります。 +{Platform} 階層グリッドを初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 @@ -44,16 +44,22 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック - + -{Platform} 階層グリッドのパッケージをインストールするときは、core パッケージもインストールする必要があります。 + +```cmd +npm install --save {PackageGrids} +``` + + ```cmd -npm install --save {PackageCore} +npm install --save {PackageCommon} npm install --save {PackageGrids} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} ``` + + + グリッドを使用するには、次のインポートも含める必要があります。 diff --git a/doc/jp/components/grids/theming.md b/doc/jp/components/grids/theming.md index 5c6aee6d4..77cda3b2f 100644 --- a/doc/jp/components/grids/theming.md +++ b/doc/jp/components/grids/theming.md @@ -92,7 +92,7 @@ _language: ja | --body-summaries-text-color | 色 | 本体に配置される集計グループのテキストの色。 | | --root-summaries-background | 色 | フッターに配置される集計グループの背景色。 | | --root-summaries-text-color | 色 | フッターに配置される集計グループのテキストの色。 | -| --row-highlight | 色 | グリッド行の強調表示の色。 | +| --row-highlight | 色 | グリッド行のハイライト表示の色。 | | --row-ghost-background | 色 | ドラッグされている行の背景色。 | | --row-drag-color | 色 | ドラッグ ハンドルの色。 | | --drop-area-border-radius | 0 ～ 1 の数 | ドロップ領域に使用される境界半径。0 ～ 1 の任意の小数、ピクセル、またはパーセントを指定できます。 | diff --git a/doc/jp/components/grids/tree-grid/overview.md b/doc/jp/components/grids/tree-grid/overview.md index 32ced937b..f504b38b6 100644 --- a/doc/jp/components/grids/tree-grid/overview.md +++ b/doc/jp/components/grids/tree-grid/overview.md @@ -24,7 +24,7 @@ _language: ja ### 依存関係 -{Platform} ツリー グリッドを初期化するには、{ProductName} パッケージをインストールする必要があります。 +{Platform} ツリー グリッドを初期化するには、{PackageCommon} パッケージ`{PackageGrids}` パッケージ`{PackageCommon}` と `{PackageGrids}` パッケージをインストールする必要があります。 @@ -49,13 +49,18 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック -{Platform} ツリー グリッドのパッケージをインストールするときは、core パッケージもインストールする必要があります。 + +```cmd +npm install --save {PackageGrids} +``` + + ```cmd -npm install --save {PackageCore} +npm install --save {PackageCommon} npm install --save {PackageGrids} -npm install --save {PackageInputs} ``` + diff --git a/doc/jp/components/inputs/combo/single-selection.md b/doc/jp/components/inputs/combo/single-selection.md index 501820b4f..39a254093 100644 --- a/doc/jp/components/inputs/combo/single-selection.md +++ b/doc/jp/components/inputs/combo/single-selection.md @@ -8,7 +8,7 @@ _language: ja # {Platform} 単一選択 ComboBox -{Platform} `ComboBox` は、単一選択モードと、メインの入力プロンプトを介した項目リストのクイック フィルタリングをサポートしています。ユーザーは、数文字タイプすることで、オプションのリストに探している項目を表示できます。Enter キーを押すと、最初に強調表示された一致が選択されます。 +{Platform} `ComboBox` は、単一選択モードと、メインの入力プロンプトを介した項目リストのクイック フィルタリングをサポートしています。ユーザーは、数文字タイプすることで、オプションのリストに探している項目を表示できます。Enter キーを押すと、最初にハイライト表示された一致が選択されます。 ## {Platform} 単一選択の例 diff --git a/doc/jp/components/layouts/dock-manager.md b/doc/jp/components/layouts/dock-manager.md index 58daf93b3..b216f6e02 100644 --- a/doc/jp/components/layouts/dock-manager.md +++ b/doc/jp/components/layouts/dock-manager.md @@ -286,7 +286,7 @@ const layout: IgcDockManagerLayout = { ### アクティブ ペイン -ドック マネージャー コンポーネントは、フォーカスを含むコンテンツ ペインを強調表示し、`ActivePane` プロパティで公開します。プロパティを設定することによってアクティブ ペインをプログラムで変更できます。`ActivePaneChanged` イベントにサブスクライブして、`ActivePane` プロパティの変更をリッスンすることもできます。 +ドック マネージャー コンポーネントは、フォーカスを含むコンテンツ ペインをハイライト表示し、`ActivePane` プロパティで公開します。プロパティを設定することによってアクティブ ペインをプログラムで変更できます。`ActivePaneChanged` イベントにサブスクライブして、`ActivePane` プロパティの変更をリッスンすることもできます。 ```ts this.dockManager.addEventListener('activePaneChanged', ev => { diff --git a/doc/jp/components/linear-gauge.md b/doc/jp/components/linear-gauge.md index fcb7f3de6..4e4b8e2f1 100644 --- a/doc/jp/components/linear-gauge.md +++ b/doc/jp/components/linear-gauge.md @@ -253,11 +253,92 @@ ModuleManager.register( ``` -`sample="/gauges/linear-gauge/needle", height="125", alt="{Platform} linear gauge needle"` +`sample="/gauges/linear-gauge/needle", height="125", alt="{Platform} リニア ゲージのneedle"` +## 針のハイライト + +リニア ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の `Value` の不透明度が低く表示されます。これを有効にするには、まず `HighlightValueDisplayMode` を Overlay に設定し、次に `HighlightValue` を適用します。 + +```html + + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + +`sample="/gauges/linear-gauge/highlight-needle", height="125", alt="{Platform} リニア ゲージの針のハイライト"` ## 範囲 -範囲はスケールで指定した値の範囲を強調表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。 +範囲はスケールで指定した値の範囲をハイライト表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。 ```html ``` -`sample="/gauges/linear-gauge/tickmarks", height="125", alt="{Platform} linear gauge tickmarks"` +`sample="/gauges/linear-gauge/tickmarks", height="125", alt="{Platform} リニア ゲージの目盛"` ## ラベル @@ -488,7 +569,7 @@ ModuleManager.register( ``` -`sample="/gauges/linear-gauge/labels", height="125", alt="{Platform} linear gauge labels"` +`sample="/gauges/linear-gauge/labels", height="125", alt="{Platform} リニア ゲージのラベル"` ## バッキング @@ -547,11 +628,11 @@ ModuleManager.register( ``` -`sample="/gauges/linear-gauge/backing", height="125", alt="{Platform} linear gauge backing"` +`sample="/gauges/linear-gauge/backing", height="125", alt="{Platform} リニア ゲージのバッキング"` ## スケール -スケールはゲージで値の全範囲を強調表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (`IsScaleInverted` プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。 +スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (`IsScaleInverted` プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。 ```html + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + +`sample="/gauges/radial-gauge/highlight-needle", height="125", alt="{Platform} ラジアル ゲージの針のハイライト"` ## まとめ 上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。 diff --git a/doc/jp/components/scheduling/calendar.md b/doc/jp/components/scheduling/calendar.md index 4b3a41b8f..7378df0f4 100644 --- a/doc/jp/components/scheduling/calendar.md +++ b/doc/jp/components/scheduling/calendar.md @@ -252,7 +252,7 @@ this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: range } ### 特定の日付 -`SpecialDates` プロパティは、`DisabledDates` とほぼ同じ構成原則を使用しています。特別な日付は強調表示されたルック アンド フィールを持ち、無効な日付とは異なり、選択することができます。 +`SpecialDates` プロパティは、`DisabledDates` とほぼ同じ構成原則を使用しています。特別な日付はハイライト表示されたルック アンド フィールを持ち、無効な日付とは異なり、選択することができます。 Calendar に特別な日付を追加しましょう。これを行うために、`DateRangeDescriptor` を作成し、現在の月の 3 日から 8 日までの日付を渡します。 diff --git a/doc/jp/components/spreadsheet-conditional-formatting.md b/doc/jp/components/spreadsheet-conditional-formatting.md index 4bd132bf3..ce6f93094 100644 --- a/doc/jp/components/spreadsheet-conditional-formatting.md +++ b/doc/jp/components/spreadsheet-conditional-formatting.md @@ -7,7 +7,7 @@ _language: ja --- # {Platform} Spreadsheet の条件付き書式設定 -{Platform} Spreadsheet コンポーネントは、ワークシートのセルに条件付き書式を設定できます。これにより、条件に基づいてデータのさまざまな部分を強調表示できます。 +{Platform} Spreadsheet コンポーネントは、ワークシートのセルに条件付き書式を設定できます。これにより、条件に基づいてデータのさまざまな部分をハイライト表示できます。 ## {Platform} Spreadsheet の条件付き書式設定の例 From 31cae708143f7809e68be028716eb7fdeec776a1 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Thu, 16 May 2024 13:11:44 +0300 Subject: [PATCH 21/23] Update missed EN string. --- doc/jp/components/bullet-graph.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/jp/components/bullet-graph.md b/doc/jp/components/bullet-graph.md index ae1447e02..f212854d2 100644 --- a/doc/jp/components/bullet-graph.md +++ b/doc/jp/components/bullet-graph.md @@ -258,7 +258,7 @@ MaximumValue="55" TargetValue="43"> `sample="/gauges/bullet-graph/measures", height="125", alt="{Platform} ブレット グラフ メジャー"` -## Highlight Value +## ハイライト値 バレット グラフのパフォーマンス値をさらに変更して、進捗状況をハイライト値として表示することもできます。これにより、`Value` が低い不透明度で表示されます。良い例としては、`Value` が 50 で、`HighlightValue` が 25 に設定されている場合です。これは、`TargetValue` の値が何に設定されているかに関係なく、50% のパフォーマンスを表します。これを有効にするには、まず `HighlightValueDisplayMode` を Overlay に設定し、次に `HighlightValue` を `Value` よりも低い値に適用します。 From e9711ba3c4f044eef3622ffa4443f8d95a6edc5f Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Wed, 29 May 2024 15:11:04 +0300 Subject: [PATCH 22/23] docs(date-time-input): update topic for Blazor --- doc/en/components/inputs/date-time-input.md | 42 +++++++++++++++++++-- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/doc/en/components/inputs/date-time-input.md b/doc/en/components/inputs/date-time-input.md index bfe00ba39..a52b9cd4d 100644 --- a/doc/en/components/inputs/date-time-input.md +++ b/doc/en/components/inputs/date-time-input.md @@ -55,6 +55,18 @@ IgrDateTimeInputModule.register(); Before using the `DateTimeInput`, you need to register it as follows: +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule)); +``` + +You will also need to link an additional CSS file to apply the styling to the `DateTimeInput` component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: + +```razor + +``` + ### Value binding @@ -74,6 +86,14 @@ public dateTimeInputRef(input: IgrDateTimeInput) { } ``` +```razor + + + +``` + + + The `DateTimeInput` also accepts [ISO 8601](https://tc39.es/ecma262/#sec-date-time-string-format) strings. The string can be a full `ISO` string, in the format `YYYY-MM-DDTHH:mm:ss.sssZ` or it could be separated into date-only and time-only portions. @@ -89,6 +109,8 @@ If a full `ISO` string is bound, the directive will parse it only if all element All falsy values, including `InvalidDate` will be parsed as `null`. Incomplete date-only, time-only, or full `ISO` strings will be parsed as `InvalidDate`. + + ### Keyboard Navigation The `DateTimeInput` has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different `DateParts` among others without having to touch the mouse. @@ -140,6 +162,12 @@ To set a specific input format, pass it as a string to the `DateTimeInput`. This ``` +```razor + + + +``` + If all went well, you should see the following in your browser: `sample="/inputs/date-time-input/input-format-display-format", height="150", alt="{Platform} Date Time Input Input Format Display Format Example"` @@ -199,16 +227,16 @@ Furthermore, users can construct a displayFormat string using the supported symb ## Min/max value -You can specify `MinValue` and `MaxValue` properties to restrict input and control the validity of the component. Just like the `Value` property, they can be of type `string`. +You can specify `Min` and `Max` properties to restrict input and control the validity of the component. Just like the `Value` property, they can be of type `string`. ```ts const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent; -input.minValue = new Date(2021, 0, 1); +input.min = new Date(2021, 0, 1); ``` ```html - + ``` ```tsx @@ -219,7 +247,13 @@ public dateTimeInputRef(input: IgrDateTimeInput) { ``` ```tsx - + +``` + +```razor + + + ``` If all went well, the component will be `invalid` if the value is greater or lower than the given dates. Check out the example below: From 4949bf463f7d3bfdabe80f9e3654a783bd24d468 Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Wed, 29 May 2024 18:37:20 +0300 Subject: [PATCH 23/23] chore(*): apply requested changes --- doc/en/components/inputs/date-time-input.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/en/components/inputs/date-time-input.md b/doc/en/components/inputs/date-time-input.md index a52b9cd4d..4d13bd7b2 100644 --- a/doc/en/components/inputs/date-time-input.md +++ b/doc/en/components/inputs/date-time-input.md @@ -242,7 +242,7 @@ input.min = new Date(2021, 0, 1); ```tsx public dateTimeInputRef(input: IgrDateTimeInput) { if (!input) { return; } - input.minValue = new Date(2021, 0, 1); + input.min = new Date(2021, 0, 1); } ``` @@ -251,7 +251,7 @@ public dateTimeInputRef(input: IgrDateTimeInput) { ``` ```razor - + ```