MudBlazor

MudColorPicker API

Properties

Name Type Default Description
CloseIcon
String
Custom close icon.
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
Boolean

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
Boolean

False

If true, the color field will not be displayed.
DisableDragEffect
Boolean

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
Boolean

False

If true, textfield inputs and color mode switch will not be displayed.
DisableModeSwitch
Boolean

False

If true, the switch to change color mode will not be displayed.
DisablePreview
Boolean

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
Boolean

False

If true, hue and alpha sliders will not be displayed.
GridIcon
String
Custom grid icon.
ImportExportIcon
String
Custom import/export icont.
Palette
IEnumerable<MudColor>

MudColor list of predefined colors. The first five colors will show up as the quick colors on preview dot click.
PaletteIcon
String
Custom palette icon.
SpectrumIcon
String
Custom spectrum icon.
UpdateBindingIfOnlyHSLChanged
Boolean

False

If true, binding changes occurred also when HSL values changed without a corresponding RGB change
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
Inherited from MudPicker<MudColor>
Adornment
Adornment

Adornment.End

Sets if the icon will be att start or end, set to false to disable.
AdornmentColor
Color

Color.Default

The color of the adornment if used. It supports the theme colors.
AdornmentIcon
String
Sets the icon of the input text field
AllowKeyboardInput
Boolean

False

Allows text input from keyboard.
ClassActions
String

null

CSS class that will be applied to the action buttons container
Color
Color

Color.Primary

The color of the toolbar, selected and active. It supports the theme colors.
Disabled
Boolean

False

If true, the picker will be disabled.
DisableToolbar
Boolean

True

Hide toolbar and show only date/time views.
Editable
Boolean

False

If true, the picker will be editable.
Elevation
Int32

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.
HelperText
String

null

If string has value, HelperText will be applied.
HelperTextOnFocus
Boolean

False

If true, the helper text will only be visible on focus.
IconSize
Size

Size.Medium

Sets the Icon Size.
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.
Margin
Margin

Margin.None

Will adjust vertical spacing.
Orientation
Orientation

Orientation.Portrait

What orientation to render in when in PickerVariant Static Mode.
PickerActions
RenderFragment

null

Define the action buttons here
PickerVariant
PickerVariant

PickerVariant.Inline

Picker container option
Placeholder
String

null

The short hint displayed in the input before the user enters a value.
ReadOnly
Boolean

False

If true, no date or time can be defined.
Rounded
Boolean

False

If true, border-radius is set to theme default when in Static Mode.
Square
Boolean

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.
Text
String

"#594ae2ff"

The currently selected string value (two-way bindable)
ToolBarClass
String

null

User class names for picker's ToolBar, separated by space
Variant
Variant

Variant.Text

Variant of the text input
Inherited from MudFormComponent<MudColor, String>
Converter
Converter<MudColor, String>

The generic converter of the component.
Culture
CultureInfo

The culture of the component.
Error
Boolean

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
Boolean

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
Inherited from MudComponentBase
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 error has occurred. This application may no longer respond until reloaded. Reload 🗙