From 536daca9a007ed2a4a87e79958883d137d1ef5cf Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Mon, 23 Dec 2024 14:38:53 +0330 Subject: [PATCH 1/4] feat(blazorui): add Rel parameter to BitActionButton #9524 (#9525) --- .../BitActionButton/BitActionButton.razor | 1 + .../BitActionButton/BitActionButton.razor.cs | 23 ++++- .../Buttons/BitActionButtonDemo.razor | 28 ++++-- .../Buttons/BitActionButtonDemo.razor.cs | 96 +++++++++++++++++++ .../BitActionButtonDemo.razor.samples.cs | 21 ++-- 5 files changed, 156 insertions(+), 13 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor index ff0059f783..30002ad6bf 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor @@ -31,6 +31,7 @@ else { - [Parameter] public string? Href { get; set; } + [Parameter] + [CallOnSet(nameof(OnSetHrefAndRel))] + public string? Href { get; set; } /// /// The icon name of the icon to render inside the button. @@ -90,6 +93,13 @@ public partial class BitActionButton : BitComponentBase [Parameter, ResetClassBuilder] public bool ReversedIcon { get; set; } + /// + /// If Href provided, specifies the relationship between the current document and the linked document. + /// + [Parameter] + [CallOnSet(nameof(OnSetHrefAndRel))] + public BitLinkRel? Rel { get; set; } + /// /// The size of the button. /// @@ -172,4 +182,15 @@ protected virtual async Task HandleOnClick(MouseEventArgs e) await OnClick.InvokeAsync(e); } } + + private void OnSetHrefAndRel() + { + if (Rel.HasValue is false || Href.HasNoValue() || Href!.StartsWith('#')) + { + _rel = null; + return; + } + + _rel = BitLinkRelUtils.GetRels(Rel.Value); + } } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor index 74944fa146..8f134e5109 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor @@ -38,7 +38,23 @@ - + + +
Use BitActionButton as a hyperlink to external URLs, with a rel attribute.
+
+
+ + Open bitplatform.dev with a rel attribute (nofollow) + + + + Open bitplatform.dev with a rel attribute (nofollow & noreferrer) + +
+ + + +
Demonstrates BitActionButton with various predefined colors: Primary, Secondary, Tertiary, Info, Success, Warning, SevereWarning, and Error.

@@ -133,7 +149,7 @@ - +
Show BitActionButton in different sizes: Small, Medium, and Large.

@@ -145,7 +161,7 @@ - +
Customize the appearance of BitActionButton using styles and CSS classes.

@@ -167,7 +183,7 @@ - +
Add custom template within BitActionButton.

@@ -182,7 +198,7 @@ - +
Use BitActionButton within a form and validate its state.

@@ -214,7 +230,7 @@ - +
Use BitActionButton in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.cs index 21ac7dcb05..9c4b43558f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.cs @@ -110,6 +110,15 @@ public partial class BitActionButtonDemo Description = "Reverses the positions of the icon and the content of the button.", }, new() + { + Name = "Rel", + Type = "BitLinkRel?", + DefaultValue = "null", + Description = "If Href provided, specifies the relationship between the current document and the linked document.", + LinkType = LinkType.Link, + Href = "#button-rel", + }, + new() { Name = "Size", Type = "BitSize?", @@ -334,5 +343,92 @@ public partial class BitActionButtonDemo } ] }, + new() + { + Id = "button-rel", + Name = "BitLinkRel", + Description = "", + Items = + [ + new() + { + Name = "Alternate", + Value = "1", + Description = "Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror)" + }, + new() + { + Name = "Author", + Value = "2", + Description = "Provides a link to the author of the document." + }, + new() + { + Name = "Bookmark", + Value = "4", + Description = "Permanent URL used for bookmarking." + }, + new() + { + Name = "External", + Value = "8", + Description = "Indicates that the referenced document is not part of the same site as the current document." + }, + new() + { + Name = "Help", + Value = "16", + Description = "Provides a link to a help document." + }, + new() + { + Name = "License", + Value = "32", + Description = "Provides a link to licensing information for the document." + }, + new() + { + Name = "Next", + Value = "64", + Description = "Provides a link to the next document in the series." + }, + new() + { + Name = "NoFollow", + Value = "128", + Description = @"Links to an unendorsed document, like a paid link. (""NoFollow"" is used by Google, to specify that the Google search spider should not follow that link)" + }, + new() + { + Name = "NoOpener", + Value = "256", + Description = "Requires that any browsing context created by following the hyperlink must not have an opener browsing context." + }, + new() + { + Name = "NoReferrer", + Value = "512", + Description = "Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink." + }, + new() + { + Name = "Prev", + Value = "1024", + Description = "The previous document in a selection." + }, + new() + { + Name = "Search", + Value = "2048", + Description = "Links to a search tool for the document." + }, + new() + { + Name = "Tag", + Value = "4096", + Description = "A tag (keyword) for the current document." + } + ] + }, ]; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.samples.cs index 719f683bd4..6de91030ef 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitActionButtonDemo.razor.samples.cs @@ -18,6 +18,15 @@ Go to bitplatform GitHub "; private readonly string example3RazorCode = @" + + Open bitplatform.dev with a rel attribute (nofollow) + + + + Open bitplatform.dev with a rel attribute (nofollow & noreferrer) +"; + + private readonly string example4RazorCode = @" Primary Primary @@ -69,12 +78,12 @@ Go to bitplatform GitHub TertiaryBorder TertiaryBorder"; - private readonly string example4RazorCode = @" + private readonly string example5RazorCode = @" Small Medium Large"; - private readonly string example5RazorCode = @" + private readonly string example6RazorCode = @"