我使用 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。 问题是我的自定义主题没有被应用。
我怎样才能实现这个目标?或者,更好的是,Material Design CSS 是否提供了类似的东西?(无法找到这个)。
其 html 是:
<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>
问题是 md-primary 中的颜色与 label-danger 不匹配。我尝试在跨度上应用 md-priamry,但它不起作用。
有什么想法吗?
最佳答案
我会尽一切可能不将 Bootstrap 混合到 Angular Material 网站中。对我来说,使用 2 个 CSS 框架的想法听起来简直就是一团糟。
这是用 Angular Material 实现的徽章的代码笔:http://codepen.io/anon/pen/QbXwYq
他们使用按钮和一些 CSS 来做到这一点:
md-badge{
margin: 0 0 0 8px;
background-color: #259b24;
color: white;
padding: 2px 4px;
border-radius: 4px;
}
.md-warn{
background-color: #F44336;
}
我还使用了单个只读 md 芯片来伪造徽章,并且对结果感到满意。
关于css - 如何将自定义 Material 设计主题应用于 Bootstrap 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37293995/