ColorInput Blazor API

ColorInput Properties

NameTypeDefaultDescription
AutoCompleteDelayint100Determines the delay before the drop down opens to show the matches from the auto complete operation. The delay is measured in miliseconds.
DataSourceobjectN/ADetermines the data source ( that represent valid colors ) that will be loaded to the Input. The dataSource can be an array of strings or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.
DisabledboolfalseEnables or disables the element.
DisplayModeColorInputDisplayModeColorInputDisplayMode.DefaultDetermines the colors that will be displayed and their layout.
DropDownButtonPositionDropDownButtonPositionDropDownButtonPosition.NoneDetermines the position of the drop down button.
DropDownHeightobjectSets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.
DropDownWidthobjectSets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.
InputPurposestring"off"Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
Itemsint8Determines the maximum number of matched items that should be visible inside the drop down as a result of a new autoComplete query. By default the maximum number of 8 items can be displayed inside the drop down.
Localestring"en"Sets or gets the language. Used in conjunction with the property messages.
MessagesobjectN/ASets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MinLengthint1Determines the minimum number of characters inside the input in order to trigger the autocomplete functionality that will open the drop down and show the matched items.
Namestring""Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
IsOpenedboolfalseDetermines whether the drop down is opened or not.
Placeholderstring""Determines the placeholder of the input.
QueryobjectSets or gets the query that is used to filter the items. Query is used by the autoComplete operation. Empty string means that all items from the data source will be displayed and no filter query is applied.
QueryModeColorQueryModeColorQueryMode.ContainsIgnoreCaseDetermines the auto complete query mode. This property also determines the matching algorithm for the autocomplete operation.
ReadonlyboolfalseDetermines whether the user can enter text inside the input or not. Determines whether the element acts as a ComboBox or a DropDownList if a dataSource is provided.
RightToLeftboolfalseSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Themestring""Determines the theme for the element. Themes define the look of the elements.
UnfocusableboolfalseIf is set to true, the element cannot be focused.
Valuestring""Sets or gets the value of the element.
ValueDisplayModeColorValueDisplayModeColorValueDisplayMode.DefaultDetermines what will be displayed inside the color picker's action section.
ValueFormatColorValueFormatColorValueFormat.DefaultDetermines the format of the color. Whether it's in HEX, RGB or RGBA. By default it shows the color depending on the displayMode.

ColorInput Methods

NameTypeArgumentsDescription
ClosevoidN/ACloses the drop down.
GetDataSourceAsync()Task<IEnumerable<object>>'N/A'Gets the &quot;DataSource&quot; property as Task&lt;IEnumerable&lt;object&gt;&gt;.
GetIsOpenedAsync()Task<bool>'N/A'Gets the &quot;IsOpened&quot; property as Task&lt;bool&gt;.
GetValueAsync()Task<string>'N/A'Gets the &quot;Value&quot; property as Task&lt;string&gt;.
OpenvoidN/AOpens the drop down.
Refreshvoid'N/A'Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements.
Rendervoid'N/A'Re-renders the Blazor Component. This method will make a full re-render.
SelectvoidN/ASelects the text inside the input or if it is <b>readonly</b> then the element is focused.
StateHasChangedvoid'N/A'Refreshes the state and Re-renders the Blazor Component, if necessary.

ColorInput Events

NameTypeDescriptionEvent Detail
OnChangeEventCallback<Event>This event is triggered when the selection is changed.string label- The label of the new selected color., dynamic oldLabel- The label of the color that was previously selected before the event was triggered., dynamic oldValue- The value of the color that was previously selected before the event was triggered., dynamic value- The value of the new selected color.
Changedevent ColorInputChangedEventHandlerThis event is triggered when the selection is changed.ColorInputChangedEventArgs

Enums

ColorInputDisplayMode

ColorInputDisplayMode.Default
ColorInputDisplayMode.Grid
DropDownButtonPosition.Left
DropDownButtonPosition.Right
DropDownButtonPosition.Top
DropDownButtonPosition.Bottom

ColorQueryMode

ColorQueryMode.Contains
ColorQueryMode.ContainsIgnoreCase
ColorQueryMode.DoesNotContain
ColorQueryMode.DoesNotContainIgnoreCase
ColorQueryMode.Equals
ColorQueryMode.EqualsIgnoreCase
ColorQueryMode.StartsWith
ColorQueryMode.StartsWithIgnoreCase
ColorQueryMode.EndsWith
ColorQueryMode.EndsWithIgnoreCase

ColorValueDisplayMode

ColorValueDisplayMode.Default
ColorValueDisplayMode.ColorBox
ColorValueDisplayMode.ColorCode
ColorValueDisplayMode.None

ColorValueFormat

ColorValueFormat.Default
ColorValueFormat.Rgb
ColorValueFormat.Rgba
ColorValueFormat.Hex