Skip to content

Commit

Permalink
feat(blazorui): improve BitSearchBox demo #8293 (#8299)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhrastegari
mhrastegari authored Aug 13, 2024
1 parent 3b220de commit d3c12d0
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 49 deletions.
46 changes: 38 additions & 8 deletions ...nt/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
ComponentPublicMembers="componentPublicMembers">
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
<ExamplePreview>
<div>Basic examples of BitSearchBox including a default and a disabled state.</div>
<br />
<div class="example-content">
<div>
<BitLabel>Basic</BitLabel>
Expand All @@ -29,6 +31,8 @@

<ComponentExampleBox Title="IsUnderlined" RazorCode="@example2RazorCode" Id="example2">
<ExamplePreview>
<div>Demonstrating the underlined style of BitSearchBox in both enabled and disabled states.</div>
<br />
<div class="example-content">
<div>
<BitLabel>Basic Underlined SearchBox</BitLabel>
Expand All @@ -45,6 +49,8 @@

<ComponentExampleBox Title="Icon" RazorCode="@example3RazorCode" Id="example3">
<ExamplePreview>
<div>Examples of BitSearchBox with various icon configurations such as fixed icon, no animation, custom icon, and no icon.</div>
<br />
<div class="example-content">
<div>
<BitLabel>SearchBox with fixed icon</BitLabel>
Expand All @@ -71,6 +77,8 @@

<ComponentExampleBox Title="Search Button" RazorCode="@example4RazorCode" Id="example4">
<ExamplePreview>
<div>Showcasing BitSearchBox with a search button in various configurations, including custom button icon and disabled state.</div>
<br />
<div class="example-content">
<div>
<BitLabel>Basic SearchBox</BitLabel>
Expand Down Expand Up @@ -98,29 +106,43 @@

<ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
<ExamplePreview>
<div>Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.</div>
<br /><br />
<div class="example-content">
<div>
<BitLabel>Component's Style & Class:</BitLabel>
<BitSearchBox Placeholder="Search" Style="background-color: lightskyblue; border-radius: 1rem; margin: 1rem 0" />
<br />
<BitSearchBox Placeholder="Search" Style="box-shadow: dodgerblue 0 0 1rem; margin-inline: 1rem;" />
<br />
<BitSearchBox Placeholder="Search" Class="custom-class" />
</div>
<br />
<br /><br />
<div>
<BitLabel>Styles & Classes:</BitLabel>
<br />
<BitSearchBox Placeholder="Search"
Styles="@(new() { Icon = "color: darkorange;",
Input = "padding: 0.5rem; background-color: goldenrod" })" />
Styles="@(new() { Root = "margin-inline: 1rem;",
Focused = "--focused-background: #b2b2b25a;",
Input = "padding: 0.5rem;",
InputContainer = "background: var(--focused-background);" })" />
<br />
<BitSearchBox Placeholder="Search" DefaultValue="This is default value"
Classes="@(new() { ClearButtonIcon = "custom-clear",
IconWrapper = "custom-search" })" />
<BitSearchBox FixedIcon
Placeholder="Search" DefaultValue="This is default value"
Classes="@(new() { Root = "custom-root",
Icon = "custom-icon",
Focused = "custom-focused",
ClearButton = "custom-clear",
IconWrapper = "custom-icon-wrapper",
InputContainer = "custom-input-container" })" />
</div>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Visibility" RazorCode="@example6RazorCode" Id="example6">
<ExamplePreview>
<div>BitSearchBox visibility examples including visible, hidden, and collapsed states.</div>
<br />
<div class="example-content">
<div class="visibility-items">Visible: [ <BitSearchBox Visibility="BitVisibility.Visible" Placeholder="Visible SearchBox" /> ]</div>
<div class="visibility-items">Hidden: [ <BitSearchBox Visibility="BitVisibility.Hidden" Placeholder="Hidden SearchBox" /> ]</div>
Expand All @@ -131,6 +153,8 @@

<ComponentExampleBox Title="Binding" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
<ExamplePreview>
<div>Binding examples for BitSearchBox including two-way binding, OnChange, and OnSearch events.</div>
<br />
<div class="example-content">
<div>
<BitLabel>Two-way Bind</BitLabel>
Expand All @@ -155,6 +179,8 @@

<ComponentExampleBox Title="Validation" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
<ExamplePreview>
<div>Demonstrating validation of BitSearchBox using data annotations.</div>
<br />
<div class="example-content">
<EditForm Model="ValidationSearchBoxModel">
<DataAnnotationsValidator />
Expand All @@ -167,6 +193,8 @@

<ComponentExampleBox Title="Suggest List" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<ExamplePreview>
<div>Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.</div>
<br />
<div class="example-content">
<div>
<BitLabel>Items:</BitLabel>
Expand Down Expand Up @@ -210,7 +238,9 @@

<ComponentExampleBox Title="RTL" RazorCode="@example10RazorCode" Id="example10">
<ExamplePreview>
<div class="example-content">
<div>Use the BitSearchBox component in right-to-left (RTL).</div>
<br />
<div dir="rtl" class="example-content">
<BitSearchBox Dir="BitDir.Rtl" Placeholder="جستجو" />
<br />
<BitSearchBox IsUnderlined Dir="BitDir.Rtl" Placeholder="جستجو" />
Expand Down
72 changes: 57 additions & 15 deletions ...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,31 +377,73 @@ private async Task<ICollection<string>> LoadItems(string? search, int count)
private readonly string example5RazorCode = @"
<style>
.custom-class {
border: 1px solid red;
box-shadow: aqua 0 0 1rem;
overflow: hidden;
margin-inline: 1rem;
border-radius: 1rem;
border: 2px solid tomato;
}
.custom-clear {
color: blueviolet;
.custom-class * {
border: none;
}
.custom-search {
margin-right: 0.25rem;
border-radius: 0.5rem;
background-color: tomato;
.custom-root {
margin-inline: 1rem;
}
.custom-input-container {
height: 3rem;
overflow: hidden;
align-items: center;
border-radius: 1.5rem;
border-color: #13a3a375;
background-color: #13a3a375;
}
.custom-focused .custom-input-container {
border-width: 1px;
border-color: #13a3a375;
}
.custom-clear:hover {
background: transparent;
}
.custom-icon {
color: darkslategrey;
}
.custom-icon-wrapper {
width: 2rem;
height: 2rem;
border-radius: 1rem;
margin-inline: 0.5rem;
background-color: whitesmoke;
}
}
</style>
<BitSearchBox Placeholder=""Search"" Style=""background-color: lightskyblue; border-radius: 1rem; margin: 1rem 0"" />
<BitSearchBox Placeholder=""Search"" Style=""box-shadow: dodgerblue 0 0 1rem; margin-inline: 1rem;"" />
<BitSearchBox Placeholder=""Search"" Class=""custom-class"" />
<BitSearchBox Placeholder=""Search""
Styles=""@(new() { SearchIcon = ""color: darkorange;"",
Input = ""padding: 0.5rem; background-color: goldenrod"" })"" />
<BitSearchBox Placeholder=""Search"" DefaultValue=""This is default value""
Classes=""@(new() { ClearButtonIcon = ""custom-clear"",
IconWrapper = ""custom-search"" })"" />";
<BitSearchBox Placeholder=""Search""
Styles=""@(new() { Root = ""margin-inline: 1rem;"",
Focused = ""--focused-background: #b2b2b25a;"",
Input = ""padding: 0.5rem;"",
InputContainer = ""background: var(--focused-background);"" })"" />
<BitSearchBox FixedIcon
Placeholder=""Search"" DefaultValue=""This is default value""
Classes=""@(new() { Root = ""custom-root"",
Icon = ""custom-icon"",
Focused = ""custom-focused"",
ClearButton = ""custom-clear"",
IconWrapper = ""custom-icon-wrapper"",
InputContainer = ""custom-input-container"" })"" />";

private readonly string example6RazorCode = @"
Visible: [ <BitSearchBox Visibility=""BitVisibility.Visible"" Placeholder=""Visible SearchBox"" /> ]
Expand Down
82 changes: 56 additions & 26 deletions ...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,70 @@
@import '../../../../Styles/abstracts/_functions.scss';
@import '../../../../Styles/abstracts/_bit-css-variables.scss';

.example-content {
display: flex;
gap: 1.25rem;
max-width: 19rem;
flex-flow: row wrap;
align-items: center;

&.column {
flex-direction: column;
align-items: flex-start;
}

& > div {
width: 100%;
}
}

::deep {
.example-content {
display: flex;
gap: rem2(20px);
flex-flow: row wrap;
align-items: center;
max-width: rem2(304px);
.custom-class {
overflow: hidden;
margin-inline: 1rem;
border-radius: 1rem;
border: 2px solid tomato;
}

.custom-class * {
border: none;
}

&.column {
flex-direction: column;
align-items: flex-start;
}
.custom-root {
margin-inline: 1rem;
}

& > div {
width: 100%;
}
.custom-input-container {
height: 3rem;
overflow: hidden;
align-items: center;
border-radius: 1.5rem;
border-color: #13a3a375;
background-color: #13a3a375;
}

.validation-message {
color: red;
font-size: rem2(12px);
.custom-focused .custom-input-container {
border-width: 1px;
border-color: #13a3a375;
}

.custom-class {
border: 1px solid red;
box-shadow: aqua 0 0 1rem;
.custom-clear:hover {
background: transparent;
}

.custom-icon {
color: darkslategrey;
}

.custom-clear {
color: blueviolet;
.custom-icon-wrapper {
width: 2rem;
height: 2rem;
border-radius: 1rem;
margin-inline: 0.5rem;
background-color: whitesmoke;
}

.custom-search {
margin-right: 0.25rem;
border-radius: 0.5rem;
background-color: tomato;
.validation-message {
font-size: rem2(12px);
color: $bit-color-error;
}
}

0 comments on commit d3c12d0

Please sign in to comment.