From 2f20815a1493b7023ba8ca331a9854f67bacd261 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Fri, 20 Dec 2024 11:58:24 +0330 Subject: [PATCH] Improve BitButtonGroup (#9463) --- .../BitButtonGroup/BitButtonGroup.razor | 12 +- .../BitButtonGroup/BitButtonGroup.razor.cs | 318 +++++++++++- .../BitButtonGroup/BitButtonGroup.scss | 74 +++ .../BitButtonGroup/BitButtonGroupItem.cs | 40 ++ .../BitButtonGroupNameSelectors.cs | 40 ++ .../BitButtonGroup/BitButtonGroupOption.cs | 40 ++ .../ButtonGroup/BitButtonGroupDemo.razor.cs | 198 ++++++++ .../Buttons/ButtonGroup/Operation.cs | 14 + .../_BitButtonGroupCustomDemo.razor | 132 ++++- .../_BitButtonGroupCustomDemo.razor.cs | 360 +------------- ..._BitButtonGroupCustomDemo.razor.samples.cs | 463 ++++++++++++++++++ .../ButtonGroup/_BitButtonGroupItemDemo.razor | 90 +++- .../_BitButtonGroupItemDemo.razor.cs | 259 +--------- .../_BitButtonGroupItemDemo.razor.samples.cs | 287 +++++++++++ .../_BitButtonGroupOptionDemo.razor | 138 +++++- .../_BitButtonGroupOptionDemo.razor.cs | 352 ------------- ..._BitButtonGroupOptionDemo.razor.samples.cs | 433 ++++++++++++++++ 17 files changed, 2301 insertions(+), 949 deletions(-) create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor index 036addc7c6..34a0df0ad6 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor @@ -21,8 +21,9 @@ tabindex="@(isEnabled ? 0 : -1)" disabled="@(isEnabled is false)" aria-disabled="@(isEnabled is false)" + title="@GetItemTitle(item)" style="@GetStyle(item)" - class="bit-btg-itm @GetClass(item)"> + class="@GetItemClass(item)"> @if (template is not null) { @template(item) @@ -33,12 +34,17 @@ } else { - var iconName = GetIconName(item); + var iconName = GetItemIconName(item); @if (iconName.HasValue()) { } - @GetText(item) + + var text = GetItemText(item); + if (text.HasValue()) + { + @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 9c3229eb85..73b9ff5894 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs @@ -4,11 +4,11 @@ namespace Bit.BlazorUI; public partial class BitButtonGroup : BitComponentBase where TItem : class { + private TItem? _toggleItem; private List _items = []; private IEnumerable _oldItems = default!; - /// /// The EditContext, which is set if the button is inside an /// @@ -27,6 +27,11 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas [Parameter, ResetClassBuilder] public BitColor? Color { get; set; } + /// + /// Determines that only the icon should be rendered. + /// + [Parameter] public bool IconOnly { get; set; } + /// /// List of Item, each of which can be a button with different action in the ButtonGroup. /// @@ -58,6 +63,11 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas [Parameter, ResetClassBuilder] public BitSize? Size { get; set; } + /// + /// Display ButtonGroup with toggle mode enabled for each button. + /// + [Parameter] public bool Toggled { get; set; } + /// /// The visual variant of the button group. /// @@ -143,7 +153,7 @@ protected override void OnParametersSet() if (_oldItems is not null && Items.SequenceEqual(_oldItems)) return; _oldItems = Items; - _items = Items.ToList(); + _items = [.. Items]; } @@ -175,6 +185,118 @@ private async Task HandleOnItemClick(TItem item) item.GetValueFromProperty?>(NameSelectors.OnClick.Name)?.Invoke(item); } } + + if (Toggled) + { + if (_toggleItem == item) + { + _toggleItem = null; + } + else + { + _toggleItem = item; + } + } + } + + private string? GetItemClass(TItem? item) + { + List classes = ["bit-btg-itm"]; + + if (GetReversedIcon(item)) + { + classes.Add("bit-btg-rvi"); + } + + if (_toggleItem == item) + { + classes.Add("bit-btg-chk"); + } + + var classItem = GetClass(item); + if (classItem.HasValue()) + { + classes.Add(classItem!); + } + + return string.Join(' ', classes); + } + + private string? GetItemText(TItem? item) + { + if (IconOnly) return null; + + if (Toggled) + { + if (_toggleItem == item) + { + var onText = GetOnText(item); + if (onText.HasValue()) + { + return onText; + } + } + else + { + var offText = GetOffText(item); + if (offText.HasValue()) + { + return offText; + } + } + } + + return GetText(item); + } + + private string? GetItemTitle(TItem? item) + { + if (Toggled) + { + if (_toggleItem == item) + { + var onTitle = GetOnTitle(item); + if (onTitle.HasValue()) + { + return onTitle; + } + } + else + { + var offTitle = GetOffTitle(item); + if (offTitle.HasValue()) + { + return offTitle; + } + } + } + + return GetTitle(item); + } + + private string? GetItemIconName(TItem? item) + { + if (Toggled) + { + if (_toggleItem == item) + { + var onIconName = GetOnIconName(item); + if (onIconName.HasValue()) + { + return onIconName; + } + } + else + { + var offIconName = GetOffIconName(item); + if (offIconName.HasValue()) + { + return offIconName; + } + } + } + + return GetIconName(item); } private string? GetClass(TItem? item) @@ -225,6 +347,54 @@ private async Task HandleOnItemClick(TItem item) return item.GetValueFromProperty(NameSelectors.IconName.Name); } + private string? GetOnIconName(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OnIconName; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OnIconName; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OnIconName.Selector is not null) + { + return NameSelectors.OnIconName.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OnIconName.Name); + } + + private string? GetOffIconName(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OffIconName; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OffIconName; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OffIconName.Selector is not null) + { + return NameSelectors.OffIconName.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OffIconName.Name); + } + private bool GetIsEnabled(TItem? item) { if (item is null) return false; @@ -320,4 +490,148 @@ private bool GetIsEnabled(TItem? item) return item.GetValueFromProperty(NameSelectors.Text.Name); } + + private string? GetOnText(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OnText; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OnText; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OnText.Selector is not null) + { + return NameSelectors.OnText.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OnText.Name); + } + + private string? GetOffText(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OffText; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OffText; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OffText.Selector is not null) + { + return NameSelectors.OffText.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OffText.Name); + } + + private string? GetTitle(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.Title; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.Title; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.Title.Selector is not null) + { + return NameSelectors.Title.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.Title.Name); + } + + private string? GetOnTitle(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OnTitle; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OnTitle; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OnTitle.Selector is not null) + { + return NameSelectors.OnTitle.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OnTitle.Name); + } + + private string? GetOffTitle(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OffTitle; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OffTitle; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OffTitle.Selector is not null) + { + return NameSelectors.OffTitle.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OffTitle.Name); + } + + private bool GetReversedIcon(TItem? item) + { + if (item is null) return false; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.ReversedIcon; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.ReversedIcon; + } + + if (NameSelectors is null) return false; + + if (NameSelectors.ReversedIcon.Selector is not null) + { + return NameSelectors.ReversedIcon.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.ReversedIcon.Name, false); + } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss index a630e467f4..9a55b86981 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss @@ -34,6 +34,7 @@ line-height: inherit; text-decoration: none; box-sizing: border-box; + justify-content: center; font-family: $tg-font-family; font-weight: $tg-font-weight; border-style: $shp-border-style; @@ -69,6 +70,10 @@ } } +.bit-btg-rvi { + flex-direction: row-reverse; +} + .bit-btg-btx { white-space: nowrap; text-overflow: ellipsis; @@ -131,12 +136,33 @@ } } +.bit-btg-chk { + color: var(--bit-btg-clr-txt); + border-color: var(--bit-btg-clr-dark); + background-color: var(--bit-btg-clr-dark); + + @media (hover: hover) { + &:hover { + border-color: var(--bit-btg-clr-dark-hover); + background-color: var(--bit-btg-clr-dark-hover); + } + } + + &:active { + border-color: var(--bit-btg-clr-dark-active); + background-color: var(--bit-btg-clr-dark-active); + } +} + .bit-btg-pri { --bit-btg-clr: #{$clr-pri}; --bit-btg-clr-txt: #{$clr-pri-text}; --bit-btg-clr-brd: #{$clr-pri-dark}; --bit-btg-clr-hover: #{$clr-pri-hover}; --bit-btg-clr-active: #{$clr-pri-active}; + --bit-btg-clr-dark: #{$clr-pri-dark}; + --bit-btg-clr-dark-hover: #{$clr-pri-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-pri-dark-active}; } .bit-btg-sec { @@ -145,6 +171,9 @@ --bit-btg-clr-brd: #{$clr-sec-dark}; --bit-btg-clr-hover: #{$clr-sec-hover}; --bit-btg-clr-active: #{$clr-sec-active}; + --bit-btg-clr-dark: #{$clr-sec-dark}; + --bit-btg-clr-dark-hover: #{$clr-sec-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-sec-dark-active}; } .bit-btg-ter { @@ -153,6 +182,9 @@ --bit-btg-clr-brd: #{$clr-ter-dark}; --bit-btg-clr-hover: #{$clr-ter-hover}; --bit-btg-clr-active: #{$clr-ter-active}; + --bit-btg-clr-dark: #{$clr-ter-dark}; + --bit-btg-clr-dark-hover: #{$clr-ter-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-ter-dark-active}; } .bit-btg-inf { @@ -161,6 +193,9 @@ --bit-btg-clr-brd: #{$clr-inf-dark}; --bit-btg-clr-hover: #{$clr-inf-hover}; --bit-btg-clr-active: #{$clr-inf-active}; + --bit-btg-clr-dark: #{$clr-inf-dark}; + --bit-btg-clr-dark-hover: #{$clr-inf-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-inf-dark-active}; } .bit-btg-suc { @@ -169,6 +204,9 @@ --bit-btg-clr-brd: #{$clr-suc-dark}; --bit-btg-clr-hover: #{$clr-suc-hover}; --bit-btg-clr-active: #{$clr-suc-active}; + --bit-btg-clr-dark: #{$clr-suc-dark}; + --bit-btg-clr-dark-hover: #{$clr-suc-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-suc-dark-active}; } .bit-btg-wrn { @@ -177,6 +215,9 @@ --bit-btg-clr-brd: #{$clr-wrn-dark}; --bit-btg-clr-hover: #{$clr-wrn-hover}; --bit-btg-clr-active: #{$clr-wrn-active}; + --bit-btg-clr-dark: #{$clr-wrn-dark}; + --bit-btg-clr-dark-hover: #{$clr-wrn-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-wrn-dark-active}; } .bit-btg-swr { @@ -185,6 +226,9 @@ --bit-btg-clr-brd: #{$clr-swr-dark}; --bit-btg-clr-hover: #{$clr-swr-hover}; --bit-btg-clr-active: #{$clr-swr-active}; + --bit-btg-clr-dark: #{$clr-swr-dark}; + --bit-btg-clr-dark-hover: #{$clr-swr-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-swr-dark-active}; } .bit-btg-err { @@ -193,6 +237,9 @@ --bit-btg-clr-brd: #{$clr-err-dark}; --bit-btg-clr-hover: #{$clr-err-hover}; --bit-btg-clr-active: #{$clr-err-active}; + --bit-btg-clr-dark: #{$clr-err-dark}; + --bit-btg-clr-dark-hover: #{$clr-err-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-err-dark-active}; } @@ -202,6 +249,9 @@ --bit-btg-clr-brd: #{$clr-bg-pri}; --bit-btg-clr-hover: #{$clr-bg-pri-hover}; --bit-btg-clr-active: #{$clr-bg-pri-active}; + --bit-btg-clr-dark: #{$clr-bg-pri}; + --bit-btg-clr-dark-hover: #{$clr-bg-pri-hover}; + --bit-btg-clr-dark-active: #{$clr-bg-pri-active}; } .bit-btg-sbg { @@ -210,6 +260,9 @@ --bit-btg-clr-brd: #{$clr-bg-sec}; --bit-btg-clr-hover: #{$clr-bg-sec-hover}; --bit-btg-clr-active: #{$clr-bg-sec-active}; + --bit-btg-clr-dark: #{$clr-bg-sec}; + --bit-btg-clr-dark-hover: #{$clr-bg-sec-hover}; + --bit-btg-clr-dark-active: #{$clr-bg-sec-active}; } .bit-btg-tbg { @@ -218,6 +271,9 @@ --bit-btg-clr-brd: #{$clr-bg-ter}; --bit-btg-clr-hover: #{$clr-bg-ter-hover}; --bit-btg-clr-active: #{$clr-bg-ter-active}; + --bit-btg-clr-dark: #{$clr-bg-ter}; + --bit-btg-clr-dark-hover: #{$clr-bg-ter-hover}; + --bit-btg-clr-dark-active: #{$clr-bg-ter-active}; } .bit-btg-pfg { @@ -226,6 +282,9 @@ --bit-btg-clr-brd: #{$clr-fg-pri}; --bit-btg-clr-hover: #{$clr-fg-pri-hover}; --bit-btg-clr-active: #{$clr-fg-pri-active}; + --bit-btg-clr-dark: #{$clr-fg-pri}; + --bit-btg-clr-dark-hover: #{$clr-fg-pri-hover}; + --bit-btg-clr-dark-active: #{$clr-fg-pri-active}; } .bit-btg-sfg { @@ -234,6 +293,9 @@ --bit-btg-clr-brd: #{$clr-fg-sec}; --bit-btg-clr-hover: #{$clr-fg-sec-hover}; --bit-btg-clr-active: #{$clr-fg-sec-active}; + --bit-btg-clr-dark: #{$clr-fg-sec}; + --bit-btg-clr-dark-hover: #{$clr-fg-sec-hover}; + --bit-btg-clr-dark-active: #{$clr-fg-sec-active}; } .bit-btg-tfg { @@ -242,6 +304,9 @@ --bit-btg-clr-brd: #{$clr-fg-ter}; --bit-btg-clr-hover: #{$clr-fg-ter-hover}; --bit-btg-clr-active: #{$clr-fg-ter-active}; + --bit-btg-clr-dark: #{$clr-fg-ter}; + --bit-btg-clr-dark-hover: #{$clr-fg-ter-hover}; + --bit-btg-clr-dark-active: #{$clr-fg-ter-active}; } .bit-btg-pbr { @@ -250,6 +315,9 @@ --bit-btg-clr-brd: #{$clr-brd-pri}; --bit-btg-clr-hover: #{$clr-brd-pri-hover}; --bit-btg-clr-active: #{$clr-brd-pri-active}; + --bit-btg-clr-dark: #{$clr-brd-pri}; + --bit-btg-clr-dark-hover: #{$clr-brd-pri-hover}; + --bit-btg-clr-dark-active: #{$clr-brd-pri-active}; } .bit-btg-sbr { @@ -258,6 +326,9 @@ --bit-btg-clr-brd: #{$clr-brd-sec}; --bit-btg-clr-hover: #{$clr-brd-sec-hover}; --bit-btg-clr-active: #{$clr-brd-sec-active}; + --bit-btg-clr-dark: #{$clr-brd-sec}; + --bit-btg-clr-dark-hover: #{$clr-brd-sec-hover}; + --bit-btg-clr-dark-active: #{$clr-brd-sec-active}; } .bit-btg-tbr { @@ -266,6 +337,9 @@ --bit-btg-clr-brd: #{$clr-brd-ter}; --bit-btg-clr-hover: #{$clr-brd-ter-hover}; --bit-btg-clr-active: #{$clr-brd-ter-active}; + --bit-btg-clr-dark: #{$clr-brd-ter}; + --bit-btg-clr-dark-hover: #{$clr-brd-ter-hover}; + --bit-btg-clr-dark-active: #{$clr-brd-ter-active}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs index afa3ee18bd..0311d50980 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs @@ -23,11 +23,46 @@ public class BitButtonGroupItem /// public string? Key { get; set; } + /// + /// The icon of the item when it is not checked in toggle mode. + /// + [Parameter] public string? OffIconName { get; set; } + + /// + /// The text of the item when it is not checked in toggle mode. + /// + [Parameter] public string? OffText { get; set; } + + /// + /// The title of the item when it is not checked in toggle mode. + /// + [Parameter] public string? OffTitle { get; set; } + + /// + /// The icon of the item when it is checked in toggle mode. + /// + [Parameter] public string? OnIconName { get; set; } + + /// + /// The text of the item when it is checked in toggle mode. + /// + [Parameter] public string? OnText { get; set; } + + /// + /// The title of the item when it is checked in toggle mode. + /// + [Parameter] public string? OnTitle { get; set; } + /// /// Click event handler of the item. /// public Action? OnClick { get; set; } + /// + /// Reverses the positions of the icon and the main content of the item. + /// + [Parameter] public bool ReversedIcon { get; set; } + /// /// The custom value for the style attribute of the item. /// @@ -42,4 +77,9 @@ public class BitButtonGroupItem /// Text to render in the item. /// public string? Text { get; set; } + + /// + /// Title to render in the item. + /// + public string? Title { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs index fe1caf82d6..75cd27bc93 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs @@ -22,11 +22,46 @@ public class BitButtonGroupNameSelectors /// public BitNameSelectorPair Key { get; set; } = new(nameof(BitButtonGroupItem.Key)); + /// + /// OffIconName field name and selector of the custom input class. + /// + public BitNameSelectorPair OffIconName { get; set; } = new(nameof(BitButtonGroupItem.OffIconName)); + + /// + /// OffText field name and selector of the custom input class. + /// + public BitNameSelectorPair OffText { get; set; } = new(nameof(BitButtonGroupItem.OffText)); + + /// + /// OffTitle field name and selector of the custom input class. + /// + public BitNameSelectorPair OffTitle { get; set; } = new(nameof(BitButtonGroupItem.OffTitle)); + + /// + /// OnIconName field name and selector of the custom input class. + /// + public BitNameSelectorPair OnIconName { get; set; } = new(nameof(BitButtonGroupItem.OnIconName)); + + /// + /// OnText field name and selector of the custom input class. + /// + public BitNameSelectorPair OnText { get; set; } = new(nameof(BitButtonGroupItem.OnText)); + + /// + /// OnTitle field name and selector of the custom input class. + /// + public BitNameSelectorPair OnTitle { get; set; } = new(nameof(BitButtonGroupItem.OnTitle)); + /// /// OnClick field name and selector of the custom input class. /// public BitNameSelectorPair?> OnClick { get; set; } = new(nameof(BitButtonGroupItem.OnClick)); + /// + /// ReversedIcon field name and selector of the custom input class. + /// + public BitNameSelectorPair ReversedIcon { get; set; } = new(nameof(BitButtonGroupItem.ReversedIcon)); + /// /// The CSS Style field name and selector of the custom input class. /// @@ -41,4 +76,9 @@ public class BitButtonGroupNameSelectors /// Text field name and selector of the custom input class. /// public BitNameSelectorPair Text { get; set; } = new(nameof(BitButtonGroupItem.Text)); + + /// + /// Title field name and selector of the custom input class. + /// + public BitNameSelectorPair Title { get; set; } = new(nameof(BitButtonGroupItem.Title)); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs index ce48fed62f..2380942365 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs @@ -28,11 +28,46 @@ public partial class BitButtonGroupOption : ComponentBase, IDisposable /// [Parameter] public string? Key { get; set; } + /// + /// The icon of the option when it is not checked in toggle mode. + /// + [Parameter] public string? OffIconName { get; set; } + + /// + /// The text of the option when it is not checked in toggle mode. + /// + [Parameter] public string? OffText { get; set; } + + /// + /// The title of the option when it is not checked in toggle mode. + /// + [Parameter] public string? OffTitle { get; set; } + + /// + /// The icon of the option when it is checked in toggle mode. + /// + [Parameter] public string? OnIconName { get; set; } + + /// + /// The text of the option when it is checked in toggle mode. + /// + [Parameter] public string? OnText { get; set; } + + /// + /// The title of the option when it is checked in toggle mode. + /// + [Parameter] public string? OnTitle { get; set; } + /// /// Click event handler of the option. /// [Parameter] public EventCallback OnClick { get; set; } + /// + /// Reverses the positions of the icon and the main content of the option. + /// + [Parameter] public bool ReversedIcon { get; set; } + /// /// The custom value for the style attribute of the option. /// @@ -48,6 +83,11 @@ public partial class BitButtonGroupOption : ComponentBase, IDisposable /// [Parameter] public string? Text { get; set; } + /// + /// Title to render in the option + /// + [Parameter] public string? Title { get; set; } + protected override async Task OnInitializedAsync() 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 dd5317259f..c4b9b4d2d7 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 @@ -12,6 +12,13 @@ public partial class BitButtonGroupDemo Description = "The content of the BitButtonGroup, that are BitButtonGroupOption components.", }, new() + { + Name = "IconOnly", + Type = "bool", + DefaultValue = "false", + Description = "Determines that only the icon should be rendered.", + }, + new() { Name = "Color", Type = "BitColor?", @@ -59,6 +66,13 @@ public partial class BitButtonGroupDemo Description = "Alias of ChildContent.", }, new() + { + Name = "Toggled", + Type = "bool", + DefaultValue = "false", + Description = "Display ButtonGroup with toggle mode enabled for each button.", + }, + new() { Name = "Size", Type = "BitSize", @@ -122,6 +136,48 @@ public partial class BitButtonGroupDemo Description = "A unique value to use as a Key of the item.", }, new() + { + Name = "OffIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the item when it is not checked in toggle mode.", + }, + new() + { + Name = "OffText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the item when it is not checked in toggle mode.", + }, + new() + { + Name = "OffTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the item when it is not checked in toggle mode.", + }, + new() + { + Name = "OnIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the item when it is checked in toggle mode.", + }, + new() + { + Name = "OnText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the item when it is checked in toggle mode.", + }, + new() + { + Name = "OnTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the item when it is checked in toggle mode.", + }, + new() { Name = "OnClick", Type = "EventCallback", @@ -129,6 +185,13 @@ public partial class BitButtonGroupDemo Description = "Click event handler of the item.", }, new() + { + Name = "ReversedIcon", + Type = "bool", + DefaultValue = "false", + Description = "Reverses the positions of the icon and the main content of the item.", + }, + new() { Name = "Style", Type = "string?", @@ -148,6 +211,13 @@ public partial class BitButtonGroupDemo Type = "string?", DefaultValue = "null", Description = "Text to render in the item.", + }, + new() + { + Name = "Title", + Type = "string?", + DefaultValue = "null", + Description = "Title to render in the item.", } ] }, @@ -186,6 +256,48 @@ public partial class BitButtonGroupDemo Description = "A unique value to use as a key of the option.", }, new() + { + Name = "OffIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the option when it is not checked in toggle mode.", + }, + new() + { + Name = "OffText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the option when it is not checked in toggle mode.", + }, + new() + { + Name = "OffTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the option when it is not checked in toggle mode.", + }, + new() + { + Name = "OnIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the option when it is checked in toggle mode.", + }, + new() + { + Name = "OnText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the option when it is checked in toggle mode.", + }, + new() + { + Name = "OnTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the option when it is checked in toggle mode.", + }, + new() { Name = "OnClick", Type = "EventCallback", @@ -193,6 +305,13 @@ public partial class BitButtonGroupDemo Description = "Click event handler of the option.", }, new() + { + Name = "ReversedIcon", + Type = "bool", + DefaultValue = "false", + Description = "Reverses the positions of the icon and the main content of the option.", + }, + new() { Name = "Style", Type = "string?", @@ -212,6 +331,13 @@ public partial class BitButtonGroupDemo Type = "string?", DefaultValue = "null", Description = "Text to render in the option.", + }, + new() + { + Name = "Title", + Type = "string?", + DefaultValue = "null", + Description = "Title to render in the option.", } ] }, @@ -258,6 +384,60 @@ public partial class BitButtonGroupDemo LinkType = LinkType.Link, }, new() + { + Name = "OffIconName", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OffIconName))", + Description = "OffIconName field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OffText", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OffText))", + Description = "OffText field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OffTitle", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OffTitle))", + Description = "OffTitle field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OnIconName", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OnIconName))", + Description = "OnIconName field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OnText", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OnText))", + Description = "OnText field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OnTitle", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OnTitle))", + Description = "OnTitle field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() { Name = "OnClick", Type = "BitNameSelectorPair?>", @@ -267,6 +447,15 @@ public partial class BitButtonGroupDemo LinkType = LinkType.Link, }, new() + { + Name = "ReversedIcon", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.ReversedIcon))", + Description = "ReversedIcon field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() { Name = "Style", Type = "BitNameSelectorPair", @@ -293,6 +482,15 @@ public partial class BitButtonGroupDemo Href = "#name-selector-pair", LinkType = LinkType.Link, }, + new() + { + Name = "Title", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.Title))", + Description = "Title field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + } ] }, new() diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs index 688e918c52..4b61989ffe 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs @@ -8,6 +8,8 @@ public class Operation public string? Icon { get; set; } + public bool ReversedIcon { get; set; } + public bool IsEnabled { get; set; } = true; public string? Class { get; set; } @@ -15,4 +17,16 @@ public class Operation public string? Style { get; set; } public Action? Clicked { get; set; } + + public string? OnIcon { get; set; } + + public string? OffIcon { get; set; } + + public string? OnName { get; set; } + + public string? OffName { get; set; } + + public string? OnTitle { get; set; } + + public string? OffTitle { get; set; } } 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 b1fa55899b..8552384e10 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 @@ -187,7 +187,129 @@ - + + +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+

+
Alternatively, each button can be set to IconOnly by simply leaving the text field empty.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
Reverses the positions of the icon and the main content of the button.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
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.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -210,7 +332,7 @@ - +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


@@ -237,7 +359,7 @@ - +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -257,7 +379,7 @@ - +
Managing button click events.


@@ -280,7 +402,7 @@ - +
Use BitButtonGroup in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs index 92a70d4085..0369b8eb8c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs @@ -24,6 +24,27 @@ public partial class _BitButtonGroupCustomDemo new() { Name = "Delete", Icon = BitIconName.Delete } ]; + private List onlyIconCustoms = + [ + new() { Name = "Add", Icon = BitIconName.Add }, + new() { Icon = BitIconName.Edit }, + new() { Name = "Delete", Icon = BitIconName.Delete } + ]; + + private List reversedIconCustoms = + [ + new() { Name = "Add", Icon = BitIconName.Add, ReversedIcon = true }, + new() { Name = "Edit", Icon = BitIconName.Edit, ReversedIcon = true }, + new() { Name = "Delete", Icon = BitIconName.Delete, ReversedIcon = true } + ]; + + private List toggledCustoms = + [ + new() { OnName = "Back (2X)", OffName = "Back", OnIcon = BitIconName.RewindTwoX, OffIcon = BitIconName.Rewind }, + new() { OnTitle = "Resume", OffTitle = "Play", OnIcon = BitIconName.PlayResume, OffIcon = BitIconName.Play }, + new() { OnName = "Forward (2X)", OffName = "Forward", OnIcon = BitIconName.FastForwardTwoX, OffIcon = BitIconName.FastForward, ReversedIcon = true } + ]; + private List eventsCustoms = [ new() { Name = "Increase", Icon = BitIconName.Add }, @@ -60,343 +81,4 @@ protected override void OnInitialized() eventsCustoms[1].Clicked = _ => { clickCounter = 0; StateHasChanged(); }; eventsCustoms[2].Clicked = _ => { clickCounter--; StateHasChanged(); }; } - - - - private readonly string example1RazorCode = @" -"; - private readonly string example1CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example2RazorCode = @" - - - - - - - - - - -"; - private readonly string example2CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } - public bool IsEnabled { get; set; } = true; -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -}; - -private List disabledCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"", IsEnabled = false }, new() { Name = ""Delete"" } -};"; - - 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() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example4RazorCode = @" - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example4CsharpCode = @" -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } -} - -private List iconCustoms = new() -{ - new() { Name = ""Add"", Icon = BitIconName.Add }, - new() { Name = ""Edit"", Icon = BitIconName.Edit }, - new() { Name = ""Delete"", Icon = BitIconName.Delete } -};"; - - private readonly string example5RazorCode = @" - - -"; - private readonly string example5CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example6RazorCode = @" - - - - - - - - - - -"; - private readonly string example6CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example7RazorCode = @" - - - - - - - i.Name }, - IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example7CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } - public string? Class { get; set; } - public string? Style { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -}; - -private List styleClassCustoms = new() -{ - new() - { - Name = ""Styled"", - Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", - Icon = BitIconName.Brush, - }, - new() - { - Name = ""Classed"", - Class = ""custom-item"", - Icon = BitIconName.FormatPainter, - } -};"; - - 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() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -}; - -private List eventsCustoms = new() -{ - 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 = @" - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example9CsharpCode = @" -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } -} - -private List rtlCustoms = new() -{ - new() { Name = ""اضافه کردن"", Icon = BitIconName.Add }, - new() { Name = ""ویرایش"", Icon = BitIconName.Edit }, - new() { Name = ""حذف"", Icon = BitIconName.Delete } -};"; } 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 new file mode 100644 index 0000000000..76886dd07e --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs @@ -0,0 +1,463 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.ButtonGroup; + +public partial class _BitButtonGroupCustomDemo +{ + private readonly string example1RazorCode = @" +"; + private readonly string example1CsharpCode = @" +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 example2RazorCode = @" + + + + + + + + + + +"; + private readonly string example2CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } + public bool IsEnabled { get; set; } = true; +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +]; + +private List disabledCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"", IsEnabled = false }, new() { Name = ""Delete"" } +];"; + + 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 } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example4CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } +} + +private List iconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add }, + new() { Name = ""Edit"", Icon = BitIconName.Edit }, + new() { Name = ""Delete"", Icon = BitIconName.Delete } +];"; + + private readonly string example5RazorCode = @" + i.Name }, + IconName = { Selector = i => i.Icon } })"" IconOnly /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" IconOnly /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" IconOnly /> + + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example5CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } +} + +private List iconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add }, + new() { Name = ""Edit"", Icon = BitIconName.Edit }, + new() { Name = ""Delete"", Icon = BitIconName.Delete } +]; + +private List onlyIconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add }, + new() { Icon = BitIconName.Edit }, + new() { Name = ""Delete"", Icon = BitIconName.Delete } +];"; + + private readonly string example6RazorCode = @" + i.Name }, + IconName = { Selector = i => i.Icon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" />"; + private readonly string example6CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } + public bool ReversedIcon { get; set; } +} + +private List reversedIconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add, ReversedIcon = true }, + new() { Name = ""Edit"", Icon = BitIconName.Edit, ReversedIcon = true }, + new() { Name = ""Delete"", Icon = BitIconName.Delete, ReversedIcon = true } +];"; + + private readonly string example7RazorCode = @" + i.OnName }, + OffText = { Selector = i => i.OffName }, + OnTitle = { Selector = i => i.OnTitle }, + OffTitle = { Selector = i => i.OffTitle }, + OnIconName = { Selector = i => i.OnIcon }, + OffIconName = { Selector = i => i.OffIcon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" Toggled /> + + i.OnName }, + OffText = { Selector = i => i.OffName }, + OnTitle = { Selector = i => i.OnTitle }, + OffTitle = { Selector = i => i.OffTitle }, + OnIconName = { Selector = i => i.OnIcon }, + OffIconName = { Selector = i => i.OffIcon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" Toggled /> + + i.OnName }, + OffText = { Selector = i => i.OffName }, + OnTitle = { Selector = i => i.OnTitle }, + OffTitle = { Selector = i => i.OffTitle }, + OnIconName = { Selector = i => i.OnIcon }, + OffIconName = { Selector = i => i.OffIcon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" Toggled />"; + private readonly string example7CsharpCode = @" +public class Operation +{ + public string? OnIcon { get; set; } + public string? OffIcon { get; set; } + public string? OnName { get; set; } + public string? OffName { get; set; } + public string? OnTitle { get; set; } + public string? OffTitle { get; set; } + public bool ReversedIcon { get; set; } +} + +private List toggledCustoms = +[ + new() { OnName = ""Back (2X)"", OffName = ""Back"", OnIcon = BitIconName.RewindTwoX, OffIcon = BitIconName.Rewind }, + new() { OnTitle = ""Resume"", OffTitle = ""Play"", OnIcon = BitIconName.PlayResume, OffIcon = BitIconName.Play }, + new() { OnName = ""Forward (2X)"", OffName = ""Forward"", OnIcon = BitIconName.FastForwardTwoX, OffIcon = BitIconName.FastForward, ReversedIcon = true } +];"; + + private readonly string example8RazorCode = @" + + +"; + private readonly string example8CsharpCode = @" +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 example9RazorCode = @" + + + + + + + + + + +"; + private readonly string example9CsharpCode = @" +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 example10RazorCode = @" + + + + + + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example10CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } + public string? Class { get; set; } + public string? Style { get; set; } +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +]; + +private List styleClassCustoms = +[ + new() + { + Name = ""Styled"", + Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", + Icon = BitIconName.Brush, + }, + new() + { + Name = ""Classed"", + Class = ""custom-item"", + Icon = BitIconName.FormatPainter, + } +];"; + + 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 = @" + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example12CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } +} + +private List rtlCustoms = +[ + new() { Name = ""اضافه کردن"", Icon = BitIconName.Add }, + new() { Name = ""ویرایش"", Icon = BitIconName.Edit }, + new() { Name = ""حذف"", Icon = BitIconName.Delete } +];"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor index 4bdd3a2b85..f8988ea109 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor @@ -181,7 +181,87 @@ - + + +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+

+
Alternatively, each button can be set to IconOnly by simply leaving the text field empty.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
Reverses the positions of the icon and the main content of the button.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
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.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -204,7 +284,7 @@ - +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


@@ -231,7 +311,7 @@ - +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -248,7 +328,7 @@ - +
Managing button click events.


@@ -266,7 +346,7 @@ - +
Use BitButtonGroup in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs index 1f27935f6f..15b29a29c7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs @@ -22,6 +22,27 @@ public partial class _BitButtonGroupItemDemo new() { Text = "Delete", IconName = BitIconName.Delete } ]; + private List onlyIconItems = + [ + new() { Text = "Add", IconName = BitIconName.Add }, + new() { IconName = BitIconName.Edit }, + new() { Text = "Delete", IconName = BitIconName.Delete } + ]; + + private List reversedIconItems = + [ + new() { Text = "Add", IconName = BitIconName.Add, ReversedIcon = true }, + new() { Text = "Edit", IconName = BitIconName.Edit, ReversedIcon = true }, + new() { Text = "Delete", IconName = BitIconName.Delete, ReversedIcon = true } + ]; + + private List toggledItems = + [ + new() { OnText = "Back (2X)", OffText = "Back", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind }, + new() { OnTitle = "Resume", OffTitle = "Play", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play }, + new() { OnText = "Forward (2X)", OffText = "Forward", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true } + ]; + private List eventsItems = [ new() { Text = "Increase", IconName = BitIconName.Add }, @@ -58,242 +79,4 @@ protected override void OnInitialized() eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); }; eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); }; } - - - - private readonly string example1RazorCode = @" -"; - private readonly string example1CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example2RazorCode = @" - - - - - - - - - - -"; - private readonly string example2CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -}; - -private List disabledItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"", IsEnabled = false }, new() { Text = ""Delete"" } -};"; - - private readonly string example3RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - private readonly string example3CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example4RazorCode = @" - - -"; - private readonly string example4CsharpCode = @" -private List iconItems = new() -{ - new() { Text = ""Add"", IconName = BitIconName.Add }, - new() { Text = ""Edit"", IconName = BitIconName.Edit }, - new() { Text = ""Delete"", IconName = BitIconName.Delete } -};"; - - private readonly string example5RazorCode = @" - - -"; - private readonly string example5CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example6RazorCode = @" - - - - - - - - - - -"; - private readonly string example6CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example7RazorCode = @" - - - - - - -"; - private readonly string example7CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -}; - -private List styleClassItems = new() -{ - new() - { - Text = ""Styled"", - Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", - IconName = BitIconName.Brush, - }, - new() - { - Text = ""Classed"", - Class = ""custom-item"", - IconName = BitIconName.FormatPainter, - } -};"; - - 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() -{ - 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 = @" - - -"; - private readonly string example9CsharpCode = @" -private List rtlItems = new() -{ - new() { Text = ""اضافه کردن"", IconName = BitIconName.Add }, - new() { Text = ""ویرایش"", IconName = BitIconName.Edit }, - new() { Text = ""حذف"", IconName = BitIconName.Delete } -};"; } 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 new file mode 100644 index 0000000000..e41be97a4f --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs @@ -0,0 +1,287 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.ButtonGroup; + +public partial class _BitButtonGroupItemDemo +{ + private readonly string example1RazorCode = @" +"; + private readonly string example1CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example2RazorCode = @" + + + + + + + + + + +"; + private readonly string example2CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +]; + +private List disabledItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"", IsEnabled = false }, new() { Text = ""Delete"" } +];"; + + 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 List iconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add }, + new() { Text = ""Edit"", IconName = BitIconName.Edit }, + new() { Text = ""Delete"", IconName = BitIconName.Delete } +];"; + + private readonly string example5RazorCode = @" + + + + + + +"; + private readonly string example5CsharpCode = @" +private List iconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add }, + new() { Text = ""Edit"", IconName = BitIconName.Edit }, + new() { Text = ""Delete"", IconName = BitIconName.Delete } +]; + +private List onlyIconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add }, + new() { IconName = BitIconName.Edit }, + new() { Text = ""Delete"", IconName = BitIconName.Delete } +];"; + + private readonly string example6RazorCode = @" + + +"; + private readonly string example6CsharpCode = @" +private List reversedIconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add, ReversedIcon = true }, + new() { Text = ""Edit"", IconName = BitIconName.Edit, ReversedIcon = true }, + new() { Text = ""Delete"", IconName = BitIconName.Delete, ReversedIcon = true } +];"; + + private readonly string example7RazorCode = @" + + +"; + private readonly string example7CsharpCode = @" +private List toggledItems = +[ + new() { OnText = ""Back (2X)"", OffText = ""Back"", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind }, + new() { OnTitle = ""Resume"", OffTitle = ""Play"", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play }, + new() { OnText = ""Forward (2X)"", OffText = ""Forward"", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true } +];"; + + private readonly string example8RazorCode = @" + + +"; + private readonly string example8CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example9RazorCode = @" + + + + + + + + + + +"; + private readonly string example9CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example10RazorCode = @" + + + + + + +"; + private readonly string example10CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +]; + +private List styleClassItems = +[ + new() + { + Text = ""Styled"", + Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", + IconName = BitIconName.Brush, + }, + new() + { + Text = ""Classed"", + Class = ""custom-item"", + IconName = BitIconName.FormatPainter, + } +];"; + + 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 = @" + + +"; + private readonly string example12CsharpCode = @" +private List rtlItems = +[ + new() { Text = ""اضافه کردن"", IconName = BitIconName.Add }, + new() { Text = ""ویرایش"", IconName = BitIconName.Edit }, + new() { Text = ""حذف"", IconName = BitIconName.Delete } +];"; +} 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 78a2bcee32..6828f69be3 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 @@ -317,7 +317,135 @@ - + + +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+

+
Alternatively, each button can be set to IconOnly by simply leaving the text field empty.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+ + + + + +
Reverses the positions of the icon and the main content of the button.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+ + + + + +
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.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+ + + +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -346,7 +474,7 @@ - +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


@@ -391,7 +519,7 @@ - +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -416,7 +544,7 @@ - +
Managing button click events.


@@ -442,7 +570,7 @@ - +
Use BitButtonGroup in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs index 3512afd078..998174d625 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs @@ -4,356 +4,4 @@ public partial class _BitButtonGroupOptionDemo { private int clickCounter; private string? clickedOption; - - private readonly string example1RazorCode = @" - - - - -"; - - private readonly string example2RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - - 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 = @" - - - - - - - - - - - - - - - - -"; } 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 new file mode 100644 index 0000000000..796c28abae --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs @@ -0,0 +1,433 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.ButtonGroup; + +public partial class _BitButtonGroupOptionDemo +{ + private readonly string example1RazorCode = @" + + + + +"; + + private readonly string example2RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + private readonly string example3RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + 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 = @" + 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 = @" + + + + + + + + + + + + + + + + +"; +}