angular material 卡片工具栏

Question

我想为 angular md-cards 创建一个工具栏。

与这张图片类似的东西

<md-card layout="column" >
              <md-toolbar>
                <div class="md-toolbar-tools">
                  <h3>Card Header</h3>
                  <span flex></span>
                  <md-button class="md-icon-button">
                    <md-icon md-font-icon="fa-calendar" class="fa" aria-label="open menu"></md-icon>
                  </md-button>
                  <md-button class="md-icon-button">
                    <md-icon md-font-icon="fa-user" class="fa" aria-label="open menu"></md-icon>
                  </md-button>
                </div>
              </md-toolbar>
              </md-card-content>Card Content</md-card-content>
</md-card>

是否有任何当前的 ngMaterial 指令 -angular material- 可以用于获得如此漂亮的卡片工具栏，还是我必须为其定制 css？

Answer 1

Angular Material 工具栏默认使用您的主题主色作为工具栏的 background-color。

toolbar-theme.scss 实现： https://github.com/angular/material/blob/master/src/components/toolbar/toolbar-theme.scss

使用您喜欢的 background-color 的一种方法是用 !important

覆盖 css

md-toolbar {
    background-color: white !important;
}

另一种方法是将强调色设置为白色，您可以按照以下步骤在您的应用中配置主题颜色： https://material.angularjs.org/0.11.4/Theming/03_configuring_a_theme

然后，您可以在工具栏指令中使用 md-accent，例如：

<md-toolbar class="md-accent">
  <h2>title</h2>
</md-toolbar>

但是这个方法是在假设你的强调主题颜色是白色的情况下。如果您遵循 Google material 设计，那么您应该像 charlietfl 所说的那样设置多个主题。

如果您想要显示的图片中的字体、文字大小和颜色，您可以检查浏览器上的元素以获取它正在使用的样式并将其放入您的CSS。

angular material 卡片工具栏

angular material card toolbar

angularjs

material-design

angularjs-material