toolbar 概览
<mat-toolbar> 是一个具有头、标题或操作的容器。
<mat-toolbar> is a container for headers, titles, or actions.
在大多数场景下，工具栏会放在应用的顶部，而且只包含一行应用标题。
In the most situations, a toolbar will be placed at the top of your application and will only have a single row that includes the title of your application.
<mat-toolbar>
<span>My Application</span>
</mat-toolbar>
Material Design 规范中说工具栏同样可以是多行的。可以通过把 <mat-toolbar-row> 元素放进 <mat-toolbar> 中来创建多行工具栏。
The Material Design specifications describe that toolbars can also have multiple rows. Creating
toolbars with multiple rows in Angular Material can be done by placing <mat-toolbar-row> elements
inside of a <mat-toolbar>.
<mat-toolbar-row>
<span>Custom Toolbar</span>
</mat-toolbar-row> 注意：当指定了多行工具栏时，不支持把内容放在 <mat-toolbar-row> 的外面。
Note: Placing content outside of a <mat-toolbar-row> when multiple rows are specified is not
supported.
工具栏不会对其内容进行任何定位。这让用户有足够的控制权来按照应用的要求对内容进行定位。
The toolbar does not perform any positioning of its content. This gives the user full power to position the content as it suits their application.
一种常见的模式是把标题定位在左侧，而另一些操作定位在右侧。这可以使用 display: flex 来轻松实现：
A common pattern is to position a title on the left with some actions on the right. This can be
easily accomplished with display: flex:
<mat-toolbar-row>
<span>Second Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
</mat-toolbar-row> .example-spacer {
flex: 1 1 auto;
}
<mat-toolbar> 的颜色可以使用 color 属性进行设置。默认情况下，工具栏根据当前的主题（亮或暗）使用一个中立的背景颜色。
可以把它修改为 'primary' 'accent' 或 'warn'。
The color of a <mat-toolbar> can be changed by using the color property. By default, toolbars
use a neutral background color based on the current theme (light or dark). This can be changed to
'primary', 'accent', or 'warn'.
默认情况下，工具栏假设它是纯装饰性的，因此不设置角色、ARIA 属性或键盘快捷键。这时它相当于页面中的一些 <div> 元素。
By default, the toolbar assumes that it will be used in a purely decorative fashion and thus sets
no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of <div>
elements on the page.
通常，工具栏会用作标题，这时候可以使用 role="heading"。
Generally, the toolbar is used as a header where role="heading" would be appropriate.
只有当工具栏的用例和 role="toolbar" 相匹配时，它才应该加上此角色，并通过 aria-label 或 aria-labelledby 添加一个标签。
Only if the use-case of the toolbar match that of role="toolbar", the user should add the role and
an appropriate label via aria-label or aria-labelledby.