Merge pull request #5836 from abpframework/blazor-ui-page-header

Page Header Implementation

framework/src/Volo.Abp.BlazoriseUI/AbpCrudPageBase.cs

@@ -184,6 +184,7 @@ namespace Volo.Abp.BlazoriseUI
         protected TUpdateViewModel EditingEntity;
         protected Modal CreateModal;
         protected Modal EditModal;
+        protected List<BreadcrumbItem> BreadcrumbItems = new List<BreadcrumbItem>(2);
 
         protected string CreatePolicyName { get; set; }
         protected string UpdatePolicyName { get; set; }
@@ -239,6 +240,7 @@ namespace Volo.Abp.BlazoriseUI
 
         protected override async Task OnInitializedAsync()
         {
+            await SetBreadcrumbItemsAsync();
             await SetPermissionsAsync();
             await GetEntitiesAsync();
         }
@@ -438,5 +440,10 @@ namespace Volo.Abp.BlazoriseUI
 
             await AuthorizationService.CheckAsync(policyName);
         }
+
+        protected virtual ValueTask SetBreadcrumbItemsAsync()
+        {
+            return ValueTask.CompletedTask;
+        }
     }
 }

framework/src/Volo.Abp.BlazoriseUI/BreadcrumbItem.cs

@@ -0,0 +1,20 @@
+using Blazorise;
+
+namespace Volo.Abp.BlazoriseUI
+{
+    public class BreadcrumbItem
+    {
+        public string Text { get; set; }
+
+        public object Icon { get; set; }
+
+        public string Url { get; set; }
+
+        public BreadcrumbItem(string text, string url = null, object icon = null)
+        {
+            Text = text;
+            Url = url;
+            Icon = icon;
+        }
+    }
+}

framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor

@@ -0,0 +1,37 @@
+<Row Class="entry-row">
+    <Column ColumnSize="ColumnSize.IsAuto">
+        <h1 class="content-header-title">@Title</h1>
+    </Column>
+    @if (BreadcrumbItems.Any())
+    {
+        <Column ColumnSize="ColumnSize.IsAuto.OnWidescreen" Padding="Padding.Is0.FromLeft.OnWidescreen">
+            <Breadcrumb Mode="@(BreadcrumbShowCurrent ? BreadcrumbMode.Auto : BreadcrumbMode.None)">
+                @if (BreadcrumbShowHome)
+                {
+                    <BreadcrumbItem>
+                        <BreadcrumbLink To="/">
+                            <Icon Name="IconName.Home" />
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                }
+                @foreach (var item in BreadcrumbItems)
+                {
+                    <BreadcrumbItem>
+                        <BreadcrumbLink To="@item.Url">
+                            @if (item.Icon != null)
+                            {
+                                <Icon Name="@item.Icon" />
+                            }
+                            @item.Text
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                }
+            </Breadcrumb>
+        </Column>
+    }
+    <Column>
+        <Row Class="justify-content-end mx-n1">
+            @ChildContent
+        </Row>
+    </Column>
+</Row>

framework/src/Volo.Abp.BlazoriseUI/Components/PageHeader.razor.cs

@@ -0,0 +1,29 @@
+using System.Collections.Generic;
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+
+namespace Volo.Abp.BlazoriseUI.Components
+{
+    public partial class PageHeader : ComponentBase
+    {
+        [Parameter]
+        public string Title { get; set; }
+
+        [Parameter]
+        public bool BreadcrumbShowHome { get; set; } = true;
+
+        [Parameter]
+        public bool BreadcrumbShowCurrent { get; set; } = true;
+
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        [Parameter]
+        public List<BreadcrumbItem> BreadcrumbItems { get; set; }
+
+        public PageHeader()
+        {
+            BreadcrumbItems = new List<BreadcrumbItem>();
+        }
+    }
+}

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor/Pages/SettingManagement/SettingManagement.razor

@@ -1,26 +1,9 @@
 @page "/setting-management"
-@using Microsoft.Extensions.Localization
-@using Volo.Abp.SettingManagement.Localization
-@inject IStringLocalizer<AbpSettingManagementResource> L
 @inherits SettingManagementBase
-
 @* ************************* PAGE HEADER ************************* *@
-<div class="row entry-row">
+<PageHeader Title="@L["Settings"]" BreadcrumbItems="@BreadcrumbItems">
-    <div class="col-auto">
+
-        <h1 class="content-header-title">@L["Settings"]</h1>
+</PageHeader>
-    </div>
-    <div class="col-lg-auto pl-lg-0">
-        <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="~/"><i class="fa fa-home"></i> </a></li>
-            <li class="breadcrumb-item active" aria-current="page">@L["Settings"]</li>
-        </ol>
-    </div>
-    <div class="col">
-        <div class="text-lg-right pt-2" id="AbpContentToolbar">
-            
-        </div>
-    </div>
-</div>
 
 <Card>
     <CardBody>
@@ -39,7 +22,7 @@
                     <TabPanel Name="@GetNormalizedString(group.Id)">
                         <h2>@group.DisplayName</h2>
                         <Divider />
-                        
+
                         @{
                             SettingItemRenders.Add(builder =>
                             {
@@ -47,7 +30,7 @@
                                 builder.CloseComponent();
                             });
                         }
-                        
+
                         @SettingItemRenders.Last()
                     </TabPanel>
                 }

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor/Pages/SettingManagement/SettingManagement.razor.cs

@@ -3,7 +3,10 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 using Microsoft.Extensions.Options;
+using Volo.Abp.BlazoriseUI;
+using Volo.Abp.SettingManagement.Localization;
 
 namespace Volo.Abp.SettingManagement.Blazor.Pages.SettingManagement
 {
@@ -11,18 +14,21 @@ namespace Volo.Abp.SettingManagement.Blazor.Pages.SettingManagement
     {
         [Inject]
         protected IServiceProvider ServiceProvider { get; set; }
-        
+
         protected SettingComponentCreationContext SettingComponentCreationContext { get; set; }
 
         [Inject]
         protected IOptions<SettingManagementComponentOptions> _options { get; set; }
+        [Inject]
+        protected IStringLocalizer<AbpSettingManagementResource> L { get; set; }
 
         protected SettingManagementComponentOptions Options => _options.Value;
-        
+
         protected List<RenderFragment> SettingItemRenders { get; set; } = new List<RenderFragment>();
 
         protected string SelectedGroup;
-        
+        protected List<BreadcrumbItem> BreadcrumbItems = new List<BreadcrumbItem>();
+
         protected override async Task OnInitializedAsync()
         {
             SettingComponentCreationContext = new SettingComponentCreationContext(ServiceProvider);
@@ -31,10 +37,11 @@ namespace Volo.Abp.SettingManagement.Blazor.Pages.SettingManagement
             {
                 await contributor.ConfigureAsync(SettingComponentCreationContext);
             }
-            
+
             SettingItemRenders.Clear();
 
             SelectedGroup = GetNormalizedString(SettingComponentCreationContext.Groups.First().Id);
+            BreadcrumbItems.Add(new BreadcrumbItem(L["Settings"]));
         }
 
         protected string GetNormalizedString(string value)

modules/setting-management/src/Volo.Abp.SettingManagement.Blazor/_Imports.razor

@@ -1,5 +1,6 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Volo.Abp.AspNetCore.Components.WebAssembly
 @using Volo.Abp.BlazoriseUI
+@using Volo.Abp.BlazoriseUI.Components
 @using Blazorise
 @using Blazorise.DataGrid