角材料卡工具欄

我想創建一個角度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

角材料卡工具欄

回答

相關問題