Class SfRating

The Blazor Rating component allows the user to rate something by clicking on a set of symbols on numeric scale. This allow users to provide feedback or ratings for products, services, or content.

Inheritance

System.Object

SfBaseComponent

SfRating

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfRating : SfBaseComponent

Examples

A simple Blazor Rating component with value.

 
<SfRating Value=3 />

A Blazor Rating component with label.

 
<SfRating ShowLabel=true />

Constructors

SfRating()

Declaration

public SfRating()

Properties

AllowReset

Gets or sets a value that specifies whether to show or hide the reset button in a rating component.

Declaration

public bool AllowReset { get; set; }

Property Value

Type	Description
System.Boolean	`true`, the reset button will be visible to the user and they will be able to click it to reset the rating value to its default. The default value is `false`.

Created

Gets or sets an event callback that is raised when the SfRating rendering is completed.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An event call back function.

CssClass

Gets or sets one or more CSS classes that can be used to customize the appearance of a rating component.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	One or more CSS classes to customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects. The default value is `String.Empty`.

Disabled

Gets or sets a value that specifies whether a rating component is enabled or disabled. A disabled rating component may have a different visual appearance than an enabled one.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	`true`, the rating component will be disabled and the user will not be able to interact with it. The default value is `false`.

EmptyTemplate

Gets or sets a template that defines the appearance of each un-rated item in a rating component. The RatingItemContext is passed as a context to the template, allowing it to access information about the un-rated item, such as its Value and Index.

Declaration

public RenderFragment<RatingItemContext> EmptyTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<RatingItemContext>	The template content. The default value is `null`.

Examples

Rating with empty template.

 
<SfRating> 
   <EmptyTemplate>
        <span class="e-rating-icon e-icons e-star"></span>
   </EmptyTemplate>
</SfRating>

EnableAnimation

Gets or sets a value that specifies whether to add animation (to provide visual feedback to the user) when an item in a rating component is hovered.

Declaration

public bool EnableAnimation { get; set; }

Property Value

Type	Description
System.Boolean	`true`, an animation will be added when the user hovers their cursor over an item in the rating component. The default value is `true`.

EnableSingleSelection

Gets or sets a value that specifies whether to select all the items before the selected item should be in selected state in a rating component.

Declaration

public bool EnableSingleSelection { get; set; }

Property Value

Type	Description
System.Boolean	`true`, only the selected item will be in the selected state, and all other items will be un-selected. `false`, all items before the selected one will be in the selected state. The default value is `false`.

FullTemplate

Gets or sets a template that defines the appearance of each rated item in a rating component. The RatingItemContext is passed as a context to the template, allowing it to access information about the rated item, such as its Value and Index.

Declaration

public RenderFragment<RatingItemContext> FullTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<RatingItemContext>	The template content. The default value is `null`.

Examples

Rating with full template.

 
<SfRating> 
   <FullTemplate>
        <span class="e-rating-icon e-icons e-star"></span>
   </FullTemplate>
</SfRating>

ID

Sets id attribute for the rating element.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

ItemsCount

Gets or sets a value that specifies the number of items (symbols) in rating component. The rating component typically consists of a number of items, such as stars or other symbols, that represent the rating value.

Declaration

public int ItemsCount { get; set; }

Property Value

Type	Description
System.Int32	An int that specifies the number of items (symbols) displayed in rating component

LabelPosition

Gets or sets the the position of the label in rating component.

Declaration

public LabelPosition LabelPosition { get; set; }

Property Value

Type	Description
LabelPosition	One of the LabelPosition enumeration that specifies the position of the label. The default value is Right.

Remarks

You can use this property to customize the position of the label within the rating component to suit the needs of your application. For example, you can set the LabelPosition property to ,Top to position the label at the top center of the rating component, or set it to Left to position the label at the left side of the component.

LabelTemplate

Gets or sets a template that used as label over default label of the rating. The current value of rating passed as context to build the content.

Declaration

public RenderFragment<double> LabelTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<System.Double>	The template content. The default value is `null`.

Examples

Rating with label template.

 
<SfRating> 
   <LabelTemplate>
        <span>@context Out Of 5</span>
   </LabelTemplate>
</SfRating>

Min

Gets or sets the value that specifies minimum rating that a user can select.

Declaration

public Nullable<double> Min { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	By default, the `Min` property is set to 0, which means that the minimum possible rating is 0.

Remarks

You can use the Min property to customize the minimum possible rating in the SfRating component. For example, if you want to allow users to provide ratings from 1 to 5, you can set the Min property to 1 and ItemsCount to 5.

OnItemHover

Gets or sets an event callback that is raised when a user hovers over an item.

Declaration

public EventCallback<RatingHoverEventArgs> OnItemHover { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<RatingHoverEventArgs>	An event call back function.

Precision

Gets or sets the precision type of the rating which used to component the granularity of the rating, allowing users to provide ratings with varying levels of precision.

Declaration

public PrecisionType Precision { get; set; }

Property Value

Type	Description
PrecisionType	One of the PrecisionType enumeration that specifies the precision type. The default value is Full.

Remarks

The Precision property can be set to one of the following values:

Full: The rating is increased in whole number increments. For example, if the current rating is 3, the next possible ratings are 4, 5, and so on.
Half: The rating is increased in increments of 0.5 (half). For example, if the current rating is 3.5, the next possible ratings are 4, 4.5, 5, and so on.
Quarter: The rating is increased in increments of 0.25 (quarter). For example, if the current rating is 3.75, the next possible ratings are 4, 4.25, 4.5, and so on.
Exact: The rating is increased in increments of 0.1. For example, if the current rating is 3.9, the next possible ratings are 4, 4.1, 4.2, and so on.

ReadOnly

Gets or sets a boolean value that specifies whether the read-only mode is enabled for a rating component, which means that the user will be able to interact with it and change the rating value.

Declaration

public bool ReadOnly { get; set; }

Property Value

Type	Description
System.Boolean	`true`,the rating component will be in read-only mode, which means that the user will not be able to interact with it and change the rating value. The default value is `false`.

ShowLabel

Gets or sets a value that specifies whether to display a label that shows the current value of a rating.

Declaration

public bool ShowLabel { get; set; }

Property Value

Type	Description
System.Boolean	`true`, a label will be displayed that shows the current value of the rating; otherwise false. The default value is `false`.

ShowTooltip

Gets or sets a value that defines whether to show tooltip for the items.

Declaration

public bool ShowTooltip { get; set; }

Property Value

Type	Description
System.Boolean	`true`, show tooltip for the items. The default value is `true`.

TooltipTemplate

Gets or sets a template that used as tooltip content over default tooltip content of the rating. The current value of rating passed as context to build the content.

Declaration

public RenderFragment<double> TooltipTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<System.Double>	The template content. The default value is `null`.

Examples

Rating with tooltip template.

 
<SfRating> 
   <TooltipTemplate>
        <div>@context Star</div>
   </TooltipTemplate>
</SfRating>

Value

Gets or sets the current rating value which used to display and update the rating selected by the user. Based on PrecisionType, users can select ratings with varying levels of precision

Declaration

public Nullable<double> Value { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	The `Value` property is a decimal value that ranges from the Min to the ItemsCount, as specified by the `Min` and `ItemsCount` properties of the rating.

Remarks

You can use the Value property to initialize the rating component with a specific rating value, or to get the current rating value selected by the user. For example, if you want to initialize the rating component with a rating of 3.5, you can set the Value property to 3.5.

ValueChanged

Gets or sets an event callback that is raised when the Value property is changed.

Declaration

public EventCallback<double> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double>	An event call back function.

Visible

Gets or sets a value that indicates whether the rating component is visible or hidden

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	`true`, if the rating component is visible. The default value is `true`.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task