Angular - 元件樣式

上一頁
下一頁

Angular 元件可以使用 CSS 以及流行的預處理器（如 Sass 和 Less）進行樣式設定。本章將介紹為 Angular 元件應用樣式的不同技術，以及元件使用者安全有效地自定義樣式的不同方法。

在元件檢視中應用樣式

styles

styles 屬性是為元件設定樣式最簡單、最快捷的方法。styles 是 @Component 裝飾器的屬性，它接受 CSS 樣式陣列並將其應用於元件檢視。使用元件中的 styles 的虛擬碼如下：

@Component({
   // selector and template code
   
   styles: ['p { font-style: italic; }', 'em { font-style: italic;
   font-weight: bold }']
   
   // other properties / meta data
})
export class MyComponent {
   // ...
}

限制

使用 styles 應用的樣式將僅影響透過元件模板生成的元件檢視，不會繼承到元件模板中巢狀元件的檢視，也不會繼承到元件檢視中投影的任何內容。

styleUrls

styleUrls 是 @Component 裝飾器的屬性，類似於 styles 屬性。它接受 CSS 樣式檔案路徑陣列而不是樣式本身，並將其應用於元件檢視。使用元件中 styleUrls 的虛擬碼如下：

@Component({
   // selector and template code
   
   styleUrls: ['my-component.component.css', 'my-component-another.component.css']
   
   // other properties / meta data
})
export class MyComponent {
   // ...
}

限制

使用 styleUrls 應用的樣式將僅影響透過元件模板生成的元件檢視，不會繼承到元件模板中巢狀元件的檢視，也不會繼承到元件檢視中投影的任何內容。

透過模板設定樣式

透過模板設定樣式是使用 HTML 中的 CSS 樣式的傳統方法，透過 @Component 裝飾器的 template 屬性實現。它有兩種選擇。

  • 使用 html style 標籤內聯樣式
  • 透過 link 標籤連結 CSS 檔案

透過模板設定樣式不會將樣式限制在元件檢視中，而是應用於從元件生成的整個 HTML，包括巢狀元件和投影。

使用 style 標籤應用樣式

使用 style 標籤應用樣式的虛擬碼如下：

@Component({
   // selector
   
   template: `
      <style>
         h1 {
               color: red;
         }
      </style>
      <h1>Hello</h1>
   `,
   
   // other properties / meta data
})
export class MyComponent {
   // ...
}

使用 link 標籤應用樣式

使用 link 標籤應用樣式的虛擬碼如下：

@Component({
   // selector
   
   template: `
      <link rel="stylesheet" href="../assets/my-component.component.css">
      <h1>Hello</h1>
   `,
   
   // other properties / meta data
})
export class MyComponent {
   // ...
}

CSS 檔案路徑應相對於元件檔案。否則，生成的 HTML 中的 CSS 路徑可能指向錯誤的檔案或不存在的檔案。

@import 可用於 CSS 檔案中載入更多 CSS 檔案，匯入檔案應相對於主機 CSS 檔案。

@import './another-css.css'

透過全域性樣式

全域性樣式將在應用程式建立期間配置。Angular CLI 將 src/styles.css 檔案設定為全域性樣式表。我們可以用它來設定針對應用程式中任何內容的樣式。我們可以根據需要使用全域性設定來設定一個或多個樣式表。以下程式碼片段顯示了透過 Angular CLI 在應用程式建立期間建立的初始 Angular 配置。

{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
      "tutorial": {
         // ...
         "architect": {
            "build": {
               "builder": "@angular-devkit/build-angular:browser",
               "options": {
                  "outputPath": "dist/tutorial",
                  "index": "src/index.html",
                  "main": "src/main.ts",
                  "polyfills": [
                     "zone.js"
                  ],
                  "tsConfig": "tsconfig.app.json",
                  "assets": [
                     "src/favicon.ico",
                     "src/assets"
                  ],
                  "styles": [
                     "src/styles.css"
                  ],
                  "scripts": []
               },
               "configurations": {
                  "production": {
                     // ...
                  },
                  "development": {
                     // ...
                  }
               },
               "defaultConfiguration": "production"
            },
         }
      }
   }
}

使用 CSS 預處理器

Angular 不僅允許使用純 CSS 來設定元件的樣式，還允許使用流行的 CSS 預處理器，如 Sass 和 Less。使用 Sass 和 Less 就像包含 Sass 和 Less 檔案一樣簡單，而不是 CSS 檔案。

元件 styleUrls 可以用來包含 Sass 和 Less，如下所示。

@Component({
   // selector and template code
   
   styleUrls: ['my-component.component.scss']
   
   // other properties / meta data
})
export class MyComponent {
   // ...
}

CSS 預處理器可以在專案級別或透過 Angular 設定在元件級別配置。Angular CLI ng new 將在初始專案建立期間詢問預處理器設定。

$ ng new myapp
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org

Angular CLI 將使用正確的 CSS 預處理器配置專案。

提供元件樣式自定義

通常，每個 Angular 元件都與其關聯的預設樣式。由於元件可以在各種場景中使用，因此有必要自定義元件的樣式以匹配給定的場景。一個好的元件應該有一種清晰的方法來更改樣式以適應使用元件的環境。Angular 提供了四種自定義元件樣式的方法。

  • CSS 自定義屬性
  • 全域性 CSS 以及 @mixins
  • 使用 shadow DOM 的偽選擇器
  • 使用元件屬性/API

CSS 自定義屬性

CSS 提供 CSS 變數來儲存樣式。定義 CSS 變數後，它可以在任何 CSS 屬性中使用，並允許透過更改 CSS 變數的值來更改應用程式中的某些樣式。

讓我們看看如何定義和使用 CSS 變數。CSS 變數可以使用 :root 偽選擇器建立，如下所示：

:root {
   --myColor: red;
}

這裡，定義了 myColor 變數，其初始值為紅色。myColor 變數可以在另一個 CSS 屬性中使用，如下所示：

p {
   color: var(--myColor, grey);
}

這裡，顏色將設定為 myColor 的值（在本例中為紅色）。如果 myColor 沒有值或未定義，則將灰色設定為顏色。

可以透過使用元件屬性和 CSS 變數在元件中應用相同的概念，如下所示。

  • 在元件中宣告 CSS 變數myColorVar 的屬性，如下所示：

@Component({ 
   // setting
})
export class MyComponent {
   myColorVar: string = null;
}

  • 在樣式（模板）中使用 CSS 變數 myColor 和元件屬性 myColorVar，如下所示：

<p [style.--myColor]="myColorVar">Hello</p>

  • 現在，可以透過更改 :root 偽選擇器中的 CSS 變數來自定義元件，如下所示：

:root {
   --myColor: green;
}

全域性 CSS 和 @mixins

CSS 預處理器提供了一個很好的選項，可以使用 mixin 概念根據需要混合 CSS 中的不同樣式。Mixin 只是將一個或多個 CSS 樣式組合在一起並命名，然後在需要的地方使用定義的名稱。讓我們定義兩個 mixin，一個用於顏色，另一個用於字型樣式。

@mixin color($c) {
   color: $c;
}

@mixin fontstyle($fs) {
   font-style: $fs;
}

接下來，我們可以使用 mixin 使用 @include 選項定義全域性樣式，如下所示：

.mystyle {
   @include color('red');
   @include fontstyle('italic');
}

最後，使用者可以在全域性樣式中自定義顏色和字型樣式，而不會干擾元件。

shadow DOM 的偽選擇器

使用 shadow DOM 的元件可以使用 part 屬性設定，允許使用者使用 CSS 樣式中的 ::part 偽選擇器自定義樣式，如下所示：

<template id="my-web-component">
   <h1 part="hello">Hello</h1>
</tempalte>

這裡，my-web-component web 元件為 h1 標籤設定了 part 屬性。

my-web-component::part(hello) {
   // custom css styles
}

這裡，h1 標籤透過 ::part 選擇器進行定位，可以進行自定義。

元件屬性

自定義元件樣式的最後一種也是最不推薦的方法是透過自定義元件屬性，如下所示：

@Component({
   // ...
})
export class MyComponent() {
   color: string;
}

這裡，元件將使用屬性從使用者那裡獲取顏色資訊並將其設定在模板中。

自定義選擇器

Angular 提供了兩個類似於 shadow DOM 概念的自定義選擇器。

  • :host
  • :host-context

:host 選擇器用於設定元件的主元素的樣式。它有兩種形式。第一種是簡單的形式，如下所示：

這裡，:host 選擇器應用於主機元素及其所有後代元素。

第二種是函式形式，只有當主機元素包含包含的選擇器（作為引數）時，才會定位主機元素，如下所示：

:host(.active) {
   font-weight: bold;
}

這裡，:host(.active) 僅當主機元素具有 active 類時才定位主機元素。

最後，:host-context 選擇器類似於 :host() 函式形式，不同之處在於它檢查宿主元素的任何祖先元素是否具有指定的（引數中的）選擇器。

:host(.active) {
   font-weight: bold;
}

此處，只有當宿主元素的任何祖先元素都分配了 .active 類時，樣式才應用於宿主元素。

列印頁面
上一頁
下一頁
廣告