MudColorPicker API

Properties
Name Type Default Description
Data
Text
string
"#594ae2ff" The currently selected string value (two-way bindable)
Value
MudColor
A two-way bindable property representing the selected value. MudColor is a utility class that can be used to get the value as RGB, HSL, hex or other value
Validation
Error
bool
False If true, the label will be displayed in an error state.
ErrorText
string
null The ErrorText that will be displayed if Error true.
For
Expression<Func<MudColor>>
null Specify an expression which returns the model's field for which validation messages should be displayed. Currently only string fields are supported.
Required
bool
False If true, this form input is required to be filled out.
RequiredError
string
"Required" The error text that will be displayed if the input is not filled out but required.
Validation
object
null A validation func or a validation attribute. Supported types are: Func<T, bool> ... will output the standard error message "Invalid" if false Func<T, string> ... outputs the result as error message, no error if null Func<T, IEnumerable< string >> ... outputs all the returned error messages, no error if empty Func<object, string, IEnumerable< string >> input Form.Model, Full Path of Member ... outputs all the returned error messages, no error if empty Func<T, Task< bool >> ... will output the standard error message "Invalid" if false Func<T, Task< string >> ... outputs the result as error message, no error if null Func<T, Task<IEnumerable< string >>> ... outputs all the returned error messages, no error if empty Func<object, string, Task<IEnumerable< string >>> input Form.Model, Full Path of Member ... outputs all the returned error messages, no error if empty System.ComponentModel.DataAnnotations.ValidationAttribute instances
Behavior
Adornment
Adornment
Adornment.End Sets if the icon will be att start or end, set to false to disable.
AdornmentIcon
string
Sets the icon of the input text field
Converter
Converter<MudColor, string>
The generic converter of the component.
Culture
CultureInfo
The culture of the component.
Disabled
bool
False If true, the picker will be disabled.
Editable
bool
False If true, the picker will be editable.
HelperText
string
null If string has value, HelperText will be applied.
HelperTextOnFocus
bool
False If true, the helper text will only be visible on focus.
Label
string
null If string has value the label text will be displayed in the input, and scaled down at the top if the input has value.
Mask
IMask
null A mask for structured input of the date (requires Editable to be true).
PickerVariant
PickerVariant
PickerVariant.Inline Picker container option
Placeholder
string
null The short hint displayed in the input before the user enters a value.
ReadOnly
bool
False If true, no date or time can be defined.
UpdateBindingIfOnlyHSLChanged
bool
False If true, binding changes occurred also when HSL values changed without a corresponding RGB change
Appearance
AdornmentAriaLabel
string
"Open Color Picker" Sets the aria-label of the input text field icon
AdornmentColor
Color
Color.Default The color of the adornment if used. It supports the theme colors.
AnchorOrigin
Origin
Origin.TopLeft Gets or sets the origin of the popover's anchor. Defaults to Origin.TopLeft
IconSize
Size
Size.Medium Sets the Icon Size.
Margin
Margin
Margin.None Will adjust vertical spacing.
TransformOrigin
Origin
Origin.TopLeft Gets or sets the origin of the popover's transform. Defaults to Origin.TopLeft
Variant
Variant
Variant.Text Variant of the text input
Picker behavior
ColorPickerMode
ColorPickerMode
ColorPickerMode.RGB The initial mode (RGB, HSL or HEX) the picker should open. Defaults to RGB
ColorPickerView
ColorPickerView
ColorPickerView.Spectrum The initial view of the picker. Views can be changed if toolbar is enabled.
DisableAlpha
bool
False If true, Alpha options will not be displayed and color output will be RGB, HSL or HEX and not RGBA, HSLA or HEXA.
DisableColorField
bool
False If true, the color field will not be displayed.
DisableDragEffect
bool
False When set to true, no mouse move events in the spectrum mode will be captured, so the selector circle won't fellow the mouse. Under some conditions like long latency the visual representation might not reflect the user behaviour anymore. So, it can be disabled Enabled by default
DisableInputs
bool
False If true, textfield inputs and color mode switch will not be displayed.
DisableModeSwitch
bool
False If true, the switch to change color mode will not be displayed.
DisablePreview
bool
False If true, the preview color box will not be displayed, note that the preview color functions as a button as well for collection colors.
DisableSliders
bool
False If true, hue and alpha sliders will not be displayed.
Palette
IEnumerable<MudColor>
MudColor list of predefined colors. The first five colors will show up as the quick colors on preview dot click.
PickerActions
RenderFragment<MudPicker<MudColor>>
null Define the action buttons here
Picker appearance
ClassActions
string
null CSS class that will be applied to the action buttons container
CloseIcon
string
Custom close icon.
Color
Color
Color.Primary The color of the toolbar, selected and active. It supports the theme colors.
DisableToolbar
bool
True Hide toolbar and show only date/time views.
Elevation
int
8 The higher the number, the heavier the drop-shadow. 0 for no shadow set to 8 by default in inline mode and 0 in static mode.
GridIcon
string
Custom grid icon.
ImportExportIcon
string
Custom import/export icont.
Orientation
Orientation
Orientation.Portrait What orientation to render in when in PickerVariant Static Mode.
PaletteIcon
string
Custom palette icon.
Rounded
bool
False If true, border-radius is set to theme default when in Static Mode.
SpectrumIcon
string
Custom spectrum icon.
Square
bool
False If true, border-radius is set to 0 this is set to true automatically in static mode but can be overridden with Rounded bool.
ToolBarClass
string
null User class names for picker's ToolBar, separated by space
Common
Class
string
null User class names, separated by space.
Style
string
null User styles, applied on top of the component's own classes and styles.
Tag
object
null Use Tag to attach any user data object to the component for your convenience.
UserAttributes
Dictionary<string, object>
UserAttributes carries all attributes you add to the component that don't match any of its parameters. They will be splatted onto the underlying HTML tag.
EventCallbacks
Name Type Description
PickerClosed EventCallback Fired when the dropdown / dialog closes
PickerOpened EventCallback Fired when the dropdown / dialog opens
TextChanged EventCallback<string> Fired when the text changes.
ValueChanged EventCallback<MudColor>
Methods
Name Parameters Return Description
ChangeMode()
ChangeView(ColorPickerView view)
ColorPickerView view
Clear(bool close)
bool close
Close(bool submit)
bool submit
ValueTask DisposeAsync()
ValueTask
ValueTask FocusAsync()
ValueTask
string GetErrorText()
string : Error text/message
Return the validation error text or the conversion error message.
Open()
Reset() Reset the value and the validation.
ResetValidation() Reset the validation.
ValueTask SelectAsync()
ValueTask
ValueTask SelectRangeAsync(int pos1, int pos2)
int pos1
int pos2
ValueTask
SetAlpha(double value)
double value : A value between 0.0 (full transparent) and 1.0 (solid)
Set the Alpha (transparency) component of the color picker
SetAlpha(int value)
int value : A value between 0 (full transparent) and 1 (solid)
Set the Alpha (transparency) component of the color picker
SetB(int value)
int value : A value between 0 (no blue) or 255 (max blue)
Set the B (blue) component of the color picker
SetG(int value)
int value : A value between 0 (no green) or 255 (max green)
Set the G (green) component of the color picker
SetH(double value)
double value : A value between 0 and 360 (degrees)
Set the H (hue) component of the color picker
SetInputString(string input)
string input : Accepting different formats for a color representation such as rbg, rgba, #
Set the color of the picker based on the string input
SetL(double value)
double value : A value between 0.0 (no light, black) and 1.0 (max light, white)
Set the L (Lightness) component of the color picker
SetR(int value)
int value : A value between 0 (no red) or 255 (max red)
Set the R (red) component of the color picker
SetS(double value)
double value : A value between 0.0 (no saturation) and 1.0 (max saturation)
Set the S (saturation) component of the color picker
ToggleOpen()
Task Validate()
Task
Cause this component to validate its value.
An unhandled error has occurred. Reload 🗙