iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
Modern Web

Angular 元件庫 NG-ZORRO 基礎入門系列 第 19

[Angular 元件庫 NG-ZORRO 基礎入門] - 主題切換 - 2

前言回顧

昨天介紹的主題方案,打包成多個主題包形式,當然也有通過修改 class 動態新增主題樣式的方式,我們也對其他幾種方式做個簡單介紹,更多的可參考文後的資料連結。

主題

class 切換

我們知道,以前我們使用不同 css 檔案來處理不同主題時,只要修改對應的 class 即可:

<div class="dark"></div>
<div class="light"></div>

css 覆蓋:

.dark {}
.light {}

這樣,在元素的 class 切換時不同的 css 會重新渲染繫結的元素,對於 Angular 專案我們同樣可以建立一個指令(Directive) 來動態修改 HTMLElementclass

$ cd ng-zorro-ironman2020
$ ng g directive services/theme --skip-import

修改指令內容:

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({
  selector: '[appTheme]'
})
export class ThemeDirective implements OnChanges {
  @Input('appTheme') theme: string;
  constructor(private el: ElementRef<HTMLElement>) {}
  ngOnChanges() {
    this.el.nativeElement.setAttribute('class', this.theme);
  }
}

這樣,在任意元素上我們就可以使用這個指令來動態變化其 class 值,使用方式也很簡單:

<div [appTheme]="'dark'"></div>
<div [appTheme]="'light'"></div>

剩下的就是對不同 class 做樣式設計了,點選檢視 stackblitz 線上程式碼

:host-context()

我們在閱讀 Angular 文件時,發現它在元件樣式一節介紹了一個方法 :host-context(),它是這樣介紹的:

有時候,基於某些來自元件檢視外部的條件應用樣式是很有用的。 例如,在文件的 <body> 元素上可能有一個用於表示樣式主題 (theme) 的 CSS 類,你應當基於它來決定元件的樣式。
這時可以使用 :host-context() 偽類選擇器。它也以類似 :host() 形式使用。它在當前元件宿主元素的祖先節點中查詢 CSS 類, 直到文件的根節點為止。在與其它選擇器組合使用時,它非常有用。

同樣地,我們看一下 stackblitz 線上程式碼,效果是一樣的,我們甚至可以在 :host-context() 中使用 @import 引入不同的樣式檔案來管理。

總結 & 預告

我們介紹了 class 切換:host-context() 選擇器來載入不同的樣式方法,通常來說,Ant Design 的主題方案與 NG-ZORRO 是互通的,如果有 React Ant Design 定製主題經驗的同學也可以直接接入,更多內容可以參考文後地址。

相關資料

  • Angular 元件樣式:https://angular.tw/guide/component-styles
  • 漫談 Angular 定製主題的四種方式:https://zhuanlan.zhihu.com/p/72178646

上一篇
[Angular 元件庫 NG-ZORRO 基礎入門] Day 18 - 主題切換 - 1
下一篇
[Angular 元件庫 NG-ZORRO 基礎入門] Day 20 - 實驗性功能 Resizable
系列文
Angular 元件庫 NG-ZORRO 基礎入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言