Basic Rating
<MudRating SelectedValue="2" />
Disabled
A disabled component cannot change its state. Use the Disabled
parameter to disable a component.
<MudRating Disabled="true" SelectedValue="2" />
Read only
A read-only component doesn't allow interactions. Use the ReadOnly
parameter to mark a component as read-only.
<MudRating ReadOnly="true" SelectedValue="2" />
Sizes
<div class="d-flex flex-column align-center"> <MudRating SelectedValue="2" Size="Size.Small" /> <MudRating SelectedValue="2" Size="Size.Medium" /> <MudRating SelectedValue="2" Size="Size.Large" /> </div>
Max value
<div class="d-flex flex-column align-center"> <MudRating SelectedValue="1" MaxValue="3" /> <MudRating SelectedValue="2" /> <MudRating SelectedValue="3" MaxValue="10" /> </div>
Icons and color
<div class="d-flex flex-column align-center"> <MudRating SelectedValue="2" FullIcon="@Icons.Material.Filled.Visibility" EmptyIcon="@Icons.Material.Filled.VisibilityOff" /> <MudRating SelectedValue="2" FullIcon="@Icons.Material.Filled.Favorite" EmptyIcon="@Icons.Material.Filled.FavoriteBorder" Color="Color.Secondary" /> </div>
Events and value binding
The MudRating
component provides value binding and events for changed selected value or hover. E.g you can display a label on hover to help users pick the correct rating value, using parameters like HoveredValueChanged
, SelectedValueChanged
and bind-SelectedValue
.
Rate our product!
<div class="d-flex flex-column align-center"> <MudRating @bind-SelectedValue="selectedVal" HoveredValueChanged="HandleHoveredValueChanged" /> <MudText Typo="Typo.subtitle2" Class="deep-purple-text mt-2">@LabelText</MudText> </div>
@code { private int selectedVal = 0; private int? activeVal; private void HandleHoveredValueChanged(int? val) => activeVal = val; private string LabelText => (activeVal ?? selectedVal) switch { 1 => "Very bad", 2 => "Bad", 3 => "Sufficient", 4 => "Good", 5 => "Awesome!", _ => "Rate our product!" }; }
<div class="d-flex flex-column align-center"> <MudRating SelectedValue="2" /> <MudRating SelectedValue="3" MaxValue="10" /> </div>