From d4ffd9cc17fac3e7f045c7b27429bd498d56a14e Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 31 Jan 2022 10:50:16 +0300 Subject: [PATCH 1/5] Create PageLayout --- .../Layout/PageLayout.cs | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageLayout.cs diff --git a/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageLayout.cs b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageLayout.cs new file mode 100644 index 00000000000..9c0d89f70a7 --- /dev/null +++ b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageLayout.cs @@ -0,0 +1,16 @@ +using System.Collections.Generic; +using Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars; +using Volo.Abp.BlazoriseUI; +using Volo.Abp.DependencyInjection; + +namespace Volo.Abp.AspNetCore.Components.Web.Theming.Layout; + +public class PageLayout : IScopedDependency +{ + // TODO: Consider using this property for setting Page Title too. + public virtual string Title { get; set; } + + public virtual List BreadcrumbItems { get; set; } = new(); + + public virtual List ToolbarItems { get; set; } = new(); +} \ No newline at end of file From 27a90399351cf30a380f9150820555bc6ec3a80f Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 31 Jan 2022 11:11:00 +0300 Subject: [PATCH 2/5] Create PageHeaderOptions.cs --- .../Layout/PageHeaderOptions.cs | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeaderOptions.cs diff --git a/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeaderOptions.cs b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeaderOptions.cs new file mode 100644 index 00000000000..b61e53aab59 --- /dev/null +++ b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeaderOptions.cs @@ -0,0 +1,8 @@ +namespace Volo.Abp.AspNetCore.Components.Web.Theming.Layout; + +public class PageHeaderOptions +{ + public bool RenderPageTitle { get; set; } = true; + public bool RenderBreadcrumbs { get; set; } = true; + public bool RenderToolbar { get; set; } = true; +} From ab67dcfc026edd8cfba637c75f45af5e68c252dc Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 31 Jan 2022 11:11:22 +0300 Subject: [PATCH 3/5] Implement PageHeaderOptions & PageLayout --- .../Layout/PageHeader.razor | 50 ++++++++++++------- .../Layout/PageHeader.razor.cs | 22 ++++++-- 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor index d874da0901d..755adadb9e8 100644 --- a/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor +++ b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor @@ -1,9 +1,17 @@ @using Blazorise +@using Microsoft.Extensions.Options + +@inject IOptions Options + - -

@Title

- - @if (BreadcrumbItems.Any()) + @if(Options.Value.RenderPageTitle) + { + +

@PageLayout.Title

+ + } + + @if (Options.Value.RenderBreadcrumbs && PageLayout.BreadcrumbItems.Any()) { @@ -15,7 +23,7 @@ } - @foreach (var item in BreadcrumbItems) + @foreach (var item in PageLayout.BreadcrumbItems) { @@ -30,19 +38,23 @@ } - - - @if (Toolbar == null) - { - @ChildContent - } + + @if(Options.Value.RenderToolbar) + { + + + @if (Toolbar == null) + { + @ChildContent + } - @foreach (var toolbarItemRender in ToolbarItemRenders) - { - - @toolbarItemRender - - } - - + @foreach (var toolbarItemRender in ToolbarItemRenders) + { + + @toolbarItemRender + + } + + + } diff --git a/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor.cs b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor.cs index fd6bd50942e..10fbc3bfb7f 100644 --- a/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor.cs +++ b/framework/src/Volo.Abp.AspNetCore.Components.Web.Theming/Layout/PageHeader.razor.cs @@ -13,8 +13,11 @@ public partial class PageHeader : ComponentBase public IPageToolbarManager PageToolbarManager { get; set; } - [Parameter] - public string Title { get; set; } + [Inject] + public PageLayout PageLayout { get; private set; } + + [Parameter] // TODO: Consider removing this property in future and use only PageLayout. + public string Title { get => PageLayout.Title; set => PageLayout.Title = value; } [Parameter] public bool BreadcrumbShowHome { get; set; } = true; @@ -25,15 +28,17 @@ public partial class PageHeader : ComponentBase [Parameter] public RenderFragment ChildContent { get; set; } - [Parameter] - public List BreadcrumbItems { get; set; } + [Parameter] // TODO: Consider removing this property in future and use only PageLayout. + public List BreadcrumbItems { + get => PageLayout.BreadcrumbItems; + set => PageLayout.BreadcrumbItems = value; + } [Parameter] public PageToolbar Toolbar { get; set; } public PageHeader() { - BreadcrumbItems = new List(); ToolbarItemRenders = new List(); } @@ -45,6 +50,13 @@ protected async override Task OnParametersSetAsync() var toolbarItems = await PageToolbarManager.GetItemsAsync(Toolbar); ToolbarItemRenders.Clear(); + if (!Options.Value.RenderToolbar) + { + PageLayout.ToolbarItems.Clear(); + PageLayout.ToolbarItems.AddRange(toolbarItems); + return; + } + foreach (var item in toolbarItems) { var sequence = 0; From e9c081325cac00875218e442261ab9c927110aa6 Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 31 Jan 2022 11:11:42 +0300 Subject: [PATCH 4/5] Update documentation --- docs/en/UI/Blazor/Page-Header.md | 15 +++++++++++++ docs/en/UI/Blazor/Page-Layout.md | 36 ++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 docs/en/UI/Blazor/Page-Layout.md diff --git a/docs/en/UI/Blazor/Page-Header.md b/docs/en/UI/Blazor/Page-Header.md index 59748b717ab..b4801511bbc 100644 --- a/docs/en/UI/Blazor/Page-Header.md +++ b/docs/en/UI/Blazor/Page-Header.md @@ -88,3 +88,18 @@ An example render result can be: ![breadcrumbs-example](../../images/page-header-toolbar-blazor.png) +--- + +## Options +Rendering can be enabled or disabled for each section of PageHeader via using `PageHeaderOptions`. + +```csharp + Configure(options => + { + options.RenderPageTitle = false; + options.RenderBreadcrumbs = false; + options.RenderToolbar = false; + }); +``` + +*All values are **true** by default. If the PageHeaderOptions isn's configured, each section will be rendered.* \ No newline at end of file diff --git a/docs/en/UI/Blazor/Page-Layout.md b/docs/en/UI/Blazor/Page-Layout.md new file mode 100644 index 00000000000..61d91d66af1 --- /dev/null +++ b/docs/en/UI/Blazor/Page-Layout.md @@ -0,0 +1,36 @@ +# Page Layout +PageLayout is used to define page-specific elements across application. + + +## Title +Title is used to render page title in the PageHeader. + +```csharp +@inject PageLayout PageLayout + +@{ + PageLayout.Title = "My Page Title"; +} +``` + +## BreadCrumbs +BreadCrumbItems are used to render breadcrumbs in the PageHeader. +```csharp +@inject PageLayout PageLayout + +@{ + PageLayout.BreadcrumbItems.Add(new BlazoriseUI.BreadcrumbItem("My Page", "/my-page")); +} +``` + +## Toolbar +ToolbarItems are used to render action toolbar items in the PageHeader. + +Check out [Page Toolbar](https://docs.abp.io/en/abp/latest/UI/Blazor/Page-Header#page-toolbar) + +```csharp +@inject PageLayout PageLayout +@{ + PageLayout.ToolbarItems.Add(new PageToolbars.PageToolbarItem(typeof(MyButtonComponent))); +} +``` \ No newline at end of file From 9fb2f850e46c59991c7727ffb33ef57c07034b3a Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 31 Jan 2022 11:35:20 +0300 Subject: [PATCH 5/5] Fix typo at Page-Header.md --- docs/en/UI/Blazor/Page-Header.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/UI/Blazor/Page-Header.md b/docs/en/UI/Blazor/Page-Header.md index b4801511bbc..29cb006bd3a 100644 --- a/docs/en/UI/Blazor/Page-Header.md +++ b/docs/en/UI/Blazor/Page-Header.md @@ -102,4 +102,4 @@ Rendering can be enabled or disabled for each section of PageHeader via using `P }); ``` -*All values are **true** by default. If the PageHeaderOptions isn's configured, each section will be rendered.* \ No newline at end of file +*All values are **true** by default. If the PageHeaderOptions isn't configured, each section will be rendered.* \ No newline at end of file