关于前端:Angular-Material-主题系统一-基本使用

37次阅读

共计 2619 个字符，预计需要花费 7 分钟才能阅读完成。

最近在本人的集体我的项目里用到了 Angular Material 组件库，应用它的主题界面天然是少不了的，这里参照官网文档，先对 Material 默认主题的用法做一个演绎。默认所有我的项目都是用 Angular CLI 创立，确保我的项目有个对立标准的文件构造，不便用例论述。

Angular Material 的主题零碎蕴含了“主题色彩”、“文字排版”模块，都反对全面的自定义。不过咱们首先还是看看这两个模块里都蕴含什么内容，以及怎么应用默认预设的主题，实现 Material 组件库的开箱即用。

Angular Material 的主题色彩蕴含一组“调色盘”，用于组成 Material 组件的色彩。
所谓的“调色盘”，即依照 Material Design 的规范定义的多种色彩，每个色彩能够按（50，100，200…900）的层级，从浅到深调整色调（hue），失去不同的色彩值。

一个主题色彩由上面这几种类型组成：

primary：次要色彩，广泛应用于利用的各个地位。
accent：强调色，用于 Material 独特的“FAB（浮动操作按钮）”，以及强调交互的局部。
warn：正告色，用于示意谬误和正告状态。
foreground：前景色，用于文本和图标。
background：背景色，用于元素背景。

Angular Material 的文字排版基于 Material 设计规范，定义了多个层级，每个层级由 font-size，line-height 和 font-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'。可用的预设主题有：

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
purple-green.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-size，line-height 和 font-weight 三个款式，从大到小定义了多个层级，让 Material 组件的文字规格对立。
预设了四种主题，应用 Material 组件时，我的项目根目录的 style.css 间接引入其中一个 css 文件即可。若要让整个利用的文字排版和 Material 组件保持一致，只须要给根元素（如 body）增加 .mat-typography 类。

不过理论开发里，除了间接用预设的组件外观，通常咱们都须要定制本人的色彩搭配，字体排版，或是让 Material 组件外的其余业务组件，也和 Material 格调保持一致。

这就须要咱们自定义 Material 的主题零碎，咱们下一篇见????！

正文完