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. |
ErrorId |
string |
null | The ErrorId that will be used by aria-describedby if Error true |
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. |
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 None to disable. |
AdornmentIcon |
string |
Sets the icon of the input text field | |
Clearable |
bool |
False | Show clear button. |
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. |
ImmediateText |
bool |
False | If true and Editable is true, update Text immediately on typing. If false, Text is updated only on Enter or loss of 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 |
DisableUnderLine |
bool |
False | If true, the input will not have an underline. |
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 |
ThrottleInterval |
int |
300 | |
Picker appearance | |||
ActionsClass |
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 icon. | |
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 |
|---|---|---|
OnClick |
EventCallback<MouseEventArgs> | Fired when the text input is clicked. |
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 |
|---|---|---|---|
ValueTask BlurAsync() |
ValueTask |
||
ChangeMode() |
|||
ChangeView(ColorPickerView value) |
ColorPickerView value |
||
Task ClearAsync(bool close) |
bool close |
Task |
|
Task CloseAsync(bool submit) |
bool submit |
Task |
|
ValueTask FocusAsync() |
ValueTask |
||
string GetErrorText() |
string : Error text/message |
Return the validation error text or the conversion error message. | |
Task OpenAsync() |
Task |
||
Task ResetAsync() |
Task |
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 | |
Task ToggleOpenAsync() |
Task |
||
Task Validate() |
Task |
Cause this component to validate its value. |