我正在尝试将搜索输入添加到 <md-toolbar>
但似乎没有任何样式。添加搜索栏似乎是一个常见的标题元素,所以我可能遗漏了一些东西。
<md-toolbar md-theme="input">
<md-input-container flex>
<md-icon class="material-icons"></md-icon>
<input ng-model="search.notes" placeholder="Search here">
</md-input-container>
</md-toolbar>
然后在JS中:
app.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.theme('input')
.primaryPalette('blue')
.accentPalette('pink')
.warnPalette('red')
.backgroundPalette('grey');
}]);
然而,虽然元素确实出现了 - 很明显这不是它应该使用的预期方式,因为间距、字体颜色或对齐方式都不匹配。
http://codepen.io/Xeoncross/pen/rLxEqv
最佳答案
虽然这并不能解决尝试使用 md-input
的问题在工具栏/标题内。您可以制作 md-content
通过使内容区域变暗,看起来像一个工具栏,使其从常规中脱颖而出 md-content
块。如果您不介意黑色,可以解决这个问题。
<md-content md-theme="input" layout="column" layout-padding>
<md-input-container style="padding-bottom: 0; margin-bottom: 0">
<md-icon class="material-icons"></md-icon>
<input ng-model="search.notes" placeholder="Search here">
</md-input-container>
</md-content>
和主题js:
app.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.theme('input')
.primaryPalette('blue')
.dark(); // <----- Note
}
]);
此处示例:http://codepen.io/Xeoncross/pen/jrWgqY
关于javascript - 你如何向 Angular Material 添加搜索栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37767251/