From 6b996e8ba2880ae81b0f32439e5d7ffb52f34e55 Mon Sep 17 00:00:00 2001 From: cipchk Date: Thu, 31 Aug 2023 14:29:16 +0800 Subject: [PATCH 1/3] feat(abc:page-header): add `titleSub` property --- packages/abc/page-header/demo/structure.md | 1 + packages/abc/page-header/index.en-US.md | 1 + packages/abc/page-header/index.zh-CN.md | 1 + packages/abc/page-header/page-header.component.html | 7 ++++++- packages/abc/page-header/page-header.component.ts | 1 + packages/abc/page-header/page-header.module.ts | 11 ++++++++++- packages/abc/page-header/page-header.spec.ts | 7 +++++++ 7 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/abc/page-header/demo/structure.md b/packages/abc/page-header/demo/structure.md index 4ffe9ae565..9157769c4b 100644 --- a/packages/abc/page-header/demo/structure.md +++ b/packages/abc/page-header/demo/structure.md @@ -16,6 +16,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; template: ` ` | - | ✅ | +| `[titleSub]` | Sub title of the page | `string,TemplateRef` | - | ✅ | | `[autoTitle]` | Whether to automatically generate the title and locate it from the main menu with the current route | `boolean` | `true` | ✅ | | `[syncTitle]` | Whether to automatically synchronize the title to `TitleService`, `ReuseService`, only valid when `title` is of type `string` | `boolean` | `true` | ✅ | | `[home]` | Home page text of the breadcrumb, if empty is specified, it will not be displayed | `string` | `首页` | ✅ | diff --git a/packages/abc/page-header/index.zh-CN.md b/packages/abc/page-header/index.zh-CN.md index b3ffd83148..47097d187b 100644 --- a/packages/abc/page-header/index.zh-CN.md +++ b/packages/abc/page-header/index.zh-CN.md @@ -15,6 +15,7 @@ module: import { PageHeaderModule } from '@delon/abc/page-header'; | 成员 | 说明 | 类型 | 默认值 | 全局配置 | |----|----|----|-----|------| | `[title]` | 标题名 | `string,TemplateRef` | - | ✅ | +| `[titleSub]` | 子标题 | `string,TemplateRef` | - | ✅ | | `[autoTitle]` | 是否自动生成标题，以当前路由从主菜单中定位 | `boolean` | `true` | ✅ | | `[syncTitle]` | 是否自动将标题同步至 `TitleService`、`ReuseService` 下，仅 `title` 为 `string` 类型时有效 | `boolean` | `true` | ✅ | | `[home]` | 首页文本，若指定空表示不显示 | `string` | `首页` | ✅ | diff --git a/packages/abc/page-header/page-header.component.html b/packages/abc/page-header/page-header.component.html index 81fe8575bd..8f9b25e1f8 100644 --- a/packages/abc/page-header/page-header.component.html +++ b/packages/abc/page-header/page-header.component.html @@ -29,7 +29,12 @@

- {{ _titleVal }} + + {{ _titleVal }} + + {{ titleSub }} + +

diff --git a/packages/abc/page-header/page-header.component.ts b/packages/abc/page-header/page-header.component.ts index 44da4cd99f..2d10040bab 100644 --- a/packages/abc/page-header/page-header.component.ts +++ b/packages/abc/page-header/page-header.component.ts @@ -80,6 +80,7 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit { this._titleVal = this._title; } } + @Input() titleSub?: string | TemplateRef | null; @Input() @InputBoolean() loading = false; @Input() @InputBoolean() wide = false; diff --git a/packages/abc/page-header/page-header.module.ts b/packages/abc/page-header/page-header.module.ts index 82d9a98693..3c7495ae92 100644 --- a/packages/abc/page-header/page-header.module.ts +++ b/packages/abc/page-header/page-header.module.ts @@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router'; import { NzAffixModule } from 'ng-zorro-antd/affix'; import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; +import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzSkeletonModule } from 'ng-zorro-antd/skeleton'; import { PageHeaderComponent } from './page-header.component'; @@ -12,7 +13,15 @@ import { PageHeaderComponent } from './page-header.component'; const COMPONENTS = [PageHeaderComponent]; @NgModule({ - imports: [CommonModule, RouterModule, ObserversModule, NzAffixModule, NzSkeletonModule, NzBreadCrumbModule], + imports: [ + CommonModule, + RouterModule, + ObserversModule, + NzAffixModule, + NzSkeletonModule, + NzBreadCrumbModule, + NzOutletModule + ], declarations: COMPONENTS, exports: COMPONENTS }) diff --git a/packages/abc/page-header/page-header.spec.ts b/packages/abc/page-header/page-header.spec.ts index 3dc964338a..dd66d6f05f 100644 --- a/packages/abc/page-header/page-header.spec.ts +++ b/packages/abc/page-header/page-header.spec.ts @@ -102,6 +102,11 @@ describe('abc: page-header', () => { isExists('.page-header__title', false); }); }); + it('#titleSub', () => { + context.titleSub = 'sub'; + fixture.detectChanges(); + isExists('.page-header__title small'); + }); ['breadcrumb', 'logo', 'action', 'content', 'extra', 'tab'].forEach(type => { it(`#${type}`, () => isExists(`.${type}`)); @@ -418,6 +423,7 @@ class TestBaseComponent { @ViewChild('comp', { static: true }) comp!: PageHeaderComponent; title: string | null = '所属类目'; + titleSub?: string | null; autoBreadcrumb?: boolean; autoTitle?: boolean; syncTitle?: boolean; @@ -434,6 +440,7 @@ class TestBaseComponent { Date: Thu, 31 Aug 2023 14:51:39 +0800 Subject: [PATCH 2/3] chore: fix style --- packages/abc/page-header/style/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less index 2dde785df0..afdd26e884 100644 --- a/packages/abc/page-header/style/index.less +++ b/packages/abc/page-header/style/index.less @@ -51,6 +51,7 @@ small { padding-left: @layout-gutter; + color: fade(@heading-color, 70%); font-weight: normal; font-size: 14px; } From 8e961be1bc5ba6631ad95baeadf3a6fe6b500a4c Mon Sep 17 00:00:00 2001 From: cipchk Date: Thu, 31 Aug 2023 14:55:00 +0800 Subject: [PATCH 3/3] chore: fix style --- packages/abc/page-header/style/index.less | 2 +- packages/abc/theme-default.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less index afdd26e884..1bfdc251c5 100644 --- a/packages/abc/page-header/style/index.less +++ b/packages/abc/page-header/style/index.less @@ -51,7 +51,7 @@ small { padding-left: @layout-gutter; - color: fade(@heading-color, 70%); + color: @page-header-title-sub-color; font-weight: normal; font-size: 14px; } diff --git a/packages/abc/theme-default.less b/packages/abc/theme-default.less index b042e37f48..2cf19fb2bc 100644 --- a/packages/abc/theme-default.less +++ b/packages/abc/theme-default.less @@ -57,6 +57,7 @@ @page-header-bg: #fff; @page-header-padding: 16px 32px 0 32px; @page-header-wide: 1200px; +@page-header-title-sub-color: fade(@heading-color, 40%); // quick-menu // --