diff --git a/docs/angular/src/content/en/components/grids-and-lists.mdx b/docs/angular/src/content/en/components/grids-and-lists.mdx index 7618ee456a..deb9a78b4e 100644 --- a/docs/angular/src/content/en/components/grids-and-lists.mdx +++ b/docs/angular/src/content/en/components/grids-and-lists.mdx @@ -188,8 +188,8 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo diff --git a/docs/xplat/docConfig.json b/docs/xplat/docConfig.json index 027ef6fba3..06de5769cb 100644 --- a/docs/xplat/docConfig.json +++ b/docs/xplat/docConfig.json @@ -32,6 +32,7 @@ { "name": "{PackageMaps}", "value": "igniteui-angular-maps"}, { "name": "{PackageSpreadsheet}", "value": "igniteui-angular-spreadsheet"}, { "name": "{PackageDockManager}", "value": "igniteui-dockmanager"}, + { "name": "{DockManagerApiClass}", "value": "IgxDockManagerComponent"}, { "name": "{PackageInputs}", "value": "igniteui-angular-inputs"}, { "name": "{PackageLayouts}", "value": "igniteui-angular-layouts"}, { "name": "{PackageWebsite}", "value": "https://www.npmjs.com/package/"}, @@ -159,6 +160,7 @@ { "name": "{PackageMaps}", "value": "igniteui-react-maps"}, { "name": "{PackageSpreadsheet}", "value": "igniteui-react-spreadsheet"}, { "name": "{PackageDockManager}", "value": "igniteui-react-dockmanager"}, + { "name": "{DockManagerApiClass}", "value": "IgrDockManager"}, { "name": "{PackageWebsite}", "value": "https://www.npmjs.com/package/"}, { "name": "{PackageVerChangedImports}", "value": "16.11.7"}, { "name": "{PackageVerRenamedGrid}", "value": "16.12.2 (April 2020)"}, @@ -337,6 +339,7 @@ { "name": "{PackageMaps}", "value": "igniteui-webcomponents-maps"}, { "name": "{PackageSpreadsheet}", "value": "igniteui-webcomponents-spreadsheet"}, { "name": "{PackageDockManager}", "value": "igniteui-dockmanager"}, + { "name": "{DockManagerApiClass}", "value": "IgcDockManagerComponent"}, { "name": "{PackageWebsite}", "value": "https://www.npmjs.com/package/"}, { "name": "{PackageVerChangedImports}", "value": "1.0.6"}, { "name": "{PackageVerRenamedGrid}", "value": "1.1.2 (April 2020)"}, @@ -584,6 +587,7 @@ { "name": "{PackageMaps}", "value": "IgniteUI.Blazor"}, { "name": "{PackageSpreadsheet}", "value": "IgniteUI.Blazor"}, { "name": "{PackageDockManager}", "value": "IgniteUI.Blazor"}, + { "name": "{DockManagerApiClass}", "value": "IgbDockManager"}, { "name": "{PackageWebsite}", "value": "https://www.npmjs.com/package/"}, { "name": "{PackageVerChangedImports}", "value": "1.0.6"}, { "name": "{PackageVerChanges-21-1}", "value": "21.1.52 (April 2021)"}, diff --git a/docs/xplat/src/content/en/components/grids/grids-header.mdx b/docs/xplat/src/content/en/components/grids/grids-header.mdx index 9c38d7aa1b..2a3331e316 100644 --- a/docs/xplat/src/content/en/components/grids/grids-header.mdx +++ b/docs/xplat/src/content/en/components/grids/grids-header.mdx @@ -307,7 +307,7 @@ There are multiple options to get access to our award-winning support at Infragi - Start at the {Platform} Support home page - Read the {Platform} [Documentation](../general-getting-started.md) and experiment with {Platform} Samples -- Read the {Platform} Blogs to stay up to date +- Read the {Platform} Blogs to stay up to date - Submit a Support Case - Learn from the {Platform} Reference Applications diff --git a/docs/xplat/src/content/en/components/grids/grids.mdx b/docs/xplat/src/content/en/components/grids/grids.mdx index 24e3f70f14..757a101352 100644 --- a/docs/xplat/src/content/en/components/grids/grids.mdx +++ b/docs/xplat/src/content/en/components/grids/grids.mdx @@ -973,7 +973,7 @@ There are multiple options to get access to our award-winning support at Infragi diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx index 5c57aadbb5..781d43aa36 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx @@ -41,7 +41,7 @@ For the Dock Manager pane contents we have used **iframe** elements which host d ### Drag and drop -In order to support dragging panes outside the application window we have replaced the built-in drag/drop which creates in-application floating panes with a custom implementation based on the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). We have subscribed to the `PaneHeaderConnected` and `TabHeaderConnected` events which are fired when a header element is connected to the DOM. When a header element is connected we reset the built-in and attach `DragStart` and `DragEnd` event listeners. +In order to support dragging panes outside the application window we have replaced the built-in drag/drop which creates in-application floating panes with a custom implementation based on the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). We have subscribed to the `paneHeaderConnected` and `tabHeaderConnected` events which are fired when a header element is connected to the DOM. When a header element is connected we reset the built-in and attach `dragStart` and `dragEnd` event listeners. @@ -65,7 +65,7 @@ dockManager.addEventListener('paneHeaderConnected', paneHeaderConnected); -In the `PaneHeaderDragStart` function we set the property of the Dock Manager component which will notify it that a drag operation has been started. +In the `paneHeaderDragStart` function we set the property of the Dock Manager component which will notify it that a drag operation has been started. @@ -79,7 +79,7 @@ const paneHeaderDragStart = async (pane: IgcContentPane, event: DragEvent) => { -We have subscribed to the `DragOver` and `drop` events of the `document` element. In the `DragOver` listener we notify the Dock Manager that the mouse is dragged over it by setting its property. This forces the Dock Manager to display its docking indicators. +We have subscribed to the `dragover` and `drop` events of the `document` element. In the `dragover` listener we notify the Dock Manager that the mouse is dragged over it by setting its property. This forces the Dock Manager to display its docking indicators. ```ts const handleDocumentDragOver = (event: DragEvent) => { @@ -110,7 +110,7 @@ const paneHeaderDragEnd = async (event: DragEvent) => { } ``` -When the pane header is dropped inside a document we call the `DropPane` method which notifies the Dock Manager that the dragged pane was dropped. If the pane was dropped on a docking indicator the method returns **true**. If the pane was dropped in the same window it was dragged from, the pane will be docked to its new position automatically. However, if it was dropped in another window we call the `droppedInAnotherWindow` function which first removes the pane from the source Dock Manager and then adds it to the new one. +When the pane header is dropped inside a document we call the `dropPane` method which notifies the Dock Manager that the dragged pane was dropped. If the pane was dropped on a docking indicator the method returns **true**. If the pane was dropped in the same window it was dragged from, the pane will be docked to its new position automatically. However, if it was dropped in another window we call the `droppedInAnotherWindow` function which first removes the pane from the source Dock Manager and then adds it to the new one. @@ -133,7 +133,7 @@ const handleDocumentDrop = async (event: DragEvent) => { -When a pane is dropped out of its current window, we need to remove the from its Dock Manager component and update the layout. +When a pane is dropped out of its current window, we need to remove the from its Dock Manager component and update the layout. diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx index d42b1e3853..443a0890f7 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx @@ -67,8 +67,6 @@ defineComponents(IgcDockManagerComponent); - - ## Usage Once the Dock Manager is imported, you can add it on the page: @@ -91,7 +89,7 @@ Once the Dock Manager is imported, you can add it on the page: Since the Dock Manager component uses ShadowDOM and slots it is not supported on older browsers like Internet Explorer 11 and Edge 18 and below (non-Chromium versions). -The Dock Manager has a property, which describes the layout of the panes. To start defining a layout, you should set the property and add child panes. Here is how you can define a layout with a single content pane: +The Dock Manager has a property, which describes the layout of the panes. To start defining a layout, you should set the property and add child panes. Here is how you can define a layout with a single content pane: ```ts @@ -141,7 +139,7 @@ this.dockManager.layout = { -To load the content of the panes, the Dock Manager uses [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). The [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute of the content element should match the of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to **100%** for predictable response when the end-user is resizing panes. +To load the content of the panes, the Dock Manager uses [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot). The [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute of the content element should match the of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to **100%** for predictable response when the end-user is resizing panes. ```html @@ -165,7 +163,7 @@ The Dock Manager defines several pane types: - - -Each type of pane has a property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the `useFixedSize` of the parent split pane. +Each type of pane has a property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the `useFixedSize` of the parent split pane. For more information on this refer to [Split Panes Fixed Size Mode](dock-manager-customization.md#split-panes-fixed-size-mode) topic. @@ -180,7 +178,7 @@ The end-user can perform the following actions to customize the layout at runtim - Dock a floating pane - Maximize a pane -All of these are reflected in the property of the Dock Manager. +All of these are reflected in the property of the Dock Manager. ### Content Pane @@ -206,18 +204,17 @@ const contentPane: IgrContentPane = { ``` -The property is used to provide a text header for the content pane. This text is rendered at several places: the top content pane header, the tab header if the pane is in a tab group and the unpinned header if the pane is unpinned. You can provide a custom slot content for each of these places respectively using the , and properties. If any of these properties is not set, the text is used. Here is how to provide a tab header slot content: +The property is used to provide a text header for the content pane. This text is rendered at several places: the top content pane header, the tab header if the pane is in a tab group and the unpinned header if the pane is unpinned. You can provide a custom slot content for each of these places respectively using the , and properties. If any of these properties is not set, the text is used. Here is how to provide a tab header slot content: + ```html
Content 1
Pane 1 Tab ``` - - ```ts const contentPane: IgcContentPane = { type: IgcDockManagerPaneType.contentPane, @@ -226,18 +223,18 @@ const contentPane: IgcContentPane = { tabHeaderId: 'tabHeader1' } ``` + + ```tsx
Content 1
Pane 1 Tab ``` - - ```tsx const contentPane: IgrContentPane = { type: IgrDockManagerPaneType.contentPane, @@ -246,9 +243,10 @@ const contentPane: IgrContentPane = { tabHeaderId: 'tabHeader1' } ``` + -When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its property to **false**. +When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its property to **false**. ```ts @@ -272,17 +270,17 @@ const contentPane = { ``` -The property affects only content panes that are docked outside a document host. Also, content panes hosted in a floating pane cannot be unpinned. +The property affects only content panes that are docked outside a document host. Also, content panes hosted in a floating pane cannot be unpinned. -By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - `Left`. It is also possible to set the desired destination of the unpinned pane by using the property. +By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - `Left`. It is also possible to set the desired destination of the unpinned pane by using the property. -You can configure which end-user operations are allowed for a content pane using its , , and properties. +You can configure which end-user operations are allowed for a content pane using its , , and properties. -When defining a content pane, you can set the property to true so the pane can be docked only in a document host. +When defining a content pane, you can set the property to true so the pane can be docked only in a document host. -To restrict the user interaction with the content pane and its content, you can set the property to true. This will prevent all user interactions with the pane unless it is a single floating pane. The latter could be moved, maximized or closed (according to the pane's settings for maximizing and closing), so the user can have a look at the elements under it but will not be able to interact with its content. +To restrict the user interaction with the content pane and its content, you can set the property to true. This will prevent all user interactions with the pane unless it is a single floating pane. The latter could be moved, maximized or closed (according to the pane's settings for maximizing and closing), so the user can have a look at the elements under it but will not be able to interact with its content. -By default, when you close a pane it gets removed from the object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the object you can use the property of the content pane. Setting the property to **true** will hide it from the UI, but it will remain in the object. In order to override the default close behavior you can subscribe to the `PaneClose` event like this: +By default, when you close a pane it gets removed from the object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the object you can use the property of the content pane. Setting the property to **true** will hide it from the UI, but it will remain in the object. In order to override the default close behavior you can subscribe to the event like this: ```ts @@ -297,18 +295,19 @@ this.dockManager.addEventListener('paneClose', ev => { ```tsx -this.dockManager.addEventListener('paneClose', ev => { +const handleOnPaneClose = (ev: CustomEvent) => { for (const pane of ev.detail.panes) { pane.hidden = true; } ev.preventDefault(); -}); +}; + ``` ### Split Pane -The is a container pane which stacks all of its child horizontally or vertically based on its property. Here is how a horizontal split pane with two child content panes is defined: +The is a container pane which stacks all of its child horizontally or vertically based on its property. Here is how a horizontal split pane with two child content panes is defined: ```ts @@ -354,11 +353,11 @@ const splitPane: IgrSplitPane = { The split pane may contain child panes of all pane types including other split panes. -By default, if the split pane is empty it is not displayed. Yet if you would like to change that behavior you can set its property to true and the split pane will be presented in the UI even when there is no panes inside it. +By default, if the split pane is empty it is not displayed. Yet if you would like to change that behavior you can set its property to true and the split pane will be presented in the UI even when there is no panes inside it. ### Tab Group Pane -The displays its child content as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined: +The displays its child content as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined: ```ts @@ -404,7 +403,7 @@ If there is not enough space to display all tab headers, the tab group shows **M The tabs also can be reordered without being detached from the tab group in which they are located. You can click on a tab of your choice and drag it left or right to the position you want it to be. If you drag the selected tab outside of the tabs area it will be detached into a floating pane. -In case you would like the tab group pane to be displayed in the UI when it has no tabs, you can set the property to true. +In case you would like the tab group pane to be displayed in the UI when it has no tabs, you can set the property to true. ### Document Host @@ -470,7 +469,7 @@ const docHost: IgrDocumentHost = { ### Floating Pane -The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the property of the . Here is how to add a floating pane with a single content pane inside: +The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the property of the . Here is how to add a floating pane with a single content pane inside: ```ts @@ -526,31 +525,36 @@ const layout: IgrDockManagerLayout = { ``` -The , and properties represent absolute dimensions in pixels. Please note that these properties are applied only for the split panes in the array. +The , and properties represent absolute dimensions in pixels. Please note that these properties are applied only for the split panes in the array. -With the and - you can set whether resizing floating panes is allowed. The `allowFloatingPanesResize` is an **IgcDockManagerComponent** property, so if the value is set to **false** none of the floating panes can be resized. The `floatingResizable` property can be applied separately on each split pane in the `floatingPanes` array and if the property value is not set, it defaults to the value of the `allowFloatingPanesResize` property. If the `floatingResizable` property is set for a specific pane, its value takes precedence over the `allowFloatingPanesResize` property value. +With the and + you can set whether resizing floating panes is allowed. The `allowFloatingPanesResize` is an **IgcDockManagerComponent** property, so if the value is set to **false** none of the floating panes can be resized. The `floatingResizable` property can be applied separately on each split pane in the `floatingPanes` array and if the property value is not set, it defaults to the value of the `allowFloatingPanesResize` property. If the `floatingResizable` property is set for a specific pane, its value takes precedence over the `allowFloatingPanesResize` property value. ### Active Pane -The Dock Manager component highlights the content pane which contains the focus and exposes it in its property. You can programmatically change the active pane by setting the property. You can also listen for changes of the property by subscribing to the `ActivePaneChanged` event: - +The Dock Manager component highlights the content pane which contains the focus and exposes it in its property. You can programmatically change the active pane by setting the property. You can also listen for changes of the property by subscribing to the event: + ```ts this.dockManager.addEventListener('activePaneChanged', ev => { console.log(ev.detail.oldPane); console.log(ev.detail.newPane); }); ``` + +The Dock Manager component highlights the content pane which contains the focus and exposes it in its property. You can programmatically change the active pane by setting the property. You can also listen for changes of the property by subscribing to the event: + ```tsx -this.dockManager.addEventListener('activePaneChanged', ev => { +const handleOnActivePaneChanged = (ev: CustomEvent) => { console.log(ev.detail.oldPane); console.log(ev.detail.newPane); -}); +}; + ``` + ### Docking @@ -559,7 +563,7 @@ When you start dragging a floating pane, different docking indicators will appea #### Root Docking -In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's . Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half. +In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's . Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half. dockmanager-root-docking @@ -634,7 +638,7 @@ this.dockManager.layout = { ...this.dockManager.layout }; ### Save/Load Layout -To restore or persist a layout, you simply have to get/set the value of the property. Here is how to save the layout as a stringified JSON: +To restore or persist a layout, you simply have to get/set the value of the property. Here is how to save the layout as a stringified JSON: ```ts @@ -666,10 +670,9 @@ private loadLayout() { - ### Adding Panes At Runtime -Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. +Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. @@ -677,11 +680,6 @@ Contents and panes can be added to the - - -### Events - -The Dock Manager component raises events when specific end-user interactions are performed for example closing, pinning, resizing and dragging a pane. You can find the full list of Dock Manager events in this [topic]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/interfaces/igcdockmanagereventmap.html). @@ -690,30 +688,33 @@ The Dock Manager component raises events when specific end-user interactions are
- +### Events +The Dock Manager component raises events when specific end-user interactions are performed for example closing, pinning, resizing and dragging a pane. You can find the full list of Dock Manager events in the [{DockManagerApiClass} Events]({environment:infragisticsBaseUrl}/api/{PlatformLowerNoHyphen}/{PackageDockManager}/latest/classes/{DockManagerApiClass}#events) section. - Here is how to add an event listener for the `PaneClose` event: + Here is how to add an event listener for the event: + ```ts this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail)); ``` - - - - - -
- - - - + + + Here is how to add an event listener for the event: - +```ts +const handleOnPaneClose = (ev: CustomEvent) => { + for (const pane of ev.detail.panes) { + pane.hidden = true; + } + ev.preventDefault(); +}; + +``` @@ -727,7 +728,6 @@ The Dock Manager component provides the option to customize all buttons using sl Let's utilize these slots and parts to create a customized Dock Manager layout. First, we will provide our own icons, using the `closeButton`, `maximizeButton`, `minimizeButton`, `pinButton` and `unpinButton` slots: - ```html
Content 1
@@ -758,7 +758,6 @@ Let's utilize these slots and parts to create a customized Dock Manager layout. - ```tsx
Content 1
@@ -1039,10 +1038,10 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def ## Localization -The Dock Manager lets you localize the strings used in context menus, tooltips, and ARIA attributes. By default, it reads the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute from the root `` element to determine which language to use. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is missing or set to an unsupported value, the Dock Manager uses [English (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN). +The Dock Manager lets you localize the strings used in context menus, tooltips, and ARIA attributes. By default, it reads the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute from the root `` element to determine which language to use. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is missing or set to an unsupported value, the Dock Manager uses [English (en)](https://github.com/IgniteUI/igniteui-i18n/blob/master/projects/igniteui-i18n-core/src/i18n/EN/dock-manager-resources.ts). -Ready-to-use Dock Manager resource strings for Spanish (`es`), Japanese (`ja`), and Korean (`ko`) are provided via the `igniteui-i18n-resources` peer dependency. To use one of these languages, install `igniteui-i18n-resources` and register the corresponding bundle with `igniteui-i18n-core`: +Ready-to-use Dock Manager resource strings for Spanish (`es`), Japanese (`ja`), and Korean (`ko`) are provided via the [igniteui-i18n-resources](https://www.npmjs.com/package/igniteui-i18n-resources) peer dependency. To use one of these languages, install `igniteui-i18n-resources` and register the corresponding bundle with `igniteui-i18n-core`: ```ts import { registerI18n } from 'igniteui-i18n-core'; @@ -1051,7 +1050,7 @@ import { DockManagerResourceStringsES } from 'igniteui-i18n-resources'; registerI18n(DockManagerResourceStringsES, 'es'); ``` -If you need to support a different language, use the [addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) method to provide your own translated strings: +If you need to support a different language, use the method to provide your own translated strings: ```ts import { addResourceStrings } from 'igniteui-dockmanager'; @@ -1066,7 +1065,7 @@ addResourceStrings('fr', dockManagerStringsFr); -The Dock Manager also exposes a property that you can use to modify individual strings directly. When you set the property, the Dock Manager uses the strings you provide regardless of the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on the page. +The Dock Manager also exposes a property that you can use to modify individual strings directly. When you set the property, the Dock Manager uses the strings you provide regardless of the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on the page. diff --git a/docs/xplat/src/content/jp/components/grids/grids-header.mdx b/docs/xplat/src/content/jp/components/grids/grids-header.mdx index 1c3b978949..3d3c36012d 100644 --- a/docs/xplat/src/content/jp/components/grids/grids-header.mdx +++ b/docs/xplat/src/content/jp/components/grids/grids-header.mdx @@ -531,7 +531,7 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ - {Platform} サポート ホーム ページをご覧ください。 - {Platform} [ドキュメント](../general-getting-started.md)を読み、{Platform} サンプルを試してください。 -- 最新の情報は、{Platform} ブログをご覧ください。 +- 最新の情報は、{Platform} ブログをご覧ください。 - サポート ケースの送信 - {Platform} 参照アプリケーションを試してください。 diff --git a/docs/xplat/src/content/jp/components/grids/grids.mdx b/docs/xplat/src/content/jp/components/grids/grids.mdx index 22a6940368..a0104722ca 100644 --- a/docs/xplat/src/content/jp/components/grids/grids.mdx +++ b/docs/xplat/src/content/jp/components/grids/grids.mdx @@ -972,7 +972,7 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx index e35b1ac3e1..c7185ad11c 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx @@ -1013,7 +1013,7 @@ igc-dockmanager::part(content-pane) { ## ローカライズ -ドック マネージャーは、コンテキスト メニュー、ツールチップ、および ARIA 属性で使用される文字列のローカライズをサポートします。デフォルトでは、ルートの `` 要素の [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性を読み取って使用する言語を決定します。[lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性が設定されていないか、サポートされていない値に設定されている場合、ドック マネージャーは [英語 (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN) を使用します。 +ドック マネージャーは、コンテキスト メニュー、ツールチップ、および ARIA 属性で使用される文字列のローカライズをサポートします。デフォルトでは、ルートの `` 要素の [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性を読み取って使用する言語を決定します。[lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性が設定されていないか、サポートされていない値に設定されている場合、ドック マネージャーは を使用します。 スペイン語 (`es`)、日本語 (`ja`)、韓国語 (`ko`) の既製のドック マネージャー リソース文字列は、`igniteui-i18n-resources` ピア依存関係を通じて提供されます。これらの言語のいずれかを使用するには、`igniteui-i18n-resources` をインストールし、対応するバンドルを `igniteui-i18n-core` に登録します: @@ -1025,7 +1025,7 @@ import { DockManagerResourceStringsES } from 'igniteui-i18n-resources'; registerI18n(DockManagerResourceStringsES, 'es'); ``` -別の言語をサポートする必要がある場合は、[addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) メソッドを使用して独自の翻訳済み文字列を提供します: +別の言語をサポートする必要がある場合は、 メソッドを使用して独自の翻訳済み文字列を提供します: ```ts import { addResourceStrings } from 'igniteui-dockmanager'; diff --git a/src/plugins/remark-env-vars.ts b/src/plugins/remark-env-vars.ts index 1ea9838e6e..5acbc3812e 100644 --- a/src/plugins/remark-env-vars.ts +++ b/src/plugins/remark-env-vars.ts @@ -105,6 +105,13 @@ export function remarkEnvVars() { if (node.type === 'html' && node.value) { node.value = replaceEnvVars(node.value); } + if ((node.type === 'mdxJsxTextElement' || node.type === 'mdxJsxFlowElement') && Array.isArray(node.attributes)) { + for (const attr of node.attributes) { + if (attr.type === 'mdxJsxAttribute' && typeof attr.value === 'string') { + attr.value = replaceEnvVars(attr.value); + } + } + } }); }; }