Skip to content

Commit 183a4b2

Browse files
gvreddy04gvreddy04
authored
Main layout docs update (#934)
Main layout docs update
1 parent 8e44b84 commit 183a4b2

File tree

9 files changed

+150
-131
lines changed

9 files changed

+150
-131
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@namespace BlazorBootstrap.Demo.RCL
22
@inherits MainLayoutBase
33

4-
<BlazorBootstrapLayout>
4+
<BlazorBootstrapLayout StickyHeader="true">
55
<HeaderSection>
66
<div>
77
<a class="nav-link py-2 px-2" href="@githubUrl" target="_blank" rel="noopener">

‎BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/Layout_Server_Demo_01.razor‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
@inherits LayoutComponentBase
22

3-
<div class="bb-page">
4-
5-
<Sidebar @ref="sidebar"
6-
IconName="IconName.BootstrapFill"
7-
Title="Blazor Bootstrap"
8-
DataProvider="SidebarDataProvider" />
9-
10-
<main>
11-
<div class="bb-top-row px-4 d-flex justify-content-end">
12-
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
13-
</div>
14-
15-
<article class="content px-4">
16-
<div class="py-2">
17-
@Body
18-
</div>
19-
</article>
20-
</main>
21-
22-
</div>
3+
<BlazorBootstrapLayout StickyHeader="true">
4+
<HeaderSection>
5+
<ThemeSwitcher Class="ps-3 ps-lg-2" />
6+
</HeaderSection>
7+
8+
<SidebarSection>
9+
<Sidebar2 Href="/"
10+
ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
11+
Title="Blazor Bootstrap"
12+
BadgeText="3.3.1"
13+
DataProvider="Sidebar2DataProvider"
14+
WidthUnit="Unit.Px" />
15+
</SidebarSection>
16+
17+
<ContentSection>
18+
@Body
19+
</ContentSection>
20+
21+
<FooterSection>
22+
Footer links...
23+
</FooterSection>
24+
</BlazorBootstrapLayout>
2325

2426
@code {
25-
private Sidebar sidebar = default!;
2627
private IEnumerable<NavItem> navItems = default!;
2728

28-
private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
29+
private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
2930
{
3031
if (navItems is null)
3132
navItems = GetNavItems();
@@ -36,11 +37,11 @@
3637
private IEnumerable<NavItem> GetNavItems()
3738
{
3839
navItems = new List<NavItem>
39-
{
40-
new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
41-
new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
42-
new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
43-
};
40+
{
41+
new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
42+
new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
43+
new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
44+
};
4445

4546
return navItems;
4647
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
@inherits LayoutComponentBase
22

3-
<div class="bb-page">
4-
5-
<Sidebar @ref="sidebar"
6-
IconName="IconName.BootstrapFill"
7-
Title="Blazor Bootstrap"
8-
DataProvider="SidebarDataProvider" />
9-
10-
<main>
11-
<div class="bb-top-row px-4 d-flex justify-content-end">
12-
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
13-
</div>
14-
15-
<article class="content px-4">
16-
<div class="py-2">
17-
@Body
18-
</div>
19-
</article>
20-
</main>
21-
22-
</div>
3+
<BlazorBootstrapLayout StickyHeader="true">
4+
<HeaderSection>
5+
<ThemeSwitcher Class="ps-3 ps-lg-2" />
6+
</HeaderSection>
7+
8+
<SidebarSection>
9+
<Sidebar2 Href="/"
10+
ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
11+
Title="Blazor Bootstrap"
12+
BadgeText="3.3.1"
13+
DataProvider="Sidebar2DataProvider"
14+
WidthUnit="Unit.Px" />
15+
</SidebarSection>
16+
17+
<ContentSection>
18+
@Body
19+
</ContentSection>
20+
21+
<FooterSection>
22+
Footer links...
23+
</FooterSection>
24+
</BlazorBootstrapLayout>
2325

2426
@code {
25-
private Sidebar sidebar = default!;
2627
private IEnumerable<NavItem> navItems = default!;
2728

28-
private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
29+
private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
2930
{
3031
if (navItems is null)
3132
navItems = GetNavItems();

‎BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,36 +10,36 @@
1010
@if (Size == HeadingSize.H2)
1111
{
1212
<h2 id="@Link!.ToLower()" class="@headerClassNames">
13-
<span class="anchor-name">@Name</span>
14-
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
13+
<span class="bb-anchor-name">@Name</span>
14+
<a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
1515
</h2>
1616
}
1717
else if (Size == HeadingSize.H3)
1818
{
1919
<h3 id="@Link!.ToLower()" class="@headerClassNames">
20-
<span class="anchor-name">@Name</span>
21-
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
20+
<span class="bb-anchor-name">@Name</span>
21+
<a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
2222
</h3>
2323
}
2424
else if (Size == HeadingSize.H4)
2525
{
2626
<h4 id="@Link!.ToLower()" class="@headerClassNames">
27-
<span class="anchor-name">@Name</span>
28-
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
27+
<span class="bb-anchor-name">@Name</span>
28+
<a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
2929
</h4>
3030
}
3131
else if (Size == HeadingSize.H5)
3232
{
3333
<h5 id="@Link!.ToLower()" class="@headerClassNames">
34-
<span class="anchor-name">@Name</span>
35-
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
34+
<span class="bb-anchor-name">@Name</span>
35+
<a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
3636
</h5>
3737
}
3838
else if (Size == HeadingSize.H6)
3939
{
4040
<h6 id="@Link!.ToLower()" class="@headerClassNames">
41-
<span class="anchor-name">@Name</span>
42-
<a class="be-doc-anchor-link ml-1" href="@link" @onclick="OnClick">#</a>
41+
<span class="bb-anchor-name">@Name</span>
42+
<a class="bb-anchor-link" href="@link" @onclick="OnClick">#</a>
4343
</h6>
4444
}
4545

‎BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -254,28 +254,28 @@ h1:focus-visible {
254254

255255
/*** END: home ***/
256256

257-
.anchor-link {
257+
.bb-anchor-link {
258258
font-weight: 400;
259259
color: rgba(13,110,253,0.5);
260260
transition: color 0.15s ease-in-out;
261261
opacity: 0;
262-
padding-left: 0.375em;
262+
/*padding-left: 0.375em;*/
263263
text-decoration: none;
264264
-webkit-font-smoothing: antialiased;
265265
}
266266

267267
@media (prefers-reduced-motion: reduce) {
268-
.anchor-link {
268+
.bb-anchor-link {
269269
transition: none
270270
}
271271
}
272272

273-
.anchor-link:focus, .anchor-link:hover {
273+
.bb-anchor-link:focus, .bb-anchor-link:hover {
274274
color: #0d6efd;
275275
text-decoration: none
276276
}
277277

278-
:hover > .anchor-link, .anchor-link:focus {
278+
:hover > .bb-anchor-link, .bb-anchor-link:focus {
279279
opacity: 1;
280280
}
281281

‎blazorbootstrap/Components/Layout/BlazorBootstrapLayout.razor.cs‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,19 @@ public partial class BlazorBootstrapLayout : BlazorBootstrapLayoutComponentBase
1313
[Parameter] public RenderFragment? FooterSection { get; set; }
1414
[Parameter] public string? FooterSectionCssClass { get; set; } = "bg-body-tertiary";
1515
protected string? FooterSectionCssClassNames => BuildClassNames(FooterSectionCssClass, ("bb-footer p-4", true));
16-
16+
1717
[Parameter] public RenderFragment? HeaderSection { get; set; }
1818
[Parameter] public string? HeaderSectionCssClass { get; set; } = "d-flex justify-content-end";
19-
protected string? HeaderSectionCssClassNames => BuildClassNames(HeaderSectionCssClass, ("bb-top-row px-4", true));
19+
20+
protected string? HeaderSectionCssClassNames =>
21+
BuildClassNames(
22+
HeaderSectionCssClass,
23+
("bb-top-row", true),
24+
("bb-top-row-sticky", StickyHeader),
25+
("px-4", true)
26+
);
27+
28+
[Parameter] public bool StickyHeader { get; set; }
2029

2130
[Parameter] public RenderFragment? SidebarSection { get; set; }
2231

‎blazorbootstrap/wwwroot/blazor.bootstrap.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ table > tbody > tr > td:is(.freeze-column-right).freeze-column-active {
458458
flex-direction: row !important;
459459
}
460460

461-
.bb-top-row {
461+
.bb-top-row-sticky {
462462
position: sticky;
463463
top: 0;
464464
z-index: 1;

‎docs/docs/02-layout/getting-started-server.mdx‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ Get started with the Enterprise-class Blazor Bootstrap Component library built o
1717

1818
Assuming you followed the getting started docs for the initial setup.
1919

20-
1. **Blazor WebAssembly Project:** Follow the [getting started](/getting-started/blazor-webassembly) steps for the initial setup.
21-
1. **Blazor Server Project:** Follow the [getting started](/getting-started/blazor-server) steps for the initial setup.
20+
1. **Blazor WebAssembly Project:** Follow the [getting started](/getting-started/blazor-webassembly-net-8) steps for the initial setup.
21+
1. **Blazor Server Project:** Follow the [getting started](/getting-started/blazor-webapp-server-global-net-8) steps for the initial setup.
2222

2323
## Steps
2424

@@ -31,33 +31,33 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
3131
```cshtml {} showLineNumbers
3232
@inherits LayoutComponentBase
3333
34-
<div class="bb-page">
35-
36-
<Sidebar @ref="sidebar"
37-
Href="/"
38-
IconName="IconName.BootstrapFill"
39-
Title="Blazor Bootstrap"
40-
DataProvider="SidebarDataProvider" />
41-
42-
<main>
43-
<div class="bb-top-row px-4 d-flex justify-content-end">
44-
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
45-
</div>
46-
47-
<article class="content px-4">
48-
<div class="py-2">
49-
@Body
50-
</div>
51-
</article>
52-
</main>
53-
54-
</div>
34+
<BlazorBootstrapLayout StickyHeader="true">
35+
<HeaderSection>
36+
<ThemeSwitcher Class="ps-3 ps-lg-2" />
37+
</HeaderSection>
38+
39+
<SidebarSection>
40+
<Sidebar2 Href="/"
41+
ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
42+
Title="Blazor Bootstrap"
43+
BadgeText="3.3.1"
44+
DataProvider="Sidebar2DataProvider"
45+
WidthUnit="Unit.Px" />
46+
</SidebarSection>
47+
48+
<ContentSection>
49+
@Body
50+
</ContentSection>
51+
52+
<FooterSection>
53+
Footer links...
54+
</FooterSection>
55+
</BlazorBootstrapLayout>
5556
5657
@code {
57-
private Sidebar sidebar = default!;
5858
private IEnumerable<NavItem> navItems = default!;
5959
60-
private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
60+
private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
6161
{
6262
if (navItems is null)
6363
navItems = GetNavItems();
@@ -68,11 +68,11 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
6868
private IEnumerable<NavItem> GetNavItems()
6969
{
7070
navItems = new List<NavItem>
71-
{
72-
new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
73-
new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
74-
new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
75-
};
71+
{
72+
new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
73+
new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
74+
new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
75+
};
7676
7777
return navItems;
7878
}
@@ -81,11 +81,9 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
8181

8282
## Starter templates
8383

84-
### .NET 6
85-
86-
1. [Blazor Bootstrap - Blazor WebAssembly App](https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp)
84+
### .NET 8
8785

88-
<img src="https://i.imgur.com/aRV3rJm.png" alt="Blazor Bootstrap - Blazor WebAssembly App" />
86+
TODO
8987

9088
### .NET 7
9189

@@ -96,3 +94,9 @@ Remove all the CSS content from the **Shared/MainLayout.razor.css** file.
9694
1. [Blazor Bootstrap - Blazor Empty WebAssembly App](https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyAppEmpty)
9795

9896
<img src="https://i.imgur.com/CBEoZ6P.png" alt="Blazor Bootstrap - Blazor Empty WebAssembly App" />
97+
98+
### .NET 6
99+
100+
1. [Blazor Bootstrap - Blazor WebAssembly App](https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp)
101+
102+
<img src="https://i.imgur.com/aRV3rJm.png" alt="Blazor Bootstrap - Blazor WebAssembly App" />

0 commit comments

Comments
 (0)