-
-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split Grid demos to improve the page performance (#720)
Split Grid demos to improve the page performance.
- Loading branch information
Showing
67 changed files
with
716 additions
and
322 deletions.
There are no files selected for viewing
70 changes: 18 additions & 52 deletions
70
BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,40 @@ | ||
| @namespace BlazorBootstrap.Demo.RCL | ||
|
|
||
| @inherits LayoutComponentBase | ||
| @inherits MainLayoutBase | ||
|
|
||
| <div class="bb-page"> | ||
|
|
||
| <Sidebar @ref="sidebar" | ||
| <Sidebar2 @ref="sidebar2" | ||
| ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg" | ||
| Title="Blazor Bootstrap" | ||
| BadgeText="@version" | ||
| DataProvider="SidebarDataProvider" /> | ||
| BadgeText="@Version" | ||
| DataProvider="Sidebar2DataProvider" /> | ||
|
|
||
| <main class="bb-scrollbar"> | ||
| <div class="content my-4 my-md-4 px-4"> | ||
| @Body | ||
|
|
||
| <Callout Class="text-center text-bold skippy border-0" HideHeading="true"> | ||
| <a href="@githubUrl" class="text-decoration-none" b-09pcjsuuk4=""> | ||
| <a href="@GithubUrl" class="text-decoration-none" b-09pcjsuuk4=""> | ||
| <i class="bi bi-star-fill" b-09pcjsuuk4=""></i> | ||
| <span b-09pcjsuuk4="">If you like Blazor Bootstrap, give it a star on GitHub!</span> | ||
| <i class="bi bi-star-fill" b-09pcjsuuk4=""></i> | ||
| </a> | ||
| </Callout> | ||
| </div> | ||
| <div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-light"> | ||
| <div class="container px-4 px-md-3"> | ||
| <div class="row"> | ||
| <div class="col-lg-4 mb-3"> | ||
| <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap"> | ||
| <img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap"> | ||
| <span class="fs-5">Blazor Bootstrap</span> | ||
| </a> | ||
| <ul class="list-unstyled small text-muted"> | ||
| <li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li> | ||
| <li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li> | ||
| <li class="mb-2">Currently @version.</li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 offset-lg-1 mb-3"> | ||
| <h5>Links</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-2"><a href="/">Home</a></li> | ||
| <li class="mb-2"><a href="@docsUrl" target="_blank" rel="noopener">Docs</a></li><!--!--> | ||
| <li class="mb-2"><a href="@blogUrl" target="_blank" rel="noopener">Blog</a></li> | ||
| <li class="mb-2"><a href="@githubUrl" target="_blank" rel="noopener">GitHub</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 mb-3"> | ||
| <h5>Guides</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li> | ||
| <li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li> | ||
| <li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 mb-3"> | ||
| <h5>Community</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-2"><a href="@githubIssuesUrl" target="_blank" rel="noopener">Issues</a></li> | ||
| <li class="mb-2"><a href="@githubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li> | ||
| <li class="mb-2"><a href="@openCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li> | ||
| <li class="mb-2"><a href="@stackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 mb-3"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <MainLayoutBaseFooter Version="@Version" | ||
| DocsUrl="@DocsUrl" | ||
| BlogUrl="@BlogUrl" | ||
| GithubUrl="@GithubUrl" | ||
| TwitterUrl="@TwitterUrl" | ||
| LinkedInUrl="@LinkedInUrl" | ||
| OpenCollectiveUrl="@OpenCollectiveUrl" | ||
| GithubIssuesUrl="@GithubIssuesUrl" | ||
| GithubDiscussionsUrl="@GithubDiscussionsUrl" | ||
| StackoverflowUrl="@StackoverflowUrl" /> | ||
|
|
||
| </main> | ||
| </div> | ||
|
|
||
| <Modal IsServiceModal="true" /> | ||
| <Preload LoadingText="Loading..." /> | ||
| <Toasts class="p-3" AutoHide="true" Delay="4000" Placement="ToastsPlacement.TopRight" /> | ||
| <MainLayoutBaseServices /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| namespace BlazorBootstrap.Demo.RCL; | ||
|
|
||
| public class MainLayoutBase : LayoutComponentBase | ||
| { | ||
| private string version = default!; | ||
| private string docsUrl = default!; | ||
| private string blogUrl = default!; | ||
| private string githubUrl = default!; | ||
| private string twitterUrl = default!; | ||
| private string linkedInUrl = default!; | ||
| private string openCollectiveUrl = default!; | ||
| private string githubIssuesUrl = default!; | ||
| private string githubDiscussionsUrl = default!; | ||
| private string stackoverflowUrl = default!; | ||
|
|
||
| internal Sidebar2 sidebar2 = default!; | ||
| internal IEnumerable<NavItem> navItems = default!; | ||
|
|
||
| [Inject] public IConfiguration Configuration { get; set; } = default!; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| version = $"v{Configuration["version"]}"; // example: v0.6.1 | ||
| docsUrl = $"{Configuration["urls:docs"]}"; | ||
| blogUrl = $"{Configuration["urls:blog"]}"; | ||
| githubUrl = $"{Configuration["urls:github"]}"; | ||
| twitterUrl = $"{Configuration["urls:twitter"]}"; | ||
| linkedInUrl = $"{Configuration["urls:linkedin"]}"; | ||
| openCollectiveUrl = $"{Configuration["urls:opencollective"]}"; | ||
| githubIssuesUrl = $"{Configuration["urls:github_issues"]}"; | ||
| githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}"; | ||
| stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}"; | ||
| base.OnInitialized(); | ||
| } | ||
|
|
||
| internal virtual async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request) | ||
| { | ||
| if (navItems is null) | ||
| navItems = GetNavItems(); | ||
|
|
||
| return await Task.FromResult(request.ApplyTo(navItems)); | ||
| } | ||
|
|
||
| internal virtual IEnumerable<NavItem> GetNavItems() => new List<NavItem>(); | ||
|
|
||
| public string Version => version; | ||
| public string DocsUrl => docsUrl; | ||
| public string BlogUrl => blogUrl; | ||
| public string GithubUrl => githubUrl; | ||
| public string TwitterUrl => twitterUrl; | ||
| public string LinkedInUrl => linkedInUrl; | ||
| public string OpenCollectiveUrl => openCollectiveUrl; | ||
| public string GithubIssuesUrl => githubIssuesUrl; | ||
| public string GithubDiscussionsUrl => githubDiscussionsUrl; | ||
| public string StackoverflowUrl => stackoverflowUrl; | ||
| } |
73 changes: 73 additions & 0 deletions
73
BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| .page { | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .main { | ||
| flex: 1; | ||
| overflow-x: hidden; | ||
| /*width: 100%;*/ | ||
| } | ||
|
|
||
| .sidebar { | ||
| background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); | ||
| } | ||
|
|
||
| .top-row { | ||
| background-color: #f7f7f7; | ||
| border-bottom: 1px solid #d6d5d5; | ||
| justify-content: flex-end; | ||
| height: 3.5rem; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .top-row ::deep a, .top-row .btn-link { | ||
| white-space: nowrap; | ||
| margin-left: 1.5rem; | ||
| } | ||
|
|
||
| .top-row a:first-child { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| @media (max-width: 640.98px) { | ||
| .top-row:not(.auth) { | ||
| display: none; | ||
| } | ||
|
|
||
| .top-row.auth { | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .top-row a, .top-row .btn-link { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 641px) { | ||
| .page { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .sidebar { | ||
| width: 260px !important; | ||
| height: 100vh !important; | ||
| overflow-y: auto !important; | ||
| position: sticky !important; | ||
| top: 0 !important; | ||
| } | ||
|
|
||
| .top-row { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .main > div { | ||
| padding-left: 2rem !important; | ||
| padding-right: 1.5rem !important; | ||
| } | ||
| } |
48 changes: 48 additions & 0 deletions
48
BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| @namespace BlazorBootstrap.Demo.RCL | ||
| @inherits ComponentBase | ||
|
|
||
| <div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-light"> | ||
| <div class="container px-4 px-md-3"> | ||
| <div class="row"> | ||
| <div class="col-lg-4 mb-3"> | ||
| <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap"> | ||
| <img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap"> | ||
| <span class="fs-5">Blazor Bootstrap</span> | ||
| </a> | ||
| <ul class="list-unstyled small text-muted"> | ||
| <li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li> | ||
| <li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li> | ||
| <li class="mb-2">Currently @Version.</li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 offset-lg-1 mb-3"> | ||
| <h5>Links</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-2"><a href="/">Home</a></li> | ||
| <li class="mb-2"><a href="@DocsUrl" target="_blank" rel="noopener">Docs</a></li><!--!--> | ||
| <li class="mb-2"><a href="@BlogUrl" target="_blank" rel="noopener">Blog</a></li> | ||
| <li class="mb-2"><a href="@GithubUrl" target="_blank" rel="noopener">GitHub</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 mb-3"> | ||
| <h5>Guides</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li> | ||
| <li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li> | ||
| <li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 mb-3"> | ||
| <h5>Community</h5> | ||
| <ul class="list-unstyled"> | ||
| <li class="mb-2"><a href="@GithubIssuesUrl" target="_blank" rel="noopener">Issues</a></li> | ||
| <li class="mb-2"><a href="@GithubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li> | ||
| <li class="mb-2"><a href="@OpenCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li> | ||
| <li class="mb-2"><a href="@StackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-lg-2 mb-3"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
15 changes: 15 additions & 0 deletions
15
BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| namespace BlazorBootstrap.Demo.RCL; | ||
|
|
||
| public partial class MainLayoutBaseFooter : ComponentBase | ||
| { | ||
| [Parameter] public string? Version { get; set; } | ||
| [Parameter] public string? DocsUrl { get; set; } | ||
| [Parameter] public string? BlogUrl { get; set; } | ||
| [Parameter] public string? GithubUrl { get; set; } | ||
| [Parameter] public string? TwitterUrl { get; set; } | ||
| [Parameter] public string? LinkedInUrl { get; set; } | ||
| [Parameter] public string? OpenCollectiveUrl { get; set; } | ||
| [Parameter] public string? GithubIssuesUrl { get; set; } | ||
| [Parameter] public string? GithubDiscussionsUrl { get; set; } | ||
| [Parameter] public string? StackoverflowUrl { get; set; } | ||
| } |
6 changes: 6 additions & 0 deletions
6
BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseServices.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| @namespace BlazorBootstrap.Demo.RCL | ||
| @inherits ComponentBase | ||
|
|
||
| <Modal IsServiceModal="true" /> | ||
| <Preload LoadingText="Loading..." /> | ||
| <Toasts class="p-3" AutoHide="true" Delay="4000" Placement="ToastsPlacement.TopRight" /> |
File renamed without changes.
File renamed without changes.
Oops, something went wrong.