Basic Usage
<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.
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-Checked="" Label="Disable Toolbar" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Checked="" Label="Disable Alpha" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Checked="" Label="Disable Color Field" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Checked="" Label="Disable Preview" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Checked="" Label="Disable Sliders" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Checked="" Label="Disable Inputs" Color="Color.Primary" Dense="true" /> <MudCheckBox @bind-Checked="" 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" />
Color Picker Mode
You can set the default mode of the colorpicker with the ColorPickerMode
prop. This can be useful combined with DisableModeSwitch
to force the usage of a specific color mode.
<MudColorPicker Label="HSL" ColorPickerMode="ColorPickerMode.HSL" DisableModeSwitch="true" />
Custom Palette
The default palette can be changed with Palette
property. The first five colors show up in the quick view when clicking the color preview dot.
@using MudBlazor.Utilities <MudColorPicker PickerVariant="PickerVariant.Static" ColorPickerView="ColorPickerView.Palette" Palette="CustomPalette" />
@code { public IEnumerable<MudColor> CustomPalette { get; set; } = new MudColor[] { "#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#FFEBEE", "#FCE4EC", "#F3E5F5", "#EDE7F6", "#E8EAF6", "#FFCDD2", "#F8BBD0", "#E1BEE7", "#D1C4E9", "#C5CAE9", "#EF9A9A", "#F48FB1", "#CE93D8", "#B39DDB", "#9FA8DA", "#E57373", "#F06292", "#BA68C8", "#9575CD", "#7986CB", "#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0", "#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB" }; }
Alpha
You can disable the alpha slider and its textfield counterpart by setting DisableAlpha
to true, doing so will remove any transparency from the color and output RGB, HSL, HEX instead of RGBA, HSLA and HEXA.
<MudColorPicker Label="Disabled Alpha" DisableAlpha="true" />
Switch Mode
Switch Mode lets the user switch betwen RGB, HSL and HEX the button can be disabled with DisableModeSwitch
set to true, this can be useful if you want to control what type of input/output should be used.
<MudColorPicker Label="Switch Disabled" DisableModeSwitch="true" />
Dialog Mode
<MudColorPicker DisableToolbar="false" Label="Dialog Picker" PickerVariant="PickerVariant.Dialog" />
Inline Mode
<MudColorPicker DisableToolbar="false" Label="Dialog Picker" PickerVariant="PickerVariant.Inline" />
Static Mode
<MudColorPicker PickerVariant="PickerVariant.Static" />
Elevation
You can change the elevation with the Elevation
parameter. The default value is 0 for static and 8 for inline.
<MudColorPicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="1"/> <MudColorPicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="12" />
Example Usage
Gradient Colors
@using MudBlazor.Utilities <MudPaper Elevation="0" Class="mud-width-full mud-height-full d-flex justify-center align-end pb-8" MinHeight="600px" Style="@($"background-image:linear-gradient({degrees}deg, {_gradientPrimary.ToString(MudColorOutputFormats.RGBA)} 0%, {_gradientSecondary.ToString(MudColorOutputFormats.RGBA)} 100%);")"> <MudPaper Class="d-flex"> <MudColorPicker Rounded="true" Class="rounded-tr-0" PickerVariant="PickerVariant.Static" DisableModeSwitch="true" Value="_pickerColor" ValueChanged="UpdateSelectedColor" /> <div class="pa-2"> <MudText Typo="Typo.h6" Class="mx-1">Gradient Colors</MudText> <MudList Clickable="true" SelectedItemChanged="ChangeSelectedColor"> <MudListItem Text="1"> <div class="mud-width-full rounded py-4" style="@($"background-color:{_gradientPrimary};")"></div> </MudListItem> <MudListItem Text="2"> <div class="mud-width-full rounded py-4" style="@($"background-color:{_gradientSecondary};")"></div> </MudListItem> </MudList> <MudSlider Min="0" Max="360" Step="1" @bind-Value="" Class="px-2">Degrees</MudSlider> </div> </MudPaper> </MudPaper>
@code { public MudColor _gradientPrimary = "#594AE2"; public MudColor _gradientSecondary = "#FF4081"; public MudColor _pickerColor = "#594AE2"; int degrees = 90; bool _isFirstColor = true; public void ChangeSelectedColor(MudListItem item) { if (item.Text == "1") { _isFirstColor = true; _pickerColor = _gradientPrimary; UpdateSelectedColor(_gradientPrimary); } else if (item.Text == "2") { _isFirstColor = false; _pickerColor = _gradientSecondary; UpdateSelectedColor(_gradientSecondary); } } public void UpdateSelectedColor(MudColor value) { _pickerColor = value; if (_isFirstColor) { _gradientPrimary = value; } else { _gradientSecondary = value; } } }
Disable Drag effect
<MudColorPicker DisableDragEffect="true" PickerVariant="PickerVariant.Static" />