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
Use alpha slider and preview option in the BitColorPicker, allowing to adjust the transparency of the color and preview the result.
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
Handle color change events in the BitColorPicker. This example shows how to capture the selected color and its alpha value when the user makes a selection.
OnChange:
Color:
Alpha: 0
Public API
Explore the public API of the BitColorPicker component, including how to access different color formats such as Hex, RGB, RGBA, and HSV using component references.
Color: #FFFFFF
Hex:
Rgb:
Rgba:
Hsv:
Style & Class
Apply custom CSS classes and styles to the BitColorPicker component for tailoring its appearance to fit your design needs.
Style
Class
API
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 | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
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. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page