Merge pull request #11509 from abpframework/enisn/blazor-page-header

Introduce PageLayout to expose blazor breadcrumb items & action-toolbar items
abpframework · Jan 31, 2022 · 6b06c58 · 6b06c58
2 parents 96144ab + 9fb2f85
commit 6b06c58
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 24 deletions.
diff --git 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<PageHeaderOptions>(options => 
+    {
+        options.RenderPageTitle = false;
+        options.RenderBreadcrumbs = false;
+        options.RenderToolbar = false;
+    });
+```
+
+*All values are **true** by default. If the PageHeaderOptions isn't configured, each section will be rendered.*
diff --git a/docs/en/UI/Blazor/Page-Layout.md 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)));
+}
+```
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
@@ -1,9 +1,17 @@
 @using Blazorise
+@using Microsoft.Extensions.Options
+
+@inject IOptions<PageHeaderOptions> Options
+
 <Row Class="entry-row">
-    <Column ColumnSize="ColumnSize.IsAuto">
-        <h1 class="content-header-title">@Title</h1>
-    </Column>
-    @if (BreadcrumbItems.Any())
+    @if(Options.Value.RenderPageTitle)
+    {   
+        <Column ColumnSize="ColumnSize.IsAuto">
+            <h1 class="content-header-title">@PageLayout.Title</h1>
+        </Column>
+    }
+
+    @if (Options.Value.RenderBreadcrumbs &&  PageLayout.BreadcrumbItems.Any())
     {
         <Column ColumnSize="ColumnSize.IsAuto.OnWidescreen" Padding="Padding.Is0.FromLeft.OnWidescreen">
             <Breadcrumb Mode="@(BreadcrumbShowCurrent ? BreadcrumbMode.Auto : BreadcrumbMode.None)">
@@ -15,7 +23,7 @@
                         </BreadcrumbLink>
                     </BreadcrumbItem>
                 }
-                @foreach (var item in BreadcrumbItems)
+                @foreach (var item in  PageLayout.BreadcrumbItems)
                 {
                     <BreadcrumbItem>
                         <BreadcrumbLink To="@item.Url">
@@ -30,19 +38,23 @@
             </Breadcrumb>
         </Column>
     }
-    <Column>
-        <Row Class="justify-content-end mx-n1">
-            @if (Toolbar == null)
-            {
-                @ChildContent
-            }
+
+    @if(Options.Value.RenderToolbar)
+    {
+        <Column>
+            <Row Class="justify-content-end mx-n1">
+                @if (Toolbar == null)
+                {
+                    @ChildContent
+                }
 
-            @foreach (var toolbarItemRender in ToolbarItemRenders)
-            {
-                <Column ColumnSize="ColumnSize.IsAuto" Class="px-1 pt-2">
-                    @toolbarItemRender
-                </Column>
-            }
-        </Row>
-    </Column>
+                @foreach (var toolbarItemRender in ToolbarItemRenders)
+                {
+                    <Column ColumnSize="ColumnSize.IsAuto" Class="px-1 pt-2">
+                        @toolbarItemRender
+                    </Column>
+                }
+            </Row>
+        </Column>
+    }
 </Row>
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
@@ -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<BreadcrumbItem> BreadcrumbItems { get; set; }
+    [Parameter] // TODO: Consider removing this property in future and use only PageLayout.
+    public List<BreadcrumbItem> BreadcrumbItems {
+        get => PageLayout.BreadcrumbItems;
+        set => PageLayout.BreadcrumbItems = value;
+    }
 
     [Parameter]
     public PageToolbar Toolbar { get; set; }
 
     public PageHeader()
     {
-        BreadcrumbItems = new List<BreadcrumbItem>();
         ToolbarItemRenders = new List<RenderFragment>();
     }
 
@@ -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;

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
@@ -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;
+}
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
@@ -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<BreadcrumbItem> BreadcrumbItems { get; set; } = new();
+
+    public virtual List<PageToolbarItem> ToolbarItems { get; set; } = new();
+}