|
|
|
|
@ -0,0 +1,139 @@ |
|
|
|
|
@page "/forminputrating" |
|
|
|
|
@using Microsoft.FluentUI.AspNetCore.Components.Extensions |
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer |
|
|
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.H3">Rating</FluentLabel> |
|
|
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" /> |
|
|
|
|
<FluentLabel Typo="Typography.Body"> |
|
|
|
|
The <code>FluentRating</code> component allows users to provide a rating for a particular item. |
|
|
|
|
</FluentLabel> |
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Accessiblilty</FluentLabel> |
|
|
|
|
<FluentLabel Typo="Typography.Body"> |
|
|
|
|
You can use the arrow keys to |
|
|
|
|
increase (<span class="fluent-border-s1-r5">➡️</span>/<span class="fluent-border-s1-r5">⬆️</span>) |
|
|
|
|
or |
|
|
|
|
decrease (<span class="fluent-border-s1-r5">⬅️</span>/<span class="fluent-border-s1-r5">⬇️</span>) |
|
|
|
|
the value |
|
|
|
|
</FluentLabel> |
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto"> |
|
|
|
|
<FluentStack VerticalAlignment="VerticalAlignment.Center"> |
|
|
|
|
<FluentRating Max="5" |
|
|
|
|
@bind-Value="SelectedValue" |
|
|
|
|
OnHoverValueChanged="@(v => HoverValue = v)" /> |
|
|
|
|
<FluentLabel>@LabelText</FluentLabel> |
|
|
|
|
</FluentStack> |
|
|
|
|
<FluentButton Appearance="Appearance.Lightweight" |
|
|
|
|
OnClick="@(e => SelectedValue = 0)">Clear Rating</FluentButton> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Customization</FluentLabel> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false"> |
|
|
|
|
<FluentStack VerticalAlignment="VerticalAlignment.Center"> |
|
|
|
|
<FluentRating Max="@_maxValue" |
|
|
|
|
@bind-Value="_value" |
|
|
|
|
IconFilled="@_iconFilled" |
|
|
|
|
IconOutline="@_iconOutline" |
|
|
|
|
ReadOnly="@_readOnly" |
|
|
|
|
IconColor="@_iconColor" |
|
|
|
|
Disabled="@_disabled" |
|
|
|
|
AllowReset="@_allowReset" /> |
|
|
|
|
<FluentLabel>Value: @_value</FluentLabel> |
|
|
|
|
</FluentStack> |
|
|
|
|
|
|
|
|
|
<FluentDivider class="m-2" Role="DividerRole.Separator" /> |
|
|
|
|
|
|
|
|
|
<FluentStack HorizontalGap="100"> |
|
|
|
|
<FluentStack Orientation="Orientation.Vertical" VerticalGap="10"> |
|
|
|
|
<FluentSelect Class="fluent-fixed-w100" |
|
|
|
|
Label="ReadOnly" |
|
|
|
|
@bind-SelectedOption="_readOnly" |
|
|
|
|
Items="@(new[] { true, false})"/> |
|
|
|
|
|
|
|
|
|
<FluentSelect Class="fluent-fixed-w100" |
|
|
|
|
Label="AllowReset" |
|
|
|
|
@bind-SelectedOption="_allowReset" |
|
|
|
|
Items="@(new[] { true, false})" /> |
|
|
|
|
|
|
|
|
|
<FluentSelect Class="fluent-fixed-w100" |
|
|
|
|
Label="Disabled" |
|
|
|
|
@bind-SelectedOption="_disabled" |
|
|
|
|
Items="@(new[] { true, false})" /> |
|
|
|
|
</FluentStack> |
|
|
|
|
<FluentStack Orientation="Orientation.Vertical" VerticalGap="10"> |
|
|
|
|
<FluentNumberField Class="fluent-fixed-w100" |
|
|
|
|
TValue="int" |
|
|
|
|
Label="Max Value" |
|
|
|
|
Min="1" |
|
|
|
|
Max="20" |
|
|
|
|
@bind-Value="_maxValue"/> |
|
|
|
|
|
|
|
|
|
<FluentSelect Class="fluent-fixed-w100" |
|
|
|
|
Label="Color" |
|
|
|
|
@bind-SelectedOption="_iconColor" |
|
|
|
|
Items="@(Enum.GetValues<Color>().Where(v => v != Color.Custom))" |
|
|
|
|
OptionValue="@(v => v.ToAttributeValue())"/> |
|
|
|
|
|
|
|
|
|
<FluentSelect Class="fluent-fixed-w100" |
|
|
|
|
TOption="string" |
|
|
|
|
Label="Icons" |
|
|
|
|
SelectedOptionChanged="@SetIcon" |
|
|
|
|
Items="@IconsName" /> |
|
|
|
|
</FluentStack> |
|
|
|
|
</FluentStack> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
@code { |
|
|
|
|
int SelectedValue = 0; |
|
|
|
|
int? HoverValue = null; |
|
|
|
|
|
|
|
|
|
private string LabelText => (HoverValue ?? SelectedValue) switch |
|
|
|
|
{ |
|
|
|
|
1 => "Very bad", |
|
|
|
|
2 => "Bad", |
|
|
|
|
3 => "Sufficient", |
|
|
|
|
4 => "Good", |
|
|
|
|
5 => "Awesome!", |
|
|
|
|
_ => "Rate our product!" |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
readonly List<string> IconsName = ["Heart", "Star", "Alert", "PersonCircle"]; |
|
|
|
|
readonly Icon[] IconsFilled = new Icon[] |
|
|
|
|
{ |
|
|
|
|
new Icons.Filled.Size20.Heart(), |
|
|
|
|
new Icons.Filled.Size20.Star(), |
|
|
|
|
new Icons.Filled.Size20.Alert(), |
|
|
|
|
new Icons.Filled.Size20.PersonCircle(), |
|
|
|
|
}; |
|
|
|
|
readonly Icon[] IconsOutline = new Icon[] |
|
|
|
|
{ |
|
|
|
|
new Icons.Regular.Size20.Heart(), |
|
|
|
|
new Icons.Regular.Size20.Star(), |
|
|
|
|
new Icons.Regular.Size20.Alert(), |
|
|
|
|
new Icons.Regular.Size20.PersonCircle(), |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
bool _readOnly = false; |
|
|
|
|
bool _disabled = false; |
|
|
|
|
bool _allowReset = false; |
|
|
|
|
int _maxValue = 10; |
|
|
|
|
int _value = 2; |
|
|
|
|
Color _iconColor = Color.Error; |
|
|
|
|
|
|
|
|
|
Icon _iconFilled = new Icons.Filled.Size20.Star(); |
|
|
|
|
Icon _iconOutline = new Icons.Regular.Size20.Star(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
void SetIcon(string? name) |
|
|
|
|
{ |
|
|
|
|
var index = name is null ? 0 : IconsName.IndexOf(name); |
|
|
|
|
|
|
|
|
|
_iconFilled = IconsFilled[index]; |
|
|
|
|
_iconOutline = IconsOutline[index]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
protected override void OnParametersSet() => SetIcon(null); |
|
|
|
|
} |
