- bit BlazorUI
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming
  • 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 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.
    • On this page