Skip to content

Commit eee5118

Browse files
gvreddy04gvreddy04
authored
#812: img on sidebar/sidebar2 (#1128)
* #812: img on sidebar/sidebar2
1 parent 87633af commit eee5118

File tree

12 files changed

+131
-9
lines changed

12 files changed

+131
-9
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@
6666
<Demo Type="typeof(Sidebar_Demo_11_Width)" Tabs="true" />
6767
</Section>
6868

69+
<Section Size="HeadingSize.H2" Name="Set full width company logo" PageUrl="@pageUrl" Link="set-full-width-compay-logo">
70+
<div class="mb-3"></div>
71+
<Demo Type="typeof(Sidebar_Demo_12_Company_Logo_FullWidth)" Tabs="true" />
72+
</Section>
73+
6974
@code {
7075
private const string pageUrl = RouteConstants.Demos_Sidebar_Documentation;
7176
private const string pageTitle = "Blazor Sidebar";

‎BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/Sidebar_Demo_12_Company_Logo_FullWidth.razor‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<Sidebar Href="/"
2+
DataProvider="SidebarDataProvider"
3+
ImageSrc="@($"{StringConstants.ImagesBasePath}/demos_logo_bw.png")"
4+
ImageWidth="200"
5+
Width="232"
6+
WidthUnit="Unit.Px" />
7+
8+
@code {
9+
IEnumerable<NavItem>? navItems;
10+
11+
private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
12+
{
13+
if (navItems is null)
14+
navItems = GetNavItems();
15+
16+
return await Task.FromResult(request.ApplyTo(navItems));
17+
}
18+
19+
private IEnumerable<NavItem> GetNavItems()
20+
{
21+
navItems = new List<NavItem>
22+
{
23+
new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
24+
new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"},
25+
new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"},
26+
new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"},
27+
new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar"},
28+
};
29+
return navItems;
30+
}
31+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@
4646
<Demo Type="typeof(Sidebar2_Demo_09_Width)" Tabs="true" />
4747
</Section>
4848

49+
<Section Size="HeadingSize.H2" Name="Set full width company logo" PageUrl="@pageUrl" Link="set-full-width-compay-logo">
50+
<div class="mb-3"></div>
51+
<Demo Type="typeof(Sidebar2_Demo_10_Company_Logo_FullWidth)" Tabs="true" />
52+
</Section>
53+
4954
@code {
5055
private const string pageUrl = RouteConstants.Demos_Sidebar2_Documentation;
5156
private const string pageTitle = "Blazor Sidebar2";

‎BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2_Demo_10_Company_Logo_FullWidth.razor‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<Sidebar2 Href="/"
2+
DataProvider="Sidebar2DataProvider"
3+
ImageSrc="@($"{StringConstants.ImagesBasePath}/demos_logo_bw.png")"
4+
ImageWidth="200"
5+
Width="232"
6+
WidthUnit="Unit.Px" />
7+
8+
@code {
9+
IEnumerable<NavItem>? navItems;
10+
11+
private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
12+
{
13+
if (navItems is null)
14+
navItems = GetNavItems();
15+
16+
return await Task.FromResult(request.ApplyTo(navItems));
17+
}
18+
19+
private IEnumerable<NavItem> GetNavItems()
20+
{
21+
navItems = new List<NavItem>
22+
{
23+
new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
24+
25+
new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" },
26+
new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},
27+
28+
new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" },
29+
new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
30+
new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
31+
32+
new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"},
33+
new NavItem { Id = "701", Href = "/sidebar2", IconName = IconName.Dash, Text = "How to use", ParentId="7"},
34+
new NavItem { Id = "702", Href = "/sidebar2-examples", IconName = IconName.Dash, Text = "Examples", ParentId="7"},
35+
36+
new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" },
37+
new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
38+
new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
39+
new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
40+
new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
41+
};
42+
return navItems;
43+
}
44+
}

‎BlazorBootstrap.Demo.RCL/Constants/StringConstants.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
namespace BlazorBootstrap.Demo.RCL;
2+
3+
public static class StringConstants
4+
{
5+
public const string AssetsBasePath = "_content/BlazorBootstrap.Demo.RCL";
6+
public const string CssBasePath = AssetsBasePath + "/css";
7+
public const string DocsBasePath = AssetsBasePath + "/docs";
8+
public const string IconsBasePath = AssetsBasePath + "/icons";
9+
public const string ImagesBasePath = AssetsBasePath + "/images";
10+
public const string JsBasePath = AssetsBasePath + "/js";
11+
}

‎BlazorBootstrap.Demo.RCL/wwwroot/images/demos_logo_bw.png‎

15.2 KB
Loading

‎blazorbootstrap/Components/Sidebar/Sidebar.razor‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@if (!string.IsNullOrWhiteSpace(ImageSrc))
1212
{
1313
<span class="navbar-brand-image me-2">
14-
<img src="@ImageSrc" alt="@Title" />
14+
<img style="@ImageStyleNames" src="@ImageSrc" alt="@Title" />
1515
</span>
1616
}
1717
else
@@ -20,7 +20,10 @@
2020
<Icon Name="@IconName" CustomIconName="@CustomIconName" Class="fs-4 me-2" />
2121
</span>
2222
}
23-
<span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
23+
@if (!string.IsNullOrWhiteSpace(Title))
24+
{
25+
<span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
26+
}
2427
@if (!string.IsNullOrWhiteSpace(BadgeText))
2528
{
2629
<span class="navbar-brand-badge badge expanded-only">@BadgeText</span>

‎blazorbootstrap/Components/Sidebar/Sidebar.razor.cs‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
using System.Diagnostics.Contracts;
2-
3-
namespace BlazorBootstrap;
1+
namespace BlazorBootstrap;
42

53
public partial class Sidebar : BlazorBootstrapComponentBase
64
{
@@ -122,9 +120,12 @@ private string GetNavMenuCssClass()
122120
("expanded", !collapseSidebar));
123121

124122
protected override string? StyleNames =>
125-
BuildStyleNames(Style,
123+
BuildStyleNames(Style,
126124
($"--bb-sidebar-width: {Width.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", Width > 0));
127125

126+
private string? ImageStyleNames => BuildStyleNames("",
127+
($"width: {ImageWidth.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", ImageWidth > 0));
128+
128129
/// <summary>
129130
/// Gets or sets the badge text.
130131
/// </summary>
@@ -180,6 +181,14 @@ private string GetNavMenuCssClass()
180181
[Parameter]
181182
public string? ImageSrc { get; set; }
182183

184+
/// <summary>
185+
/// Gets or sets the width of the image in pixels.
186+
/// You can change the unit by setting <see cref="WidthUnit" />.
187+
/// <remarks>Default value is 0.</remarks>
188+
/// </summary>
189+
[Parameter]
190+
public float ImageWidth { get; set; } = 0;
191+
183192
private string? navMenuCssClass => GetNavMenuCssClass();
184193

185194
/// <summary>
@@ -189,7 +198,6 @@ private string GetNavMenuCssClass()
189198
/// Default value is null.
190199
/// </remarks>
191200
[Parameter]
192-
[EditorRequired]
193201
public string? Title { get; set; } = default!;
194202

195203
/// <summary>

‎blazorbootstrap/Components/Sidebar2/Sidebar2.razor‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@if (!string.IsNullOrWhiteSpace(ImageSrc))
1111
{
1212
<span class="navbar-brand-image me-2">
13-
<img src="@ImageSrc" alt="@Title" />
13+
<img style="@ImageStyleNames" src="@ImageSrc" alt="@Title" />
1414
</span>
1515
}
1616
else
@@ -19,7 +19,10 @@
1919
<Icon Name="@IconName" CustomIconName="@CustomIconName" Class="fs-4 me-2" />
2020
</span>
2121
}
22-
<span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
22+
@if (!string.IsNullOrWhiteSpace(Title))
23+
{
24+
<span class="navbar-brand-text fw-semibold expanded-only me-2">@Title</span>
25+
}
2326
@if (!string.IsNullOrWhiteSpace(BadgeText))
2427
{
2528
<span class="navbar-brand-badge badge expanded-only">@BadgeText</span>

‎blazorbootstrap/Components/Sidebar2/Sidebar2.razor.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,8 @@ private string GetNavMenuCssClass()
124124
BuildStyleNames(Style,
125125
($"--bb-sidebar2-width: {Width.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", Width > 0));
126126

127+
private string? ImageStyleNames => BuildStyleNames("",
128+
($"width: {ImageWidth.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};", ImageWidth > 0));
127129

128130
/// <summary>
129131
/// Gets or sets the badge text.
@@ -180,6 +182,14 @@ private string GetNavMenuCssClass()
180182
[Parameter]
181183
public string? ImageSrc { get; set; }
182184

185+
/// <summary>
186+
/// Gets or sets the width of the image in pixels.
187+
/// You can change the unit by setting <see cref="WidthUnit" />.
188+
/// <remarks>Default value is 0.</remarks>
189+
/// </summary>
190+
[Parameter]
191+
public float ImageWidth { get; set; } = 0;
192+
183193
private string? navMenuCssClass => GetNavMenuCssClass();
184194

185195
/// <summary>

0 commit comments

Comments
 (0)