diff --git a/README.md b/README.md
index b37b1c8a..dab2ca25 100755
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
## Angular Support
-Now supports Angular `^15.0.0`
+Now supports Angular `^16.0.0`
## Getting Started
diff --git a/README_zh_CN.md b/README_zh_CN.md
index d5fc9fa3..d4366435 100644
--- a/README_zh_CN.md
+++ b/README_zh_CN.md
@@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
## Angular版本
-当前支持的angular版本`^15.0.0`
+当前支持的angular版本`^16.0.0`
## 快速开始
diff --git a/angular.json b/angular.json
index 257c0bd9..80bfbfc0 100755
--- a/angular.json
+++ b/angular.json
@@ -207,6 +207,5 @@
}
}
}
- },
- "defaultProject": "devui"
+ }
}
diff --git a/devui-commons/src/devui-commons.scss b/devui-commons/src/devui-commons.scss
index 451c3d6e..2083345b 100644
--- a/devui-commons/src/devui-commons.scss
+++ b/devui-commons/src/devui-commons.scss
@@ -234,6 +234,12 @@
}
}
+@media (max-width: 767px) {
+ .devui-content-layout {
+ margin-top: 56px;
+ }
+}
+
body[ui-lang='en-us'] {
@media (max-width: 1480px) {
d-common-header .devui-search {
@@ -242,6 +248,12 @@ body[ui-lang='en-us'] {
}
}
+body[ui-theme='galaxy-theme'] {
+ .header-container {
+ background-image: linear-gradient(179deg, #141721 0%, #1A1E29 100%);
+ }
+}
+
// 设置引导页MarkDown文档标题
.readme {
h1 {
diff --git a/devui-commons/src/header/header.component.html b/devui-commons/src/header/header.component.html
index 94b0752e..fa91a9f9 100644
--- a/devui-commons/src/header/header.component.html
+++ b/devui-commons/src/header/header.component.html
@@ -1,8 +1,45 @@
-
+
+
+
+
\ No newline at end of file
diff --git a/devui-commons/src/header/header.component.scss b/devui-commons/src/header/header.component.scss
index f759e5f4..c79f3935 100644
--- a/devui-commons/src/header/header.component.scss
+++ b/devui-commons/src/header/header.component.scss
@@ -79,4 +79,52 @@
stroke: none;
}
}
-}
\ No newline at end of file
+}
+
+.mobile-header-container {
+ display: flex;
+ align-items: center;
+ position: fixed;
+ z-index: 1000;
+ width: 100%;
+ background-image: linear-gradient(179deg, #E9FBFF 0%, #F3F5FF 100%);
+ .mobile-header-left {
+ display: flex;
+ align-items: center;
+ }
+ .mobile-hamburger {
+ margin-left: 12px;
+ }
+
+ .expand-sidebar {
+ margin-top: 0 !important;
+ margin-left: 12px;
+ }
+}
+
+.mobile-sider {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ position: fixed;
+ top: 56px;
+ left: 0;
+
+ height: calc(100vh - 56px);
+ width: 0;
+ background-color: $devui-base-bg;
+ transition: all 0.3s;
+}
+
+.mobile-sider-show {
+ width: 242px !important;
+ padding: 12px;
+}
+
+.mobile-bottom-menu-hidden {
+ display: none;
+}
+
+.mobile-bottom-menu-show {
+ display: block !important;
+}
diff --git a/devui-commons/src/header/header.component.ts b/devui-commons/src/header/header.component.ts
index 4d15a09a..6f4f4a6b 100644
--- a/devui-commons/src/header/header.component.ts
+++ b/devui-commons/src/header/header.component.ts
@@ -1,20 +1,10 @@
import { DOCUMENT } from '@angular/common';
-import { Component, ContentChildren, HostListener, Inject, Input, isDevMode, OnInit, QueryList } from '@angular/core';
+import { Component, ContentChildren, HostListener, Inject, Input, isDevMode, OnInit, QueryList, ChangeDetectorRef } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { DevuiCommonsService } from '../devui-commons.service';
import { I18nUtil } from '../i18n/i18n.util';
import { LogoComponent } from './logo/logo.component';
-export interface UserInfo {
- displayNameCn: string;
- uid?:string;
- employeeNumber: string;
- iconUrl:string;
- docCount?:number;
- questionCount?:number;
- draftCount?:number;
-};
-
@Component({
selector: 'd-common-header',
templateUrl: './header.component.html',
@@ -30,6 +20,7 @@ export class HeaderComponent implements OnInit {
@Input() repoName = 'ng-devui';
repoLink!: SafeResourceUrl;
+ githubLink;
@ContentChildren(LogoComponent) subLogo: QueryList = new QueryList();
@@ -42,6 +33,10 @@ export class HeaderComponent implements OnInit {
MIN_WIDTH = 1279;
showExpandButton = false;
showCollapseButton = false;
+ showHamburger = false;
+ showMobileHeader = false;
+ isHomePage = false;
+ mediaQuery;
@HostListener('window:resize')
@@ -55,6 +50,7 @@ export class HeaderComponent implements OnInit {
constructor(
private commonsService: DevuiCommonsService,
private sanitizer: DomSanitizer,
+ private cdr: ChangeDetectorRef,
@Inject(DOCUMENT) private doc: any,
) {
this.document = this.doc;
@@ -68,6 +64,20 @@ export class HeaderComponent implements OnInit {
this.showExpandButton = this.document.body.clientWidth < this.MIN_WIDTH ? true : false;
this.setSlideBarStyle();
this.repoLink = this.sanitizer.bypassSecurityTrustResourceUrl(`https://ghbtns.com/github-btn.html?user=DevCloudFE&repo=${this.repoName}&type=star&count=true`);
+ this.githubLink = `https://github.com/DevCloudFE/${this.repoName}`;
+ this.isHomePage = window.location.pathname.split('/')[1] === 'home' ? true : false;
+ this.mediaQuery = window.matchMedia('(max-width: 767px)');
+ this.mediaQuery.addListener(this.handleScreenChange);
+ this.handleScreenChange(this.mediaQuery);
+ }
+
+ handleScreenChange = (e) => {
+ if (e.matches) {
+ this.showMobileHeader = true;
+ } else {
+ this.showMobileHeader = false;
+ }
+ this.cdr.detectChanges();
}
onSearch(term): void {
@@ -90,7 +100,8 @@ export class HeaderComponent implements OnInit {
this.showCollapseButton = false;
this.showExpandButton = true;
}
-
+ this.cdr.detectChanges();
+
this.showSlideMenu = typeof showMenu === 'boolean' ? showMenu : !this.showSlideMenu;
this.setSlideBarStyle(true);
}
@@ -114,4 +125,9 @@ export class HeaderComponent implements OnInit {
this.curLanguage = lang;
this.searchPlaceholder = this.curLanguage === 'zh-cn' ? '请输入你想查找的组件' : 'Enter the component';
}
-}
+
+ toggleHamburger(event) {
+ this.showHamburger = !this.showHamburger;
+ this.cdr.detectChanges();
+ }
+}
\ No newline at end of file
diff --git a/devui-commons/src/header/language-switch/language-switch.component.html b/devui-commons/src/header/language-switch/language-switch.component.html
index 5ccd2bed..42feca07 100644
--- a/devui-commons/src/header/language-switch/language-switch.component.html
+++ b/devui-commons/src/header/language-switch/language-switch.component.html
@@ -1,32 +1,5 @@
diff --git a/devui-commons/src/header/language-switch/language-switch.component.ts b/devui-commons/src/header/language-switch/language-switch.component.ts
index 74c7fa0b..654e2006 100644
--- a/devui-commons/src/header/language-switch/language-switch.component.ts
+++ b/devui-commons/src/header/language-switch/language-switch.component.ts
@@ -1,4 +1,3 @@
-import { I18nService } from 'ng-devui/i18n';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DevuiCommonsService } from '../../devui-commons.service';
import { I18nUtil } from '../../i18n/i18n.util';
@@ -11,12 +10,9 @@ import { I18nUtil } from '../../i18n/i18n.util';
export class LanguageSwitchComponent implements OnInit {
@Input() languageArr: string[] = ['CN', 'EN'];
@Output() languageEvent = new EventEmitter();
- currentLang!: string;
+ currentLang: string;
- constructor(
- private commonsService: DevuiCommonsService,
- private i18n: I18nService
- ) { }
+ constructor(private commonsService: DevuiCommonsService) { }
ngOnInit(): void {
this.currentLang = I18nUtil.getCurrentLanguage();
@@ -26,7 +22,6 @@ export class LanguageSwitchComponent implements OnInit {
this.currentLang = this.currentLang === 'zh-cn' ? 'en-us' : 'zh-cn';
localStorage.setItem('lang', this.currentLang);
this.languageEvent.emit(this.currentLang);
- this.i18n.toggleLang(this.currentLang);
this.commonsService.broadcast('languageEvent', this.currentLang);
}
}
\ No newline at end of file
diff --git a/devui-commons/src/header/logo/logo.component.html b/devui-commons/src/header/logo/logo.component.html
index 49da0e14..c2650952 100644
--- a/devui-commons/src/header/logo/logo.component.html
+++ b/devui-commons/src/header/logo/logo.component.html
@@ -1,33 +1,59 @@