iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

Angular初期筆記系列 第 12

DAY12-Angular6之data binding-Style

Style binding (中文:樣式繫結)

你可以利用 style binding 設定內部 styles
https://angular.io/guide/template-syntax#style-binding

範例一:一般使用 element style

app\app.component.html
-----
<h1 style="color:orange" >
    Welcome to {{title}}!
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181022/201077547XzifZdoL5.png

範例二:利用 [style.css-property] = boolean ? value1 : value2

app\app.component.html
-----
<h1 [style.color]="false ? 'orange':'pink' " >
    Welcome to {{title}}!
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181022/20107754MsCe4zbNMZ.png

範例三:搭配 directive 可以更細膩控制每個 style 的 propeties

ngStyle 參考來源
https://angular.io/guide/template-syntax#ngstyle

app\app.component.html
-----
<h1 [ngStyle]="{'color':'orange','background-color':'gray'}">
    Welcome to {{title}}!
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181022/201077543o6LY9I9kc.png


上一篇
DAY11-Angular6之data binding-Class
下一篇
DAY13-Angular6之data binding-Two-way data binding
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言