- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • Rating

    Ratings show people’s opinions of a product, helping others make more informed purchasing decisions. People can also rate products they’ve purchased.

    Usage

    Basic
    Basic usage examples of BitRating, including disabled and readonly states.

    Basic:

    Disabled:

    ReadOnly:
    Visibility
    Demonstrating different visibility options: visible, hidden, and collapsed.

    Visible: [
    ]
    Hidden: [ ]
    Collapsed: [ ]
    Style & Class
    Explore styling and class customization for BitRating, including component styles, custom classes, and detailed styles.


    Component's Style & Class:




    Styles & Classes:


    Max value
    Adjust the maximum rating value to customize the rating scale.

    Max is 6

    Max is 100
    Icons
    Customize the rating icons to better match the context, such as hearts, checkboxes, or likes.

    Heart:

    Checkbox:

    Like:
    Size
    Set different sizes for the rating component: small, medium, and large.

    Small:

    Medium:

    Large:
    Binding
    Examples of one-way and two-way data binding with BitRating, as well as change event handling.

    One-way:

    Two-way:

    OnChange:
    Validation
    Validate the rating component using data annotations in a form submission.


    RTL
    Use the BitRating component in right-to-left (RTL).

    API

    BitRating parameters
    Name
    Type
    Default value
    Description
    AllowZeroStars bool false Allow the initial rating value be 0. Note that a value of 0 still won't be selectable by mouse or keyboard.
    AriaLabelFormat string? null Optional label format for each individual rating star (not the rating control as a whole) that will be read by screen readers.
    Classes BitRatingClassStyles? null Custom CSS classes for different parts of the BitRating.
    DefaultValue double? null Default rating. Must be a number between min and max. Only provide this if the Rating is an uncontrolled component; otherwise, use the rating property.
    GetAriaLabel Func<double, double, string>? null Optional callback to set the aria-label for rating control in readOnly mode. Also used as a fallback aria-label if ariaLabel prop is not provided.
    Max int 5 Maximum rating. Must be >= min (0 if AllowZeroStars is true, 1 otherwise).
    SelectedIconName string FavoriteStarFill Custom icon name for selected rating elements.
    Size BitSize? null Size of rating elements.
    Styles BitRatingClassStyles? null Custom CSS styles for different parts of the BitRating.
    UnselectedIconName string FavoriteStar Custom icon name for unselected rating elements.
    BitInputBase parameters
    Name
    Type
    Default value
    Description
    DisplayName string? null Gets or sets the display name for this field.
    InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
    Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
    OnChange EventCallback<TValue?> Callback for when the input value changes.
    ReadOnly bool false Makes the input read-only.
    Required bool false Makes the input required.
    Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
    BitInputBase public members
    Name
    Type
    Default value
    Description
    InputElement ElementReference The ElementReference of the input element.
    FocusAsync() () => ValueTask Gives focus to the input element.
    FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.
    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.
    BitRatingClassStyles properties
    Name
    Type
    Default value
    Description
    Root string? null Custom CSS classes/styles for the root element of the rating.
    Button string? null Custom CSS classes/styles for the rating's button.
    IconContainer string? null Custom CSS classes/styles for the rating icon container.
    SelectedIcon string? null Custom CSS classes/styles for the rating selected icon.
    UnselectedIcon string? null Custom CSS classes/styles for the rating unselected icon.
    BitSize enum
    Name
    Value
    Description
    Small 0 Display rating icon using small size.
    Medium 1 Display rating icon using medium size.
    Large 2 Display rating icon using large size.
    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