Skip to content

Add Icon parameter to BitButton (#11962) #11964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
msynk wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Add Icon parameter to BitButton (#11962) #11964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@{
var hasPrimary = (PrimaryTemplate ?? ChildContent) is not null;
var hasSecondary = SecondaryText.HasValue() || SecondaryTemplate is not null;
var icon = BitIconInfo.From(Icon, IconName);
}

@if (Href.HasNoValue())
Expand All @@ -22,9 +23,9 @@
aria-describedby="@AriaDescription">
@if (IsLoading is false)
{
@if (IconName.HasValue())
@if (icon is not null)
{
<i style="@Styles?.Icon" class="bit-btn-icn bit-icon bit-icon--@IconName @Classes?.Icon" />
<i style="@Styles?.Icon" class="bit-btn-icn @icon.GetCssClasses() @Classes?.Icon" />
}
else if (IconUrl.HasValue())
{
Expand Down Expand Up @@ -94,9 +95,9 @@ else
aria-label="@AriaLabel"
aria-hidden="@AriaHidden"
aria-describedby="@AriaDescription">
@if (IconName.HasValue())
@if (icon is not null)
{
<i style="@Styles?.Icon" class="bit-btn-icn bit-icon bit-icon--@IconName @Classes?.Icon" />
<i style="@Styles?.Icon" class="bit-btn-icn @icon.GetCssClasses() @Classes?.Icon" />
}
else if (IconUrl.HasValue())
{
Expand Down
15 changes: 15 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,21 @@ public partial class BitButton : BitComponentBase
[CallOnSet(nameof(OnSetHrefAndRel))]
public string? Href { get; set; }

/// <summary>
/// Gets or sets the icon to display using custom CSS classes for external icon libraries.
/// Takes precedence over <see cref="IconName"/> when both are set.
/// </summary>
/// <remarks>
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
/// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
/// </remarks>
/// <example>
/// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
/// Material: Icon="BitIconInfo.Material("home")"
/// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
/// </example>
[Parameter] public BitIconInfo? Icon { get; set; }

/// <summary>
/// The name of the icon to render inside the button.
/// </summary>
Expand Down
71 changes: 69 additions & 2 deletions .../Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,7 +567,74 @@
</div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
<DemoExample Title="External Icons" RazorCode="@example17RazorCode" Id="example17">
<div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>

<br />
<br />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<div>FontAwesome:</div>
<br />
<BitButton Icon="@("fa-solid fa-house")" Variant="BitVariant.Fill">
House (Icon="@@("fa-solid fa-house")")
</BitButton>

<br />
<br />

<BitButton Icon="@BitIconInfo.Css("fa-solid fa-heart")" Variant="BitVariant.Outline" Color="BitColor.Secondary">
Heart (Icon="@@BitIconInfo.Css("fa-solid fa-heart")")
</BitButton>

<br />
<br />

<BitButton Icon="@BitIconInfo.Fa("fa-brands fa-github")" Variant="BitVariant.Text" Color="BitColor.Tertiary">
GitHub (Icon="@@BitIconInfo.Fa("brands github")")
</BitButton>

<br />
<br />

<BitButton Icon="@BitIconInfo.Fa("solid rocket")" Variant="BitVariant.Fill" Color="BitColor.Error">
Rocket (Icon="@@BitIconInfo.Fa("solid rocket")")
</BitButton>

<br /><br /><br /><br />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

<div>Bootstrap:</div>
<br />
<BitButton Icon="@("bi bi-house-fill")" Variant="BitVariant.Fill">
House (Icon="@@("bi bi-house-fill")")
</BitButton>

<br />
<br />

<BitButton Icon="@BitIconInfo.Css("bi bi-heart-fill")" Variant="BitVariant.Outline" Color="BitColor.Secondary">
Heart (Icon="@@BitIconInfo.Css("bi bi-heart-fill")")
</BitButton>

<br />
<br />

<BitButton Icon="@BitIconInfo.Bi("github")" Variant="BitVariant.Text" Color="BitColor.Tertiary">
GitHub (Icon="@@BitIconInfo.Bi("github")")
</BitButton>

<br />
<br />

<BitButton Icon="@BitIconInfo.Bi("gear-fill")" Variant="BitVariant.Fill" Color="BitColor.Error">
Gear (Icon="@@BitIconInfo.Bi("gear-fill")")
</BitButton>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
<div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
<br /><br />
<div>Component's Style & Class:</div>
Expand Down Expand Up @@ -608,7 +675,7 @@
</div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example18RazorCode" Id="example18">
<DemoExample Title="RTL" RazorCode="@example19RazorCode" Id="example19">
<div>Use BitButton in right-to-left (RTL).</div>
<br />
<div class="example-content" dir="rtl">
Expand Down
42 changes: 40 additions & 2 deletions ...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,11 +125,20 @@ public partial class BitButtonDemo
Description = "The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button.",
},
new()
{
Name = "Icon",
Type = "BitIconInfo?",
DefaultValue = "null",
Description = "Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.",
LinkType = LinkType.Link,
Href = "#bit-icon-info",
},
new()
{
Name = "IconName",
Type = "string?",
DefaultValue = "null",
Description = "The name of the icon to render inside the button."
Description = "The name of the icon to render inside the button from the built-in Fluent UI icons."
},
new()
{
Expand Down Expand Up @@ -334,7 +343,36 @@ public partial class BitButtonDemo
Description = "Custom CSS classes/styles for the loading label section of the BitButton."
},
]
}
},
new()
{
Id = "bit-icon-info",
Title = "BitIconInfo",
Parameters =
[
new()
{
Name = "Name",
Type = "string?",
DefaultValue = "null",
Description = "Gets or sets the name of the icon."
},
new()
{
Name = "BaseClass",
Type = "string?",
DefaultValue = "null",
Description = "Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to \"bit-icon\". For external icon libraries like FontAwesome, you might set this to \"fa\" or leave empty."
},
new()
{
Name = "Prefix",
Type = "string?",
DefaultValue = "null",
Description = "Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to \"bit-icon--\". For external icon libraries, you might set this to \"fa-\" or leave empty."
},
]
},
];

private readonly List<ComponentSubEnum> componentSubEnums =
Expand Down
42 changes: 40 additions & 2 deletions ....BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,6 +518,44 @@ private async Task LoadingTemplateClick()
<BitButton Color=""BitColor.TertiaryBorder"" Variant=""BitVariant.Text"">TertiaryBorder</BitButton>";

private readonly string example17RazorCode = @"
<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />

<BitButton Icon=""@(""fa-solid fa-house"")"" Variant=""BitVariant.Fill"">
House (Icon=""@@(""fa-solid fa-house"")"")
</BitButton>

<BitButton Icon=""@BitIconInfo.Css(""fa-solid fa-heart"")"" Variant=""BitVariant.Outline"" Color=""BitColor.Secondary"">
Heart (Icon=""@@BitIconInfo.Css(""fa-solid fa-heart"")"")
</BitButton>

<BitButton Icon=""@BitIconInfo.Fa(""fa-brands fa-github"")"" Variant=""BitVariant.Text"" Color=""BitColor.Tertiary"">
GitHub (Icon=""@@BitIconInfo.Fa(""brands github"")"")
</BitButton>

<BitButton Icon=""@BitIconInfo.Fa(""solid rocket"")"" Variant=""BitVariant.Fill"" Color=""BitColor.Error"">
Rocket (Icon=""@@BitIconInfo.Fa(""solid rocket"")"")
</BitButton>


<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"" />

<BitButton Icon=""@(""bi bi-house-fill"")"" Variant=""BitVariant.Fill"">
House (Icon=""@@(""bi bi-house-fill"")"")
</BitButton>

<BitButton Icon=""@BitIconInfo.Css(""bi bi-heart-fill"")"" Variant=""BitVariant.Outline"" Color=""BitColor.Secondary"">
Heart (Icon=""@@BitIconInfo.Css(""bi bi-heart-fill"")"")
</BitButton>

<BitButton Icon=""@BitIconInfo.Bi(""github"")"" Variant=""BitVariant.Text"" Color=""BitColor.Tertiary"">
GitHub (Icon=""@@BitIconInfo.Bi(""github"")"")
</BitButton>

<BitButton Icon=""@BitIconInfo.Bi(""gear-fill"")"" Variant=""BitVariant.Fill"" Color=""BitColor.Error"">
Gear (Icon=""@@BitIconInfo.Bi(""gear-fill"")"")
</BitButton>";

private readonly string example18RazorCode = @"
<style>
.custom-class {
border-radius: 1rem;
Expand Down Expand Up @@ -591,7 +629,7 @@ Click me
Spinner = ""custom-spinner"" })"">
Click me
</BitButton>";
private readonly string example17CsharpCode = @"
private readonly string example18CsharpCode = @"
private bool stylesIsLoading;
private bool classesIsLoading;

Expand All @@ -609,7 +647,7 @@ private async Task LoadingClassesClick()
classesIsLoading = false;
}";

private readonly string example18RazorCode = @"
private readonly string example19RazorCode = @"
<BitButton Dir=""BitDir.Rtl"" IconName=""@BitIconName.Emoji"" Variant=""BitVariant.Fill"">
دکمه با آیکن
</BitButton>
Expand Down
Loading