Angular Material 7中的工具栏（Toolbar）是一个容器，可以容纳标题，图标，操作按钮和其他组件。这使得它成为应用程序中最重要的组件之一，因为它帮助用户浏览和使用应用程序功能。

创建Toolbar

要创建工具栏，必须导入MatToolbarModule并将其添加到@NgModule装饰器的导入数组中。在应用程序中使用时，可以使用元素。

My App

这将创建一个具有标题"My App"的简单工具栏。

工具栏支持MatToolbarRow组件，可以在其内部添加其他组件。

My App Button

这将创建一个带有"Button"按钮的工具栏。

固定工具栏

默认情况下，工具栏是静态的，可以随着页面滚动。但是，如果希望工具栏始终显示在视图的顶部，可以设置mat-toolbar-fixed属性。

My App

这将使工具栏固定在视图的顶部，并使其成为视图的一部分。

颜色

工具栏可以使用Angular Material主题中提供的颜色。确保导入MatToolbarModule时，导入MatToolbarModule和MatIconModule，并在NgModule装饰器中将它们添加到导入数组中。

让我们使用颜色进行实验：

Primary color

Accent color

Warn color

这将创建一个使用主题颜色的工具栏。

高级组合

因为工具栏是一个容器，所以您可以在其中放置其他组件以及其他工具栏。让我们看一个例子，其中包含两个工具栏和两个按钮。

My App Button

menu

此代码将创建一个带有菜单图标和Button按钮的工具栏。工具栏之间使用分割线进行分隔。

总结

工具栏是Angular Material 7中最重要的组件之一，因为它能够容纳其他组件，并且是应用程序中浏览和使用功能的关键部分。使用MatToolbarModule可以轻松地创建工具栏，可以使用MatToolbarRow组件和其他Angular Material组件添加内容到工具栏中。还可以使用mat-toolbar-fixed属性使工具栏始终保持在视图的顶部，并且可以使用Angular Material的主题进行颜色设置。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。