2

我想为角度 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 material- 的指令可用于获得如此漂亮的卡片工具栏，还是我必须为其制作自定义 css？

4

1 回答 1

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。

于 2016-01-26T10:43:16.750 回答