Blazor Color Editor Overview Preview
The Ignite UI for Blazor Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush 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).
Blazor Color Editor Example
Dependencies
First, add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:
@using IgniteUI.Blazor.ControlsThe following modules are required when using the Dashboard Tile component:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbColorEditorModule)
);Usage
The simplest way to start using the IgbColorEditor is as follows:
<IgbColorEditor>
</IgbColorEditor>Binding to events
The Color Editor component raises the following events:
- valueChanged
- valueChanging
<IgbColorEditor ValueChanged="@OnValueChanged" />
@code {
public void OnValueChanged(IgbColorEditorPanelSelectedValueChangedEventArgs e)
{
}
}