角材料卡工具栏

我想创建一个角度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的它呢？

来源

2016-01-25 Zalaboza

您的模板已基本完成，您还需要什么？圆角，调整颜色，添加底部边框，然后完成。没有任何事先做好。 – kuhnroyal

我不明白....你已经显示了代码，没有解释问题。注意双关闭标签' – charlietfl

@charlietfl我的问题是下面的代码会产生工具栏与原色Bg - 蓝色背景不是白色，并且字体，文本大小和颜色都不针对卡工具栏进行优化。 – Zalaboza

默认情况下，角度材质工具栏使用主题主色作为工具栏的背景色。

工具栏，theme.scss实现：使用你喜欢的背景颜色 https://github.com/angular/material/blob/master/src/components/toolbar/toolbar-theme.scss

一种方法是重写的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中。

来源

2016-01-26 10:43:16

角材料卡工具栏

回答

相关问题