如何使用Angular Material和CSS

所以我承認這非常接近廣義的問題，但我認爲這是一個可以接受的問題。如何使用Angular Material和CSS

所以一直在玩角度材料，是的它有很多很酷的東西，我喜歡或多或少地獲得一個完整的styleguide作爲包的一部分作爲網頁佈局的一部分（看看http://www.google.com/design/spec/material-design/introduction.html它值得一讀）

我的問題是，如何使用調色板。我在我的Java腳本定義的調色板（類似下面）

$mdThemingProvider.definePalette('Stackit', { 
    "50":"#f6f7f9", 
    "100":"#c9d3d9", 
    "200":"#a8b8c2", 
    "300":"#7d95a5", 
    "400":"#6b8798", 
    "500":"#5e7787", 
    "600":"#516775", 
    "700":"#455763", 
    "800":"#384751", 
    "900":"#2c373f", 
    "A100":"#f6f7f9", 
    "A200":"#c9d3d9", 
    "A400":"#6b8798", 
    "A700":"#455763", 
    'contrastDefaultColor': 'dark', // whether, by default, text   (contrast) 
    // on this palette should be dark or light 
    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default 
     '200', '300', '400', 'A100'], 
    'contrastLightColors': undefined // could also specify this if default was 'dark' 
});

因此，我們有一個調色板，它會自動選擇一些顏色，例如，運行這段代碼，你的MD-工具欄將改變顏色。

但是，調色板中有很多顏色，但我還沒有弄清楚如何以有用的方式使用它們。

舉例說，我希望我的網頁必須包含部分類型，一個淺灰色，黑色文本，一個深灰色和白色文本，全部大約各有一半的屏幕大小，可能會有一些圖標或圖片，如以及一些文字。

所以，我會怎麼做，通常會是這樣的

<div class=dark style="height: 350px"> 
    Some welcome text and saying hi 
</div> 
<div class=light style="height: 350px"> 
    A nice picture and some other bits 
</div> 
<div class=dark style="height: 350px"> 
    Now lets do something with a big button 
</div>

所以在材料設計，我會通過設置佈局=行和柔性，很好的佈局得到的div並在向下滾動我斑馬。但是，從理論上講，我想從調色板中使用100號顏色和600號黑色，但似乎沒有辦法這樣做。是的，我可以用這些顏色創建一個CSS類，但這意味着整個調色板看起來很浪費。

來源

2015-12-15 vrghost

在經歷了很多折磨之後，我設法弄清楚了它的一部分。

有一個md-accent選項，它似乎是爲了這個目的而創建的。你需要先設定口音。

.accentPalette('grey')

在我的情況，我只需要灰色的，但你可以使用definePalette定義整個調色板。因此，使用上面的例子中，配置將如下所示：

$mdThemingProvider.theme('default') 
     .dark() 
     .primaryPalette('Stackit') 
     .backgroundPalette('Stackit') 
     .accentPalette('grey') 
     .warnPalette('red');

然後，所有你需要做的，使黑色背景光（灰色）文本：

<H1 class="md-accent">Prototypes</H1>

來源

2016-02-26 10:05:59 vrghost

如何使用Angular Material和CSS

回答

相關問題