Material使用05 自定義主題、黑夜模式白天模式切換
需求:
1 不使用materil依賴內建的主題,使用自己創建的主題
2 利用自己創建的主題實現白天模式和黑夜模式
1 自定義主題
1.1 創建自定義主題文件 them.scss
// 引入material自定義主題支持 @import ‘~@angular/material/theming‘; // 引入material公用的主題風格 @include mat-core(); // 自定義顏色 $my-app-primary: mat-palette($mat-blue); $my-app-accent: mat-palette($mat-teal, A200, A100, A400); $myView Code-app-warn: mat-palette($mat-red); // 利用自定義顏色組裝自定義主題 $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); // 設置自定義主題,使其生效 @include angular-material-theme($my-app-theme);
1.1.1 引入material主題支持和material公用的主題風格
// 引入material自定義主題支持 @import ‘~@angular/material/theming‘;// 引入material公用的主題風格 @include mat-core();
1.1.2 根據material公用的主題風格設定自己的主題顏色
// 自定義顏色 $my-app-primary: mat-palette($mat-blue); // 主色 $my-app-accent: mat-palette($mat-teal, A200, A100, A400); // 副色 $my-app-warn: mat-palette($mat-red); // 警告色
代碼解釋01: $my-app-primary就是一個自定義的變量
代碼解釋02: $mat-blue表示使用material主題風格中的blue這種顏色
代碼解釋03: $my-app-primary: mat-palette($mat-blue); 表示通過material主題風格的函數將material主題風格中的blue顏色賦值給$my-app-primary變量
技巧01:如何查看material的主題風格中提供了哪些顏色 -> 點擊前往
1.1.3 利用自己的主題顏色組成自定義主題
// 利用自定義顏色組裝自定義主題 $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
1.1.4 設置主題顏色使其生效
// 設置自定義主題,使其生效 @include angular-material-theme($my-app-theme);
1.2 在全局樣式文件中引入自定義的主題文件them.scss
技巧01:需要將默認引入的materi內建主題註釋掉
/* You can add global styles to this file, and also import other style files */ // @import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css‘; // 導入material的內建主體 @import ‘theme.scss‘; html, body, app-root, md-sidenav-container, .site { width: 100%; height: 100%; margin: 0; } .site { display: flex; flex-direction: column; } header { // background-color: skyblue; } main { flex: 1; } footer { // background-color: skyblue; } .fill-remaining-space { // flex項目自動填充多余空間 flex: 1 1 auto; } .full-width { width: 100%; }View Code
1.3 效果如下
2 利用多主題實現多模式
2.1 添加黑夜主題
// 引入material自定義主題支持 @import ‘~@angular/material/theming‘; // 引入material公用的主題風格 @include mat-core(); // 自定義顏色 $my-app-primary: mat-palette($mat-blue); // 主色 $my-app-accent: mat-palette($mat-teal, A200, A100, A400); // 副色 $my-app-warn: mat-palette($mat-red); // 警告色 // 利用自定義顏色組裝自定義主題 $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); // 設置自定義主題,使其生效 @include angular-material-theme($my-app-theme); // 自定義顏色 $my-dark-primary: mat-palette($mat-blue-grey); // 主色 $my-dark-accent: mat-palette($mat-amber, A200, A100, A400); // 副色 $my-dark-warn: mat-palette($mat-deep-orange); // 警告色 // 利用自定義顏色組裝自定義主題 $my-dark-theme: mat-light-theme($my-dark-primary, $my-dark-accent, $my-dark-warn); // 設置自定義主題,使其生效 .myapp-dark-theme { @include angular-material-theme($my-dark-theme); }View Code
技巧01:將黑夜主題放在一個class類中進行引入,當這個類被激活時就表示開啟黑夜模式
2.2 在頁眉組件添加一個按鈕用於開啟或者關閉黑夜模式
2.2.1 在共享模塊中引入MdSlideToggleModule
import { NgModule } from ‘@angular/core‘; import { CommonModule } from ‘@angular/common‘; import { MdSidenavModule, MdToolbarModule, MdIconModule, MdButtonModule, MdIconRegistry, MdCardModule, MdInputModule, MdListModule, MdSlideToggleModule } from ‘@angular/material‘; import { HttpModule } from ‘@angular/http‘; @NgModule({ imports: [ CommonModule, HttpModule, MdSidenavModule, MdToolbarModule, MdIconModule, MdButtonModule, MdCardModule, MdInputModule, MdListModule, MdSlideToggleModule ], declarations: [], exports: [ CommonModule, MdSidenavModule, MdToolbarModule, MdIconModule, MdButtonModule, HttpModule, MdCardModule, MdInputModule, MdListModule, MdSlideToggleModule ] }) export class SharedModule { }View Code
2.2.2 在組件中使用MdSlideToggleModule提供的md-slide-toggle組件
<md-toolbar color="primary"> <button md-icon-button (click)="openSidebar()"> <md-icon>menu</md-icon> </button> <span>企業協作平臺</span> <!-- <md-icon>accessibility</md-icon> <md-icon svgIcon="header"></md-icon> --> <span class=‘fill-remaining-space‘></span> <md-slide-toggle (change)=‘onChange($event.checked)‘>黑夜模式</md-slide-toggle> </md-toolbar>View Code
代碼解釋01:<span class=‘fill-remaining-space‘></span>的主要作用是撐滿剩余的空間
代碼解釋02:(change)=‘onChange($event.checked)‘ 的作用是當md-slide-toggle組件發生變化時執行相應的方法,參數md-slide-toggle的當前值
技巧01:md-slide-toggle官方文檔 -> 點擊前往
2.2.3 在使用md-slide-toggle的組件編寫一個輸出變量
當md-slide-toggle組件的值發生變化時就將變化後的值發送給使用md-slide-toggle這個組件的父組件
import { Component, OnInit, Output, EventEmitter } from ‘@angular/core‘; @Component({ selector: ‘app-header‘, templateUrl: ‘./header.component.html‘, styleUrls: [‘./header.component.scss‘] }) export class HeaderComponent implements OnInit { @Output() toggle = new EventEmitter<void>(); @Output() toggleDarkTheme = new EventEmitter<boolean>(); constructor() { } ngOnInit() { } openSidebar() { this.toggle.emit(); } onChange(eventValue: boolean) { // console.log(‘是否黑夜模式:‘ + eventValue); this.toggleDarkTheme.emit(eventValue); } }View Code
2.2.4 在父組件中監聽使用md-slide-toggle的那個組件觸發的事件
<md-sidenav-container [class.myapp-dark-theme]="darkTheme"> <md-sidenav #sidenav mode="push"> <app-sidenav></app-sidenav> </md-sidenav> <div class="site"> <header> <app-header (toggle)="sidenav.toggle()" (toggleDarkTheme)="switchTheme($event)"></app-header> </header> <main> <router-outlet></router-outlet> </main> <footer> <app-footer></app-footer> </footer> </div> </md-sidenav-container>View Code
代碼解釋01:<app-header (toggle)="sidenav.toggle()" (toggleDarkTheme)="switchTheme($event)"></app-header> 當app-header組件觸發toggleDarkTheme會引發使用app-haeder組件的父組件觸發switchTheme方法,並將app-header組件發出的參數接收到作為switchTheme方法的參數
2.2.5 在父組件中編寫switchTheme方法
該方法根據接收到的參數真假來判斷是否開啟黑夜模式對應的class類
import { Component } from ‘@angular/core‘; @Component({ selector: ‘app-root‘, templateUrl: ‘./app.component.html‘, styleUrls: [‘./app.component.scss‘] }) export class AppComponent { darkTheme = false; switchTheme(dark) { this.darkTheme = dark; // alert(this.darkTheme); } }View Code
2.3 效果圖如下
2.3.1 白天模式
2.3.2 黑夜模式
2.4 待解決問題
2017年12月24日22:04:30
md-card組件的主題失效
md-side-nav組件的主題失效
Material使用05 自定義主題、黑夜模式\白天模式切換