Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions en/components/menus/toolbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
Binary file added en/images/color-editor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading