头图

Angular Material 主题系统(一)-- 基本使用

locotor

最近在自己的个人项目里用到了 Angular Material 组件库,使用它的主题界面自然是少不了的,这里参照官方文档,先对 Material 默认主题的用法做一个归纳。默认所有项目都是用 Angular CLI 创建,确保项目有个统一规范的文件结构,方便用例阐述。

Angular Material 的主题系统包含了 “主题颜色”、“文字排版” 模块,都支持全面的自定义。不过咱们首先还是看看这两个模块里都包含什么内容,以及怎么使用默认预设的主题,实现 Material 组件库的开箱即用。

主题颜色

Angular Material 的主题颜色包含一组“调色盘”,用于组成 Material 组件的颜色。
所谓的“调色盘”,即按照 Material Design 的标准定义的多种颜色,每个颜色可以按(50,100,200…900)的层级,从浅到深调整色调(hue),得到不同的颜色值。

Material 颜色表

一个主题颜色由下面这几种类型组成:

  • primary:主要颜色,广泛应用于应用的各个位置。
  • accent:强调色,用于 Material 独特的“FAB(浮动操作按钮)”,以及强调交互的部分。
  • warn:警告色,用于表示错误和警告状态。
  • foreground:前景色,用于文本和图标。
  • background:背景色,用于元素背景。

文字排版

Angular Material 的文字排版基于 Material 设计规范,定义了多个层级,每个层级由 font-sizeline-heightfont-weight 三个样式配置组成。

定义的层级有:

层级css 类描述
display-1 ~ display-4.mat-display-1 ~ .mat-display-4巨大,一次性的标题性文字,常用于首页顶部
headline.mat-h1, .mat-headline<h1> 标签对应的小节的头部
title.mat-h2, .mat-title<h2> 标签对应的小节的头部
subheading-2.mat-h3, .mat-subheading-2<h3> 标签对应的小节的头部
subheading-1.mat-h4, .mat-subheading-1<h4> 标签对应的小节的头部
body-1.mat-body, .mat-body-1基本的正文文本
body-2.mat-body-strong, .mat-body-2较粗的正文文本
caption.mat-small, .mat-caption较小的正文文本和提示文本
button只用于组件中按钮和链接
input只用于组件中表单输入字段

使用预设主题

Angular Material 预先构建了几个内置主题。 这几个 css 文件除了包含所有 Material 组件的通用样式以外,字体排版,主题颜色也定义在其中。因此,要使用 Material 组件库,只需在应用程序中引入其中一个单独的 css 文件即可。
在项目根目录下的 style.css 里直接引用 @import '@angular/Material/prebuilt-themes/主题名称.css'。可用的预设主题有:

  • <font color=#673AB7>deeppurple</font>-<font color=#FFC107>amber</font>.css
  • <font color=#3F51B5>indigo</font>-<font color=#E91E63>pink</font>.css
  • <font color=#E91E63>pink</font>-<font color=#607D8B>bluegrey</font>.css
  • <font color=#9C27B0>purple</font>-<font color=#4CAF50>green</font>.css

在使用前,需要把 300、400 和 500 weight 的 Roboto 字体包含进项目:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

这样,所有的 Material 组件就可以按预设的颜色和文字排版呈现外观。同时,还可以给任意的原生元素设置 Material 的字体排版样式:

<h1 class="mat-display-1">Jackdaws love my big sphinx of quartz.</h1>
<h2 class="mat-h2">The quick brown fox jumps over the lazy dog.</h2>

注意✨:默认情况下,引入的预设主题 css,不会影响除 Material 组件以外的任何元素。

  • 如果应用程序内容未放置在 <mat-sidenav-container> 这个页面布局容器组件内,则需要将 .mat-app-background 类添加到外层元素(例如 <body>)中。 才能给应用设置 Material 主题背景色。
  • 如果需要给应用程序全局设置 Material 的字体排版,需要给根节点的元素设置 mat-typography 类。例如:

    <!-- 不受影响. -->
    <h1>This header is unstyled</h1>
    
    <!-- 所有的元素都会按 Material 的字体排版设置样式. -->
    <section class="mat-typography">
      <h1>这个内容会应用 Material 的 headline 样式</h1>
    </section>

小结

Material 的主题系统简介包括:

  • 主题颜色定义了“主色”,“强调色”,“警告色”,“前景色”,“背景色”,每种颜色是一个 “调色盘”,可以通过色调呈现不同深浅的颜色变化,让界面颜色富有层次而不杂乱。
  • 文字排版按 font-sizeline-heightfont-weight 三个样式,从大到小定义了多个层级,让 Material 组件的文字规格统一。
  • 预设了四种主题,使用 Material 组件时,项目根目录的 style.css 直接引入其中一个 css 文件即可。若要让整个应用的文字排版和 Material 组件保持一致,只需要给根元素(如 body)添加 .mat-typography 类。

不过实际开发里,除了直接用预设的组件外观,通常我们都需要定制自己的颜色搭配,字体排版,或是让 Material 组件外的其他业务组件,也和 Material 风格保持一致。

这就需要我们自定义 Material 的主题系统,咱们下一篇见😎!

阅读 1k

玻璃晴朗,橘子辉煌

166 声望
1 粉丝
0 条评论

玻璃晴朗,橘子辉煌

166 声望
1 粉丝
文章目录
宣传栏