diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Link/BitLinkHtmlAttributesTest.razor b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Link/BitLinkHtmlAttributesTest.razor new file mode 100644 index 0000000000..cf0d7468c6 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Link/BitLinkHtmlAttributesTest.razor @@ -0,0 +1,5 @@ +I'm a link + +@code { + [Parameter] public string? Href { get; set; } +} \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Link/BitLinkTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Link/BitLinkTests.cs index 2c48cfb3e2..51054b151b 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Link/BitLinkTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Link/BitLinkTests.cs @@ -6,22 +6,371 @@ namespace Bit.BlazorUI.Tests.Components.Utilities.Link; [TestClass] public class BitLinkTests : BunitTestContext { + [DataTestMethod] + public void BitLinkShouldRenderExpectedElement() + { + var component = RenderComponent(); + + component.MarkupMatches(@""); + } + + [DataTestMethod, + DataRow("https://bitplatform.dev"), + DataRow("#go-to-section"), + DataRow(""), + DataRow(null) + ] + public void BitLinkShouldRenderHref(string href) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + }); + + if (href.HasNoValue()) + { + component.MarkupMatches(@""); + + //check clickable element + component.Find(".bit-lnk").Click(); + } + else if (href.StartsWith('#')) + { + component.MarkupMatches(@""); + + //check clickable element + component.Find(".bit-lnk").Click(); + } + else + { + component.MarkupMatches(@$""); + + Assert.ThrowsException(() => component.Find(".bit-lnk").Click()); + } + } + + [DataTestMethod, + DataRow(null, "_blank"), + DataRow(null, null), + DataRow(null, ""), + DataRow("https://bitplatform.dev", "_blank"), + DataRow("https://bitplatform.dev", null), + DataRow("https://bitplatform.dev", ""), + DataRow("#go-to-section", "_blank"), + DataRow("#go-to-section", null), + DataRow("#go-to-section", "") + ] + public void BitLinkShouldRespectTarget(string href, string target) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + parameters.Add(p => p.Target, target); + }); + + if (href.HasValue()) + { + if (href.StartsWith('#')) + { + component.MarkupMatches(@""); + } + else + { + if (target.HasValue()) + { + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } + } + } + else + { + component.MarkupMatches(@""); + } + } + + [DataTestMethod, + DataRow(null), + DataRow("https://bitplatform.dev"), + DataRow("#go-to-section") + ] + public void BitLinkShouldRespectIsEnabled(string href) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + parameters.Add(p => p.IsEnabled, false); + }); + + // This test specifically checks the disabled state of the component. + // Since the enabled state is the default state and is checked in all tests, we focus on verifying the disabled behavior here. + if (href.HasValue()) + { + component.MarkupMatches(@""); + } + else + { + component.MarkupMatches(@""); + } + } + + [DataTestMethod, + DataRow(null, "font-size: 14px; color: red;"), + DataRow(null, null), + DataRow("https://bitplatform.dev", "font-size: 14px; color: red;"), + DataRow("https://bitplatform.dev", null), + DataRow("#go-to-section", "font-size: 14px; color: red;"), + DataRow("#go-to-section", null) + ] + public void BitLinkShouldRespectStyle(string href, string style) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + parameters.Add(p => p.Style, style); + }); + + var styleAttribute = style.HasValue() ? @$"style=""{style}""" : null; + + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; + + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } + } + + [DataTestMethod, + DataRow(null, "test-class"), + DataRow(null, null), + DataRow("https://bitplatform.dev", "test-class"), + DataRow("https://bitplatform.dev", null), + DataRow("#go-to-section", "test-class"), + DataRow("#go-to-section", null) + ] + public void BitLinkShouldRespectClass(string href, string @class) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + parameters.Add(p => p.Class, @class); + }); + + var cssClass = @class.HasValue() ? $" {@class}" : null; + + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; + + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } + } + + [DataTestMethod, + DataRow(null, "test-id"), + DataRow(null, null), + DataRow("https://bitplatform.dev", "test-id"), + DataRow("https://bitplatform.dev", null), + DataRow("#go-to-section", "test-id"), + DataRow("#go-to-section", null) + ] + public void BitLinkShouldRespectId(string href, string id) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Id, id); + parameters.Add(p => p.Href, href); + }); + + var expectedId = id.HasValue() ? id : component.Instance.UniqueId.ToString(); + + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; + + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } + } + + [DataTestMethod, + DataRow(null, BitDir.Rtl), + DataRow(null, BitDir.Ltr), + DataRow(null, BitDir.Auto), + DataRow(null, null), + DataRow("https://bitplatform.dev", BitDir.Rtl), + DataRow("https://bitplatform.dev", BitDir.Ltr), + DataRow("https://bitplatform.dev", BitDir.Auto), + DataRow("https://bitplatform.dev", null), + DataRow("#go-to-section", BitDir.Rtl), + DataRow("#go-to-section", BitDir.Ltr), + DataRow("#go-to-section", BitDir.Auto), + DataRow("#go-to-section", null) + ] + public void BitLinkShouldRespectDir(string href, BitDir? dir) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Dir, dir); + parameters.Add(p => p.Href, href); + }); + + var cssClass = dir is BitDir.Rtl ? " bit-rtl" : null; + var dirAttribute = dir.HasValue ? @$"dir=""{dir.Value.ToString().ToLower()}""" : null; + + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; + + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } + } + + [DataTestMethod, + DataRow(null, BitVisibility.Visible), + DataRow(null, BitVisibility.Collapsed), + DataRow(null, BitVisibility.Hidden), + DataRow("https://bitplatform.dev", BitVisibility.Visible), + DataRow("https://bitplatform.dev", BitVisibility.Collapsed), + DataRow("https://bitplatform.dev", BitVisibility.Hidden), + DataRow("#go-to-section", BitVisibility.Visible), + DataRow("#go-to-section", BitVisibility.Collapsed), + DataRow("#go-to-section", BitVisibility.Hidden) + ] + public void BitLinkShouldRespectVisibility(string href, BitVisibility visibility) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + parameters.Add(p => p.Visibility, visibility); + }); + + var hrefAttribute = href.HasValue() && href.StartsWith('#') ? null : @$"href=""{href}"""; + var visibilityAttribute = visibility switch + { + BitVisibility.Visible => null, + BitVisibility.Hidden => @"style=""visibility: hidden;""", + BitVisibility.Collapsed => @"style=""display: none;""" + }; + + if (href.HasValue()) + { + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } + } + + [DataTestMethod, + DataRow(null, "Bit Blazor UI"), + DataRow(null, "Bit Blazor UI"), + DataRow(null, null), + DataRow("https://bitplatform.dev", "Bit Blazor UI"), + DataRow("https://bitplatform.dev", "Bit Blazor UI"), + DataRow("https://bitplatform.dev", null), + DataRow("#go-to-section", "Bit Blazor UI"), + DataRow("#go-to-section", "Bit Blazor UI"), + DataRow("#go-to-section", null) + ] + public void BitLinkShouldRespectChildContent(string href, string childContent) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + parameters.AddChildContent(childContent); + }); + + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; + + component.MarkupMatches(@$"{childContent}"); + } + else + { + component.MarkupMatches(@$""); + } + } + + [DataTestMethod, + DataRow(null, "Bit Blazor UI"), + DataRow(null, null), + DataRow("https://bitplatform.dev", "Bit Blazor UI"), + DataRow("https://bitplatform.dev", null), + DataRow("#go-to-section", "Bit Blazor UI"), + DataRow("#go-to-section", null) + ] + public void BitLinkShouldRespectAriaLabel(string href, string ariaLabel) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + parameters.Add(p => p.AriaLabel, ariaLabel); + }); + + var ariaLabelAttribute = ariaLabel.HasValue() ? @$"aria-label=""{ariaLabel}""" : null; + + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; + + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } + } + + [DataTestMethod, - DataRow("bitplatform.dev"), - DataRow("") + DataRow(null, true), + DataRow(null, false), + DataRow("https://bitplatform.dev", true), + DataRow("https://bitplatform.dev", false), + DataRow("#go-to-section", true), + DataRow("#go-to-section", false) ] - public void BitLinkShouldRenderExpectedElementBaseOnHref(string href) + public void BitLinkShouldRespectUnderlined(string href, bool underlined) { var component = RenderComponent(parameters => { parameters.Add(p => p.Href, href); + parameters.Add(p => p.Underlined, underlined); }); - var bitLink = component.Find(".bit-lnk"); + var cssClass = underlined ? " bit-lnk-und" : null; - var tagName = href.HasValue() ? "a" : "button"; + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; - Assert.AreEqual(tagName, bitLink.TagName, ignoreCase: true); + component.MarkupMatches(@$""); + } + else + { + component.MarkupMatches(@$""); + } } [TestMethod, @@ -44,23 +393,53 @@ public void BitLinkButtonOnClickTest(bool isEnabled) Assert.AreEqual(isEnabled ? 1 : 0, currentCount); } - [DataTestMethod, + [TestMethod, DataRow(true), - DataRow(false), - DataRow(null) + DataRow(false) ] - public void BitLinkShouldRespectUnderLineStyle(bool? hasUnderline) + public void BitLinkScrollIntoViewTest(bool isEnabled) { var component = RenderComponent(parameters => { - if (hasUnderline.HasValue) - { - parameters.Add(p => p.Underlined, hasUnderline.Value); - } + parameters.Add(p => p.IsEnabled, isEnabled); + parameters.Add(p => p.Href, "#go-to-section"); }); - var bitLink = component.Find(".bit-lnk"); + var bitLinkButton = component.Find(".bit-lnk"); - Assert.AreEqual(hasUnderline ?? false, bitLink.ClassList.Contains("bit-lnk-und")); + bitLinkButton.Click(); + + if (isEnabled) + { + Context.JSInterop.VerifyInvoke("BitBlazorUI.Utils.scrollElementIntoView"); + } + else + { + Context.JSInterop.VerifyNotInvoke("BitBlazorUI.Utils.scrollElementIntoView"); + } + } + + [DataTestMethod, + DataRow("https://bitplatform.dev"), + DataRow("#go-to-section"), + DataRow(""), + DataRow(null)] + public void BitLinkShouldRespectHtmlAttributes(string href) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Href, href); + }); + + if (href.HasValue()) + { + var hrefAttribute = href.StartsWith('#') ? null : @$"href=""{href}"""; + + component.MarkupMatches(@$"I'm a link"); + } + else + { + component.MarkupMatches(@""); + } } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor index 7414cc93e0..036addc7c6 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)" style="@GetStyle(item)" - class="bit-btg-itm@(GetItemClass(i, isEnabled)) @GetClass(item)"> + class="bit-btg-itm @GetClass(item)"> @if (template is not null) { @template(item) 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 49972ffeb4..6fcbf39c39 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs @@ -7,8 +7,8 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas { private bool vertical; private BitSize? size; + private BitColor? color; private BitVariant? variant; - private BitSeverity? severity; private List _items = []; private IEnumerable _oldItems = default!; @@ -28,17 +28,17 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas [Parameter] public RenderFragment? ChildContent { get; set; } /// - /// The severity of the button group. + /// Defines the general colors available in the bit BlazorUI. /// [Parameter] - public BitSeverity? Severity + public BitColor? Color { - get => severity; + get => color; set { - if (severity == value) return; + if (color == value) return; - severity = value; + color = value; ClassBuilder.Reset(); } @@ -121,6 +121,7 @@ public bool Vertical } + internal void RegisterOption(BitButtonGroupOption option) { var item = (option as TItem)!; @@ -137,6 +138,7 @@ internal void UnregisterOption(BitButtonGroupOption option) } + protected override string RootElementClass => "bit-btg"; protected override void RegisterCssClasses() @@ -149,14 +151,17 @@ protected override void RegisterCssClasses() _ => "bit-btg-fil" }); - ClassBuilder.Register(() => Severity switch - { - BitSeverity.Info => "bit-btg-inf", - BitSeverity.Success => "bit-btg-suc", - BitSeverity.Warning => "bit-btg-war", - BitSeverity.SevereWarning => "bit-btg-swa", - BitSeverity.Error => "bit-btg-err", - _ => string.Empty + ClassBuilder.Register(() => Color switch + { + BitColor.Primary => "bit-btg-pri", + BitColor.Secondary => "bit-btg-sec", + BitColor.Tertiary => "bit-btg-ter", + BitColor.Info => "bit-btg-inf", + BitColor.Success => "bit-btg-suc", + BitColor.Warning => "bit-btg-wrn", + BitColor.SevereWarning => "bit-btg-swr", + BitColor.Error => "bit-btg-err", + _ => "bit-btg-pri" }); ClassBuilder.Register(() => Size switch @@ -164,7 +169,7 @@ protected override void RegisterCssClasses() BitSize.Small => "bit-btg-sm", BitSize.Medium => "bit-btg-md", BitSize.Large => "bit-btg-lg", - _ => string.Empty + _ => "bit-btg-md" }); ClassBuilder.Register(() => Vertical ? "bit-btg-vrt" : ""); @@ -183,54 +188,6 @@ protected override Task OnParametersSetAsync() - private string? GetItemClass(int index, bool isEnabled) - { - StringBuilder className = new StringBuilder(); - - className.Append(Variant switch - { - BitVariant.Fill => " bit-btg-ifl", - BitVariant.Outline => " bit-btg-iot", - BitVariant.Text => " bit-btg-itx", - _ => " bit-btg-ifl" - }); - - className.Append(Severity switch - { - BitSeverity.Info => " bit-btg-iin", - BitSeverity.Success => " bit-btg-isu", - BitSeverity.Warning => " bit-btg-iwa", - BitSeverity.SevereWarning => " bit-btg-isw", - BitSeverity.Error => " bit-btg-ier", - _ => string.Empty - }); - - className.Append(Size switch - { - BitSize.Small => " bit-btg-ism", - BitSize.Medium => " bit-btg-imd", - BitSize.Large => " bit-btg-ilg", - _ => string.Empty - }); - - if (index == 0) - { - className.Append(" bit-btg-ift"); - } - - if (index == (_items.Count - 1)) - { - className.Append(" bit-btg-ilt"); - } - - if (isEnabled is false) - { - className.Append(" bit-btg-ids"); - } - - return className.ToString(); - } - private async Task HandleOnItemClick(TItem item) { if (GetIsEnabled(item) is false) return; @@ -260,7 +217,6 @@ private async Task HandleOnItemClick(TItem item) } } - private string? GetClass(TItem? item) { if (item is null) return null; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss index 8d226ff687..f1daf7c6fc 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss @@ -8,34 +8,19 @@ border-width: $shp-border-width; border-style: $shp-border-style; border-radius: $shp-border-radius; + --bit-btg-itm-brd-wid: #{$shp-border-width}; + --bit-btg-itm-brd-wid-ver: 0; - &.bit-dis { - border-color: $clr-brd-dis; - - .bit-btg-itm { - border-color: $clr-brd-dis; - } + &.bit-dis, &.bit-dis * { + cursor: default; + color: $clr-fg-dis; + pointer-events: none; } -} - -.bit-btg-fil { - border-color: var(--bit-btg-pri-brd-clr); - --bit-btg-pri-brd-clr: #{$clr-pri}; - --bit-btg-clr-bg-dis: #{$clr-bg-dis}; -} - -.bit-btg-otl { - border-color: var(--bit-btg-sec-brd-clr); - --bit-btg-sec-brd-clr: #{$clr-sec-text}; - --bit-btg-clr-bg-dis: #{$clr-bg-pri}; -} - -.bit-btg-txt { - border-color: transparent; - --bit-btg-clr-bg-dis: transparent; &.bit-dis { - border-color: transparent; + border-color: $clr-brd-dis; + --bit-btg-itm-clr-bg: #{$clr-bg-dis}; + --bit-btg-itm-clr-brd: #{$clr-brd-dis}; } } @@ -43,207 +28,230 @@ display: flex; gap: spacing(1); cursor: pointer; + border-width: 0; text-align: left; align-items: center; line-height: inherit; text-decoration: none; box-sizing: border-box; - font-size: spacing(1.75); - border-style: $shp-border-style; - border-width: $shp-border-width; - padding: spacing(0.7) spacing(2); font-family: $tg-font-family; font-weight: $tg-font-weight; - border-block-end-width: 0; - border-block-start-width: 0; - border-inline-start-width: 0; -} - -.bit-btg-ilt { - border-inline-end-width: 0; -} - -.bit-btg-ifl { - color: var(--bit-btg-itm-pri-clr); - background-color: var(--bit-btg-itm-bg-clr); - border-color: var(--bit-btg-itm-pri-brd-clr); - --bit-btg-itm-bg-clr: #{$clr-pri}; - --bit-btg-itm-pri-clr: #{$clr-pri-text}; - --bit-btg-itm-pri-brd-clr: #{$clr-pri-dark}; - --bit-btg-itm-pri-hover-bg-clr: #{$clr-pri-hover}; - --bit-btg-itm-pri-active-bg-clr: #{$clr-pri-active}; + border-style: $shp-border-style; + color: var(--bit-btg-itm-clr); + padding: var(--bit-btg-itm-padding); + font-size: var(--bit-btg-itm-fontsize); + border-color: var(--bit-btg-itm-clr-brd); + background-color: var(--bit-btg-itm-clr-bg); + border-inline-end-width: var(--bit-btg-itm-brd-wid); + border-block-end-width: var(--bit-btg-itm-brd-wid-ver); @media (hover: hover) { &:hover { - background-color: var(--bit-btg-itm-pri-hover-bg-clr); + color: var(--bit-btg-itm-clr-hover); + background-color: var(--bit-btg-itm-clr-bg-hover); } } &:active { - background-color: var(--bit-btg-itm-pri-active-bg-clr); + background-color: var(--bit-btg-itm-clr-bg-active); + } + + &[disabled] { + cursor: default; + color: $clr-fg-dis; + pointer-events: none; + background-color: var(--bit-btg-itm-clr-bg-dis); + } + + &:last-child { + border-block-end-width: 0; + border-inline-end-width: 0; } } -.bit-btg-iot { - color: var(--bit-btg-itm-sec-clr); - background-color: $clr-sec; - border-color: var(--bit-btg-itm-sec-brd-clr); - --bit-btg-itm-sec-clr: #{$clr-sec-text}; - --bit-btg-itm-sec-brd-clr: #{$clr-sec-text}; - --bit-btg-itm-sec-hover-bg-clr: #{$clr-sec-hover}; - --bit-btg-itm-sec-active-bg-clr: #{$clr-sec-active}; +.bit-btg-btx { + white-space: nowrap; + text-overflow: ellipsis; +} + +.bit-btg-fil { + border-color: var(--bit-btg-clr-brd); + --bit-btg-itm-clr: var(--bit-btg-clr); + --bit-btg-itm-clr-bg: var(--bit-btg-clr-bg); + --bit-btg-itm-clr-brd: var(--bit-btg-clr-brd2); + --bit-btg-itm-clr-hover: var(--bit-btg-clr-hover); + --bit-btg-itm-clr-bg-hover: var(--bit-btg-clr-bg-hover); + --bit-btg-itm-clr-bg-active: var(--bit-btg-clr-bg-active); + --bit-btg-itm-clr-bg-dis: var(--bit-btg-clr-bg-dis); @media (hover: hover) { &:hover { - background-color: var(--bit-btg-itm-sec-hover-bg-clr); + border-color: var(--bit-btg-clr-brd-hover); } } &:active { - background-color: var(--bit-btg-itm-sec-active-bg-clr); + border-color: var(--bit-btg-clr-brd-active); } } -.bit-btg-itx { - color: var(--bit-btg-itm-sec-clr); - background-color: transparent; - border-color: var(--bit-btg-itm-sec-brd-clr); - --bit-btg-itm-sec-clr: #{$clr-sec-text}; - --bit-btg-itm-sec-brd-clr: #{$clr-sec-text}; - --bit-btg-itm-sec-hover-bg-clr: #{$clr-sec-hover}; - --bit-btg-itm-sec-active-bg-clr: #{$clr-sec-active}; +.bit-btg-otl { + border-color: var(--bit-btg-clr-brd); + --bit-btg-itm-clr: var(--bit-btg-clr-bg); + --bit-btg-itm-clr-bg: transparent; + --bit-btg-itm-clr-brd: var(--bit-btg-clr-brd2); + --bit-btg-itm-clr-hover: var(--bit-btg-clr-hover); + --bit-btg-itm-clr-bg-hover: var(--bit-btg-clr-bg-hover); + --bit-btg-itm-clr-bg-active: var(--bit-btg-clr-bg-active); + --bit-btg-itm-clr-bg-dis: transprent; @media (hover: hover) { &:hover { - background-color: var(--bit-btg-itm-sec-hover-bg-clr); + border-color: var(--bit-btg-clr-brd-hover); } } &:active { - background-color: var(--bit-btg-itm-sec-active-bg-clr); + border-color: var(--bit-btg-clr-brd-active); } } -.bit-btg-inf { - --bit-btg-pri-brd-clr: #{$clr-inf}; - --bit-btg-sec-brd-clr: #{$clr-inf}; -} - -.bit-btg-iin { - --bit-btg-itm-bg-clr: #{$clr-inf}; - --bit-btg-itm-pri-clr: #{$clr-fg-pri}; - --bit-btg-itm-pri-brd-clr: #{$clr-inf}; - --bit-btg-itm-pri-hover-bg-clr: #{$clr-inf-hover}; - --bit-btg-itm-pri-active-bg-clr: #{$clr-inf-active}; - --bit-btg-itm-sec-clr: #{$clr-inf}; - --bit-btg-itm-sec-brd-clr: #{$clr-inf}; - --bit-btg-itm-sec-hover-bg-clr: #{$clr-inf-hover}; - --bit-btg-itm-sec-active-bg-clr: #{$clr-inf-active}; -} +.bit-btg-txt { + border-color: transparent; + --bit-btg-itm-clr: var(--bit-btg-clr-bg); + --bit-btg-itm-clr-bg: transparent; + --bit-btg-itm-clr-brd: var(--bit-btg-clr-brd2); + --bit-btg-itm-clr-hover: var(--bit-btg-clr-hover); + --bit-btg-itm-clr-bg-hover: var(--bit-btg-clr-bg-hover); + --bit-btg-itm-clr-bg-active: var(--bit-btg-clr-bg-active); + --bit-btg-itm-clr-bg-dis: transprent; -.bit-btg-suc { - --bit-btg-pri-brd-clr: #{$clr-suc}; - --bit-btg-sec-brd-clr: #{$clr-suc}; + &.bit-dis { + border-color: transparent; + } } -.bit-btg-isu { - --bit-btg-itm-bg-clr: #{$clr-suc}; - --bit-btg-itm-pri-clr: #{$clr-fg-pri}; - --bit-btg-itm-pri-brd-clr: #{$clr-suc}; - --bit-btg-itm-pri-hover-bg-clr: #{$clr-suc-hover}; - --bit-btg-itm-pri-active-bg-clr: #{$clr-suc-active}; - --bit-btg-itm-sec-clr: #{$clr-suc}; - --bit-btg-itm-sec-brd-clr: #{$clr-suc}; - --bit-btg-itm-sec-hover-bg-clr: #{$clr-suc-hover}; - --bit-btg-itm-sec-active-bg-clr: #{$clr-suc-active}; +.bit-btg-pri { + --bit-btg-clr-brd: #{$clr-pri}; + --bit-btg-clr: #{$clr-pri-text}; + --bit-btg-clr-bg: #{$clr-pri}; + --bit-btg-clr-brd2: #{$clr-pri-dark}; + --bit-btg-clr-hover: #{$clr-pri-text}; + --bit-btg-clr-brd-hover: #{$clr-pri-hover}; + --bit-btg-clr-brd-active: #{$clr-pri-active}; + --bit-btg-clr-bg-hover: #{$clr-pri-hover}; + --bit-btg-clr-bg-active: #{$clr-pri-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-war { - --bit-btg-pri-brd-clr: #{$clr-wrn}; - --bit-btg-sec-brd-clr: #{$clr-wrn}; +.bit-btg-sec { + --bit-btg-clr-brd: #{$clr-sec}; + --bit-btg-clr: #{$clr-sec-text}; + --bit-btg-clr-bg: #{$clr-sec}; + --bit-btg-clr-brd2: #{$clr-sec-dark}; + --bit-btg-clr-hover: #{$clr-sec-text}; + --bit-btg-clr-brd-hover: #{$clr-sec-hover}; + --bit-btg-clr-brd-active: #{$clr-sec-active}; + --bit-btg-clr-bg-hover: #{$clr-sec-hover}; + --bit-btg-clr-bg-active: #{$clr-sec-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-iwa { - --bit-btg-itm-bg-clr: #{$clr-wrn}; - --bit-btg-itm-pri-clr: #{$clr-fg-pri}; - --bit-btg-itm-pri-brd-clr: #{$clr-wrn}; - --bit-btg-itm-pri-hover-bg-clr: #{$clr-wrn-hover}; - --bit-btg-itm-pri-active-bg-clr: #{$clr-wrn-active}; - --bit-btg-itm-sec-clr: #{$clr-wrn}; - --bit-btg-itm-sec-brd-clr: #{$clr-wrn}; - --bit-btg-itm-sec-hover-bg-clr: #{$clr-wrn-hover}; - --bit-btg-itm-sec-active-bg-clr: #{$clr-wrn-active}; +.bit-btg-ter { + --bit-btg-clr-brd: #{$clr-ter}; + --bit-btg-clr: #{$clr-ter-text}; + --bit-btg-clr-bg: #{$clr-ter}; + --bit-btg-clr-brd2: #{$clr-ter-dark}; + --bit-btg-clr-hover: #{$clr-ter-text}; + --bit-btg-clr-brd-hover: #{$clr-ter-hover}; + --bit-btg-clr-brd-active: #{$clr-ter-active}; + --bit-btg-clr-bg-hover: #{$clr-ter-hover}; + --bit-btg-clr-bg-active: #{$clr-ter-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-swa { - --bit-btg-pri-brd-clr: #{$clr-swr}; - --bit-btg-sec-brd-clr: #{$clr-swr}; +.bit-btg-inf { + --bit-btg-clr-brd: #{$clr-inf}; + --bit-btg-clr: #{$clr-inf-text}; + --bit-btg-clr-bg: #{$clr-inf}; + --bit-btg-clr-brd2: #{$clr-inf-dark}; + --bit-btg-clr-hover: #{$clr-inf-text}; + --bit-btg-clr-brd-hover: #{$clr-inf-hover}; + --bit-btg-clr-brd-active: #{$clr-inf-active}; + --bit-btg-clr-bg-hover: #{$clr-inf-hover}; + --bit-btg-clr-bg-active: #{$clr-inf-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-isw { - --bit-btg-itm-bg-clr: #{$clr-swr}; - --bit-btg-itm-pri-clr: #{$clr-fg-pri}; - --bit-btg-itm-pri-brd-clr: #{$clr-swr}; - --bit-btg-itm-pri-hover-bg-clr: #{$clr-swr-hover}; - --bit-btg-itm-pri-active-bg-clr: #{$clr-swr-active}; - --bit-btg-itm-sec-clr: #{$clr-swr}; - --bit-btg-itm-sec-brd-clr: #{$clr-swr}; - --bit-btg-itm-sec-hover-bg-clr: #{$clr-swr-hover}; - --bit-btg-itm-sec-active-bg-clr: #{$clr-swr-active}; +.bit-btg-suc { + --bit-btg-clr-brd: #{$clr-suc}; + --bit-btg-clr: #{$clr-suc-text}; + --bit-btg-clr-bg: #{$clr-suc}; + --bit-btg-clr-brd2: #{$clr-suc-dark}; + --bit-btg-clr-hover: #{$clr-suc-text}; + --bit-btg-clr-brd-hover: #{$clr-suc-hover}; + --bit-btg-clr-brd-active: #{$clr-suc-active}; + --bit-btg-clr-bg-hover: #{$clr-suc-hover}; + --bit-btg-clr-bg-active: #{$clr-suc-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-err { - --bit-btg-pri-brd-clr: #{$clr-err}; - --bit-btg-sec-brd-clr: #{$clr-err}; +.bit-btg-wrn { + --bit-btg-clr-brd: #{$clr-wrn}; + --bit-btg-clr: #{$clr-wrn-text}; + --bit-btg-clr-bg: #{$clr-wrn}; + --bit-btg-clr-brd2: #{$clr-wrn-dark}; + --bit-btg-clr-hover: #{$clr-wrn-text}; + --bit-btg-clr-brd-hover: #{$clr-wrn-hover}; + --bit-btg-clr-brd-active: #{$clr-wrn-active}; + --bit-btg-clr-bg-hover: #{$clr-wrn-hover}; + --bit-btg-clr-bg-active: #{$clr-wrn-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-ier { - --bit-btg-itm-bg-clr: #{$clr-err}; - --bit-btg-itm-pri-clr: #{$clr-fg-pri}; - --bit-btg-itm-pri-brd-clr: #{$clr-err}; - --bit-btg-itm-pri-hover-bg-clr: #{$clr-err-hover}; - --bit-btg-itm-pri-active-bg-clr: #{$clr-err-active}; - --bit-btg-itm-sec-clr: #{$clr-err}; - --bit-btg-itm-sec-brd-clr: #{$clr-err}; - --bit-btg-itm-sec-hover-bg-clr: #{$clr-err-hover}; - --bit-btg-itm-sec-active-bg-clr: #{$clr-err-active}; +.bit-btg-swr { + --bit-btg-clr-brd: #{$clr-swr}; + --bit-btg-clr: #{$clr-swr-text}; + --bit-btg-clr-bg: #{$clr-swr}; + --bit-btg-clr-brd2: #{$clr-swr-dark}; + --bit-btg-clr-hover: #{$clr-swr-text}; + --bit-btg-clr-brd-hover: #{$clr-swr-hover}; + --bit-btg-clr-brd-active: #{$clr-swr-active}; + --bit-btg-clr-bg-hover: #{$clr-swr-hover}; + --bit-btg-clr-bg-active: #{$clr-swr-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-vrt { - flex-direction: column; - - .bit-btg-itm { - border-width: $shp-border-width; - border-block-start-width: 0; - border-inline-start-width: 0; - border-inline-end-width: 0; - } - - .bit-btg-ilt { - border-block-end-width: 0; - } +.bit-btg-err { + --bit-btg-clr-brd: #{$clr-err}; + --bit-btg-clr: #{$clr-err-text}; + --bit-btg-clr-bg: #{$clr-err}; + --bit-btg-clr-brd2: #{$clr-err-dark}; + --bit-btg-clr-hover: #{$clr-err-text}; + --bit-btg-clr-brd-hover: #{$clr-err-hover}; + --bit-btg-clr-brd-active: #{$clr-err-active}; + --bit-btg-clr-bg-hover: #{$clr-err-hover}; + --bit-btg-clr-bg-active: #{$clr-err-active}; + --bit-btg-clr-bg-dis: #{$clr-bg-dis}; } -.bit-btg-ism { - font-size: spacing(1.5); - padding: spacing(0.5) spacing(1.5); +.bit-btg-sm { + --bit-btg-itm-fontsize: #{spacing(1.5)}; + --bit-btg-itm-padding: #{spacing(0.5)} #{spacing(1.5)}; } -.bit-btg-ilg { - font-size: spacing(2); - padding: spacing(0.9) spacing(2.5); +.bit-btg-md { + --bit-btg-itm-fontsize: #{spacing(1.75)}; + --bit-btg-itm-padding: #{spacing(0.7)} #{spacing(2.0)}; } -.bit-btg-btx { - white-space: nowrap; - text-overflow: ellipsis; +.bit-btg-lg { + --bit-btg-itm-fontsize: #{spacing(2.0)}; + --bit-btg-itm-padding: #{spacing(0.9)} #{spacing(2.5)}; } -.bit-btg-ids { - cursor: default; - user-select: none; - pointer-events: none; - -webkit-user-select: none; - color: $clr-fg-dis; - background-color: var(--bit-btg-clr-bg-dis); +.bit-btg-vrt { + flex-direction: column; + --bit-btg-itm-brd-wid: 0; + --bit-btg-itm-brd-wid-ver: #{$shp-border-width}; } 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 43d9289959..b0fb98ce56 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 @@ -6,10 +6,19 @@ public partial class BitButtonGroupDemo [ new() { - Name = "ItemTemplate", - Type = "RenderFragment?", + Name = "ChildContent", + Type = "RenderFragment?", DefaultValue = "null", - Description = "The content inside the item can be customized.", + Description = "The content of the BitButtonGroup, that are BitButtonGroupOption components.", + }, + new() + { + Name = "Color", + Type = "BitColor?", + DefaultValue = "null", + Description = "The general color of the button group.", + LinkType = LinkType.Link, + Href = "#color-enum", }, new() { @@ -25,7 +34,7 @@ public partial class BitButtonGroupDemo Name = "ItemTemplate", Type = "RenderFragment?", DefaultValue = "null", - Description = "The content inside the item can be customized." + Description = "The content inside the item can be customized.", }, new() { @@ -50,15 +59,6 @@ public partial class BitButtonGroupDemo Description = "Alias of ChildContent.", }, new() - { - Name = "Severity", - Type = "BitSeverity?", - DefaultValue = "null", - Description = "The severity of the button group.", - LinkType = LinkType.Link, - Href = "#severity-enum", - }, - new() { Name = "Size", Type = "BitSize", @@ -348,40 +348,58 @@ public partial class BitButtonGroupDemo }, new() { - Id = "severity-enum", - Name = "BitSeverity", + Id = "color-enum", + Name = "BitColor", Description = "", Items = [ new() { - Name= "Info", - Description="Info styled Button.", + Name= "Primary", + Description="Primary general color.", Value="0", }, new() { - Name= "Success", - Description="Success styled Button.", + Name= "Secondary", + Description="Secondary general color.", Value="1", }, new() { - Name= "Warning", - Description="Warning styled Button.", + Name= "Tertiary", + Description="Tertiary general color.", Value="2", }, new() { - Name= "SevereWarning", - Description="Severe Warning styled Button.", + Name= "Info", + Description="Info general color.", Value="3", }, new() { - Name= "Error", - Description="Error styled Button.", + Name= "Success", + Description="Success general color.", Value="4", + }, + new() + { + Name= "Warning", + Description="Warning general color.", + Value="5", + }, + new() + { + Name= "SevereWarning", + Description="Severe Warning general color.", + Value="6", + }, + new() + { + Name= "Error", + Description="Error general color.", + Value="7", } ] }, 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 ae32ca9724..3bfcf56ca5 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 @@ -2,7 +2,7 @@
The buttons can be grouped by putting them in a ButtonGroup component.

- + @@ -12,37 +12,90 @@

Fill (default)
- - - + + +


Outline
- - - + + +


Text
- - - + + +
- + + +
Offering a range of specialized colors, providing visual cues for specific states within your application.
+

+
+
Primary
+ + + +
+

+
+
Secondary
+ + + +
+

+
+
Tertiary
+ + + +
+

+
+
Info
+ + + +
+

+
+
Success
+ + + +
+

+
+
Warning
+ + + +
+

+
+
SevereWarning
+ + + +
+

+
+
Error
+ + + +
+ + + +
Each item in the ButtonGroup can have an icon.


@@ -69,186 +122,118 @@ - +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


Fill (default)
- +


Outline
- +


Text
- +
- + -
Managing button click events.
-

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

-
-
Item's Click event:
- -
Click count: @clickCounter
-
- - - - - -
Offering a range of specialized colors, providing visual cues for specific states within your application.
-

-
-
Info
- - - -
-

-
-
Success
- - - -
+
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


-
Warning
- - - +
Small
+ + +


-
SevereWarning
- - - +
Medium
+ + +


-
Error
- - - +
Large
+ + +
- + -
Different sizes for buttons to meet design needs, ensuring flexibility within your application.
-

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


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


-
Large
- - - +
Item's style & class:
+
- + -
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
+
Managing button click events.


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


-
Item's style & class:
- Item's Click event:
+ + IconName = { Selector = i => i.Icon }, + OnClick = { Selector = i => i.Clicked } })" /> +
Click count: @clickCounter
 - + -

- -

- + 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 5b235faaa2..a49f305b78 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 @@ -5,6 +5,8 @@ public partial class _BitButtonGroupCustomDemo private int clickCounter; private string? clickedCustom; + private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + private List basicCustoms = [ new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" } @@ -62,8 +64,10 @@ protected override void OnInitialized() private readonly string example1RazorCode = @" - i.Name } })"" />"; +"; private readonly string example1CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + public class ButtonGroupActionItem { public string? Name { get; set; } @@ -75,27 +79,20 @@ public class ButtonGroupActionItem };"; private readonly string example2RazorCode = @" - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" />"; + + + + + + + + + + +"; private readonly string example2CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + public class ButtonGroupActionItem { public string? Name { get; set; } @@ -113,6 +110,51 @@ public class ButtonGroupActionItem };"; private readonly string example3RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + private readonly string example3CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class ButtonGroupActionItem +{ + 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 } })"" /> @@ -124,7 +166,7 @@ public class ButtonGroupActionItem i.Name }, IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example3CsharpCode = @" + private readonly string example4CsharpCode = @" public class ButtonGroupActionItem { public string? Name { get; set; } @@ -138,16 +180,13 @@ public class ButtonGroupActionItem new() { Name = ""Delete"", Icon = BitIconName.Delete } };"; - private readonly string example4RazorCode = @" - i.Name } })"" /> - - i.Name } })"" /> + private readonly string example5RazorCode = @" + + +"; + private readonly string example5CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - i.Name } })"" />"; - private readonly string example4CsharpCode = @" public class ButtonGroupActionItem { public string? Name { get; set; } @@ -158,114 +197,21 @@ public class ButtonGroupActionItem new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } };"; - private readonly string example5RazorCode = @" - clickedCustom = item.Name"" - NameSelectors=""@(new() { Text = { Selector = i => i.Name } })"" /> -
Clicked item: @clickedCustom
- - i.Name }, - IconName = { Selector = i => i.Icon }, - OnClick = { Selector = i => i.Clicked } })"" /> -
Click count: @clickCounter
"; - private readonly string example5CsharpCode = @" -public class ButtonGroupActionItem -{ - public string? Name { get; set; } - public string? Icon { get; set; } - public Action? Clicked { get; set; } -} - -private int clickCounter; + private readonly string example6RazorCode = @" + + + -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 example6RazorCode = @" - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" />"; + + +"; private readonly string example6CsharpCode = @" -public class ButtonGroupActionItem -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - private readonly string example7RazorCode = @" - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" /> - - i.Name } })"" /> - i.Name } })"" /> - i.Name } })"" />"; - private readonly string example7CsharpCode = @" public class ButtonGroupActionItem { public string? Name { get; set; } @@ -276,7 +222,7 @@ public class ButtonGroupActionItem new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } };"; - private readonly string example8RazorCode = @" + private readonly string example7RazorCode = @" - i.Name } })"" /> - i.Name } })"" /> + + i.Name }, IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example8CsharpCode = @" + private readonly string example7CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + public class ButtonGroupActionItem { public string? Name { get; set; } @@ -328,6 +274,48 @@ public class ButtonGroupActionItem } };"; + 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 ButtonGroupActionItem +{ + 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 = @" - + + +
Offering a range of specialized colors, providing visual cues for specific states within your application.
+

+
+
Primary
+ + + +
+

+
+
Secondary
+ + + +
+

+
+
Tertiary
+ + + +
+

+
+
Info
+ + + +
+

+
+
Success
+ + + +
+

+
+
Warning
+ + + +
+

+
+
SevereWarning
+ + + +
+

+
+
Error
+ + + +
+ + + +
Each item in the ButtonGroup can have an icon.


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


@@ -77,66 +139,7 @@ - - -
Managing button click events.
-

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

-
-
Item's Click event:
- -
Click count: @clickCounter
-
- - - - - -
Offering a range of specialized colors, providing visual cues for specific states within your application.
-

-
-
Info
- - - -
-

-
-
Success
- - - -
-

-
-
Warning
- - - -
-

-
-
SevereWarning
- - - -
-

-
-
Error
- - - -
- - - - +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


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


@@ -180,12 +183,32 @@ - + - +
Managing button click events.


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


- +
+
Item's Click event:
+ +
Click count: @clickCounter
+
+ + + + + +
+ +

+ +

+ +
\ No newline at end of file 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 52faf04040..2fdb9b6b22 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 @@ -93,52 +93,18 @@ protected override void OnInitialized() };"; private readonly string example3RazorCode = @" - - -"; - private readonly string example3CsharpCode = @" -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 example4RazorCode = @" - - -"; - private readonly string example4CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example5RazorCode = @" - clickedItem = item.Text"" /> -
Clicked item: @clickedItem
- - -
Click count: @clickCounter
"; - private readonly string example5CsharpCode = @" -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 example6RazorCode = @" @@ -158,13 +124,35 @@ protected override void OnInitialized() "; - private readonly string example6CsharpCode = @" + private readonly string example3CsharpCode = @" private List basicItems = new() { new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } };"; - private readonly string example7RazorCode = @" + 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 = @" @@ -176,13 +164,13 @@ protected override void OnInitialized() "; - private readonly string example7CsharpCode = @" + private readonly string example6CsharpCode = @" private List basicItems = new() { new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } };"; - private readonly string example8RazorCode = @" + private readonly string example7RazorCode = @"