Skip to content

Add new Icon parameter to BitSplitter (#12176) #12177

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
Mar 16, 2026
Merged

Add new Icon parameter to BitSplitter (#12176) #12177

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
2762aad
add new Icon parameter to BitSplitter #12176
msynk Mar 16, 2026
cc0e609
fix tests and resolve review comments
msynk Mar 16, 2026
c16a400
resolve review comments II
msynk Mar 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
9 changes: 6 additions & 3 deletions src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.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 @@ -13,9 +13,12 @@
@FirstPanel
</div>
<div class="bit-spl-gtr" @ref="_splitterGutterRef" @onpointerdown="OnPointerDown" @onpointerdown:preventDefault @ontouchstart="OnTouchStart" @ontouchstart:preventDefault>
@if (GutterIcon is not null)
@{
var icon = BitIconInfo.From(GutterIcon, GutterIconName);
}
@if (icon is not null)
{
<i class="bit-icon bit-icon--@GutterIcon" />
<i class="bit-spl-gic @icon.GetCssClasses()" />
}
else
{
Expand Down
29 changes: 26 additions & 3 deletions src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,33 @@ public partial class BitSplitter : BitComponentBase
public int? GutterSize { get; set; }

/// <summary>
/// The icon of BitSplitter gutter.
/// The icon for the BitSplitter gutter using <see cref="BitIconInfo"/> for external icon library support.
/// Takes precedence over <see cref="GutterIconName"/> when both are set.
/// </summary>
[Parameter, ResetStyleBuilder]
public string? GutterIcon { 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="GutterIconName"/> instead.
/// When assigning a plain <see cref="string"/> to this property, it is converted to a <see cref="BitIconInfo"/> instance and
/// treated as the raw CSS class name(s) for the external icon (for example, <c>"fa fa-home"</c>), not as a Fluent UI icon name.
/// To render built-in Fluent UI icons, use <see cref="GutterIconName"/> instead; passing a Fluent icon name as a string to
/// <see cref="GutterIcon"/> will compile but will not render a Fluent icon unless you also configure
/// <see cref="BitIconInfo.BaseClass"/> and/or <see cref="BitIconInfo.Prefix"/> for a custom icon set.
/// </remarks>
[Parameter]
public BitIconInfo? GutterIcon { get; set; }

/// <summary>
/// The name of the built-in Fluent UI icon to render in the BitSplitter gutter.
/// Ignored when <see cref="GutterIcon"/> is also set.
/// </summary>
/// <remarks>
/// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.GripperDotsVertical</c>).
/// For external icon libraries, use <see cref="GutterIcon"/> instead,
/// where string values are interpreted as CSS class name(s)
/// for the external icon rather than as Fluent UI icon identifiers.
/// </remarks>
[Parameter]
public string? GutterIconName { get; set; }

/// <summary>
/// The content for the first panel.
Expand Down
115 changes: 113 additions & 2 deletions ...nt/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@page "/components/splitter"
@page "/components/splitter"

<PageOutlet Url="components/splitter"
Title="Splitter"
Expand All @@ -7,6 +7,7 @@
<DemoPage Name="Splitter"
Description="The BitSplitter component divides a container into two adjustable sections, either horizontally or vertically. Users can resize these sections by dragging the divider."
Parameters="componentParameters"
SubClasses="componentSubClasses"
GitHubUrl="Surfaces/Splitter/BitSplitter.razor"
GitHubDemoUrl="Surfaces/Splitter/BitSplitterDemo.razor">
<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
Expand Down Expand Up @@ -153,7 +154,7 @@
</DemoExample>

<DemoExample Title="Gutter Icon" RazorCode="@example6RazorCode" Id="example6">
<BitSplitter GutterIcon="@BitIconName.GripperDotsVertical">
<BitSplitter GutterIconName="@BitIconName.GripperDotsVertical">
<FirstPanel>
<div style="padding: 4px;">
First Panel
Expand All @@ -176,4 +177,114 @@
</SecondPanel>
</BitSplitter>
</DemoExample>

<DemoExample Title="External Icons" RazorCode="@example7RazorCode" Id="example7">
<div>Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>GutterIcon</b> parameter (<BitLink Href="#bit-icon-info">BitIconInfo</BitLink>).</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 />
<BitSplitter GutterIcon="@("fa-solid fa-arrows-left-right")">
<FirstPanel>
<div style="padding: 4px;">
First Panel
<br />
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
</div>
</FirstPanel>
<SecondPanel>
<div style="padding: 4px;">
Second Panel
<br />
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
<br/>
"fa-solid fa-arrows-left-right"
</div>
</SecondPanel>
</BitSplitter>

<br />

<BitSplitter GutterIcon="@BitIconInfo.Css("fa-solid fa-grip-vertical")">
<FirstPanel>
<div style="padding: 4px;">
First Panel
<br />
BitIconInfo.Css("fa-solid fa-grip-vertical")
</div>
</FirstPanel>
<SecondPanel>
<div style="padding: 4px;">
Second Panel
<br />
BitIconInfo.Css("fa-solid fa-grip-vertical")
</div>
</SecondPanel>
</BitSplitter>

<br />

<BitSplitter GutterIcon="@BitIconInfo.Fa("solid grip-lines-vertical")">
<FirstPanel>
<div style="padding: 4px;">
First Panel
<br />
BitIconInfo.Fa("solid grip-lines-vertical")
</div>
</FirstPanel>
<SecondPanel>
<div style="padding: 4px;">
Second Panel
<br />
BitIconInfo.Fa("solid grip-lines-vertical")
</div>
</SecondPanel>
</BitSplitter>

<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:</div>
<br />
<BitSplitter GutterIcon="@("bi bi-grip-vertical")">
<FirstPanel>
<div style="padding: 4px;">
First Panel
<br />
Icon=@@("bi bi-grip-vertical")
</div>
</FirstPanel>
<SecondPanel>
<div style="padding: 4px;">
Second Panel
<br />
Icon=@@("bi bi-grip-vertical")
</div>
</SecondPanel>
</BitSplitter>

<br />

<BitSplitter GutterIcon="@BitIconInfo.Bi("arrow-left-right")">
<FirstPanel>
<div style="padding: 4px;">
First Panel
<br />
BitIconInfo.Bi("arrow-left-right")
</div>
</FirstPanel>
<SecondPanel>
<div style="padding: 4px;">
Second Panel
<br />
BitIconInfo.Bi("arrow-left-right")
</div>
</SecondPanel>
</BitSplitter>
</DemoExample>
</DemoPage>
144 changes: 142 additions & 2 deletions ...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,20 @@ public partial class BitSplitterDemo
new()
{
Name = "GutterIcon",
Type = "BitIconInfo?",
DefaultValue = "null",
Description = "The icon for the BitSplitter gutter using BitIconInfo for external icon library support. Takes precedence over GutterIconName when both are set.",
LinkType = LinkType.Link,
Href = "#bit-icon-info",
},
new()
{
Name = "GutterIconName",
Type = "string?",
DefaultValue = "null",
Description = "The icon of BitSplitter gutter.",
Description = "The name of the built-in Fluent UI icon to render in the BitSplitter gutter. Ignored when GutterIcon is also set.",
LinkType = LinkType.Link,
Href = "https://blazorui.bitplatform.dev/iconography",
},
new()
{
Expand Down Expand Up @@ -85,6 +96,41 @@ public partial class BitSplitterDemo



private readonly List<ComponentSubClass> componentSubClasses =
[
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 double gutterSize = 10;


Expand Down Expand Up @@ -229,7 +275,7 @@ Second Panel
";

private readonly string example6RazorCode = @"
<BitSplitter GutterIcon=""@BitIconName.GripperDotsVertical"">
<BitSplitter GutterIconName=""@BitIconName.GripperDotsVertical"">
<FirstPanel>
<div style=""padding: 4px;"">
First Panel
Expand All @@ -251,4 +297,98 @@ Second Panel
</div>
</SecondPanel>
</BitSplitter>";

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

<BitSplitter GutterIcon=""@(""fa-solid fa-arrows-left-right"")"">
<FirstPanel>
<div style=""padding: 4px;"">
First Panel
<br />
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
</div>
</FirstPanel>
<SecondPanel>
<div style=""padding: 4px;"">
Second Panel
<br />
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
<br/>
""fa-solid fa-arrows-left-right""
</div>
</SecondPanel>
</BitSplitter>

<BitSplitter GutterIcon=""@BitIconInfo.Css(""fa-solid fa-grip-vertical"")"">
<FirstPanel>
<div style=""padding: 4px;"">
First Panel
<br />
BitIconInfo.Css(""fa-solid fa-grip-vertical"")
</div>
</FirstPanel>
<SecondPanel>
<div style=""padding: 4px;"">
Second Panel
<br />
BitIconInfo.Css(""fa-solid fa-grip-vertical"")
</div>
</SecondPanel>
</BitSplitter>

<BitSplitter GutterIcon=""@BitIconInfo.Fa(""solid grip-lines-vertical"")"">
<FirstPanel>
<div style=""padding: 4px;"">
First Panel
<br />
BitIconInfo.Fa(""solid grip-lines-vertical"")
</div>
</FirstPanel>
<SecondPanel>
<div style=""padding: 4px;"">
Second Panel
<br />
BitIconInfo.Fa(""solid grip-lines-vertical"")
</div>
</SecondPanel>
</BitSplitter>


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

<BitSplitter GutterIcon=""@(""bi bi-grip-vertical"")"">
<FirstPanel>
<div style=""padding: 4px;"">
First Panel
<br />
Icon=@@(""bi bi-grip-vertical"")
</div>
</FirstPanel>
<SecondPanel>
<div style=""padding: 4px;"">
Second Panel
<br />
Icon=@@(""bi bi-grip-vertical"")
</div>
</SecondPanel>
</BitSplitter>

<BitSplitter GutterIcon=""@BitIconInfo.Bi(""arrow-left-right"")"">
<FirstPanel>
<div style=""padding: 4px;"">
First Panel
<br />
BitIconInfo.Bi(""arrow-left-right"")
</div>
</FirstPanel>
<SecondPanel>
<div style=""padding: 4px;"">
Second Panel
<br />
BitIconInfo.Bi(""arrow-left-right"")
</div>
</SecondPanel>
</BitSplitter>";

}
Loading
Loading