Question

我想为角度md卡创建一个工具栏。

类似于这张图片的东西

<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材料的当前指令习惯于为卡片获得如此漂亮的工具栏，还是我必须为它制作自定义css？

Answer 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>

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

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

角度材料卡工具栏

1 个答案: