Skip to content

Commit

Permalink
feat(blazorui): improve BitCheckbox demo page #8277 (#8280)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhrastegari
mhrastegari authored Aug 11, 2024
1 parent db108e4 commit 6e52237
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 25 deletions.
48 changes: 40 additions & 8 deletions ...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
ComponentSubClasses="componentSubClasses">
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
<ExamplePreview>
<div>Basic usage of BitCheckbox with enabled and disabled states.</div>
<br />
<BitCheckbox Label="Basic checkbox" />
<br />
<BitCheckbox Label="Disable checkbox" IsEnabled="false" />
Expand All @@ -21,14 +23,18 @@

<ComponentExampleBox Title="Check icon" RazorCode="@example2RazorCode" Id="example2">
<ExamplePreview>
<div>Customize the check icon of BitCheckbox.</div>
<br />
<BitCheckbox Label="Custom check icon" CheckIconName="@BitIconName.Heart" />
<br />
<BitCheckbox Label="Disabled custom check icon" CheckIconName="@BitIconName.WavingHand" Value="true" IsEnabled="false" />
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Label position" RazorCode="@example3RazorCode" Id="example3">
<ComponentExampleBox Title="Reversed" RazorCode="@example3RazorCode" Id="example3">
<ExamplePreview>
<div>Adjust the label position of BitCheckbox to be reversed.</div>
<br />
<BitCheckbox Label="Reversed" Reversed />
<br />
<BitCheckbox Label="Reversed - Disabled" Reversed IsEnabled="false" />
Expand All @@ -39,6 +45,8 @@

<ComponentExampleBox Title="LabelTemplate" RazorCode="@example4RazorCode" Id="example4">
<ExamplePreview>
<div>Customizing the label of BitCheckbox using a template.</div>
<br />
<BitCheckbox>
<LabelTemplate>
<BitTag Color="BitColor.Success">Label Template</BitTag>
Expand All @@ -49,6 +57,8 @@

<ComponentExampleBox Title="Indeterminate" RazorCode="@example5RazorCode" Id="example5">
<ExamplePreview>
<div>Display BitCheckbox in an indeterminate state.</div>
<br />
<BitCheckbox Label="Indeterminate checkbox" Indeterminate />
<br />
<BitCheckbox Label="Disabled indeterminate checkbox" Indeterminate IsEnabled="false" />
Expand All @@ -57,6 +67,8 @@

<ComponentExampleBox Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
<ExamplePreview>
<div>Demonstrates one-way and two-way data binding with BitCheckbox.</div>
<br /><br />
<div><b>Value</b>:</div><br />
<BitCheckbox Label="One-way checked (Fixed)" Value="true" />
<br />
Expand Down Expand Up @@ -87,6 +99,8 @@

<ComponentExampleBox Title="Custom content" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
<ExamplePreview>
<div>Create a custom checkbox with unique content and style.</div>
<br />
<BitCheckbox @bind-Value="customCheckboxValue">
<BitIcon Style="border:1px solid gray;width:22px;height:22px"
IconName="@(customCheckboxValue ? BitIconName.Accept : null)" />
Expand All @@ -106,22 +120,38 @@

<ComponentExampleBox Title="Style & Class" RazorCode="@example8RazorCode" Id="example8">
<ExamplePreview>
<div>
<div>Component's Style & Class:</div><br />
<BitCheckbox Label="Styled checkbox" Style="background-color:aqua;color:red" />
<div>Explore styling and class customization for BitCheckbox, including component styles, custom classes, and detailed styles.</div>
<br /><br />
<div>Component's Style & Class:</div>
<br />
<div class="example-content">
<BitCheckbox Label="Styled checkbox" Style="color: dodgerblue; text-shadow: lightskyblue 0 0 1rem;" />
<br />
<BitCheckbox Label="Classed checkbox" Class="custom-class" />
<br /><br /><br /><br />
<div><b>Styles</b> & <b>Classes</b>:</div><br />
<BitCheckbox Label="Styles" Styles="@(new() { Label="color:darkgoldenrod", Box="border-color:brown", Icon="color:red" })" />
</div>
<br /><br /><br />
<div><b>Styles</b> & <b>Classes</b>:</div>
<br />
<div class="example-content">
<BitCheckbox Label="Styles"
Styles="@(new() { Checked = "--check-color: deeppink; --icon-color: white;",
Label = "color: var(--check-color);",
Box = "border-radius: 50%; border-color: var(--check-color); background-color: var(--check-color);",
Icon = "color: var(--icon-color);" })" />
<br />
<BitCheckbox Label="Classes" Classes="@(new() { Label="custom-label", Box="custom-box" })" />
<BitCheckbox Label="Classes"
Classes="@(new() { Checked = "custom-checked",
Icon = "custom-icon",
Label="custom-label",
Box="custom-box" })" />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<ExamplePreview>
<div>Use data annotations to validate the BitCheckbox component.</div>
<br />
<div>
@if (string.IsNullOrEmpty(SuccessMessage))
{
Expand All @@ -146,6 +176,8 @@

<ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
<ExamplePreview>
<div>Use BitCheckbox in a right-to-left (RTL).</div>
<br />
<div dir="rtl">
<BitCheckbox Dir="BitDir.Rtl" Label="چکباکس راست به چپ" />
<br />
Expand Down
49 changes: 39 additions & 10 deletions ...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,32 +288,61 @@ private void HandleInvalidSubmit()
private readonly string example8RazorCode = @"
<style>
.custom-class {
color: brown;
padding: 1rem;
background-color: aquamarine;
padding: 0.5rem;
border-radius: 0.125rem;
background-color: #d3d3d347;
border: 1px solid dodgerblue;
}
.custom-label {
color: darkblue;
font-size: 18px;
font-weight: bold;
color: lightseagreen;
}
.custom-icon {
color: lightseagreen
}
.custom-box {
border-width: 3px;
border-color: crimson;
border-radius: 0.2rem;
border-color: lightseagreen;
}
.custom-checked .custom-icon {
color: white
}
.custom-checked:hover .custom-icon {
color: whitesmoke;
}
.custom-checked .custom-box {
background-color: lightseagreen;
}
.custom-checked:hover .custom-box {
border-color: mediumseagreen;
}
</style>
<BitCheckbox Label=""Styled checkbox"" Style=""background-color:aqua;color:red"" />
<BitCheckbox Label=""Styled checkbox"" Style=""color: dodgerblue; text-shadow: lightskyblue 0 0 1rem;"" />
<BitCheckbox Label=""Classed checkbox"" Class=""custom-class"" />
<BitCheckbox Label=""Styles"" Styles=""@(new() { Label=""color:darkgoldenrod"", Box=""border-color:brown"", Icon=""color:red"" })"" />
<BitCheckbox Label=""Styles""
Styles=""@(new() { Checked = ""--check-color: deeppink; --icon-color: white;"",
Label = ""color: var(--check-color);"",
Box = ""border-radius: 50%; border-color: var(--check-color); background-color: var(--check-color);"",
Icon = ""color: var(--icon-color);"" })"" />
<BitCheckbox Label=""Classes"" Classes=""@(new() { Label=""custom-label"", Box=""custom-box"" })"" />";
<BitCheckbox Label=""Classes""
Classes=""@(new() { Checked = ""custom-checked"",
Icon = ""custom-icon"",
Label=""custom-label"",
Box=""custom-box"" })"" />";

private readonly string example9RazorCode = @"
<style>
Expand Down
34 changes: 27 additions & 7 deletions ...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,40 @@

::deep {
.custom-class {
color: brown;
padding: 1rem;
background-color: aquamarine;
padding: 0.5rem;
border-radius: 0.125rem;
background-color: #d3d3d347;
border: 1px solid dodgerblue;
}

.custom-label {
color: darkblue;
font-size: 18px;
font-weight: bold;
color: lightseagreen;
}

.custom-icon {
color: lightseagreen
}

.custom-box {
border-width: 3px;
border-color: crimson;
border-radius: 0.2rem;
border-color: lightseagreen;
}

.custom-checked .custom-icon {
color: white
}

.custom-checked:hover .custom-icon {
color: whitesmoke;
}

.custom-checked .custom-box {
background-color: lightseagreen;
}

.custom-checked:hover .custom-box {
border-color: mediumseagreen;
}

.validation-message {
Expand Down

0 comments on commit 6e52237

Please sign in to comment.