我正在使用Angular Material设计组件,通过我的整个网站获得一致的外观和感觉。 (Angular Material Design)
我为此创建了自定义主题:
$mdThemingProvider.theme('default')
.primaryPalette('red', {
'default': '700',
'hue-1': '100',
'hue-2': '600',
'hue-3': 'A100'
})
.accentPalette('light-blue');
不幸的是,我找不到用于定义徽章的CSS,因此我使用了bootstrap提供的徽章。这个问题是我的自定义主题没有被应用。
我怎样才能做到这一点?或者,更好的是,材料设计CSS提供了类似的东西吗?(无法找到这个)。
这就是我现在所拥有的:qazxsw poi
那个html就是:
问题是来自md-primary的颜色与label-danger不匹配。我尝试在跨度上应用md-priamry,但它不起作用。
有任何想法吗?
我会尽一切可能不将Bootstrap混合到Angular Material网站中。在游戏中使用2个CSS框架的想法听起来像是一个热点混乱。
这是在Angular Material中实现的徽章的编码: <div class="md-block" layout layout-align="center center">
<div flex="20" layout layout-align="center center">
<span class="md-body-1">Poll interval in days</span>
</div>
<md-slider class="md-primary" flex ng-model="client.PollIntervalInDays" step="1" min="1" max="100" aria-label="rating">
</md-slider>
<div flex="20" layout layout-align="center center">
<h2><span class="label label-pill label-danger">{{client.PollIntervalInDays}}</span></h2>
</div>
</div>
他们使用按钮和一些CSS来做它:
http://codepen.io/anon/pen/QbXwYq
我还使用了一个单独的,只读的md芯片来伪造徽章,结果还算可以。