Skip to content

Add new Icon parameters to BitCarousel (#12098) #12099

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

Merged
msynk merged 3 commits into from
Feb 16, 2026
Merged

Add new Icon parameters to BitCarousel (#12098) #12099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39e4350
add new Icon parameters to BitCarousel #12098
msynk Feb 16, 2026
f9ff2db
fix demo page
msynk Feb 16, 2026
344a740
resolve review comment
msynk Feb 16, 2026
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
8 changes: 5 additions & 3 deletions src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@namespace Bit.BlazorUI
@namespace Bit.BlazorUI
@inherits BitComponentBase

<div @ref="RootElement" @attributes="HtmlAttributes"
Expand All @@ -22,18 +22,20 @@

@if (HideNextPrev is false)
{
var goLeftIcon = BitIconInfo.From(GoLeftIcon, GoLeftIconName ?? "ChevronRight");
var goRightIcon = BitIconInfo.From(GoRightIcon, GoRightIconName ?? "ChevronRight bit-ico-r180");
<div @onclick="GoLeft"
class="bit-csl-lbt @Classes?.Buttons @Classes?.GoLeftButton"
style="@_goLeftButtonStyle @Styles?.Buttons @Styles?.GoLeftButton">
<i style="@Styles?.GoLeftButtonIcon"
class="bit-icon bit-icon--@(GoLeftIcon ?? "ChevronRight") @Classes?.GoLeftButtonIcon" />
class="@goLeftIcon?.GetCssClasses() @Classes?.GoLeftButtonIcon" />
</div>

<div @onclick="GoRight"
class="bit-csl-rbt @Classes?.Buttons @Classes?.GoRightButton"
style="@_goRightButtonStyle @Styles?.Buttons @Styles?.GoRightButton">
<i style="@Styles?.GoRightButtonIcon"
class="bit-csl-rbi bit-icon bit-icon--@(GoRightIcon ?? "ChevronRight") @Classes?.GoRightButtonIcon" />
class="@goRightIcon?.GetCssClasses() @Classes?.GoRightButtonIcon" />
</div>
}
</div>
Expand Down
50 changes: 45 additions & 5 deletions src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
namespace Bit.BlazorUI;
namespace Bit.BlazorUI;

/// <summary>
/// Carousel (slide-show) let people show their items in separate slides from two or more items.
Expand Down Expand Up @@ -59,14 +59,54 @@ public partial class BitCarousel : BitComponentBase
[Parameter] public BitCarouselClassStyles? Classes { get; set; }

/// <summary>
/// The custom icon name for the go to left button at the right side of the carousel.
/// Gets or sets the icon for the go to left button using custom CSS classes for external icon libraries.
/// Takes precedence over <see cref="GoLeftIconName"/> when both are set.
/// </summary>
[Parameter] public string? GoLeftIcon { get; set; }
/// <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="GoLeftIconName"/> instead.
/// </remarks>
/// <example>
/// Bootstrap: GoLeftIcon="BitIconInfo.Bi("chevron-left")"
/// FontAwesome: GoLeftIcon="BitIconInfo.Fa("solid chevron-left")"
/// Custom CSS: GoLeftIcon="BitIconInfo.Css("my-icon-class")"
/// </example>
[Parameter] public BitIconInfo? GoLeftIcon { get; set; }

/// <summary>
/// The custom icon name for the go to right button at the left side of the carousel.
/// Gets or sets the name of the icon for the go to left button from the built-in Fluent UI icons.
/// </summary>
[Parameter] public string? GoRightIcon { get; set; }
/// <remarks>
/// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.ChevronLeft</c>).
/// <br />
/// For external icon libraries, use <see cref="GoLeftIcon"/> instead.
/// </remarks>
[Parameter] public string? GoLeftIconName { get; set; }

/// <summary>
/// Gets or sets the icon for the go to right button using custom CSS classes for external icon libraries.
/// Takes precedence over <see cref="GoRightIconName"/> 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="GoRightIconName"/> instead.
/// </remarks>
/// <example>
/// Bootstrap: GoRightIcon="BitIconInfo.Bi("chevron-right")"
/// FontAwesome: GoRightIcon="BitIconInfo.Fa("solid chevron-right")"
/// Custom CSS: GoRightIcon="BitIconInfo.Css("my-icon-class")"
/// </example>
[Parameter] public BitIconInfo? GoRightIcon { get; set; }

/// <summary>
/// Gets or sets the name of the icon for the go to right button from the built-in Fluent UI icons.
/// </summary>
/// <remarks>
/// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.ChevronRight</c>).
/// <br />
/// For external icon libraries, use <see cref="GoRightIcon"/> instead.
/// </remarks>
[Parameter] public string? GoRightIconName { get; set; }

/// <summary>
/// Hides the Dots indicator at the bottom of the BitCarousel.
Expand Down
6 changes: 1 addition & 5 deletions src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "../../../Styles/functions.scss";
@import "../../../Styles/functions.scss";

.bit-csl {
display: flex;
Expand Down Expand Up @@ -67,10 +67,6 @@
left: 0;
}

.bit-csl-rbi {
transform: scaleX(-1);
}

.bit-csl-dcn {
text-align: center;
margin-top: spacing(1.25);
Expand Down
71 changes: 69 additions & 2 deletions ...lient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@page "/components/carousel"
@page "/components/carousel"

<PageOutlet Url="components/carousel"
Title="Carousel"
Expand Down Expand Up @@ -195,7 +195,74 @@
</div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example7RazorCode" Id="example7">
<DemoExample Title="External Icons" RazorCode="@example7RazorCode" Id="example7">
<div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>GoLeftIcon</b> and <b>GoRightIcon</b> parameters.</div>

<br />
<br />

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

<div>FontAwesome (circle-arrow icons):</div>
<br />
<BitCarousel InfiniteScrolling
GoLeftIcon="@BitIconInfo.Fa("solid circle-arrow-right")"
GoRightIcon="@BitIconInfo.Fa("solid circle-arrow-left")">
Comment thread
msynk marked this conversation as resolved.
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
<div class="text-title">Aurora</div>
<div class="text-description">This is Aurora and it's fantastic</div>
</BitCarouselItem>
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
<div class="text-title">Beautiful Mountain</div>
<div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
</BitCarouselItem>
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
<div class="text-title">Forest In The Valley</div>
<div class="text-description">This is a Forest In The Valley and it's beautiful</div>
</BitCarouselItem>
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
<div class="text-title">Road Among The Mountains</div>
<div class="text-description">This is a Road Among The Mountains and it's amazing</div>
</BitCarouselItem>
</BitCarousel>

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

<div>Bootstrap Icons (arrow-left-circle / arrow-right-circle):</div>
<br />
<BitCarousel InfiniteScrolling
GoLeftIcon="@BitIconInfo.Bi("arrow-right-circle")"
GoRightIcon="@BitIconInfo.Bi("arrow-left-circle")">
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg" />
<div class="text-title">Aurora</div>
<div class="text-description">This is Aurora and it's fantastic</div>
</BitCarouselItem>
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg" />
<div class="text-title">Beautiful Mountain</div>
<div class="text-description">This is a Beautiful Mountain and it's gorgeous</div>
</BitCarouselItem>
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg" />
<div class="text-title">Forest In The Valley</div>
<div class="text-description">This is a Forest In The Valley and it's beautiful</div>
</BitCarouselItem>
<BitCarouselItem>
<img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg" />
<div class="text-title">Road Among The Mountains</div>
<div class="text-description">This is a Road Among The Mountains and it's amazing</div>
</BitCarouselItem>
</BitCarousel>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example8RazorCode" Id="example8">
<div>Use BitCarousel in right-to-left (RTL).</div>
<br />
<div>
Expand Down
116 changes: 112 additions & 4 deletions ...nt/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Carousel/BitCarouselDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Carousel;
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Carousel;

public partial class BitCarouselDemo
{
Expand Down Expand Up @@ -44,16 +44,38 @@ public partial class BitCarouselDemo
new()
{
Name = "GoLeftIcon",
Type = "BitIconInfo?",
DefaultValue = "null",
Description = "Gets or sets the icon for the go to left button using custom CSS classes for external icon libraries. Takes precedence over GoLeftIconName when both are set.",
LinkType = LinkType.Link,
Href = "#bit-icon-info",
},
new()
{
Name = "GoLeftIconName",
Type = "string?",
DefaultValue = "null",
Description = "The custom icon name for the go to left button at the right side of the carousel."
Description = "Gets or sets the name of the icon for the go to left button from the built-in Fluent UI icons.",
LinkType = LinkType.Link,
Href = "https://blazorui.bitplatform.dev/iconography",
},
new()
{
Name = "GoRightIcon",
Type = "BitIconInfo?",
DefaultValue = "null",
Description = "Gets or sets the icon for the go to right button using custom CSS classes for external icon libraries. Takes precedence over GoRightIconName when both are set.",
LinkType = LinkType.Link,
Href = "#bit-icon-info",
},
new()
{
Name = "GoRightIconName",
Type = "string?",
DefaultValue = "null",
Description = "The custom icon name for the go to right button at the left side of the carousel."
Description = "Gets or sets the name of the icon for the go to right button from the built-in Fluent UI icons.",
LinkType = LinkType.Link,
Href = "https://blazorui.bitplatform.dev/iconography",
},
new()
{
Expand Down Expand Up @@ -187,7 +209,36 @@ public partial class BitCarouselDemo
Description = "Custom CSS classes/styles for the current dot element of the BitCarousel."
}
]
}
},
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<ComponentParameter> componentPublicMembers =
Expand Down Expand Up @@ -542,6 +593,63 @@ .item div {
</div>";

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

<div>FontAwesome (circle-arrow icons):</div>
<BitCarousel InfiniteScrolling
GoLeftIcon=""@BitIconInfo.Fa(""solid circle-arrow-right"")""
GoRightIcon=""@BitIconInfo.Fa(""solid circle-arrow-left"")"">
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg"" />
<div class=""text-title"">Aurora</div>
<div class=""text-description"">This is Aurora and it's fantastic</div>
</BitCarouselItem>
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg"" />
<div class=""text-title"">Beautiful Mountain</div>
<div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
</BitCarouselItem>
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg"" />
<div class=""text-title"">Forest In The Valley</div>
<div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
</BitCarouselItem>
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg"" />
<div class=""text-title"">Road Among The Mountains</div>
<div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
</BitCarouselItem>
</BitCarousel>

<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />

<div>Bootstrap Icons (arrow-left-circle / arrow-right-circle):</div>
<BitCarousel InfiniteScrolling
GoLeftIcon=""@BitIconInfo.Bi(""arrow-right-circle"")""
GoRightIcon=""@BitIconInfo.Bi(""arrow-left-circle"")"">
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img1.jpg"" />
<div class=""text-title"">Aurora</div>
<div class=""text-description"">This is Aurora and it's fantastic</div>
</BitCarouselItem>
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg"" />
<div class=""text-title"">Beautiful Mountain</div>
<div class=""text-description"">This is a Beautiful Mountain and it's gorgeous</div>
</BitCarouselItem>
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img3.jpg"" />
<div class=""text-title"">Forest In The Valley</div>
<div class=""text-description"">This is a Forest In The Valley and it's beautiful</div>
</BitCarouselItem>
<BitCarouselItem>
<img class=""image"" src=""_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg"" />
<div class=""text-title"">Road Among The Mountains</div>
<div class=""text-description"">This is a Road Among The Mountains and it's amazing</div>
</BitCarouselItem>
</BitCarousel>";
Comment thread
msynk marked this conversation as resolved.

private readonly string example8RazorCode = @"
<style>
.item {
text-align: center;
Expand Down
Loading