-
Notifications
You must be signed in to change notification settings - Fork 389
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Rating] New rating component (#2258)
* Add rating component * Fix IconVariant * Add IconColor * Fix page name * Add support disabled * Add support label * Remove area not overable * Imprve icona name * Add icon color * Add support arrowup/arrowdown * Improve sample * Add event HoveredValueChanged * Add IconCustomColor * Fix aria-readonly * Fix LabelTemplate * Improve code style * Improve icon name * Add IconWidth * Fix label documentation * Fix default value * Fix HoveredValueChanged to OnPointerOver * Add AllowReset and rewrite HandleKeyDownAsync * Add AllowReset * Rewrite key down event * Fix Style and Class * Component explanation * Improve code * Add Unit test * Fix IconWidth like React Component --------- Co-authored-by: Vincent Baaij <[email protected]>
- Loading branch information
Showing
12 changed files
with
520 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
examples/Demo/Shared/Pages/Rating/Examples/RatingDefault.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
|
|
||
| <FluentRating MaxValue="10" Value="5" Label="Test"/> |
38 changes: 38 additions & 0 deletions
38
examples/Demo/Shared/Pages/Rating/Examples/RatingEvent.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <h4>Event</h4> | ||
|
|
||
| <FluentStack Orientation="Orientation.Vertical"> | ||
| <FluentRating MaxValue="10" | ||
| OnPointerOver="OnPointerOver" | ||
| @bind-Value="@_value" /> | ||
|
|
||
| <div>Value: @_value</div> | ||
| <div>Hovered value: @_overedValue</div> | ||
| <div>Hovered text value: @_overedTextValue</div> | ||
| </FluentStack> | ||
|
|
||
| @code | ||
| { | ||
| int _value = 2; | ||
| int? _overedValue; | ||
| string _overedTextValue = default!; | ||
|
|
||
| private void OnPointerOver(int? value) | ||
| { | ||
| _overedValue = value; | ||
| _overedTextValue = value.HasValue | ||
| ? new string[] | ||
| { | ||
| "Very bad", | ||
| "Bad", | ||
| "Sufficient -2", | ||
| "Sufficient -1", | ||
| "Sufficient", | ||
| "Good -4", | ||
| "Good -3", | ||
| "Good -2" , | ||
| "Good -1", | ||
| "Good" | ||
| }[value.Value - 1] | ||
| : string.Empty; | ||
| } | ||
| } |
69 changes: 69 additions & 0 deletions
69
examples/Demo/Shared/Pages/Rating/Examples/RatingExample.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <h4>Example</h4> | ||
|
|
||
| <FluentStack Orientation="Orientation.Vertical"> | ||
| <FluentCheckbox Label="Read Only" @bind-Value="@_readOnly" /> | ||
|
|
||
| <FluentCheckbox Label="Allow reset" @bind-Value="@_allowReset" /> | ||
|
|
||
| <FluentCheckbox Label="Disabled" @bind-Value="@_disabled" /> | ||
|
|
||
| <FluentNumberField TValue="int" Label="Max Value" @bind-Value="@_maxValue" /> | ||
|
|
||
| <FluentSelect Label="Color" | ||
| @bind-SelectedOption="@_iconColor" | ||
| Style="min-width: 100px;" | ||
| Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))" | ||
| OptionValue="@(i => i.ToAttributeValue())" /> | ||
|
|
||
| <FluentSelect TOption="string" | ||
| Label="Icons Full/Empty" | ||
| SelectedOptionChanged="SelectedOptionChanged" | ||
| Style="min-width: 100px;" | ||
| Items="_icons" /> | ||
|
|
||
| <FluentRating MaxValue="@_maxValue" | ||
| @bind-Value="@_value" | ||
| IconFilled="@_iconFilled" | ||
| IconOutline="@_iconOutline" | ||
| ReadOnly="@_readOnly" | ||
| IconColor="@_iconColor" | ||
| Disabled="@_disabled" , | ||
| AllowReset="@_allowReset" /> | ||
|
|
||
| <div>Value: @_value</div> | ||
| </FluentStack> | ||
|
|
||
| @code | ||
| { | ||
| bool _readOnly; | ||
| bool _disabled; | ||
| bool _allowReset; | ||
| int _maxValue = 10; | ||
| int _value = 2; | ||
| Color _iconColor = Color.Accent; | ||
|
|
||
| Icon _iconFilled = new Icons.Filled.Size20.Star(); | ||
| Icon _iconOutline = new Icons.Regular.Size20.Star(); | ||
| List<string> _icons = ["Star", "Heart", "Alert", "PersonCircle"]; | ||
|
|
||
| private void SelectedOptionChanged(string name) => SetIcon(_icons.IndexOf(name)); | ||
|
|
||
| private void SetIcon(int index) | ||
| { | ||
| _iconFilled = new Icon[] | ||
| { new Icons.Filled.Size20.Star(), | ||
| new Icons.Filled.Size20.Heart(), | ||
| new Icons.Filled.Size20.Alert(), | ||
| new Icons.Filled.Size20.PersonCircle(), | ||
| }[index]; | ||
|
|
||
| _iconOutline = new Icon[] | ||
| { new Icons.Regular.Size20.Star(), | ||
| new Icons.Regular.Size20.Heart(), | ||
| new Icons.Regular.Size20.Alert(), | ||
| new Icons.Regular.Size20.PersonCircle(), | ||
| }[index]; | ||
| } | ||
|
|
||
| protected override void OnParametersSet() => SetIcon(0); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| @page "/Rating" | ||
| @using FluentUI.Demo.Shared.Pages.Rating.Examples | ||
|
|
||
| <PageTitle>@App.PageTitle("Rating")</PageTitle> | ||
|
|
||
| <h1>Rating</h1> | ||
|
|
||
| <p> | ||
| A <code><FluentRating></code> component allows users to provide a rating for a particular item. | ||
| <code><FluentRating></code> allows customers to determine a sense of value of a good or a service. | ||
| By default, the rating is selected out of 5 stars, but the number and symbol used can be customized. | ||
| </p> | ||
|
|
||
| <h2 id="example">Examples</h2> | ||
|
|
||
| <DemoSection Title="Default" Component="@typeof(RatingDefault)"></DemoSection> | ||
|
|
||
| <DemoSection Title="Example" Component="@typeof(RatingExample)"></DemoSection> | ||
|
|
||
|
|
||
| <h2 id="a11y">Accessibility</h2> | ||
| <p> | ||
| You can use the <kbd>arrow</kbd> keys to increase or decrease the value. Pressing <kbd>Shift+arrow</kbd> changes the value to 0 or the maximum value. | ||
| </p> | ||
|
|
||
| <DemoSection Title="Event" Component="@typeof(RatingEvent)"></DemoSection> | ||
|
|
||
| <h2 id="documentation">Documentation</h2> | ||
|
|
||
| <ApiDocumentation Component="typeof(FluentRating)" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| @namespace Microsoft.FluentUI.AspNetCore.Components | ||
| @inherits FluentInputBase<int> | ||
|
|
||
| @if (!ReadOnly && !Disabled) | ||
| { | ||
| <FluentKeyCode Anchor="@Id" | ||
| PreventDefaultOnly="new[] { KeyCode.Left, KeyCode.Right, KeyCode.Up, KeyCode.Down, KeyCode.Shift }" | ||
| StopPropagation="@true" | ||
| OnKeyDown="@HandleKeyDownAsync" /> | ||
| } | ||
|
|
||
| <FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@AriaLabel" Required="@Required">@LabelTemplate</FluentInputLabel> | ||
|
|
||
| <FluentStack Id="@Id" | ||
| Orientation="Orientation.Horizontal" | ||
| Class="@ClassValue" | ||
| Style="@StyleValue" | ||
| role="radiogroup" | ||
| tabindex="@(Disabled ? -1 : 0)" | ||
| aria-readonly="@ReadOnly.ToAttributeValue()" | ||
| HorizontalGap="0"> | ||
| @for (int i = 1; i <= MaxValue; i++) | ||
| { | ||
| var currentValue = i; | ||
| @if (ReadOnly || Disabled) | ||
| { | ||
| <FluentIcon Value="@GetIcon(currentValue)" | ||
| Width="@IconWidth" | ||
| Color="@(Disabled && IconColor != Color.Custom ? Color.Disabled : IconColor)" | ||
| CustomColor="@IconCustomColor" /> | ||
| } | ||
| else | ||
| { | ||
| <FluentIcon Value="@GetIcon(currentValue)" | ||
| Width="@IconWidth" | ||
| Color="IconColor" | ||
| CustomColor="@IconCustomColor" | ||
| OnClick="@(() => OnClickAsync(currentValue))" | ||
| @onpointerover="@(async () => await OnPointerOverAsync(currentValue))" | ||
| @onpointerout="@(async () => await OnPointerOutAsync())" /> | ||
| } | ||
| } | ||
| </FluentStack> |
Oops, something went wrong.