Mandy's Web

文章導覽

  • css

  • style

  • :host 設定宿主(host)的樣式

  • @HostBinding

  • 套上變數


Angular 筆記 css 樣式篇

今天就只是個筆記,單純記錄寫法如何使用,以便自己日後查找,畢竟人非聖賢、會忘難免 XD

css

套用 className

變數為 isDark,value 必需為 boolean

isDark = true;

在 html 的 dom 裡設定

<p [ngClass]="isDark ? dark : light">test</p>
<p [ngClass]="{'isDark': true}">test</p>

https://angular.tw/api/common/NgClass

Document difference between [NgClass] and [class] [NgClass] 與 [class] 之間的差異


style

在 html 的 dom 裡設定

<p
  [ngStyle]="{'background-color': '#159', 'color':'#fff', 'font-size': '20px'}"
>
  test
</p>
isDark = true;
<p [ngStyle]="isDark ? {'background-color': '#159', 'color':'#fff'} : {}">
  test
</p>

若 屬性的值為 value

width = 60;
height = 20;
<p [ngStyle]="{'width.px': width, 'height.px': height}>test</p>

https://angular.tw/api/common/NgStyle


:host 設定宿主(host)的樣式

:host {
  display: block;
  border: 1px solid black;
}

在 css 裡加上條件式

:host(.active) {
  border-width: 3px;
}

@HostBinding

在 ts 裡直接綁定 class 到 宿主上

@HostBinding() class = `hey`;

直接綁定 id 到 宿主上

@HostBinding() id = `hey`;

或是直接設定 style

@HostBinding() style = `background: #159;display: block;`;

套上變數

@Input() isColor!: string;

@HostBinding('style.background') get color() {
  return this.isColor;
}
@HostBinding('class.value') get color() {
  return true;
}

若是 return true,class 會掛載 value 這個 class name

@HostBinding('class') get color() {
  return 'yoo';
}

HostBinding 裡的 只有 class,則需 return 出一個字串,return 出來的字串則為 class name



對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular