Skip to content

Commit 0a37dad

Browse files
dimodiDimo Dimov
dimodi
and
Dimo Dimov
authored
docs: Add FlatColorPicker docs (#550)
Co-authored-by: Dimo Dimov <dimo@Dimos-MacBook-Pro.local>
1 parent 0fb6140 commit 0a37dad

File tree

6 files changed

+248
-4
lines changed

6 files changed

+248
-4
lines changed

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ navigation:
276276
"*colorpalette":
277277
title: "ColorPalette"
278278
isNew: true
279-
"*colorpicker":
279+
"*/colorpicker":
280280
title: "ColorPicker"
281281
"*/multicolumncombobox":
282282
isNew: true

‎components/colorpicker/overview.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ position: 0
1010

1111
# ColorPicker Overview
1212

13-
The <a href = "https://www.telerik.com/blazor-ui/colorpicker" target="_blank">ColorPicker for Blazor</a> is an interactive component that allows color selection from a popup palette or a [HSVA](https://en.wikipedia.org/wiki/HSL_and_HSV) canvas. Users can also type a specific RGB/HEX color value manually.
13+
The <a href = "https://www.telerik.com/blazor-ui/colorpicker" target="_blank">ColorPicker for Blazor</a> is an interactive component that allows color selection from a popup palette or a [HSVA](https://en.wikipedia.org/wiki/HSL_and_HSV) canvas. Users can also type a specific RGB/HEX color value manually. The ColorPicker is practically identical to the [FlatColorPicker component]({%slug flatcolorpicker-overview%}) with the only difference that the ColorPicker takes up less space and displays the color selection UI in a popup.
1414

1515
#### In this article:
1616
* [Basics](#basics)
@@ -51,7 +51,7 @@ The image below reveals all ColorPicker interface elements:
5151
* Current color box (below the color preview)
5252
* Clear button (top)
5353
* Palette tiles or HSV canvas with hue and opacity sliders (middle)
54-
* RGBA or HEX value textboxes (bottom)
54+
* RGBA or HEX value textboxes with a toggle button (bottom)
5555
* Apply and Cancel buttons (bottom)
5656

5757
Clicking outside the ColorPicker popup acts as an **Apply** action.
@@ -74,7 +74,7 @@ The ColorPicker tag exposes the following features via its attributes:
7474
### Buttons
7575

7676
* `ShowButtons` - `bool` - sets the visibility of the Apply and Cancel buttons (`true` by default).
77-
* `ClearButton` - `bool` - sets the visibility of the Clear button.
77+
* `ShowClearButton` - `bool` - sets the visibility of the Clear button.
7878

7979
### Custom Icon
8080

‎components/flatcolorpicker/events.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
title: Events
3+
page_title: Events | FlatColorPicker for Blazor
4+
description: Events in the FlatColorPicker for Blazor.
5+
slug: flatcolorpicker-events
6+
tags: telerik,blazor,flatcolorpicker,events
7+
published: true
8+
position: 20
9+
---
10+
11+
# FlatColorPicker Events
12+
13+
This article describes the available events of the Telerik FlatColorPicker for Blazor.
14+
15+
* [OnChange](#onchange)
16+
* [ValueChanged](#valuechanged)
17+
* [ViewChanged](#viewchanged)
18+
19+
## OnChange
20+
21+
The `OnChange` event fires when the user commits their selection with:
22+
23+
* Apply or Cancel button click
24+
* Enter keypress
25+
26+
Note that the `OnChange` event may also fire when the actual selected color has not changed.
27+
28+
The event type is `EventCallback<object>`. The `OnChange` event does not prevent two-way binding for the `Value` attribute.
29+
30+
````CSHTML
31+
@* Handle the FlatColorPicker OnChange event *@
32+
33+
<p>@EventLog</p>
34+
35+
<TelerikFlatColorPicker @bind-Value="@Color" OnChange="@FlatColorPickerOnChange" />
36+
37+
@code {
38+
string Color { get; set; }
39+
string EventLog { get; set; }
40+
41+
async Task FlatColorPickerOnChange(object newColor)
42+
{
43+
EventLog = string.Format("The selected color is: {0}", (string)newColor);
44+
}
45+
}
46+
````
47+
48+
## ValueChanged
49+
50+
The `ValueChanged` event fires when the user selects a new color and the component value changes.
51+
52+
The event type is `EventCallback<string>`. Using `ValueChanged` requires one-way binding for the `Value` attribute and manual value update in the event handler.
53+
54+
````CSHTML
55+
@* Handle the FlatColorPicker ValueChanged event *@
56+
57+
<TelerikFlatColorPicker Value="@Color" ValueChanged="@FlatColorPickerValueChanged" />
58+
59+
@code {
60+
string Color { get; set; }
61+
62+
async Task FlatColorPickerValueChanged(string newColor)
63+
{
64+
Color = newColor;
65+
}
66+
}
67+
````
68+
69+
## ViewChanged
70+
71+
The `ViewChanged` event fires when the user toggles between the component views.
72+
73+
The event type is `EventCallback<ColorPickerView>`. Using `ViewChanged` requires one-way binding for the `View` attribute and manual value update in the event handler.
74+
75+
````CSHTML
76+
@* Handle the FlatColorPicker ViewChanged event *@
77+
78+
<TelerikFlatColorPicker @bind-Value="@Color" View="@View" ViewChanged="@FlatColorPickerViewChanged" />
79+
80+
@code {
81+
string Color { get; set; }
82+
ColorPickerView View { get; set; }
83+
84+
async Task FlatColorPickerViewChanged(ColorPickerView newView)
85+
{
86+
View = newView;
87+
}
88+
}
89+
````
90+
91+
## See Also
92+
93+
* [FlatColorPicker Overview]({%slug flatcolorpicker-overview%})
94+
* [FlatColorPicker Views]({%slug flatcolorpicker-views%})

‎components/flatcolorpicker/images/flatcolorpicker-overview.png‎

28 KB
Loading

‎components/flatcolorpicker/overview.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Overview
3+
page_title: Overview | FlatColorPicker for Blazor
4+
description: Overview of the FlatColorPicker for Blazor.
5+
slug: flatcolorpicker-overview
6+
tags: telerik,blazor,flatcolorpicker,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# FlatColorPicker Overview
12+
13+
The <a href = "https://www.telerik.com/blazor-ui/flatcolorpicker" target="_blank">FlatColorPicker for Blazor</a> is an interactive component that allows color selection from a color palette or a [HSVA](https://en.wikipedia.org/wiki/HSL_and_HSV) canvas. Users can also type a specific RGB/HEX color value manually. The FlatColorPicker is practically identical to the [ColorPicker component]({%slug colorpicker-overview%}) with the only difference that the ColorPicker takes up less space and displays the color selection UI in a popup.
14+
15+
#### In this article:
16+
* [Basics](#basics)
17+
* [Example](#example)
18+
* [Interface](#interface)
19+
* [Features](#features)
20+
* [Supported Value Formats](#supported-value-formats)
21+
22+
## Basics
23+
24+
To use a Telerik FlatColorPicker for Blazor:
25+
26+
1. Add the `TelerikFlatColorPicker` tag.
27+
1. Set its `Value` attribute to any of the [supported HEX/RGB formats](#supported-value-formats). Use a `string` property with [one-way]({%slug flatcolorpicker-events%}#valuechanged) or [two-way](#example) binding.
28+
1. (optional) Set the `ValueFormat` to `ColorFormat.Hex` or `ColorFormat.Rgb` if the app expects a specific color format.
29+
30+
## Example
31+
32+
Here is a simple FlatColorPicker declaration and the resulting UI.
33+
34+
````CSHTML
35+
@* Blazor FlatColorPicker *@
36+
37+
<TelerikFlatColorPicker @bind-Value="@Color" />
38+
39+
@code {
40+
string Color { get; set; } = "rgb(40, 47, 137)";
41+
}
42+
````
43+
44+
## Interface
45+
46+
The image below reveals all FlatColorPicker interface elements:
47+
48+
* View selectors (top left)
49+
* Color preview box (top right)
50+
* Current color box (below the color preview)
51+
* Clear button (top)
52+
* Palette tiles or HSV canvas with hue and opacity sliders (middle)
53+
* RGBA or HEX value textboxes with a toggle button (bottom)
54+
* Apply and Cancel buttons (bottom)
55+
56+
![FlatColorPicker component](images/flatcolorpicker-overview.png)
57+
58+
## Features
59+
60+
The FlatColorPicker tag exposes the following features via its attributes:
61+
62+
* `Value` - `string` - sets the FlatColorPicker value in a few [different color formats](#supported-value-formats). Supports two-way binding.
63+
* `ValueFormat` - `ColorFormat` - sets the color format, which the component will return in the application code. By default, the property is not set and the value format will change depending on the used view: `Rgb` when selecting a color from the GradientView, and `Hex` when selecting a color from the PaletteView.
64+
* `FlatColorPickerViews` - `RenderFragment` - a nested container to list the [FlatColorPicker views]({%slug flatcolorpicker-views%}). All views are enabled by default and the user can switch between them with buttons. Each view tag has its own configuration attributes.
65+
* `View` - `ColorPickerView` - sets the default selected [view]({%slug flatcolorpicker-views%}) (`ColorPickerView.Gradient` by default). Supports two-way binding.
66+
* `ShowPreview` - `bool` - toggles the [current color box and the color preview box](#interface) in the popup (`true` by default).
67+
68+
* `Class` - `string` - renders a custom CSS class to the `div.k-flatcolorpicker` element.
69+
* `Enabled` - `bool` - determines if the user can open the popup and change the value (`true` by default).
70+
71+
### Buttons
72+
73+
* `ShowButtons` - `bool` - sets the visibility of the Apply and Cancel buttons (`true` by default).
74+
* `ShowClearButton` - `bool` - sets the visibility of the Clear button.
75+
76+
## Supported Value Formats
77+
78+
The FlatColorPicker accepts values by the application code in the following formats:
79+
80+
@[template](/_contentTemplates/common/coloreditors.md#value-formats)
81+
82+
Color keywords are not supported.
83+
84+
## See Also
85+
86+
* [FlatColorPicker Views]({%slug flatcolorpicker-views%})
87+
* [FlatColorPicker Events]({%slug flatcolorpicker-events%})
88+
* [FlatColorPicker Live Demo](https://demos.telerik.com/blazor-ui/flatcolorpicker/overview)

‎components/flatcolorpicker/views.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: Views
3+
page_title: Views | FlatColorPicker for Blazor
4+
description: Views of the FlatColorPicker for Blazor.
5+
slug: flatcolorpicker-views
6+
tags: telerik,blazor,flatcolorpicker,views,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# FlatColorPicker Views
12+
13+
The FlatColorPicker can display different views. They allow users to select a color from an interface that matches their preferences. The supported views are:
14+
15+
* [FlatColorPickerGradientView](#flatcolorpickergradientview) - allows unlimited color selection from an [HSVA](https://en.wikipedia.org/wiki/HSL_and_HSV) canvas. This view also renders textboxes for typing a color in [RGB or HEX format]({%slug colorpicker-overview%}#supported-value-formats).
16+
* [FlatColorPickerPaletteView](#flatcolorpickerpaletteview) - allows color selection from a predefined collection of colors.
17+
18+
By default, both views are enabled and the gradient view is displayed first. Both behaviors can be configured via the FlatColorPicker [`FlatColorPickerViews` container and `View` attribute]({%slug flatcolorpicker-overview%}#features).
19+
20+
## FlatColorPickerGradientView
21+
22+
The GradientView uses a [`TelerikColorGradient` component]({%slug colorgradient-overview%}). The following [ColorGradient attributes]({%slug colorgradient-overview%}#features) are exposed in the `FlatColorPickerGradientView` tag:
23+
24+
* `Format`
25+
* `Formats`
26+
* `ShowOpacityEditor`
27+
28+
## FlatColorPickerPaletteView
29+
30+
The PaletteView uses a [`TelerikColorPalette` component]({%slug colorpalette-overview%}). The following [ColorPalette attributes]({%slug colorpalette-overview%}#features) are exposed in the `FlatColorPickerPaletteView` tag:
31+
32+
* `Columns`
33+
* `Colors`
34+
* `TileWidth`
35+
* `TileHeight`
36+
37+
## Example
38+
39+
````CSHTML
40+
@* Blazor FlatColorPicker Views *@
41+
42+
<TelerikFlatColorPicker @bind-Value="@Color">
43+
<FlatColorPickerViews>
44+
<FlatColorPickerGradientView Format="ColorFormat.Hex"
45+
ShowOpacityEditor="true" />
46+
<FlatColorPickerPaletteView Colors="ColorPalettePresets.Basic"
47+
Columns="5"
48+
TileWidth="40px"
49+
TileHeight="40px" />
50+
</FlatColorPickerViews>
51+
</TelerikFlatColorPicker>
52+
53+
@code {
54+
string Color { get; set; }
55+
}
56+
````
57+
58+
59+
## See Also
60+
61+
* [FlatColorPicker Events]({%slug flatcolorpicker-events%})
62+
* [FlatColorPicker Views Demo](https://demos.telerik.com/blazor-ui/flatcolorpicker/views)

0 commit comments

Comments
 (0)