diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor index c666379bdc..8410439e3c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor @@ -35,117 +35,224 @@ - + -
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
-

+
Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.
+
-
Component's Style & Class:

- -
- -



-
Item's Style & Class:

- +

+ -



-
Styles & Classes:

-
+ -
- +

+ + IsEnabled="false" />
- + -
Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.
+
Enables fit-content width for the dropdown that sets the width of the component based on its content size.


-
-
Two-way binding:

- +

+ + + + + + +
The dropdown can be rendered without any border.
+

+
+ -
-
Selected Value: @controlledValue


- -
-
Selected Values: @string.Join(",", controlledValues)
-



-
OnChange:

- + + + + + +
When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.
+
+
+ +
+ + + + + +
Explores different drop directions for the BitDropdown component, including automatic and explicit directions.
+
+
+ -
-
Changed Value: @changedItem?.Value
+ Placeholder="Select an item" + DropDirection="BitDropDirection.All" />

- +
+ + + + + +
Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.
+
+
+ + Placeholder="Select an option" + ShowClearButton="true" />
-
Changed Values: @string.Join(",", changedItems.Select(i => i.Value))
-



-
OnSelectItem:

- Value: @clearValue
+


+ + Placeholder="Select options" + IsMultiSelect="true" + ShowClearButton="true" />
-
Selected Value: @selectedItem1?.Value
+
Values: @string.Join(',', clearValues)
+
+ + + + + +
Examples of dropdowns with search functionality, including default and custom search functions.
+

+
+

+



+
Custom search function:

+ -
-
Selected Value: @selectedItem2?.Value
+ Placeholder="Select an item" + ShowSearchBox="true" + AutoFocusSearchBox="true" + SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()" + SearchBoxPlaceholder="Search item" /> +

+ +
+ + + + + +
Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.
+
+
+ @if (string.IsNullOrEmpty(successMessage)) + { + + + + + + + +
+ + + + + +
+ + Submit + + } + else + { + @successMessage + }
- +
Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.


@@ -225,64 +332,109 @@ - - -
When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.
-
-
- -
- - - - + -
Examples of dropdowns with search functionality, including default and custom search functions.
+
Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.


- Two-way binding:

+ + Placeholder="Select an item" /> +
+
Selected Value: @controlledValue


- + IsMultiSelect="true" /> +
+
Selected Values: @string.Join(",", controlledValues)




-
Custom search function:

- OnChange:

+ +
+
Changed Value: @changedItem?.Value
+

+ +
+
Changed Values: @string.Join(",", changedItems.Select(i => i.Value))
+



+
OnSelectItem:

+ + NameSelectors="nameSelectors" + OnSelectItem="(BitDropdownCustom item) => selectedItem1 = item" /> +
+
Selected Value: @selectedItem1?.Value


+
+
Selected Value: @selectedItem2?.Value
+ + + + + + +
Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.
+


+
+
With Items:

+ +
+ +



+
With ItemsProvider:

+ +
+ + ItemsProvider="LoadItems" + NameSelectors="nameSelectors" + Placeholder="Select items" />
- +
When the Combo parameter is true, you can type in BitDropdown input and search between items.

@@ -295,9 +447,24 @@ NameSelectors="comboBoxNameSelectors" />
Value: @comboBoxValueSample1
-



-
When the Chips parameter is true, shows the selected items like chips in the ComboBox.
+

+
+
Values: @string.Join(',', comboBoxValues1)
+ + + + + + +
When the Chips parameter is true, shows the selected items like chips in the ComboBox.
+
+

Value: @comboBoxValueSample2
-



-
When the Dynamic parameter is true, you can add a new item in the ComboBox.
+

+ +
+
Values: @string.Join(',', comboBoxValues2)
+
+ + + + + +
When the Dynamic parameter is true, you can add a new item in the ComboBox.
+


Value: @comboBoxValueSample3
-



-
When the Combo, Chips and Dynamic parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).
+
+



+
When the Combo, Chips and Dynamic parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).
+
+

Value: @comboBoxValueSample4


-
-
Values: @string.Join(',', comboBoxValues)
+
Values: @string.Join(',', comboBoxValues3)
 - + -
Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.
-
+
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
+

- Component's Style & Class:

+ -

- +
+ +



+
Item's Style & Class:

+ -

-


+
Styles & Classes:

+ -

- +
+ + Classes="@(new() { Callout = "custom-callout", + Container = "custom-container", + ItemButton = "custom-item-button", + ScrollContainer = "custom-scroll-container" })" /> - +
Use BitDropdown in right-to-left (RTL).

@@ -405,164 +598,3 @@ - - - -
Explores different drop directions for the BitDropdown component, including automatic and explicit directions.
-
-
- -

- -
- - - - - -
Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.
-
-
- -
-
Value: @clearValue
-


- -
-
Values: @string.Join(',', clearValues)
-
- - - - - -
Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.
-
-
- @if (string.IsNullOrEmpty(successMessage)) - { - - - - - - - -
- - - - - -
- - Submit - - } - else - { - @successMessage - } -
- - - - - -
Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.
-


-
-
With Items:

- -
- -



-
With ItemsProvider:

- -
- -
- - - - - -
Enables fit-content width for the dropdown that sets the width of the component based on its content size.
-

- -

- - - - - - -
The dropdown can be rendered without any border.
-

-
- -

- -
- - diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs index 85a16e9cdd..77e4fd62cb 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs @@ -131,7 +131,9 @@ private List GetRtlCustoms() => private string comboBoxValueSample2 = default!; private string comboBoxValueSample3 = default!; private string comboBoxValueSample4 = default!; - private ICollection comboBoxValues = []; + private ICollection comboBoxValues1 = []; + private ICollection comboBoxValues2 = []; + private ICollection comboBoxValues3 = []; protected override void OnInitialized() { diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs index 87d88f1311..1f4bbebc90 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs @@ -73,94 +73,192 @@ public class BitDropdownCustom };"; private readonly string example2RazorCode = @" - +private List GetBasicCustoms() => new() +{ + new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Divider }, + new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +}; +private BitDropdownNameSelectors nameSelectors = new() +{ + AriaLabel = { Selector = c => c.Label }, + Id = { Selector = c => c.Key }, + Data = { Selector = c => c.Payload }, + IsEnabled = { Selector = c => c.Disabled is false }, + IsHidden = { Selector = c => c.Visible is false }, + ItemType = { Selector = c => c.Type }, + Text = { Selector = c => c.Text }, + Title = { Selector = c => c.Title }, + Value = { Selector = c => c.Value }, +};"; - + Placeholder=""Select an item"" /> - + Placeholder=""Select items"" + IsMultiSelect=""true"" />"; + private readonly string example3CsharpCode = @" +public class BitDropdownCustom +{ + public string? Label { get; set; } + public string? Key { get; set; } + public object? Payload { get; set; } + public bool Disabled { get; set; } + public bool Visible { get; set; } = true; + public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal; + public string? Text { get; set; } + public string? Title { get; set; } + public string? Value { get; set; } +} +private List GetBasicCustoms() => new() +{ + new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Divider }, + new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +}; - nameSelectors = new() +{ + AriaLabel = { Selector = c => c.Label }, + Id = { Selector = c => c.Key }, + Data = { Selector = c => c.Payload }, + IsEnabled = { Selector = c => c.Disabled is false }, + IsHidden = { Selector = c => c.Visible is false }, + ItemType = { Selector = c => c.Type }, + Text = { Selector = c => c.Text }, + Title = { Selector = c => c.Title }, + Value = { Selector = c => c.Value }, +};"; + + private readonly string example4RazorCode = @" + - - + Placeholder=""Select items"" + IsMultiSelect=""true"" />"; + private readonly string example4CsharpCode = @" +public class BitDropdownCustom +{ + public string? Label { get; set; } + public string? Key { get; set; } + public object? Payload { get; set; } + public bool Disabled { get; set; } + public bool Visible { get; set; } = true; + public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal; + public string? Text { get; set; } + public string? Title { get; set; } + public string? Value { get; set; } +} - GetBasicCustoms() => new() +{ + new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Divider }, + new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +}; + +private BitDropdownNameSelectors nameSelectors = new() +{ + AriaLabel = { Selector = c => c.Label }, + Id = { Selector = c => c.Key }, + Data = { Selector = c => c.Payload }, + IsEnabled = { Selector = c => c.Disabled is false }, + IsHidden = { Selector = c => c.Visible is false }, + ItemType = { Selector = c => c.Type }, + Text = { Selector = c => c.Text }, + Title = { Selector = c => c.Title }, + Value = { Selector = c => c.Value }, +};"; + + private readonly string example5RazorCode = @" +"; - private readonly string example2CsharpCode = @" + IsResponsive=true />"; + private readonly string example5CsharpCode = @" public class BitDropdownCustom { public string? Label { get; set; } - public string? CssClass { get; set; } public string? Key { get; set; } public object? Payload { get; set; } public bool Disabled { get; set; } public bool Visible { get; set; } = true; public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal; - public string? CssStyle { get; set; } public string? Text { get; set; } public string? Title { get; set; } public string? Value { get; set; } @@ -180,97 +278,239 @@ public class BitDropdownCustom new() { Text = ""Lettuce"", Value = ""v-let"" } }; -private List GetStyleClassCustoms() => new() +private BitDropdownNameSelectors nameSelectors = new() { - new() { Type = BitDropdownItemType.Header, Text = ""Fruits"", CssStyle = ""text-align: center;"" }, - new() { Text = ""Apple"", Value = ""f-app"", CssClass = ""custom-fruit"" }, - new() { Text = ""Banana"", Value = ""f-ban"", CssClass = ""custom-fruit"" }, - new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true, CssClass = ""custom-fruit"" }, - new() { Text = ""Grape"", Value = ""f-gra"", CssClass = ""custom-fruit"" }, - new() { Type = BitDropdownItemType.Divider, CssStyle = ""padding: 0 0.25rem;"" }, - new() { Type = BitDropdownItemType.Header, Text = ""Vegetables"", CssStyle = ""text-align: center;"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"", CssClass = ""custom-veg"" }, - new() { Text = ""Carrot"", Value = ""v-car"", CssClass = ""custom-veg"" }, - new() { Text = ""Lettuce"", Value = ""v-let"", CssClass = ""custom-veg"" } -}; + AriaLabel = { Selector = c => c.Label }, + Id = { Selector = c => c.Key }, + Data = { Selector = c => c.Payload }, + IsEnabled = { Selector = c => c.Disabled is false }, + IsHidden = { Selector = c => c.Visible is false }, + ItemType = { Selector = c => c.Type }, + Text = { Selector = c => c.Text }, + Title = { Selector = c => c.Title }, + Value = { Selector = c => c.Value }, +};"; + + private readonly string example6RazorCode = @" + + +"; + private readonly string example6CsharpCode = @" +private ICollection? dropDirectionCustoms; + +protected override void OnInitialized() +{ + dropDirectionCustoms = Enumerable.Range(1, 15) + .Select(c => new BitDropdownCustom { Value = c.ToString(), Text = $""Category {c}"" }) + .ToArray(); +} private BitDropdownNameSelectors nameSelectors = new() { AriaLabel = { Selector = c => c.Label }, - Class = { Selector = c => c.CssClass }, Id = { Selector = c => c.Key }, Data = { Selector = c => c.Payload }, IsEnabled = { Selector = c => c.Disabled is false }, IsHidden = { Selector = c => c.Visible is false }, ItemType = { Selector = c => c.Type }, - Style = { Selector = c => c.CssStyle }, Text = { Selector = c => c.Text }, Title = { Selector = c => c.Title }, Value = { Selector = c => c.Value }, };"; - private readonly string example3RazorCode = @" - -
Selected Value: @controlledValue
+ Placeholder=""Select an option"" + ShowClearButton=""true"" /> +
Value: @clearValue
- -
Selected Values: @string.Join("","", controlledValues)
+ Placeholder=""Select options"" + IsMultiSelect=""true"" + ShowClearButton=""true"" /> +
Values: @string.Join(',', clearValues)
"; + private readonly string example7CsharpCode = @" +private string? clearValue = ""f-app""; +private ICollection clearValues = new[] { ""f-app"", ""f-ban"" }; + +public class BitDropdownCustom +{ + public string? Label { get; set; } + public string? Key { get; set; } + public object? Payload { get; set; } + public bool Disabled { get; set; } + public bool Visible { get; set; } = true; + public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal; + public string? Text { get; set; } + public string? Title { get; set; } + public string? Value { get; set; } +} +private List GetBasicCustoms() => new() +{ + new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Divider }, + new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +}; +private BitDropdownNameSelectors nameSelectors = new() +{ + AriaLabel = { Selector = c => c.Label }, + Id = { Selector = c => c.Key }, + Data = { Selector = c => c.Payload }, + IsEnabled = { Selector = c => c.Disabled is false }, + IsHidden = { Selector = c => c.Visible is false }, + ItemType = { Selector = c => c.Type }, + Text = { Selector = c => c.Text }, + Title = { Selector = c => c.Title }, + Value = { Selector = c => c.Value }, +};"; - changedItem = items.SingleOrDefault()"" /> -
Changed Value: @changedItem?.Value
+ Placeholder=""Select an item"" + ShowSearchBox=""true"" + AutoFocusSearchBox=""true"" + SearchBoxPlaceholder=""Search item"" /> changedItems = items"" /> -
Changed Values: @string.Join("","", changedItems.Select(i => i.Value))
+ Placeholder=""Select items"" + IsMultiSelect=""true"" + ShowSearchBox=""true"" + SearchBoxPlaceholder=""Search items"" /> - selectedItem1 = item"" /> -
Selected Value: @selectedItem1?.Value
+ Placeholder=""Select an item"" + ShowSearchBox=""true"" + AutoFocusSearchBox=""true"" + SearchFunction=""(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"" + SearchBoxPlaceholder=""Search item"" /> selectedItem2 = item"" /> -
Selected Value: @selectedItem2?.Value
"; - private readonly string example3CsharpCode = @" -private string? controlledValue = ""f-app""; -private ICollection controlledValues = new[] { ""f-app"", ""f-ban"" }; + Placeholder=""Select items"" + IsMultiSelect=""true"" + ShowSearchBox=""true"" + SearchFunction=""(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"" + SearchBoxPlaceholder=""Search items"" />"; + private readonly string example8CsharpCode = @" +public class BitDropdownCustom +{ + public string? Label { get; set; } + public string? Key { get; set; } + public object? Payload { get; set; } + public bool Disabled { get; set; } + public bool Visible { get; set; } = true; + public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal; + public string? Text { get; set; } + public string? Title { get; set; } + public string? Value { get; set; } +} + +private List GetBasicCustoms() => new() +{ + new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Divider }, + new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +}; + +private BitDropdownNameSelectors nameSelectors = new() +{ + AriaLabel = { Selector = c => c.Label }, + Id = { Selector = c => c.Key }, + Data = { Selector = c => c.Payload }, + IsEnabled = { Selector = c => c.Disabled is false }, + IsHidden = { Selector = c => c.Visible is false }, + ItemType = { Selector = c => c.Type }, + Text = { Selector = c => c.Text }, + Title = { Selector = c => c.Title }, + Value = { Selector = c => c.Value }, +};"; + + private readonly string example9RazorCode = @" +@using System.ComponentModel.DataAnnotations; + + + + + + + + validationModel.Category)"" /> + + + validationModel.Products)"" /> + + Submit +"; + private readonly string example9CsharpCode = @" +public class FormValidationDropdownModel +{ + [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")] + [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")] + public ICollection Products { get; set; } = new List(); + + [Required] + public string Category { get; set; } +} -private BitDropdownCustom? changedItem; -private BitDropdownCustom[] changedItems = Array.Empty(); +private FormValidationDropdownModel validationModel = new(); -private BitDropdownCustom? selectedItem1; -private BitDropdownCustom? selectedItem2; +private async Task HandleValidSubmit() { } + +private void HandleInvalidSubmit() { } public class BitDropdownCustom { @@ -299,7 +539,7 @@ public class BitDropdownCustom new() { Text = ""Lettuce"", Value = ""v-let"" } }; -private BitDropdownNameSelectors nameSelectors = new() +private BitDropdownNameSelectors nameSelectors = new() { AriaLabel = { Selector = c => c.Label }, Id = { Selector = c => c.Key }, @@ -312,7 +552,7 @@ public class BitDropdownCustom Value = { Selector = c => c.Value }, };"; - private readonly string example4RazorCode = @" + private readonly string example10RazorCode = @" - - - - - - validationModel.Category)"" /> - - - validationModel.Products)"" /> - - Submit -"; - private readonly string example12CsharpCode = @" -public class FormValidationDropdownModel -{ - [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")] - [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")] - public ICollection Products { get; set; } = new List(); - - [Required] - public string Category { get; set; } -} - -private FormValidationDropdownModel validationModel = new(); - -private async Task HandleValidSubmit() { } + private readonly string example14RazorCode = @" + +
Value: @comboBoxValueSample2
-private void HandleInvalidSubmit() { } + +
Values: @string.Join(',', comboBoxValues2)
"; + private readonly string example14CsharpCode = @" +private string comboBoxValueSample2 = default!; +private ICollection comboBoxValues2 = []; public class BitDropdownCustom { @@ -971,7 +1012,7 @@ public class BitDropdownCustom public string? Value { get; set; } } -private List GetBasicCustoms() => new() +private List comboBoxCustoms = new() { new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, new() { Text = ""Apple"", Value = ""f-app"" }, @@ -985,48 +1026,65 @@ public class BitDropdownCustom new() { Text = ""Lettuce"", Value = ""v-let"" } }; -private BitDropdownNameSelectors nameSelectors = new() +private BitDropdownNameSelectors comboBoxNameSelectors = new() { AriaLabel = { Selector = c => c.Label }, + Class = { Selector = c => c.CssClass }, Id = { Selector = c => c.Key }, Data = { Selector = c => c.Payload }, IsEnabled = { Selector = c => c.Disabled is false }, IsHidden = { Selector = c => c.Visible is false }, ItemType = { Selector = c => c.Type }, + Style = { Selector = c => c.CssStyle }, Text = { Selector = c => c.Text }, Title = { Selector = c => c.Title }, Value = { Selector = c => c.Value }, + ValueSetter = (BitDropdownCustom item, string value) => item.Value = value, + TextSetter = (string? text, BitDropdownCustom item) => item.Text = text };"; - private readonly string example13RazorCode = @" - - - + private readonly string example15RazorCode = @" + item.Text ?? """")"" + OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" /> +
Value: @comboBoxValueSample3
+ item.Text ?? """")"" + OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" /> +
Value: @comboBoxValueSample4
+ item.Text ?? """")"" + OnDynamicAdd=""(BitDropdownCustom item) => HandleOnDynamicAdd(item)"" /> +
Values: @string.Join(',', comboBoxValues3)
"; + private readonly string example15CsharpCode = @" +private string comboBoxValueSample3 = default!; +private string comboBoxValueSample4 = default!; +private ICollection comboBoxValues3 = []; - +private void HandleOnDynamicAdd(BitDropdownCustom item) +{ + comboBoxCustoms.Add(item); +} -"; - private readonly string example13CsharpCode = @" public class BitDropdownCustom { public string? Label { get; set; } @@ -1040,93 +1098,126 @@ public class BitDropdownCustom public string? Value { get; set; } } -private ICollection? virtualizeCustoms1; -private ICollection? virtualizeCustoms2; - -protected override void OnInitialized() +private List comboBoxCustoms = new() { - virtualizeCustoms1 = Enumerable.Range(1, 10_000) - .Select(c => new BitDropdownCustom { Text = $""Category {c}"", Value = c.ToString() }) - .ToArray(); - - virtualizeCustoms2 = Enumerable.Range(1, 10_000) - .Select(c => new BitDropdownCustom { Text = $""Category {c}"", Value = c.ToString() }) - .ToArray(); -} + new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Divider }, + new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +}; -private BitDropdownNameSelectors nameSelectors = new() +private BitDropdownNameSelectors comboBoxNameSelectors = new() { AriaLabel = { Selector = c => c.Label }, + Class = { Selector = c => c.CssClass }, Id = { Selector = c => c.Key }, Data = { Selector = c => c.Payload }, IsEnabled = { Selector = c => c.Disabled is false }, IsHidden = { Selector = c => c.Visible is false }, ItemType = { Selector = c => c.Type }, + Style = { Selector = c => c.CssStyle }, Text = { Selector = c => c.Text }, Title = { Selector = c => c.Title }, Value = { Selector = c => c.Value }, -}; + ValueSetter = (BitDropdownCustom item, string value) => item.Value = value, + TextSetter = (string? text, BitDropdownCustom item) => item.Text = text +};"; -private async ValueTask> LoadItems( - BitDropdownItemsProviderRequest request) -{ - try - { - // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview + private readonly string example16RazorCode = @" + + + + + + + + + -"; - private readonly string example14CsharpCode = @" + Placeholder=""Select an item"" + Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"", + Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"", + ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"", + ItemButton = ""color: lightskyblue"", + Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"" /> + +"; + private readonly string example16CsharpCode = @" public class BitDropdownCustom { public string? Label { get; set; } + public string? CssClass { get; set; } public string? Key { get; set; } public object? Payload { get; set; } public bool Disabled { get; set; } public bool Visible { get; set; } = true; public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal; + public string? CssStyle { get; set; } public string? Text { get; set; } public string? Title { get; set; } public string? Value { get; set; } @@ -1146,31 +1237,49 @@ public class BitDropdownCustom new() { Text = ""Lettuce"", Value = ""v-let"" } }; +private List GetStyleClassCustoms() => new() +{ + new() { Type = BitDropdownItemType.Header, Text = ""Fruits"", CssStyle = ""text-align: center;"" }, + new() { Text = ""Apple"", Value = ""f-app"", CssClass = ""custom-fruit"" }, + new() { Text = ""Banana"", Value = ""f-ban"", CssClass = ""custom-fruit"" }, + new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true, CssClass = ""custom-fruit"" }, + new() { Text = ""Grape"", Value = ""f-gra"", CssClass = ""custom-fruit"" }, + new() { Type = BitDropdownItemType.Divider, CssStyle = ""padding: 0 0.25rem;"" }, + new() { Type = BitDropdownItemType.Header, Text = ""Vegetables"", CssStyle = ""text-align: center;"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"", CssClass = ""custom-veg"" }, + new() { Text = ""Carrot"", Value = ""v-car"", CssClass = ""custom-veg"" }, + new() { Text = ""Lettuce"", Value = ""v-let"", CssClass = ""custom-veg"" } +}; + private BitDropdownNameSelectors nameSelectors = new() { AriaLabel = { Selector = c => c.Label }, + Class = { Selector = c => c.CssClass }, Id = { Selector = c => c.Key }, Data = { Selector = c => c.Payload }, IsEnabled = { Selector = c => c.Disabled is false }, IsHidden = { Selector = c => c.Visible is false }, ItemType = { Selector = c => c.Type }, + Style = { Selector = c => c.CssStyle }, Text = { Selector = c => c.Text }, Title = { Selector = c => c.Title }, Value = { Selector = c => c.Value }, };"; - private readonly string example15RazorCode = @" - + Placeholder=""لطفا انتخاب کنید"" + Dir=""BitDir.Rtl"" /> -"; - private readonly string example15CsharpCode = @" + Placeholder=""انتخاب چند گزینه ای"" + IsMultiSelect=""true"" + Dir=""BitDir.Rtl"" />"; + private readonly string example17CsharpCode = @" public class BitDropdownCustom { public string? Label { get; set; } @@ -1184,18 +1293,18 @@ public class BitDropdownCustom public string? Value { get; set; } } -private List GetBasicCustoms() => new() +private List GetRtlCustoms() => new() { - new() { Text = ""Fruits"", Type = BitDropdownItemType.Header }, - new() { Text = ""Apple"", Value = ""f-app"" }, - new() { Text = ""Banana"", Value = ""f-ban"" }, - new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true }, - new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { Type = BitDropdownItemType.Header, Text = ""میوه ها"" }, + new() { Text = ""سیب"", Value = ""f-app"" }, + new() { Text = ""موز"", Value = ""f-ban"" }, + new() { Text = ""پرتقال"", Value = ""f-ora"", Disabled = true }, + new() { Text = ""انگور"", Value = ""f-gra"" }, new() { Type = BitDropdownItemType.Divider }, - new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header }, - new() { Text = ""Broccoli"", Value = ""v-bro"" }, - new() { Text = ""Carrot"", Value = ""v-car"" }, - new() { Text = ""Lettuce"", Value = ""v-let"" } + new() { Type = BitDropdownItemType.Header, Text = ""سیزیجات"" }, + new() { Text = ""کلم بروكلی"", Value = ""v-bro"" }, + new() { Text = ""هویج"", Value = ""v-car"" }, + new() { Text = ""کاهو"", Value = ""v-let"" } }; private BitDropdownNameSelectors nameSelectors = new() diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor index 8923493926..73c6f879d8 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor @@ -34,111 +34,224 @@ - + -
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
-

+
Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.
+
-
Component's Style & Class:

- -
- +

+ -



-
Item's Style & Class:

- -



-
Styles & Classes:

- +

+ -
- +

+ + TItem="BitDropdownItem" + TValue="string" + IsEnabled="false" />
- + -
Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.
+
Enables fit-content width for the dropdown that sets the width of the component based on its content size.


-
-
Two-way binding:

- +

+ + + + + + +
The dropdown can be rendered without any border.
+

+
+ -
-
Selected Value: @controlledValue


- -
-
Selected Values: @string.Join(",", controlledValues)
-



-
OnChange:

- + + + + + +
When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.
+
+
+ + IsResponsive=true /> +
+ + + + + +
Explores different drop directions for the BitDropdown component, including automatic and explicit directions.
+
+
+ +

+ +
+ + + + + +
Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.
+
+
+
-
Changed Value: @changedItem?.Value
+
Value: @clearValue
+


+ +
+
Values: @string.Join(',', clearValues)
+
+ + + + + +
Examples of dropdowns with search functionality, including default and custom search functions.
+

+
+

-
-
Changed Values: @string.Join(",", changedItems.Select(i => i.Value))
+ IsMultiSelect="true" + ShowSearchBox="true" + SearchBoxPlaceholder="Search items" />



-
OnSelectItem:

- Custom search function:

+ -
-
Selected Value: @selectedItem1?.Value
+ ShowSearchBox="true" + AutoFocusSearchBox="true" + SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()" + SearchBoxPlaceholder="Search item" />

-
-
Selected Value: @selectedItem2?.Value
+ ShowSearchBox="true" + SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()" + SearchBoxPlaceholder="Search items" /> +
+ + + + + +
Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.
+
+
+ @if (string.IsNullOrEmpty(successMessage)) + { + + + + + + + +
+ + + + + +
+ + Submit + + } + else + { + @successMessage + }
- +
Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.


@@ -218,64 +331,103 @@ - - -
When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.
-
-
- -
- - - - + -
Examples of dropdowns with search functionality, including default and custom search functions.
+
Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.


- Two-way binding:

+ -

- +
+
Selected Value: @controlledValue
+

+ +
+
Selected Values: @string.Join(",", controlledValues)
+



+
OnChange:

+ +
+
Changed Value: @changedItem?.Value
+

+ + Items="GetBasicItems()" + Placeholder="Select items" + TItem="BitDropdownItem" TValue="string" + OnValuesChange="(BitDropdownItem[] items) => changedItems = items" /> +
+
Changed Values: @string.Join(",", changedItems.Select(i => i.Value))




-
Custom search function:

- OnSelectItem:

+ + OnSelectItem="(BitDropdownItem item) => selectedItem1 = item" /> +
+
Selected Value: @selectedItem1?.Value


+ OnSelectItem="(BitDropdownItem item) => selectedItem2 = item" /> +
+
Selected Value: @selectedItem2?.Value
+ + + + + + +
Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.
+


+
+
With Items:

+ +
+ +



+
With ItemsProvider:

+ +
+
- +
When the Combo parameter is true, you can type in BitDropdown input and search between items.

@@ -287,9 +439,23 @@ Items="comboBoxItems" />
Value: @comboBoxValueSample1
-



-
When the Chips parameter is true, shows the selected items like chips in the ComboBox.
+

+
+
Values: @string.Join(',', comboBoxValues1)
+ + + + + + +
When the Chips parameter is true, shows the selected items like chips in the ComboBox.
+
+

Value: @comboBoxValueSample2
-



-
When the Dynamic parameter is true, you can add a new item in the ComboBox.
+

+
+
Values: @string.Join(',', comboBoxValues2)
+
+ + + + + +
When the Dynamic parameter is true, you can add a new item in the ComboBox.
+
+

Value: @comboBoxValueSample3
-



-
When the Combo, Chips and Dynamic parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).
+
+



+
When the Combo, Chips and Dynamic parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).
+
+

Value: @comboBoxValueSample4


-
-
Values: @string.Join(',', comboBoxValues)
+
Values: @string.Join(',', comboBoxValues3)
 - + -
Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.
-
+
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
+

- Component's Style & Class:

+ -

- +
+ -

- +



+
Item's Style & Class:

+ +



+
Styles & Classes:

+ -

- +
+ + Classes="@(new() { Callout = "custom-callout", + Container = "custom-container", + ItemButton = "custom-item-button", + ScrollContainer = "custom-scroll-container" })" /> - +
Use BitDropdown in right-to-left (RTL).

@@ -397,160 +585,3 @@ - - - -
Explores different drop directions for the BitDropdown component, including automatic and explicit directions.
-
-
- -

- -
- - - - - -
Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.
-
-
- -
-
Value: @clearValue
-


- -
-
Values: @string.Join(',', clearValues)
-
- - - - - -
Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.
-
-
- @if (string.IsNullOrEmpty(successMessage)) - { - - - - - - - -
- - - - - -
- - Submit - - } - else - { - @successMessage - } -
- - - - - -
Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.
-


-
-
With Items:

- -
- -



-
With ItemsProvider:

- -
- -
- - - - - -
Enables fit-content width for the dropdown that sets the width of the component based on its content size.
-

- -

- - - - - - -
The dropdown can be rendered without any border.
-

-
- -

- -
- - diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs index fd06ad0280..5edae632c1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs @@ -100,7 +100,9 @@ private List> GetStyleClassItems() => private string comboBoxValueSample2 = default!; private string comboBoxValueSample3 = default!; private string comboBoxValueSample4 = default!; - private ICollection comboBoxValues = []; + private ICollection comboBoxValues1 = []; + private ICollection comboBoxValues2 = []; + private ICollection comboBoxValues3 = []; protected override void OnInitialized() { diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs index 937a8dd25b..37a6c71265 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs @@ -46,83 +46,36 @@ public partial class _BitDropdownItemDemo };"; private readonly string example2RazorCode = @" - - - - + TItem=""BitDropdownItem"" + TValue=""string"" /> - - - - - + TItem=""BitDropdownItem"" + TValue=""string"" /> - + TItem=""BitDropdownItem"" + TValue=""string"" /> -"; + TItem=""BitDropdownItem"" + TValue=""string"" + IsEnabled=""false"" />"; private readonly string example2CsharpCode = @" private List> GetBasicItems() => new() { @@ -136,79 +89,20 @@ public partial class _BitDropdownItemDemo new() { Text = ""Broccoli"", Value = ""v-bro"" }, new() { Text = ""Carrot"", Value = ""v-car"" }, new() { Text = ""Lettuce"", Value = ""v-let"" } -}; - -private List> GetStyleClassItems() => new() -{ - new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" }, - new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" }, - new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" }, - new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" }, - new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" }, - new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" }, - new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" }, - new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" }, - new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" } };"; private readonly string example3RazorCode = @" - -
Selected Value: @controlledValue
- - -
Selected Values: @string.Join("","", controlledValues)
- - - -"" TValue=""string"" - OnValuesChange=""(BitDropdownItem[] items) => changedItem = items.SingleOrDefault()"" /> -
Changed Value: @changedItem?.Value
- -"" TValue=""string"" - OnValuesChange=""(BitDropdownItem[] items) => changedItems = items"" /> -
Changed Values: @string.Join("","", changedItems.Select(i => i.Value))
- - - - item) => selectedItem1 = item"" /> -
Selected Value: @selectedItem1?.Value
+ Placeholder=""Select an item"" /> - item) => selectedItem2 = item"" /> -
Selected Value: @selectedItem2?.Value
"; + IsMultiSelect=""true"" />"; private readonly string example3CsharpCode = @" -private string controlledValue = ""f-app""; -private ICollection controlledValues = new[] { ""f-app"", ""f-ban"" }; - -private BitDropdownItem? changedItem; -private BitDropdownItem[] changedItems = Array.Empty>(); - -private BitDropdownItem? selectedItem1; -private BitDropdownItem? selectedItem2; - private List> GetBasicItems() => new() { new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, @@ -224,188 +118,17 @@ public partial class _BitDropdownItemDemo };"; private readonly string example4RazorCode = @" - - - - -
- -
@item.Text
-
- - - - - -
- -
@dropdown.SelectedItem?.Text
-
- - -
- -
@item.Text
-
- - - - - -
- -
@dropdown.Placeholder
-
- - - - - -
-
Custom label
- -
- - - - - - - -
Best in the world
- - - New Item - -"; - private readonly string example4CsharpCode = @" -public class DropdownItemData -{ - public string? IconName { get; set; } -} - -private List> GetDataItems() => new() -{ - new() { ItemType = BitDropdownItemType.Header, Text = ""Items"", Data = new DropdownItemData { IconName = ""BulletedList2"" } }, - new() { Text = ""Item a"", Value = ""A"", Data = new DropdownItemData { IconName = ""Memo"" } }, - new() { Text = ""Item b"", Value = ""B"", Data = new DropdownItemData { IconName = ""Print"" } }, - new() { Text = ""Item c"", Value = ""C"", Data = new DropdownItemData { IconName = ""ShoppingCart"" } }, - new() { ItemType = BitDropdownItemType.Divider }, - new() { ItemType = BitDropdownItemType.Header, Text = ""More Items"", Data = new DropdownItemData { IconName = ""BulletedTreeList"" } }, - new() { Text = ""Item d"", Value = ""D"", Data = new DropdownItemData { IconName = ""Train"" } }, - new() { Text = ""Item e"", Value = ""E"", Data = new DropdownItemData { IconName = ""Repair"" } }, - new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } } -};"; - - private readonly string example5RazorCode = @" -"; - private readonly string example5CsharpCode = @" -private List> GetBasicItems() => new() -{ - new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, - new() { Text = ""Apple"", Value = ""f-app"" }, - new() { Text = ""Banana"", Value = ""f-ban"" }, - new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, - new() { Text = ""Grape"", Value = ""f-gra"" }, - new() { ItemType = BitDropdownItemType.Divider }, - new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"" }, - new() { Text = ""Carrot"", Value = ""v-car"" }, - new() { Text = ""Lettuce"", Value = ""v-let"" } -};"; - - private readonly string example6RazorCode = @" - - - - - - - items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"" - SearchBoxPlaceholder=""Search item"" /> + Placeholder=""Select an item"" /> - items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"" - SearchBoxPlaceholder=""Search items"" />"; - private readonly string example6CsharpCode = @" + IsMultiSelect=""true"" />"; + private readonly string example4CsharpCode = @" private List> GetBasicItems() => new() { new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, @@ -420,103 +143,13 @@ public class DropdownItemData new() { Text = ""Lettuce"", Value = ""v-let"" } };"; - private readonly string example7RazorCode = @" - -
Value: @comboBoxValueSample1
- - -
Value: @comboBoxValueSample2
- - item) => item.Text"" - OnDynamicAdd=""(BitDropdownItem item) => HandleOnDynamicAdd(item)"" /> -
Value: @comboBoxValueSample3
- - item) => item.Text"" - OnDynamicAdd=""(BitDropdownItem item) => HandleOnDynamicAdd(item)"" /> -
Value: @comboBoxValueSample4
- - item) => item.Text"" - OnDynamicAdd=""(BitDropdownItem item) => HandleOnDynamicAdd(item)"" /> -
Values: @string.Join(',', comboBoxValues)
"; - private readonly string example7CsharpCode = @" -private string comboBoxValueSample1 = default!; -private string comboBoxValueSample2 = default!; -private string comboBoxValueSample3 = default!; -private string comboBoxValueSample4 = default!; -private ICollection comboBoxValues = []; - -private List> comboBoxItems = new() -{ - new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, - new() { Text = ""Apple"", Value = ""f-app"" }, - new() { Text = ""Banana"", Value = ""f-ban"" }, - new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, - new() { Text = ""Grape"", Value = ""f-gra"" }, - new() { ItemType = BitDropdownItemType.Divider }, - new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"" }, - new() { Text = ""Carrot"", Value = ""v-car"" }, - new() { Text = ""Lettuce"", Value = ""v-let"" } -};"; - - private readonly string example8RazorCode = @" -"" - TValue=""string"" /> - -"" - TValue=""string"" /> - -"" - TValue=""string"" /> - -"" - TValue=""string"" - IsEnabled=""false"" />"; - private readonly string example8CsharpCode = @" + IsResponsive=true />"; + private readonly string example5CsharpCode = @" private List> GetBasicItems() => new() { new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, @@ -531,35 +164,7 @@ Combo Chips Dynamic new() { Text = ""Lettuce"", Value = ""v-let"" } };"; - private readonly string example9RazorCode = @" - - -"; - private readonly string example9CsharpCode = @" -private List> GetRtlItems() => new() -{ - new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" }, - new() { Text = ""سیب"", Value = ""f-app"" }, - new() { Text = ""موز"", Value = ""f-ban"" }, - new() { Text = ""پرتقال"", Value = ""f-ora"", IsEnabled = false }, - new() { Text = ""انگور"", Value = ""f-gra"" }, - new() { ItemType = BitDropdownItemType.Divider }, - new() { ItemType = BitDropdownItemType.Header, Text = ""سیزیجات"" }, - new() { Text = ""کلم بروكلی"", Value = ""v-bro"" }, - new() { Text = ""هویج"", Value = ""v-car"" }, - new() { Text = ""کاهو"", Value = ""v-let"" } -};"; - - private readonly string example10RazorCode = @" + private readonly string example6RazorCode = @" "; - private readonly string example10CsharpCode = @" + private readonly string example6CsharpCode = @" private ICollection>? dropDirectionItems; protected override void OnInitialized() @@ -581,7 +186,7 @@ protected override void OnInitialized() .ToArray(); }"; - private readonly string example11RazorCode = @" + private readonly string example7RazorCode = @"
Values: @string.Join(',', clearValues)
"; - private readonly string example11CsharpCode = @" + private readonly string example7CsharpCode = @" private string? clearValue = ""f-app""; private ICollection clearValues = new[] { ""f-app"", ""f-ban"" }; @@ -615,7 +220,58 @@ protected override void OnInitialized() new() { Text = ""Lettuce"", Value = ""v-let"" } };"; - private readonly string example12RazorCode = @" + private readonly string example8RazorCode = @" + + + + + + + items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"" + SearchBoxPlaceholder=""Search item"" /> + + items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()"" + SearchBoxPlaceholder=""Search items"" />"; + private readonly string example8CsharpCode = @" +private List> GetBasicItems() => new() +{ + new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { ItemType = BitDropdownItemType.Divider }, + new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +};"; + + private readonly string example9RazorCode = @" @using System.ComponentModel.DataAnnotations; + + + +
+ +
@item.Text
+
+ + + + + +
+ +
@dropdown.SelectedItem?.Text
+
+ + +
+ +
@item.Text
+
+ + + + + +
+ +
@dropdown.Placeholder
+
+ + + + + +
+
Custom label
+ +
+ + + + + + + +
Best in the world
+ + + New Item + +"; + private readonly string example10CsharpCode = @" +public class DropdownItemData +{ + public string? IconName { get; set; } +} + +private List> GetDataItems() => new() +{ + new() { ItemType = BitDropdownItemType.Header, Text = ""Items"", Data = new DropdownItemData { IconName = ""BulletedList2"" } }, + new() { Text = ""Item a"", Value = ""A"", Data = new DropdownItemData { IconName = ""Memo"" } }, + new() { Text = ""Item b"", Value = ""B"", Data = new DropdownItemData { IconName = ""Print"" } }, + new() { Text = ""Item c"", Value = ""C"", Data = new DropdownItemData { IconName = ""ShoppingCart"" } }, + new() { ItemType = BitDropdownItemType.Divider }, + new() { ItemType = BitDropdownItemType.Header, Text = ""More Items"", Data = new DropdownItemData { IconName = ""BulletedTreeList"" } }, + new() { Text = ""Item d"", Value = ""D"", Data = new DropdownItemData { IconName = ""Train"" } }, + new() { Text = ""Item e"", Value = ""E"", Data = new DropdownItemData { IconName = ""Repair"" } }, + new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } } +};"; + + private readonly string example11RazorCode = @" + +
Selected Value: @controlledValue
+ + +
Selected Values: @string.Join("","", controlledValues)
+ + + +"" TValue=""string"" + OnValuesChange=""(BitDropdownItem[] items) => changedItem = items.SingleOrDefault()"" /> +
Changed Value: @changedItem?.Value
+ +"" TValue=""string"" + OnValuesChange=""(BitDropdownItem[] items) => changedItems = items"" /> +
Changed Values: @string.Join("","", changedItems.Select(i => i.Value))
+ - Submit -"; - private readonly string example12CsharpCode = @" -public class FormValidationDropdownModel -{ - [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")] - [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")] - public ICollection Products { get; set; } = new List(); - [Required] - public string Category { get; set; } -} + item) => selectedItem1 = item"" /> +
Selected Value: @selectedItem1?.Value
-private FormValidationDropdownModel validationModel = new(); + item) => selectedItem2 = item"" /> +
Selected Value: @selectedItem2?.Value
"; + private readonly string example11CsharpCode = @" +private string controlledValue = ""f-app""; +private ICollection controlledValues = new[] { ""f-app"", ""f-ban"" }; -private async Task HandleValidSubmit() { } +private BitDropdownItem? changedItem; +private BitDropdownItem[] changedItems = Array.Empty>(); -private void HandleInvalidSubmit() { } +private BitDropdownItem? selectedItem1; +private BitDropdownItem? selectedItem2; private List> GetBasicItems() => new() { @@ -674,7 +526,7 @@ private void HandleInvalidSubmit() { } new() { Text = ""Lettuce"", Value = ""v-let"" } };"; - private readonly string example13RazorCode = @" + private readonly string example12RazorCode = @" "" TValue=""string"" />"; - private readonly string example13CsharpCode = @" + private readonly string example12CsharpCode = @" private ICollection>? virtualizeItems1; private ICollection>? virtualizeItems2; @@ -757,19 +609,57 @@ private async ValueTask>> } }"; + private readonly string example13RazorCode = @" + +
Value: @comboBoxValueSample1
+ + +
Values: @string.Join(',', comboBoxValues1)
"; + private readonly string example13CsharpCode = @" +private string comboBoxValueSample1 = default!; +private ICollection comboBoxValues1 = []; + +private List> comboBoxItems = new() +{ + new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { ItemType = BitDropdownItemType.Divider }, + new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +};"; + private readonly string example14RazorCode = @" - + +
Value: @comboBoxValueSample2
-"; + +
Values: @string.Join(',', comboBoxValues2)
"; private readonly string example14CsharpCode = @" -private List> GetBasicItems() => new() +private string comboBoxValueSample2 = default!; +private ICollection comboBoxValues2 = []; + +private List> comboBoxItems = new() { new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, new() { Text = ""Apple"", Value = ""f-app"" }, @@ -784,17 +674,133 @@ private async ValueTask>> };"; private readonly string example15RazorCode = @" - item) => item.Text"" + OnDynamicAdd=""(BitDropdownItem item) => HandleOnDynamicAdd(item)"" /> +
Value: @comboBoxValueSample3
+ + item) => item.Text"" + OnDynamicAdd=""(BitDropdownItem item) => HandleOnDynamicAdd(item)"" /> +
Value: @comboBoxValueSample4
+ + item) => item.Text"" + OnDynamicAdd=""(BitDropdownItem item) => HandleOnDynamicAdd(item)"" /> +
Values: @string.Join(',', comboBoxValues3)
"; + private readonly string example15CsharpCode = @" +private string comboBoxValueSample3 = default!; +private string comboBoxValueSample4 = default!; +private ICollection comboBoxValues3 = []; + +private List> comboBoxItems = new() +{ + new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { ItemType = BitDropdownItemType.Divider }, + new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +};"; + + private readonly string example16RazorCode = @" + + + + + + + + + -"; - private readonly string example15CsharpCode = @" + Placeholder=""Select an item"" + Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"", + Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"", + ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"", + ItemButton = ""color: lightskyblue"", + Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })"" /> + +"; + private readonly string example16CsharpCode = @" private List> GetBasicItems() => new() { new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, @@ -807,5 +813,47 @@ private async ValueTask>> new() { Text = ""Broccoli"", Value = ""v-bro"" }, new() { Text = ""Carrot"", Value = ""v-car"" }, new() { Text = ""Lettuce"", Value = ""v-let"" } +}; + +private List> GetStyleClassItems() => new() +{ + new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" }, + new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" }, + new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" }, + new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" }, + new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" }, + new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" }, + new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" }, + new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" }, + new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" } +};"; + + private readonly string example17RazorCode = @" + + +"; + private readonly string example17CsharpCode = @" +private List> GetRtlItems() => new() +{ + new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" }, + new() { Text = ""سیب"", Value = ""f-app"" }, + new() { Text = ""موز"", Value = ""f-ban"" }, + new() { Text = ""پرتقال"", Value = ""f-ora"", IsEnabled = false }, + new() { Text = ""انگور"", Value = ""f-gra"" }, + new() { ItemType = BitDropdownItemType.Divider }, + new() { ItemType = BitDropdownItemType.Header, Text = ""سیزیجات"" }, + new() { Text = ""کلم بروكلی"", Value = ""v-bro"" }, + new() { Text = ""هویج"", Value = ""v-car"" }, + new() { Text = ""کاهو"", Value = ""v-let"" } };"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor index 059db2cbe5..3c5aff939b 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor @@ -60,61 +60,104 @@ - + -
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
-

+
Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.
+
-
Component's Style & Class:

- + @foreach (var item in basicItems) { } -
- +

+ @foreach (var item in basicItems) { } -



-
Item's Style & Class:

- - @foreach (var item in styleClassItems) +

+ + @foreach (var item in basicItems) { - + } -



-
Styles & Classes:

-
+ + TItem="BitDropdownOption" + TValue="string" + IsEnabled="false"> @foreach (var item in basicItems) { } -
- + + + + + +
Enables fit-content width for the dropdown that sets the width of the component based on its content size.
+

+ + @foreach (var item in basicItems) + { + + } + +

+ + @foreach (var item in basicItems) + { + + } + + + + + + +
The dropdown can be rendered without any border.
+

+
+ + TItem="BitDropdownOption" TValue="string"> + @foreach (var item in basicItems) + { + + } + +

+ @foreach (var item in basicItems) { @@ -124,15 +167,14 @@ - + -
Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.
-

+
When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.
+
-
Two-way binding:

- @@ -141,17 +183,66 @@ - - - + + + + +
+ + + + + +
Explores different drop directions for the BitDropdown component, including automatic and explicit directions.
+
+
+ + @foreach (var item in dropDirectionItems) + { + + } -
-
Selected Value: @controlledValue


- + @foreach (var item in dropDirectionItems) + { + + } + +
+ + + + + +
Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.
+
+
+ + @foreach (var item in basicItems) + { + + } +
+ +
+
Value: @clearValue
+


+ @foreach (var item in basicItems) { @@ -159,66 +250,121 @@ }
-
Selected Values: @string.Join(",", controlledValues)
-



-
OnChange:

- Values: @string.Join(',', clearValues)
+
+ + + + + +
Examples of dropdowns with search functionality, including default and custom search functions.
+

+
+ + ShowSearchBox="true" + AutoFocusSearchBox="true" + SearchBoxPlaceholder="Search item" + TItem="BitDropdownOption" TValue="string"> @foreach (var item in basicItems) { } -
-
Changed Value: @changedItem?.Value


+ IsMultiSelect="true" + ShowSearchBox="true" + SearchBoxPlaceholder="Search items" + TItem="BitDropdownOption" TValue="string"> @foreach (var item in basicItems) { } -
-
Changed Values: @string.Join(",", changedItems.Select(i => i.Value))




-
OnSelectItem:

- Custom search function:

+ + ShowSearchBox="true" + AutoFocusSearchBox="true" + SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()" + SearchBoxPlaceholder="Search item" + TItem="BitDropdownOption" TValue="string"> @foreach (var item in basicItems) { } -
-
Selected Value: @selectedItem1?.Value


+ IsMultiSelect="true" + ShowSearchBox="true" + SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()" + SearchBoxPlaceholder="Search items" + TItem="BitDropdownOption" TValue="string"> @foreach (var item in basicItems) { } -
-
Selected Value: @selectedItem2?.Value
 - + + +
Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.
+
+
+ @if (string.IsNullOrEmpty(successMessage)) + { + + + + + @foreach (var item in basicItems) + { + + } + + + + +
+ + + @foreach (var item in basicItems) + { + + } + + + + +
+ + Submit + + } + else + { + @successMessage + } +
+ + + +
Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.


@@ -327,14 +473,15 @@ - + -
When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.
-
+
Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.
+

- Two-way binding:

+ @@ -343,81 +490,125 @@ - - - + + + - - - - - - -
Examples of dropdowns with search functionality, including default and custom search functions.
-

-
- +
Selected Value: @controlledValue
+

+ @foreach (var item in basicItems) { } +
+
Selected Values: @string.Join(",", controlledValues)
+



+
OnChange:

+ + @foreach (var item in basicItems) + { + + } + +
+
Changed Value: @changedItem?.Value


+ Placeholder="Select items" + TItem="BitDropdownOption" TValue="string" + OnValuesChange="(BitDropdownOption[] items) => changedItems = items"> @foreach (var item in basicItems) { } +
+
Changed Values: @string.Join(",", changedItems.Select(i => i.Value))




-
Custom search function:

- OnSelectItem:

+ + TItem="BitDropdownOption" TValue="string" + OnSelectItem="(BitDropdownOption item) => selectedItem1 = item"> @foreach (var item in basicItems) { } +
+
Selected Value: @selectedItem1?.Value


+ @foreach (var item in basicItems) + { + + } + +
+
Selected Value: @selectedItem2?.Value
+ + + + + + +
When the Combo parameter is true, you can type in BitDropdown input and search between items.
+
+
+ + @foreach (var item in comboBoxItems) + { + + } + +
+
Value: @comboBoxValueSample1
+

+ - @foreach (var item in basicItems) + @foreach (var item in comboBoxItems) { } +
+
Values: @string.Join(',', comboBoxValues1)
 - + -
When the Combo parameter is true, you can type in BitDropdown input and search between items.
+
When the Chips parameter is true, shows the selected items like chips in the ComboBox.

- @foreach (var item in comboBoxItems) @@ -426,13 +617,11 @@ }
-
Value: @comboBoxValueSample1
-



-
When the Chips parameter is true, shows the selected items like chips in the ComboBox.
-
- Value: @comboBoxValueSample2
+

+ @foreach (var item in comboBoxItems) @@ -441,10 +630,16 @@ }
-
Value: @comboBoxValueSample2
-



-
When the Dynamic parameter is true, you can add a new item in the ComboBox.
-
+
Values: @string.Join(',', comboBoxValues2)
+ + + + + + +
When the Dynamic parameter is true, you can add a new item in the ComboBox.
+
+

Value: @comboBoxValueSample3
-



-
When the Combo, Chips and Dynamic parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).
-
+
+



+
When the Combo, Chips and Dynamic parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).
+
+
Value: @comboBoxValueSample4


-
-
Values: @string.Join(',', comboBoxValues)
+
Values: @string.Join(',', comboBoxValues3)
 - + -
Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.
-
+
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
+

- +
Component's Style & Class:

+ @foreach (var item in basicItems) { } -

- +
+ @foreach (var item in basicItems) { } -

-


+
Item's Style & Class:

+ + @foreach (var item in styleClassItems) + { + + } + +



+
Styles & Classes:

+ + TItem="BitDropdownOption" TValue="string" + Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;", + Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;", + ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;", + ItemButton = "color: lightskyblue", + Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })"> @foreach (var item in basicItems) { } -

- + + TItem="BitDropdownOption" TValue="string" + Classes="@(new() { Callout = "custom-callout", + Container = "custom-container", + ItemButton = "custom-item-button", + ScrollContainer = "custom-scroll-container" })"> @foreach (var item in basicItems) { @@ -553,7 +759,7 @@ - +
Use BitDropdown in right-to-left (RTL).

@@ -580,170 +786,4 @@
- - - - -
Explores different drop directions for the BitDropdown component, including automatic and explicit directions.
-
-
- - @foreach (var item in dropDirectionItems) - { - - } - -

- - @foreach (var item in dropDirectionItems) - { - - } - -
- - - - - -
Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.
-
-
- - @foreach (var item in basicItems) - { - - } -
- -
-
Value: @clearValue
-


- - @foreach (var item in basicItems) - { - - } - -
-
Values: @string.Join(',', clearValues)
-
- - - - - -
Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.
-
-
- @if (string.IsNullOrEmpty(successMessage)) - { - - - - - @foreach (var item in basicItems) - { - - } - - - - -
- - - @foreach (var item in basicItems) - { - - } - - - - -
- - Submit - - } - else - { - @successMessage - } -
- - - - - -
Enables fit-content width for the dropdown that sets the width of the component based on its content size.
-

- - @foreach (var item in basicItems) - { - - } - -

- - @foreach (var item in basicItems) - { - - } - - - - - - -
The dropdown can be rendered without any border.
-

-
- - @foreach (var item in basicItems) - { - - } - -

- - @foreach (var item in basicItems) - { - - } - -
- \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs index 2c5cf4fea5..3d21c3107f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs @@ -88,7 +88,9 @@ public partial class _BitDropdownOptionDemo private string comboBoxValueSample2 = default!; private string comboBoxValueSample3 = default!; private string comboBoxValueSample4 = default!; - private ICollection comboBoxValues = []; + private ICollection comboBoxValues1 = []; + private ICollection comboBoxValues2 = []; + private ICollection comboBoxValues3 = []; protected override void OnInitialized() diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs index 683618e601..5855fd0f1d 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs @@ -72,98 +72,47 @@ public partial class _BitDropdownOptionDemo ];"; private readonly string example2RazorCode = @" - - - -"" TValue=""string"" - Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;""> +"" + TValue=""string""> @foreach (var item in basicItems) { } -"" TValue=""string"" - Class=""custom-class""> +"" + TValue=""string""> @foreach (var item in basicItems) { } - -"" TValue=""string""> - @foreach (var item in styleClassItems) - { - - } - - - -"" TValue=""string"" - Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"", - Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"", - ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"", - ItemButton = ""color: lightskyblue"", - Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })""> + TItem=""BitDropdownOption"" + TValue=""string""> @foreach (var item in basicItems) { } -"" TValue=""string"" - Classes=""@(new() { Callout = ""custom-callout"", - Container = ""custom-container"", - ItemButton = ""custom-item-button"", - ScrollContainer = ""custom-scroll-container"" })""> + TItem=""BitDropdownOption"" + TValue=""string"" + IsEnabled=""false""> @foreach (var item in basicItems) { @@ -182,113 +131,62 @@ public partial class _BitDropdownOptionDemo new() { Text = ""Broccoli"", Value = ""v-bro"" }, new() { Text = ""Carrot"", Value = ""v-car"" }, new() { Text = ""Lettuce"", Value = ""v-let"" } -]; - -private readonly List> styleClassItems = -[ - new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" }, - new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" }, - new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" }, - new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" }, - new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" }, - new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" }, - new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" }, - new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" }, - new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" } ];"; private readonly string example3RazorCode = @" -"" TValue=""string""> - - - - - - - - - - - -
Selected Value: @controlledValue
- -"" TValue=""string""> @foreach (var item in basicItems) { } -
Selected Values: @string.Join("","", controlledValues)
- - - -"" TValue=""string"" - OnValuesChange=""(BitDropdownOption[] items) => changedItem = items.SingleOrDefault()""> - @foreach (var item in basicItems) - { - - } - -
Changed Value: @changedItem?.Value
-"" TValue=""string"" - OnValuesChange=""(BitDropdownOption[] items) => changedItems = items""> + IsMultiSelect=""true"" + TItem=""BitDropdownOption"" TValue=""string""> @foreach (var item in basicItems) { } - -
Changed Values: @string.Join("","", changedItems.Select(i => i.Value))
- - +"; + private readonly string example3CsharpCode = @" +private readonly List> basicItems = +[ + new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { ItemType = BitDropdownItemType.Divider }, + new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +];"; -"" TValue=""string"" - OnSelectItem=""(BitDropdownOption item) => selectedItem1 = item""> + TItem=""BitDropdownOption"" TValue=""string""> @foreach (var item in basicItems) { } -
Selected Value: @selectedItem1?.Value
-"" TValue=""string"" - OnSelectItem=""(BitDropdownOption item) => selectedItem2 = item""> + IsMultiSelect=""true"" + TItem=""BitDropdownOption"" TValue=""string""> @foreach (var item in basicItems) { } - -
Selected Value: @selectedItem2?.Value
"; - private readonly string example3CsharpCode = @" -private string controlledValue = ""f-app""; -private ICollection controlledValues = new[] { ""f-app"", ""f-ban"" }; - -private BitDropdownOption? changedItem; -private BitDropdownOption[] changedItems = Array.Empty>(); - -private BitDropdownOption? selectedItem1; -private BitDropdownOption? selectedItem2; - +"; + private readonly string example4CsharpCode = @" private readonly List> basicItems = [ new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, @@ -303,29 +201,256 @@ public partial class _BitDropdownOptionDemo new() { Text = ""Lettuce"", Value = ""v-let"" } ];"; - private readonly string example4RazorCode = @" - + + + + + "" TValue=""string""> + @foreach (var item in basicItems) + { + + } + + validationModel.Category)"" /> + + "" TValue=""string""> + @foreach (var item in basicItems) + { + + } + + validationModel.Products)"" /> + + Submit +"; + private readonly string example9CsharpCode = @" +public class FormValidationDropdownModel +{ + [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")] + [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")] + public ICollection Products { get; set; } = new List(); + + [Required] + public string Category { get; set; } +} + +private FormValidationDropdownModel validationModel = new(); + +private async Task HandleValidSubmit() { } + +private void HandleInvalidSubmit() { } + +private readonly List> basicItems = +[ + new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, + new() { Text = ""Apple"", Value = ""f-app"" }, + new() { Text = ""Banana"", Value = ""f-ban"" }, + new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, + new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { ItemType = BitDropdownItemType.Divider }, + new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"" }, + new() { Text = ""Carrot"", Value = ""v-car"" }, + new() { Text = ""Lettuce"", Value = ""v-let"" } +];"; + + private readonly string example10RazorCode = @" + -protected override void OnInitialized() -{ - dropDirectionItems = Enumerable.Range(1, 15) - .Select(c => new BitDropdownItem { Value = c.ToString(), Text = $""Category {c}"" }) - .ToArray(); -}"; - private readonly string example11RazorCode = @" -"" TValue=""string""> +"" TValue=""string"" + Style=""margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;""> @foreach (var item in basicItems) { } -
Value: @clearValue
- -"" TValue=""string""> +"" TValue=""string"" + Class=""custom-class""> @foreach (var item in basicItems) { } -
Values: @string.Join(',', clearValues)
"; - private readonly string example11CsharpCode = @" -private string? clearValue = ""f-app""; -private ICollection clearValues = new[] { ""f-app"", ""f-ban"" }; -private readonly List> basicItems = -[ - new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, - new() { Text = ""Apple"", Value = ""f-app"" }, - new() { Text = ""Banana"", Value = ""f-ban"" }, - new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, - new() { Text = ""Grape"", Value = ""f-gra"" }, - new() { ItemType = BitDropdownItemType.Divider }, - new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"" }, - new() { Text = ""Carrot"", Value = ""v-car"" }, - new() { Text = ""Lettuce"", Value = ""v-let"" } -];"; - - private readonly string example12RazorCode = @" -@using System.ComponentModel.DataAnnotations; - - - - - - "" TValue=""string""> - @foreach (var item in basicItems) - { - - } - - validationModel.Category)"" /> - - "" TValue=""string""> - @foreach (var item in basicItems) - { - - } - - validationModel.Products)"" /> - - Submit -"; - private readonly string example12CsharpCode = @" -public class FormValidationDropdownModel -{ - [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")] - [MinLength(1, ErrorMessage = ""The property {0} doesn't have at least {1} elements"")] - public ICollection Products { get; set; } = new List(); - - [Required] - public string Category { get; set; } -} - -private FormValidationDropdownModel validationModel = new(); - -private async Task HandleValidSubmit() { } + -private void HandleInvalidSubmit() { } -private readonly List> basicItems = -[ - new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, - new() { Text = ""Apple"", Value = ""f-app"" }, - new() { Text = ""Banana"", Value = ""f-ban"" }, - new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, - new() { Text = ""Grape"", Value = ""f-gra"" }, - new() { ItemType = BitDropdownItemType.Divider }, - new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"" }, - new() { Text = ""Carrot"", Value = ""v-car"" }, - new() { Text = ""Lettuce"", Value = ""v-let"" } -];"; - - private readonly string example14RazorCode = @" -"" TValue=""string""> + TItem=""BitDropdownOption"" TValue=""string"" + Styles=""@(new() { Label = ""text-shadow: dodgerblue 0 0 0.5rem;"", + Container = ""box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;"", + ItemHeader = ""color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;"", + ItemButton = ""color: lightskyblue"", + Callout = ""border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;"" })""> @foreach (var item in basicItems) { } -"" TValue=""string""> +"" TValue=""string"" + Classes=""@(new() { Callout = ""custom-callout"", + Container = ""custom-container"", + ItemButton = ""custom-item-button"", + ScrollContainer = ""custom-scroll-container"" })""> @foreach (var item in basicItems) { } "; - private readonly string example14CsharpCode = @" + private readonly string example15CsharpCode = @" private readonly List> basicItems = [ new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, @@ -905,39 +950,55 @@ private void HandleInvalidSubmit() { } new() { Text = ""Broccoli"", Value = ""v-bro"" }, new() { Text = ""Carrot"", Value = ""v-car"" }, new() { Text = ""Lettuce"", Value = ""v-let"" } +]; + +private readonly List> styleClassItems = +[ + new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"", Style = ""text-align: center;"" }, + new() { Text = ""Apple"", Value = ""f-app"", Class = ""custom-fruit"" }, + new() { Text = ""Banana"", Value = ""f-ban"", Class = ""custom-fruit"" }, + new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false, Class = ""custom-fruit"" }, + new() { Text = ""Grape"", Value = ""f-gra"", Class = ""custom-fruit"" }, + new() { ItemType = BitDropdownItemType.Divider, Style = ""padding: 0 0.25rem;"" }, + new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"", Style = ""text-align: center;"" }, + new() { Text = ""Broccoli"", Value = ""v-bro"", Class = ""custom-veg"" }, + new() { Text = ""Carrot"", Value = ""v-car"", Class = ""custom-veg"" }, + new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" } ];"; - private readonly string example15RazorCode = @" -"" TValue=""string""> - @foreach (var item in basicItems) + @foreach (var item in rtlItems) { } -"" TValue=""string""> - @foreach (var item in basicItems) + @foreach (var item in rtlItems) { } "; - private readonly string example15CsharpCode = @" -private readonly List> basicItems = + private readonly string example16CsharpCode = @" +private readonly List> rtlItems = [ - new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" }, - new() { Text = ""Apple"", Value = ""f-app"" }, - new() { Text = ""Banana"", Value = ""f-ban"" }, - new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false }, - new() { Text = ""Grape"", Value = ""f-gra"" }, + new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" }, + new() { Text = ""سیب"", Value = ""f-app"" }, + new() { Text = ""موز"", Value = ""f-ban"" }, + new() { Text = ""پرتقال"", Value = ""f-ora"", IsEnabled = false }, + new() { Text = ""انگور"", Value = ""f-gra"" }, new() { ItemType = BitDropdownItemType.Divider }, - new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" }, - new() { Text = ""Broccoli"", Value = ""v-bro"" }, - new() { Text = ""Carrot"", Value = ""v-car"" }, - new() { Text = ""Lettuce"", Value = ""v-let"" } + new() { ItemType = BitDropdownItemType.Header, Text = ""سیزیجات"" }, + new() { Text = ""کلم بروكلی"", Value = ""v-bro"" }, + new() { Text = ""هویج"", Value = ""v-car"" }, + new() { Text = ""کاهو"", Value = ""v-let"" } ];"; }