From 03829a54a9b1a217f49a4fa0745db46b4269b6c9 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Fri, 27 Dec 2024 16:53:43 +0330 Subject: [PATCH] feat(blazorui): add Classes/Styles parameters to BitButtonGroup #9514 (#9546) --- .../BitButtonGroup/BitButtonGroup.razor | 6 +- .../BitButtonGroup/BitButtonGroup.razor.cs | 50 ++ .../BitButtonGroupClassStyles.cs | 29 + .../ButtonGroup/BitButtonGroupDemo.razor.cs | 61 ++ .../ButtonGroup/BitButtonGroupDemo.razor.scss | 6 + .../_BitButtonGroupCustomDemo.razor | 315 ++++++----- ..._BitButtonGroupCustomDemo.razor.samples.cs | 290 +++++----- .../ButtonGroup/_BitButtonGroupItemDemo.razor | 305 +++++----- .../_BitButtonGroupItemDemo.razor.samples.cs | 238 ++++---- .../_BitButtonGroupOptionDemo.razor | 527 +++++++++--------- ..._BitButtonGroupOptionDemo.razor.samples.cs | 332 +++++------ 11 files changed, 1196 insertions(+), 963 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupClassStyles.cs diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor index 34a0df0ad6..790fc14f3f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor @@ -22,7 +22,7 @@ disabled="@(isEnabled is false)" aria-disabled="@(isEnabled is false)" title="@GetItemTitle(item)" - style="@GetStyle(item)" + style="@GetItemStyle(item)" class="@GetItemClass(item)"> @if (template is not null) { @@ -37,13 +37,13 @@ var iconName = GetItemIconName(item); @if (iconName.HasValue()) { - + } var text = GetItemText(item); if (text.HasValue()) { - @text + @text } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs index 73b9ff5894..f51e18e0c9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs @@ -21,6 +21,11 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas /// [Parameter] public RenderFragment? ChildContent { get; set; } + /// + /// Custom CSS classes for different parts of the ButtonGroup. + /// + [Parameter] public BitButtonGroupClassStyles? Classes { get; set; } + /// /// Defines the general colors available in the bit BlazorUI. /// @@ -63,6 +68,11 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas [Parameter, ResetClassBuilder] public BitSize? Size { get; set; } + /// + /// Custom CSS styles for different parts of the ButtonGroup. + /// + [Parameter] public BitButtonGroupClassStyles? Styles { get; set; } + /// /// Display ButtonGroup with toggle mode enabled for each button. /// @@ -103,6 +113,8 @@ internal void UnregisterOption(BitButtonGroupOption option) protected override void RegisterCssClasses() { + ClassBuilder.Register(() => Classes?.Root); + ClassBuilder.Register(() => Variant switch { BitVariant.Fill => "bit-btg-fil", @@ -144,6 +156,11 @@ protected override void RegisterCssClasses() ClassBuilder.Register(() => Vertical ? "bit-btg-vrt" : string.Empty); } + protected override void RegisterCssStyles() + { + StyleBuilder.Register(() => Styles?.Root); + } + protected override void OnParametersSet() { base.OnParametersSet(); @@ -211,6 +228,11 @@ private async Task HandleOnItemClick(TItem item) if (_toggleItem == item) { classes.Add("bit-btg-chk"); + + if (Classes?.ToggledButton.HasValue() ?? false) + { + classes.Add(Classes.ToggledButton!); + } } var classItem = GetClass(item); @@ -219,9 +241,37 @@ private async Task HandleOnItemClick(TItem item) classes.Add(classItem!); } + if (Classes?.Button.HasValue() ?? false) + { + classes.Add(Classes.Button!); + } + return string.Join(' ', classes); } + private string? GetItemStyle(TItem? item) + { + List styles = new(); + + var style = GetStyle(item); + if (style.HasValue()) + { + styles.Add(style!.Trim(';')); + } + + if (Styles?.Button.HasValue() ?? false) + { + styles.Add(Styles.Button!.Trim(';')); + } + + if (_toggleItem == item && (Styles?.ToggledButton.HasValue() ?? false)) + { + styles.Add(Styles.ToggledButton!); + } + + return string.Join(';', styles); + } + private string? GetItemText(TItem? item) { if (IconOnly) return null; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupClassStyles.cs new file mode 100644 index 0000000000..66dc6fb58e --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupClassStyles.cs @@ -0,0 +1,29 @@ +namespace Bit.BlazorUI; + +public class BitButtonGroupClassStyles +{ + /// + /// Custom CSS classes/styles for the root element of the BitButtonGroup. + /// + public string? Root { get; set; } + + /// + /// Custom CSS classes/styles for the internal button of the BitButtonGroup. + /// + public string? Button { get; set; } + + /// + /// Custom CSS classes/styles for the icon of the BitButtonGroup. + /// + public string? Icon { get; set; } + + /// + /// Custom CSS classes/styles for the text of the BitButtonGroup. + /// + public string? Text { get; set; } + + /// + /// Custom CSS classes/styles for the button when in toggle mode of the BitButtonGroup. + /// + public string? ToggledButton { get; set; } +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs index c4b9b4d2d7..2de44d898a 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs @@ -19,6 +19,15 @@ public partial class BitButtonGroupDemo Description = "Determines that only the icon should be rendered.", }, new() + { + Name = "Classes", + Type = "BitButtonGroupClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the ButtonGroup.", + LinkType = LinkType.Link, + Href = "#class-styles", + }, + new() { Name = "Color", Type = "BitColor?", @@ -82,6 +91,15 @@ public partial class BitButtonGroupDemo Href = "#button-size-enum", }, new() + { + Name = "Styles", + Type = "BitButtonGroupClassStyles?", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the ButtonGroup.", + LinkType = LinkType.Link, + Href = "#class-styles", + }, + new() { Name = "Variant", Type = "BitVariant?", @@ -342,6 +360,49 @@ public partial class BitButtonGroupDemo ] }, new() + { + Id = "class-styles", + Title = "BitButtonGroupClassStyles", + Parameters = + [ + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root element of the BitButtonGroup.", + }, + new() + { + Name = "Button", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the internal button of the BitButtonGroup.", + }, + new() + { + Name = "Icon", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the icon of the BitButtonGroup." + }, + new() + { + Name = "Text", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the text of the BitButtonGroup." + }, + new() + { + Name = "ToggledButton", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the button when in toggle mode of the BitButtonGroup.", + }, + ], + }, + new() { Id = "name-selectors", Title = "BitButtonGroupNameSelectors", diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss index d477618eb1..daf5d6992e 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss @@ -26,4 +26,10 @@ color: peachpuff; background-color: tomato; } + + .custom-btn { + color: aliceblue; + border-color: aliceblue; + background-color: crimson; + } } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor index 8552384e10..0d5e331a08 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor @@ -33,134 +33,7 @@ - - -
Offering a range of specialized colors, providing visual cues for specific states within your application.
-

-
-
Primary
- - - -
-

-
-
Secondary
- - - -
-

-
-
Tertiary
- - - -
-

-
-
Info
- - - -
-

-
-
Success
- - - -
-

-
-
Warning
- - - -
-

-
-
SevereWarning
- - - -
-

-
-
Error
- - - -
-

-
-
-
PrimaryBackground
- - - -
-

-
-
SecondaryBackground
- - - -
-

-
-
TertiaryBackground
- - - -
-
-

-
-
PrimaryForeground
- - - -
-

-
-
SecondaryForeground
- - - -
-

-
-
TertiaryForeground
- - - -
-

-
-
PrimaryBorder
- - - -
-

-
-
SecondaryBorder
- - - -
-

-
-
TertiaryBorder
- - - -
- - - - +
Each item in the ButtonGroup can have an icon.


@@ -187,7 +60,7 @@ - +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.


@@ -237,7 +110,7 @@ - +
Reverses the positions of the icon and the main content of the button.


@@ -267,7 +140,7 @@ - +
The Toggled in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.


@@ -309,7 +182,7 @@ - +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -332,6 +205,29 @@ + + +
Managing button click events.
+

+
+
Component's ItemClick event:
+ +
Clicked item: @clickedCustom
+
+

+
+
Item's Click event:
+ +
Click count: @clickCounter
+
+ + +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.
@@ -359,7 +255,134 @@ - + + +
Offering a range of specialized colors, providing visual cues for specific states within your application.
+

+
+
Primary
+ + + +
+

+
+
Secondary
+ + + +
+

+
+
Tertiary
+ + + +
+

+
+
Info
+ + + +
+

+
+
Success
+ + + +
+

+
+
Warning
+ + + +
+

+
+
SevereWarning
+ + + +
+

+
+
Error
+ + + +
+

+
+
+
PrimaryBackground
+ + + +
+

+
+
SecondaryBackground
+ + + +
+

+
+
TertiaryBackground
+ + + +
+
+

+
+
PrimaryForeground
+ + + +
+

+
+
SecondaryForeground
+ + + +
+

+
+
TertiaryForeground
+ + + +
+

+
+
PrimaryBorder
+ + + +
+

+
+
SecondaryBorder
+ + + +
+

+
+
TertiaryBorder
+ + + +
+ + + +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -376,28 +399,18 @@ NameSelectors="@(new() { Text = { Selector = i => i.Name }, IconName = { Selector = i => i.Icon } })" /> - - - - - -
Managing button click events.


-
Component's ItemClick event:
+
Styles & Classes:
-
Clicked item: @clickedCustom
-
-

-
-
Item's Click event:
- -
Click count: @clickCounter
+ Styles="@(new() { Button = "color: darkcyan; border-color: deepskyblue; background-color: azure;" })" /> + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs index 76886dd07e..f84fb7e28e 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs @@ -49,90 +49,6 @@ public class Operation ];"; private readonly string example3RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - private readonly string example3CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = -[ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -];"; - - private readonly string example4RazorCode = @" i.Name }, IconName = { Selector = i => i.Icon } })"" /> @@ -144,7 +60,7 @@ public class Operation i.Name }, IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example4CsharpCode = @" + private readonly string example3CsharpCode = @" public class Operation { public string? Name { get; set; } @@ -158,7 +74,7 @@ public class Operation new() { Name = ""Delete"", Icon = BitIconName.Delete } ];"; - private readonly string example5RazorCode = @" + private readonly string example4RazorCode = @" i.Name }, IconName = { Selector = i => i.Icon } })"" IconOnly /> @@ -183,7 +99,7 @@ public class Operation i.Name }, IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example5CsharpCode = @" + private readonly string example4CsharpCode = @" public class Operation { public string? Name { get; set; } @@ -204,7 +120,7 @@ public class Operation new() { Name = ""Delete"", Icon = BitIconName.Delete } ];"; - private readonly string example6RazorCode = @" + private readonly string example5RazorCode = @" i.Name }, IconName = { Selector = i => i.Icon }, @@ -219,7 +135,7 @@ public class Operation NameSelectors=""@(new() { Text = { Selector = i => i.Name }, IconName = { Selector = i => i.Icon }, ReversedIcon = { Selector = i => i.ReversedIcon } })"" />"; - private readonly string example6CsharpCode = @" + private readonly string example5CsharpCode = @" public class Operation { public string? Name { get; set; } @@ -234,7 +150,7 @@ public class Operation new() { Name = ""Delete"", Icon = BitIconName.Delete, ReversedIcon = true } ];"; - private readonly string example7RazorCode = @" + private readonly string example6RazorCode = @" i.OnName }, OffText = { Selector = i => i.OffName }, @@ -261,7 +177,7 @@ public class Operation OnIconName = { Selector = i => i.OnIcon }, OffIconName = { Selector = i => i.OffIcon }, ReversedIcon = { Selector = i => i.ReversedIcon } })"" Toggled />"; - private readonly string example7CsharpCode = @" + private readonly string example6CsharpCode = @" public class Operation { public string? OnIcon { get; set; } @@ -280,11 +196,11 @@ public class Operation new() { OnName = ""Forward (2X)"", OffName = ""Forward"", OnIcon = BitIconName.FastForwardTwoX, OffIcon = BitIconName.FastForward, ReversedIcon = true } ];"; - private readonly string example8RazorCode = @" + private readonly string example7RazorCode = @" "; - private readonly string example8CsharpCode = @" + private readonly string example7CsharpCode = @" private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; public class Operation @@ -297,6 +213,48 @@ public class Operation new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } ];"; + private readonly string example8RazorCode = @" + clickedCustom = item.Name"" /> +
Clicked item: @clickedCustom
+ + i.Name }, + IconName = { Selector = i => i.Icon }, + OnClick = { Selector = i => i.Clicked } })"" /> +
Click count: @clickCounter
"; + private readonly string example8CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } + public Action? Clicked { get; set; } +} + +private int clickCounter; + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +]; + +private List eventsCustoms = +[ + new() { Name = ""Increase"", Icon = BitIconName.Add }, + new() { Name = ""Reset"", Icon = BitIconName.Reset }, + new() { Name = ""Decrease"", Icon = BitIconName.Remove } +]; + +protected override void OnInitialized() +{ + eventsCustoms[0].Clicked = _ => { clickCounter++; StateHasChanged(); }; + eventsCustoms[1].Clicked = _ => { clickCounter = 0; StateHasChanged(); }; + eventsCustoms[2].Clicked = _ => { clickCounter--; StateHasChanged(); }; +}"; + private readonly string example9RazorCode = @" @@ -323,6 +281,90 @@ public class Operation ];"; private readonly string example10RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + private readonly string example10CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +];"; + + private readonly string example11RazorCode = @" @@ -354,8 +402,18 @@ public class Operation i.Name }, - IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example10CsharpCode = @" + IconName = { Selector = i => i.Icon } })"" /> + + + +"; + private readonly string example11CsharpCode = @" private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; public class Operation @@ -387,48 +445,6 @@ public class Operation } ];"; - private readonly string example11RazorCode = @" - clickedCustom = item.Name"" /> -
Clicked item: @clickedCustom
- - i.Name }, - IconName = { Selector = i => i.Icon }, - OnClick = { Selector = i => i.Clicked } })"" /> -
Click count: @clickCounter
"; - private readonly string example11CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } - public Action? Clicked { get; set; } -} - -private int clickCounter; - -private List basicCustoms = -[ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -]; - -private List eventsCustoms = -[ - new() { Name = ""Increase"", Icon = BitIconName.Add }, - new() { Name = ""Reset"", Icon = BitIconName.Reset }, - new() { Name = ""Decrease"", Icon = BitIconName.Remove } -]; - -protected override void OnInitialized() -{ - eventsCustoms[0].Clicked = _ => { clickCounter++; StateHasChanged(); }; - eventsCustoms[1].Clicked = _ => { clickCounter = 0; StateHasChanged(); }; - eventsCustoms[2].Clicked = _ => { clickCounter--; StateHasChanged(); }; -}"; - private readonly string example12RazorCode = @" - - -
Offering a range of specialized colors, providing visual cues for specific states within your application.
-

-
-
Primary
- - - -
-

-
-
Secondary
- - - -
-

-
-
Tertiary
- - - -
-

-
-
Info
- - - -
-

-
-
Success
- - - -
-

-
-
Warning
- - - -
-

-
-
SevereWarning
- - - -
-

-
-
Error
- - - -
-

-
-
-
PrimaryBackground
- - - -
-

-
-
SecondaryBackground
- - - -
-

-
-
TertiaryBackground
- - - -
-
-

-
-
PrimaryForeground
- - - -
-

-
-
SecondaryForeground
- - - -
-

-
-
TertiaryForeground
- - - -
-

-
-
PrimaryBorder
- - - -
-

-
-
SecondaryBorder
- - - -
-

-
-
TertiaryBorder
- - - -
- - - - +
Each item in the ButtonGroup can have an icon.


@@ -181,7 +54,7 @@ - +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.


@@ -219,7 +92,7 @@ - +
Reverses the positions of the icon and the main content of the button.


@@ -240,7 +113,7 @@ - +
The Toggled in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.


@@ -261,7 +134,7 @@ - +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -284,6 +157,24 @@ + + +
Managing button click events.
+

+
+
Component's ItemClick event:
+ +
Clicked item: @clickedItem
+
+

+
+
Item's Click event:
+ +
Click count: @clickCounter
+
+ + +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.
@@ -311,37 +202,157 @@ - + -
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
+
Offering a range of specialized colors, providing visual cues for specific states within your application.


-
Component's style & class:
- - +
Primary
+ + +


-
Item's style & class:
- +
Secondary
+ + + +
+

+
+
Tertiary
+ + + +
+

+
+
Info
+ + + +
+

+
+
Success
+ + + +
+

+
+
Warning
+ + + +
+

+
+
SevereWarning
+ + + +
+

+
+
Error
+ + + +
+

+
+
+
PrimaryBackground
+ + + +
+

+
+
SecondaryBackground
+ + + +
+

+
+
TertiaryBackground
+ + + +
+
+

+
+
PrimaryForeground
+ + + +
+

+
+
SecondaryForeground
+ + + +
+

+
+
TertiaryForeground
+ + + +
+

+
+
PrimaryBorder
+ + + +
+

+
+
SecondaryBorder
+ + + +
+

+
+
TertiaryBorder
+ + +
- + -
Managing button click events.
+
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


-
Component's ItemClick event:
- -
Clicked item: @clickedItem
+
Component's style & class:
+ +


-
Item's Click event:
- -
Click count: @clickCounter
+
Item's style & class:
+ +
+

+
+
Styles & Classes:
+ + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs index e41be97a4f..5431abfd76 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs @@ -34,87 +34,10 @@ public partial class _BitButtonGroupItemDemo ];"; private readonly string example3RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - private readonly string example3CsharpCode = @" -private List basicItems = -[ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -];"; - - private readonly string example4RazorCode = @" "; - private readonly string example4CsharpCode = @" + private readonly string example3CsharpCode = @" private List iconItems = [ new() { Text = ""Add"", IconName = BitIconName.Add }, @@ -122,7 +45,7 @@ public partial class _BitButtonGroupItemDemo new() { Text = ""Delete"", IconName = BitIconName.Delete } ];"; - private readonly string example5RazorCode = @" + private readonly string example4RazorCode = @" @@ -130,7 +53,7 @@ public partial class _BitButtonGroupItemDemo "; - private readonly string example5CsharpCode = @" + private readonly string example4CsharpCode = @" private List iconItems = [ new() { Text = ""Add"", IconName = BitIconName.Add }, @@ -145,11 +68,11 @@ public partial class _BitButtonGroupItemDemo new() { Text = ""Delete"", IconName = BitIconName.Delete } ];"; - private readonly string example6RazorCode = @" + private readonly string example5RazorCode = @" "; - private readonly string example6CsharpCode = @" + private readonly string example5CsharpCode = @" private List reversedIconItems = [ new() { Text = ""Add"", IconName = BitIconName.Add, ReversedIcon = true }, @@ -157,11 +80,11 @@ public partial class _BitButtonGroupItemDemo new() { Text = ""Delete"", IconName = BitIconName.Delete, ReversedIcon = true } ];"; - private readonly string example7RazorCode = @" + private readonly string example6RazorCode = @" "; - private readonly string example7CsharpCode = @" + private readonly string example6CsharpCode = @" private List toggledItems = [ new() { OnText = ""Back (2X)"", OffText = ""Back"", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind }, @@ -169,16 +92,40 @@ public partial class _BitButtonGroupItemDemo new() { OnText = ""Forward (2X)"", OffText = ""Forward"", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true } ];"; - private readonly string example8RazorCode = @" + private readonly string example7RazorCode = @" "; - private readonly string example8CsharpCode = @" + private readonly string example7CsharpCode = @" private List basicItems = [ new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } ];"; + private readonly string example8RazorCode = @" + clickedItem = item.Text"" /> +
Clicked item: @clickedItem
+ + +
Click count: @clickCounter
"; + private readonly string example8CsharpCode = @" +private int clickCounter; +private string? clickedItem; + +private List eventsItems = +[ + new() { Text = ""Increase"", IconName = BitIconName.Add }, + new() { Text = ""Reset"", IconName = BitIconName.Reset }, + new() { Text = ""Decrease"", IconName = BitIconName.Remove } +]; + +protected override void OnInitialized() +{ + eventsItems[0].OnClick = _ => { clickCounter++; StateHasChanged(); }; + eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); }; + eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); }; +}"; + private readonly string example9RazorCode = @" @@ -198,6 +145,83 @@ public partial class _BitButtonGroupItemDemo ];"; private readonly string example10RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + private readonly string example10CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example11RazorCode = @" -"; - private readonly string example10CsharpCode = @" + + + + +"; + private readonly string example11CsharpCode = @" private List basicItems = [ new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } @@ -249,30 +287,6 @@ public partial class _BitButtonGroupItemDemo } ];"; - private readonly string example11RazorCode = @" - clickedItem = item.Text"" /> -
Clicked item: @clickedItem
- - -
Click count: @clickCounter
"; - private readonly string example11CsharpCode = @" -private int clickCounter; -private string? clickedItem; - -private List eventsItems = -[ - new() { Text = ""Increase"", IconName = BitIconName.Add }, - new() { Text = ""Reset"", IconName = BitIconName.Reset }, - new() { Text = ""Decrease"", IconName = BitIconName.Remove } -]; - -protected override void OnInitialized() -{ - eventsItems[0].OnClick = _ => { clickCounter++; StateHasChanged(); }; - eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); }; - eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); }; -}"; - private readonly string example12RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor index 6828f69be3..f34499d397 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor @@ -55,236 +55,7 @@ - - -
Offering a range of specialized colors, providing visual cues for specific states within your application.
-

-
-
Primary
- - - - - - - - - -
-

-
-
Secondary
- - - - - - - - - -
-

-
-
Tertiary
- - - - - - - - - -
-

-
-
Info
- - - - - - - - - -
-

-
-
Success
- - - - - - - - - -
-

-
-
Warning
- - - - - - - - - -
-

-
-
SevereWarning
- - - - - - - - - -
-

-
-
Error
- - - - - - - - - -
-

-
-
-
PrimaryBackground
- - - - - - - - - -
-

-
-
SecondaryBackground
- - - - - - - - - -
-

-
-
TertiaryBackground
- - - - - - - - - -
-
-

-
-
PrimaryForeground
- - - - - - - - - -
-

-
-
SecondaryForeground
- - - - - - - - - -
-

-
-
TertiaryForeground
- - - - - - - - - -
-

-
-
PrimaryBorder
- - - - - - - - - -
-

-
-
SecondaryBorder
- - - - - - - - - -
-

-
-
TertiaryBorder
- - - - - - - - - -
- - - - +
Each item in the ButtonGroup can have an icon.


@@ -317,7 +88,7 @@ - +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.


@@ -379,7 +150,7 @@ - +
Reverses the positions of the icon and the main content of the button.


@@ -412,7 +183,7 @@ - +
The Toggled in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.


@@ -445,7 +216,7 @@ - +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -474,6 +245,32 @@ + + +
Managing button click events.
+

+
+
Component's ItemClick event:
+ + + + + +
Clicked item: @clickedOption
+
+

+
+
Item's Click event:
+ + + + + +
Click count: @clickCounter
+
+ + +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.
@@ -519,7 +316,236 @@ - + + +
Offering a range of specialized colors, providing visual cues for specific states within your application.
+

+
+
Primary
+ + + + + + + + + +
+

+
+
Secondary
+ + + + + + + + + +
+

+
+
Tertiary
+ + + + + + + + + +
+

+
+
Info
+ + + + + + + + + +
+

+
+
Success
+ + + + + + + + + +
+

+
+
Warning
+ + + + + + + + + +
+

+
+
SevereWarning
+ + + + + + + + + +
+

+
+
Error
+ + + + + + + + + +
+

+
+
+
PrimaryBackground
+ + + + + + + + + +
+

+
+
SecondaryBackground
+ + + + + + + + + +
+

+
+
TertiaryBackground
+ + + + + + + + + +
+
+

+
+
PrimaryForeground
+ + + + + + + + + +
+

+
+
SecondaryForeground
+ + + + + + + + + +
+

+
+
TertiaryForeground
+ + + + + + + + + +
+

+
+
PrimaryBorder
+ + + + + + + + + +
+

+
+
SecondaryBorder
+ + + + + + + + + +
+

+
+
TertiaryBorder
+ + + + + + + + + +
+ + + +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -541,31 +567,20 @@ - - - - - -
Managing button click events.


-
Component's ItemClick event:
- - - - +
Styles & Classes:
+ + -
Clicked item: @clickedOption
-
-

-
-
Item's Click event:
- - - - + + + -
Click count: @clickCounter
 diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs index 796c28abae..8c30e6d21c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs @@ -41,6 +41,164 @@ public partial class _BitButtonGroupOptionDemo "; private readonly string example3RazorCode = @" + + + + + + + + + + + + + + + + +"; + + private readonly string example4RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + private readonly string example5RazorCode = @" + + + + + + + + + + + + + + + + +"; + + private readonly string example6RazorCode = @" + + + + + + + + + + + + + + + + +"; + + private readonly string example7RazorCode = @" + + + + + + + + + + +"; + + private readonly string example8RazorCode = @" + clickedOption = item.Text"" TItem=""BitButtonGroupOption""> + + + + +
Clicked item: @clickedOption
+ + + { clickCounter++; StateHasChanged(); }"" /> + { clickCounter=0; StateHasChanged(); }"" /> + { clickCounter--; StateHasChanged(); }"" /> + +
Click count: @clickCounter
"; + private readonly string example8CsharpCode = @" +private int clickCounter; +private string? clickedOption;"; + + private readonly string example9RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + private readonly string example10RazorCode = @" @@ -214,147 +372,7 @@ public partial class _BitButtonGroupOptionDemo "; - private readonly string example4RazorCode = @" - - - - - - - - - - - - - - - - -"; - - private readonly string example5RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - - private readonly string example6RazorCode = @" - - - - - - - - - - - - - - - - -"; - - private readonly string example7RazorCode = @" - - - - - - - - - - - - - - - - -"; - - private readonly string example8RazorCode = @" - - - - - - - - - - -"; - - private readonly string example9RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - - private readonly string example10RazorCode = @" + private readonly string example11RazorCode = @" @@ -392,25 +416,19 @@ public partial class _BitButtonGroupOptionDemo -"; - - private readonly string example11RazorCode = @" - clickedOption = item.Text"" TItem=""BitButtonGroupOption""> - - - -
Clicked item: @clickedOption
- - { clickCounter++; StateHasChanged(); }"" /> - { clickCounter=0; StateHasChanged(); }"" /> - { clickCounter--; StateHasChanged(); }"" /> + + -
Click count: @clickCounter
"; - private readonly string example11CsharpCode = @" -private int clickCounter; -private string? clickedOption;"; + + + +"; private readonly string example12RazorCode = @"