角材质卡工具栏答案

【问题标题】：angular material card toolbar角材质卡工具栏
【发布时间】：2016-05-02 05:54:27
【问题描述】：

我想为 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？

【问题讨论】：

你的模板快完成了，还需要什么？圆角，调整颜色，添加底部边框，你就完成了。没有任何预制。
我不明白......你已经展示了代码来做到这一点，但没有解释问题。注意双关闭标签</md-card-content>
@charlietfl 我的问题是下面的代码将生成带有原色 Bg 的工具栏 - 蓝色背景不是白色 - 并且字体、文本大小和颜色都没有针对卡片工具栏进行优化。
你能把这个放在小提琴里，plunk 等吗？
正如我所拥有的那样，没有什么是开箱即用的。你可以添加一个主题或 5 行 CSS 来做你想做的事。

标签： angularjs material-design angularjs-material

【解决方案1】：

Angular Material 工具栏默认使用您的主题原色作为工具栏的背景色。

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

使用您喜欢的背景颜色的一种方法是使用 !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>

但是这种方法是假设您的主题主题颜色是白色的。如果你正在关注谷歌材料设计，那么你应该像 charlietfl 所说的那样设置多个主题。

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

【讨论】：