Basic Usage
@using MudBlazor.Utilities <MudColorPicker Label="Basic Color Picker" @bind-Text="_colorValue" Style="@($"color: {_colorValue};")" Placeholder="Select Color" />
@code { private string _colorValue; }
Parts
All parts of the color picker can be removed individually if you just want certain functionality.
R
G
B
A
Options
<MudGrid> <MudItem md="8" Class="d-flex justify-center"> <MudColorPicker DisableToolbar="DisableToolbar" DisableAlpha="DisableAlpha" DisableColorField="DisableColorField" DisablePreview="DisablePreview" DisableSliders="DisableSliders" DisableInputs="DisableInputs" DisableModeSwitch="DisableModeSwitch" ColorPickerMode="ColorPickerMode" PickerVariant="PickerVariant.Static" /> </MudItem> <MudItem md="4"> <MudPaper Height="400px" Class="px-4 pt-2 pb-4"> <MudText Typo="Typo.h6">Options</MudText> <MudCheckBox @bind-Value="DisableToolbar" Label="Disable Toolbar" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Value="DisableAlpha" Label="Disable Alpha" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Value="DisableColorField" Label="Disable Color Field" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Value="DisablePreview" Label="Disable Preview" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Value="DisableSliders" Label="Disable Sliders" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Value="DisableInputs" Label="Disable Inputs" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Value="DisableModeSwitch" Label="Disable Mode Switch" Color="Color.Primary" Dense="true" /> <MudSelect Label="Color Picker Mode" Variant="Variant.Outlined" Dense="true" Margin="Margin.Dense" @bind-Value="ColorPickerMode" Class="mt-4"> <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.RGB">RGB</MudSelectItem> <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.HSL">HSL</MudSelectItem> <MudSelectItem T="ColorPickerMode" Value="ColorPickerMode.HEX">HEX</MudSelectItem> </MudSelect> </MudPaper> </MudItem> </MudGrid>
@code { public bool DisableToolbar { get; set; } = true; public bool DisableAlpha { get; set; } public bool DisableColorField { get; set; } public bool DisablePreview { get; set; } public bool DisableSliders { get; set; } public bool DisableInputs { get; set; } public bool DisableModeSwitch { get; set; } public ColorPickerMode ColorPickerMode { get; set; } }
Color Picker View
The default view can be changed with ColorPickerView and can be useful when you want a minimalistic color picker or force the use of certain colors.
<MudColorPicker Label="Spectrum" ColorPickerView="ColorPickerView.Spectrum" /> <MudColorPicker Label="Palette" ColorPickerView="ColorPickerView.Palette" /> <MudColorPicker Label="Grid" ColorPickerView="ColorPickerView.Grid" /> <MudColorPicker Label="Compact Grid" ColorPickerView="ColorPickerView.GridCompact" />