From 6423811caa8615fb02d9e47bc40190d7a3d4834a Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sat, 3 Aug 2024 13:25:54 +0330 Subject: [PATCH] feat(blazorui): add Size parameter to BitTag #8183 (#8200) --- .../Notifications/Tag/BitTag.razor.cs | 18 +++++- .../Components/Notifications/Tag/BitTag.scss | 19 ++++++- .../Notifications/Tag/BitTagDemo.razor | 22 +++++++- .../Notifications/Tag/BitTagDemo.razor.cs | 55 ++++++++++++++++++- 4 files changed, 105 insertions(+), 9 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs index 10c6d4f96a..d6ae224223 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs @@ -8,7 +8,7 @@ public partial class BitTag : BitComponentBase [Parameter] public RenderFragment? ChildContent { get; set; } /// - /// Custom CSS classes for different parts of the BitTag. + /// Custom CSS classes for different parts of the tag. /// [Parameter] public BitTagClassStyles? Classes { get; set; } @@ -34,7 +34,13 @@ public partial class BitTag : BitComponentBase [Parameter] public EventCallback OnDismiss { get; set; } /// - /// Custom CSS styles for different parts of the BitTag. + /// The size of the tag. + /// + [Parameter, ResetClassBuilder] + public BitSize? Size { get; set; } + + /// + /// Custom CSS styles for different parts of the tag. /// [Parameter] public BitTagClassStyles? Styles { get; set; } @@ -70,6 +76,14 @@ protected override void RegisterCssClasses() _ => "bit-tag-pri" }); + ClassBuilder.Register(() => Size switch + { + BitSize.Small => "bit-tag-sm", + BitSize.Medium => "bit-tag-md", + BitSize.Large => "bit-tag-lg", + _ => "bit-tag-md" + }); + ClassBuilder.Register(() => Variant switch { BitVariant.Fill => "bit-tag-fil", diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss index 3e14d8a9d3..a225b1a421 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss @@ -5,13 +5,13 @@ overflow: hidden; align-items: center; display: inline-flex; - font-size: spacing(1.75); font-family: $tg-font-family; font-weight: $tg-font-weight; border-style: $shp-border-style; border-width: $shp-border-width; border-radius: $shp-border-radius; - padding: spacing(0.75) spacing(1.5); + font-size: var(--bit-tag-fontsize); + padding: var(--bit-tag-padding); &.bit-dis { cursor: default; @@ -104,3 +104,18 @@ --bit-tag-clr: #{$clr-err}; --bit-tag-clr-txt: #{$clr-err-text}; } + +.bit-tag-sm { + --bit-tag-fontsize: #{spacing(1.5)}; + --bit-tag-padding: #{spacing(0.5)} #{spacing(1)}; +} + +.bit-tag-md { + --bit-tag-fontsize: #{spacing(1.75)}; + --bit-tag-padding: #{spacing(0.75)} #{spacing(1.5)}; +} + +.bit-tag-lg { + --bit-tag-fontsize: #{spacing(2)}; + --bit-tag-padding: #{spacing(1)} #{spacing(2)}; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor index c3099d1121..59f9ce143a 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor @@ -83,7 +83,25 @@ - + + +
Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.
+
+   +   + +

+   +   + +

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

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs index 883172f562..e7af8cce1a 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs @@ -16,7 +16,7 @@ public partial class BitTagDemo Name = "Classes", Type = "BitTagClassStyles?", DefaultValue = "null", - Description = "Custom CSS classes for different parts of the BitTag.", + Description = "Custom CSS classes for different parts of the tag.", LinkType = LinkType.Link, Href = "#tag-class-styles" }, @@ -51,11 +51,20 @@ public partial class BitTagDemo Description = "Dismiss button click event, if set the dismiss icon will show up." }, new() + { + Name = "Size", + Type = "BitSize?", + DefaultValue = "null", + Description = "The size of the tag.", + LinkType = LinkType.Link, + Href = "#size-enum", + }, + new() { Name = "Styles", Type = "BitTagClassStyles?", DefaultValue = "null", - Description = "Custom CSS styles for different parts of the BitTag.", + Description = "Custom CSS styles for different parts of the tag.", LinkType = LinkType.Link, Href = "#tag-class-styles" }, @@ -184,6 +193,33 @@ public partial class BitTagDemo ] }, new() + { + Id = "size-enum", + Name = "BitSize", + Description = "", + Items = + [ + new() + { + Name= "Small", + Description="The small size.", + Value="0", + }, + new() + { + Name= "Medium", + Description="The medium size.", + Value="1", + }, + new() + { + Name= "Large", + Description="The large size.", + Value="2", + } + ] + }, + new() { Id = "variant-enum", Name = "BitVariant", @@ -275,6 +311,19 @@ public partial class BitTagDemo "; private readonly string example6RazorCode = @" + + + + + + + + + + +"; + + private readonly string example7RazorCode = @" Custom content @@ -282,7 +331,7 @@ public partial class BitTagDemo "; - private readonly string example7RazorCode = @" + private readonly string example8RazorCode = @"