Skip to content

Commit 4281549

Browse files
agoldenbaumagoldenbaum
authored
Merge pull request #1421 from IgniteUI/mdd-colorEditor-docs
Mdd color editor docs
2 parents e0b97f6 + b161119 commit 4281549

File tree

4 files changed

+233
-1
lines changed

4 files changed

+233
-1
lines changed

‎doc/en/components/layouts/color-editor.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
title: {Platform} Color Editor | Color Editor | Infragistics
3+
_description: Color Editor component provides an easily configurable option to change colors for any desirable component or aspect of your application.
4+
_keywords: {Platform} Color Editor, {ProductName}, Infragistics
5+
mentionedTypes: ["ColorEditor"]
6+
namespace: Infragistics.Controls
7+
---
8+
9+
# {Platform} Color Editor Overview (preview)
10+
The {ProductName} Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the eyedrop icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1).
11+
12+
## {Platform} Color Editor Example
13+
14+
`sample="/layouts/color-editor/overview", height="320", alt="{Platform} Color Editor Example"`
15+
16+
<div class="divider--half"></div>
17+
18+
## Dependencies
19+
20+
<!-- Angular, WebComponents, React -->
21+
First, you need to install the {ProductName} by running the following command:
22+
23+
```cmd
24+
npm install {PackageCore}
25+
npm install {PackageInputs}
26+
```
27+
28+
Before using the `ColorEditor`, you need to register the following modules as follows:
29+
30+
```ts
31+
import { IgcColorEditorModule } from "igniteui-angular-inputs";
32+
33+
@NgModule({
34+
imports: [
35+
IgcColorEditorModule
36+
]
37+
})
38+
export class AppModule {}
39+
```
40+
41+
```ts
42+
import { IgcColorEditorModule, IgcColorEditorComponent } from 'igniteui-webcomponents-inputs';
43+
44+
ModuleManager.register(
45+
IgcColorEditorModule
46+
);
47+
```
48+
49+
```tsx
50+
import { IgrColorEditor, IgrColorEditorModule } from 'igniteui-react';
51+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
52+
53+
IgrColorEditorModule.register();
54+
```
55+
56+
<!-- end:Angular, WebComponents, React -->
57+
58+
<!-- Blazor -->
59+
60+
First, add the **IgniteUI.Blazor.Controls** namespace in the **_Imports.razor** file:
61+
62+
```razor
63+
@using IgniteUI.Blazor.Controls
64+
```
65+
66+
The following modules are required when using the Dashboard Tile component:
67+
68+
```razor
69+
// in Program.cs file
70+
builder.Services.AddIgniteUIBlazor(
71+
typeof(IgbColorEditorModule)
72+
);
73+
```
74+
75+
<!-- end: Blazor -->
76+
77+
For a complete introduction to the {ProductName}, read the [*Getting Started*](../general-getting-started.md) topic.
78+
79+
## Usage
80+
81+
The simplest way to start using the `ColorEditor` is as follows:
82+
83+
<!-- Angular -->
84+
```html
85+
<igx-color-editor
86+
name="colorEditor"
87+
#colorEditor>
88+
</igx-color-editor>
89+
</div>
90+
```
91+
<!-- end: Angular -->
92+
93+
<!-- WebComponents -->
94+
```html
95+
<igc-color-editor
96+
name="colorEditor"
97+
id="colorEditor">
98+
</igc-color-editor>
99+
```
100+
<!-- end: WebComponents -->
101+
102+
<!-- React -->
103+
```tsx
104+
<IgrColorEditor
105+
ref={this.colorEditorRef}>
106+
</IgrColorEditor>
107+
```
108+
<!-- end:React -->
109+
110+
<!-- Blazor -->
111+
```razor
112+
<IgbColorEditor>
113+
</IgbColorEditor>
114+
```
115+
<!-- end:Blazor -->
116+
117+
## Binding to events
118+
119+
The Color Editor component raises the following events:
120+
121+
- valueChanged
122+
- valueChanging
123+
124+
<!-- Angular -->
125+
```ts
126+
@ViewChild("colorEditor", { static: true } )
127+
private colorEditor: IgxColorEditorComponent
128+
public ngAfterViewInit(): void
129+
{
130+
this.colorEditor.valueChanged.subscribe(this.onValueChanged);
131+
}
132+
133+
public onValueChanged = (e: any) => {
134+
console.log("test");
135+
}
136+
```
137+
<!-- end: Angular -->
138+
139+
<!-- WebComponents -->
140+
```ts
141+
this.OnValueChanged = this.OnValueChanged.bind(this);
142+
this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent;
143+
this.colorEditor.valueChanged = this.OnValueChanged;
144+
```
145+
<!-- end: WebComponents -->
146+
147+
<!-- Blazor -->
148+
```razor
149+
<IgbColorEditor ValueChanged="@OnValueChanged" />
150+
151+
@code {
152+
public void OnValueChanged(IgbColorEditorPanelSelectedValueChangedEventArgs e)
153+
{
154+
155+
}
156+
}
157+
```
158+
<!-- end:Blazor -->
159+
160+
<!-- React -->
161+
```tsx
162+
<IgrColorEditor valueChanged={this.onValueChanged} />
163+
164+
public onValueChanged(calendar: IgrColorEditor, e: IgrColorEditorPanelSelectedValueChangedEventArgs) {
165+
166+
}
167+
```
168+
<!-- end: React -->
169+
170+
<div class="divider--half"></div>
171+
172+
## API References
173+
174+
- `ColorEditor`
175+
176+
## Additional Resources
177+
178+
* [{ProductName} **Forums**]({ForumsLink})
179+
* [{ProductName} **GitHub**]({GithubLink})

‎doc/en/components/menus/toolbar.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -358,6 +358,59 @@ By default the {Platform} Toolbar is shown horizontally, but it also has the abi
358358
The following example demonstrates the vertical orientation of the {Platform} Toolbar.
359359
`sample="/charts/toolbar/layout-in-vertical-orientation", height="600", alt="{Platform} Verical Orientation"`
360360

361+
### Color Editor
362+
363+
You can add a custom color editor tool to the the {Platform} Toolbar, which will also work with the Command event to perform custom styling to your application.
364+
365+
```html
366+
<igx-toolbar
367+
name="toolbar"
368+
#toolbar>
369+
<igx-tool-action-color-editor
370+
title="Series Brush"
371+
name="colorEditorTool"
372+
#colorEditorTool>
373+
</igx-tool-action-color-editor>
374+
</igx-toolbar>
375+
```
376+
377+
```ts
378+
<igc-toolbar
379+
name="toolbar"
380+
id="toolbar">
381+
<igc-tool-action-color-editor
382+
title="Series Brush Color"
383+
name="colorEditorTool"
384+
id="colorEditorTool">
385+
</igc-tool-action-color-editor>
386+
</igc-toolbar>
387+
```
388+
389+
```tsx
390+
<IgrToolbar
391+
ref={this.toolbarRef}
392+
target={this.chart}>
393+
<IgrToolActionColorEditor
394+
title="Series Brush Color"
395+
name="colorEditorTool">
396+
</IgrToolActionColorEditor>
397+
</IgrToolbar>
398+
```
399+
400+
```razor
401+
<IgbToolbar
402+
Name="toolbar"
403+
@ref="toolbar">
404+
<IgbToolActionColorEditor
405+
Title="Series Brush">
406+
</IgbToolActionColorEditor>
407+
</IgbToolbar>
408+
```
409+
410+
The following example demonstrates styling the {Platform} Data Chart series brush with the Color Editor tool.
411+
`sample="/charts/toolbar/color-editor-support", height="600", alt="{Platform} Color Editor Support"`
412+
413+
361414
<!-- ## Styling/Theming
362415
363416
The icon component can be styled by using it's `BaseTheme` property directly to the `Toolbar`.

‎doc/en/components/scheduling/calendar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ this.calendar.addEventListener('igcChange', ev => console.log(ev.detail));
351351
```
352352

353353
```tsx
354-
<IgbCalendar change={this.onCalendarChange} />
354+
<IgrCalendar change={this.onCalendarChange} />
355355

356356
public onCalendarChange(calendar: IgrCalendar, e: IgrComponentDataValueChangedEventArgs) {
357357

‎doc/en/images/color-editor.png‎

17 KB
Loading

0 commit comments

Comments
 (0)