Skip to content

Commit

Permalink
feat(blazorui): improve BitRating demo #8290 (#8291)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhrastegari
mhrastegari authored Aug 12, 2024
1 parent 2e9f74e commit 02f9a30
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 46 deletions.
58 changes: 29 additions & 29 deletions ...o/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Rating/BitRatingDemo.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,15 @@
ComponentSubEnums="componentSubEnums">
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
<ExamplePreview>
<div>Basic usage examples of BitRating, including disabled and readonly states.</div>
<br />
<div class="example-box">
<div>Basic:</div>
<BitRating />

<br />

<div>Disabled:</div>
<BitRating IsEnabled="false" DefaultValue="2" />

<br />

<div>ReadOnly:</div>
<BitRating ReadOnly DefaultValue="3.5" />
</div>
Expand All @@ -30,6 +28,8 @@

<ComponentExampleBox Title="Visibility" RazorCode="@example2RazorCode" Id="example2">
<ExamplePreview>
<div>Demonstrating different visibility options: visible, hidden, and collapsed.</div>
<br />
<div class="example-box">
<div style="display:flex;align-items:center">Visible: [ <BitRating Visibility="BitVisibility.Visible" /> ]</div>
<div style="display:flex;align-items:center">Hidden: [ <BitRating Visibility="BitVisibility.Hidden" /> ]</div>
Expand All @@ -40,30 +40,32 @@

<ComponentExampleBox Title="Style & Class" RazorCode="@example3RazorCode" Id="example2">
<ExamplePreview>
<div>Explore styling and class customization for BitRating, including component styles, custom classes, and detailed styles.</div>
<br /><br />
<div class="example-box">
<div>Component's Style & Class:</div>
<BitRating Style="background-color: #888; border-radius: 1rem; margin: 1rem 0" />
<BitRating Class="custom-class" />

<div>Component's Style & Class:</div><br />
<div style="max-width: max-content;">
<BitRating Style="padding-inline: 0.5rem; margin-inline: 1rem; box-shadow: tomato 0 0 1rem; border-radius: 1rem;" />
<br />
<BitRating Class="custom-class" />
</div>
<br /><br />

<div>Styles & Classes:</div>
<BitRating Styles="@(new() { IconContainer = "background-color: tomato; border-radius: 0.5rem",
Button = "padding: 0.5rem; background-color: goldenrod" })" />
<BitRating Classes="@(new() { SelectedIcon = "custom-selected",
UnselectedIcon = "custom-unselected" })" />
<div>Styles & Classes:</div><br />
<BitRating Styles="@(new() { SelectedIcon = "color: blueviolet;", UnselectedIcon = "color: blueviolet;" })" />
<br />
<BitRating Classes="@(new() { SelectedIcon = "custom-selected", UnselectedIcon = "custom-unselected" })" />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Max value" RazorCode="@example4RazorCode" Id="example4">
<ExamplePreview>
<div>Adjust the maximum rating value to customize the rating scale.</div>
<br />
<div class="example-box">
<div>Max is 6</div>
<BitRating Max="6" />

<br />

<div style="width: 200px;">
<div>Max is 100</div>
<BitRating Max="100" />
Expand All @@ -74,17 +76,15 @@

<ComponentExampleBox Title="Icons" RazorCode="@example5RazorCode" Id="example5">
<ExamplePreview>
<div>Customize the rating icons to better match the context, such as hearts, checkboxes, or likes.</div>
<br />
<div class="example-box">
<div>Heart:</div>
<BitRating SelectedIconName="@BitIconName.HeartFill" UnselectedIconName="@BitIconName.Heart" />

<br />

<div>Checkbox:</div>
<BitRating SelectedIconName="@BitIconName.CheckboxCompositeReversed" UnselectedIconName="@BitIconName.Checkbox" />

<br />

<div>Like:</div>
<BitRating SelectedIconName="@BitIconName.LikeSolid" UnselectedIconName="@BitIconName.Dislike" />
</div>
Expand All @@ -93,17 +93,15 @@

<ComponentExampleBox Title="Size" RazorCode="@example6RazorCode" Id="example6">
<ExamplePreview>
<div>Set different sizes for the rating component: small, medium, and large.</div>
<br />
<div class="example-box">
<div>Small:</div>
<BitRating Size="BitSize.Small" />

<br />

<div>Medium:</div>
<BitRating Size="BitSize.Medium" />

<br />

<div>Large:</div>
<BitRating Size="BitSize.Large" />
</div>
Expand All @@ -112,19 +110,17 @@

<ComponentExampleBox Title="Binding" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
<ExamplePreview>
<div>Examples of one-way and two-way data binding with BitRating, as well as change event handling.</div>
<br />
<div class="example-box">
<div>One-way:</div>
<BitRating AllowZeroStars="true" Value="oneWayBinding" />
<BitToggleButton OnChange="v => oneWayBinding = v ? 5 : 0" Text="@(oneWayBinding == 5 ? "Unstar All" : "Star All")" />

<br />

<div>Two-way:</div>
<BitRating @bind-Value="twoWayBinding" />
<BitSpinButton @bind-Value="twoWayBinding" />

<br />

<div>OnChange:</div>
<BitRating DefaultValue="2" OnChange="v => onChangeValue = v" />
<BitLabel>Changed Value: @onChangeValue</BitLabel>
Expand All @@ -134,6 +130,8 @@

<ComponentExampleBox Title="Validation" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
<ExamplePreview>
<div>Validate the rating component using data annotations in a form submission.</div>
<br />
<div class="example-box">
@if (string.IsNullOrEmpty(SuccessMessage))
{
Expand All @@ -159,7 +157,9 @@

<ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" Id="example9">
<ExamplePreview>
<div class="example-box">
<div>Use the BitRating component in right-to-left (RTL).</div>
<br />
<div dir="rtl" class="example-box">
<BitRating Dir="BitDir.Rtl" />
</div>
</ExamplePreview>
Expand Down
27 changes: 17 additions & 10 deletions ...lient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Rating/BitRatingDemo.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,28 +200,35 @@ private void HandleInvalidSubmit()
private readonly string example3RazorCode = @"
<style>
.custom-class {
padding: 0.5rem;
border: 1px solid red;
max-width: max-content;
margin-inline: 1rem;
border-radius: 0.25rem;
padding-inline: 0.5rem;
border: 1px solid dodgerblue;
box-shadow: dodgerblue 0 0 1rem;
}
.custom-selected {
color: blueviolet;
color: seagreen;
}
.custom-unselected {
color: darkorange;
color: mediumseagreen;
}
.custom-unselected:hover {
color: lightseagreen;
}
</style>
<BitRating Style=""background-color: #888; border-radius: 1rem; margin: 1rem 0"" />
<BitRating Style=""padding-inline: 0.5rem; margin-inline: 1rem; box-shadow: tomato 0 0 1rem; border-radius: 1rem;"" />
<BitRating Class=""custom-class"" />
<BitRating Styles=""@(new() { IconContainer = ""background-color: tomato; border-radius: 0.5rem"",
Button = ""padding: 0.5rem; background-color: goldenrod"" })"" />
<BitRating Classes=""@(new() { SelectedIcon = ""custom-selected"",
UnselectedIcon = ""custom-unselected"" })"" />";
<BitRating Styles=""@(new() { SelectedIcon = ""color: blueviolet;"", UnselectedIcon = ""color: blueviolet;"" })"" />
<BitRating Classes=""@(new() { SelectedIcon = ""custom-selected"", UnselectedIcon = ""custom-unselected"" })"" />";

private readonly string example4RazorCode = @"
<BitRating Max=""6"" />
Expand Down
22 changes: 15 additions & 7 deletions ...ent/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Rating/BitRatingDemo.razor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
.example-box {
@import '../../../../Styles/abstracts/_bit-css-variables.scss';

.example-box {
display: flex;
width: fit-content;
flex-direction: column;
}

::deep {
.custom-class {
padding: 0.5rem;
border: 1px solid red;
max-width: max-content;
margin-inline: 1rem;
border-radius: 0.25rem;
padding-inline: 0.5rem;
border: 1px solid dodgerblue;
box-shadow: dodgerblue 0 0 1rem;
}

.custom-selected {
color: blueviolet;
color: seagreen;
}

.custom-unselected {
color: darkorange;
color: mediumseagreen;
}

.custom-unselected:hover {
color: lightseagreen;
}

.validation-message {
color: red;
color: $bit-color-error;
}
}

0 comments on commit 02f9a30

Please sign in to comment.