架構師_程序員

 找回密碼
 注冊[Register]

QQ登錄

只需一步,快速開始

查看: 144|回復: 0
打印 上一主題 下一主題

[Angular] angular + material 修改組件css樣式

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2020-3-7 17:58:39 | 只看該作者
在全局的css文件中添加

  1. /*控制下拉框的寬度和文字的位置*/

  2. .mat-form-field-infix {

  3. width:150px !important;

  4. margin-top: -20px;

  5. }



  6. /*這是控制下拉框選中以后的底線顏色*/

  7. .mat-form-field.mat-focused .mat-form-field-ripple {

  8. background-color:white;

  9. width:0px;

  10. }



  11. /*這是select初始的下拉框顏色*/

  12. .mat-form-field-appearance-legacy .mat-form-field-underline {

  13. background-color:white;

  14. }



  15. /*控制下拉框的邊框*/

  16. .mat-form-field {

  17. border:solid 1px;

  18. border-radius:4px;

  19. height: 20px;

  20. }



  21. /*下拉框選中后倒三角的顏色*/

  22. .mat-form-field.mat-focused.mat-primary .mat-select-arrow {

  23. color:red;

  24. }
復制代碼
不用重新填寫原有的屬性,新的屬性添加后,頁面會自動生成相同名字的不同屬性

關于Angular Material的顏色簡介

https://material.io/design/color/#color-color-system

在Material Design的System Color指南中,建議配色的選擇為兩種主要顏色(primary color)跟次要顏色(secondary color),用來區分主要的功能顏色及強調可以選擇的畫面,另外在表單相關的元件上還加上了錯誤訊息(error message)的顏色,而在Angular Material的樣式中將這三種顏色名稱分別訂為primary、accent和warn。

在大部分的Angular Material提供的元件中,我們都可以透過color來切換這三種顏色,以MatIcon為例


  1. <div>
  2.   這是一般的ICON顏色
  3.   <mat-icon>person</mat-icon>
  4. </div>

  5. <div>
  6.   這是加上primary顏色的ICON
  7.   <mat-icon color="primary">thumb_up</mat-icon>
  8. </div>

  9. <div>
  10.   這是加上accent顏色的ICON
  11.   <mat-icon color="accent">info</mat-icon>
  12. </div>

  13. <div>
  14.   這是加上warn顏色的ICON
  15.   <mat-icon color="warn">warning</mat-icon>
  16. </div>
復制代碼

參考鏈接:https://www.jianshu.com/p/4e5755f38065




上一篇:桌面整點報時鐘
下一篇:Linux 壓縮當前文件夾下所有文件
帖子永久地址: 

架構師_程序員 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與本論壇立場無關
2、本站所有主題由該帖子作者發表,該帖子作者與架構師_程序員享有帖子相關版權
3、其他單位或個人使用、轉載或引用本文時必須同時征得該帖子作者和架構師_程序員的同意
4、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
5、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
6、如本帖侵犯到任何版權問題,請立即告知本站,本站將及時予與刪除并致以最深的歉意
7、架構師_程序員管理員和版主有權不事先通知發貼者而刪除本文

碼農網,只發表在實踐過程中,遇到的技術難題,不誤導他人。
您需要登錄后才可以回帖 登錄 | 注冊[Register]

本版積分規則

免責聲明:
碼農網所發布的一切軟件、編程資料或者文章僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦中徹底刪除上述內容。如果您喜歡該程序,請支持正版軟件,購買注冊,得到更好的正版服務。如有侵權請郵件與我們聯系處理。

Mail To:help@itsvse.com

QQ|Archiver|手機版|小黑屋|架構師 ( 魯ICP備14021824號-2 )|網站地圖

GMT+8, 2020-5-6 16:31

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回復 返回頂部 返回列表
捕鸟达人老版