ColorPicker
The color picker (ColorPicker) is used to browse through and select colors. By default, it lets people navigate through colors on a color spectrum, or specify a color in either Red-Green-Blue (RGB), or alpha color code; or Hexadecimal textboxes.
Usage
Basic
Alpha & Preview
Binding
The color type (hex or rgb) of the BitColorPicker automatically matches the initial value of the Color parameter.
For example, if the initial value of this parameter is in hex format, the component will return the resulting colors in hex and vice versa.
RGB:
Color: rgb(255,255,255)
HEX:
Color: #FFFFFF
Two-way binding:
Events
OnChange:
Color:
Alpha: 0
Public Api
Color: #FFFFFF
Hex:
Rgb:
Rgba:
Hsv:
Class & Style
Class
Style
Implementation
BitColorPicker parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Alpha | double | 1 | Indicates the Alpha value. |
| Color | string | CSS-compatible string to describe the color. | |
| OnChange | EventCallback<BitColorChangeEventArgs> | Callback for when the value changed. | |
| ShowAlphaSlider | bool | false | Whether to show a slider for editing alpha value. |
| ShowPreview | bool | false | Whether to show color preview box. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| Dir | BitDir? | null | Determines the component direction. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
BitColorChangeEventArgs properties
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Color | string? | null | The main color value of the changed color in the same format as the Color parameter of the ColorPicker. |
| Alpha | double | 0 | The alpha value of the changed color. |
BitVisibility enum
Name |
Value |
Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
Name |
Value |
Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |