Merge pull request #6015 from IgniteUI/ESShared/XPlaform_en_igniteui-…

…xplat-docs-make-pr_2024.12.11.1 Changes from igniteui-xplat-docs-make-pr for en
IgniteUI · Dec 16, 2024 · fa46eb9 · fa46eb9
2 parents 5e7fed0 + dfc60ec
commit fa46eb9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/en/components/menus/toolbar.md b/en/components/menus/toolbar.md
@@ -194,6 +194,41 @@ The following example demonstrates the vertical orientation of the Angular Toolb
 </code-view>
 
 
+### Color Editor
+
+You can add a custom color editor tool to the the Angular Toolbar, which will also work with the Command event to perform custom styling to your application.
+
+```html
+<igx-toolbar
+  name="toolbar"
+  #toolbar>
+      <igx-tool-action-color-editor
+      title="Series Brush"
+      name="colorEditorTool"
+      #colorEditorTool>
+      </igx-tool-action-color-editor>
+</igx-toolbar>
+```
+
+```ts
+<igc-toolbar
+  name="toolbar"
+  id="toolbar">
+      <igc-tool-action-color-editor
+      title="Series Brush Color"
+      name="colorEditorTool"
+      id="colorEditorTool">
+      </igc-tool-action-color-editor>
+</igc-toolbar>
+```
+
+The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool. <code-view style="height: 600px" alt="Angular Color Editor Support"
+           data-demos-base-url="{environment:dvDemosBaseUrl}"
+                    iframe-src="{environment:dvDemosBaseUrl}/charts/toolbar/color-editor-support"
+                                                 github-src="charts/toolbar/color-editor-support">
+</code-view>
+
+
 <!-- ## Styling/Theming
 
 The icon component can be styled by using it's `BaseTheme` property directly to the `Toolbar`.

diff --git a/en/images/color-editor.png b/en/images/color-editor.png