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
Visibility
Visible: [ ]
Hidden: [ ]
Collapsed: [ ]
Style & Class
Max value
Icons
Size
Binding
Validation
Implementation
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. |
| IsReadOnly | bool | false | A flag to mark rating control as readOnly. |
| Max | int | 5 | Maximum rating. Must be >= min (0 if AllowZeroStars is true, 1 otherwise). |
| OnChange | EventCallback<double> | Callback that is called when the rating has changed. | |
| SelectedIconName | string | FavoriteStarFill | Custom icon name for selected rating elements. |
| Size | BitRatingSize | BitRatingSize.Small | Size of rating. |
| 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. |
| Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
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. |
| 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 |
|---|---|---|---|
| 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. |
BitRatingSize enum
Name |
Value |
Description |
|---|---|---|
| Small | 0 | Display rating icon using small size. |
| Large | 1 | 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). |