你如何向角材料添加搜索栏？答案

【问题标题】：How do you add a search bar to angular material?你如何向角材料添加搜索栏？
【发布时间】：2020-06-07 13:05:20
【问题描述】：

我正在尝试向<md-toolbar> 添加搜索输入，但似乎没有任何样式。添加搜索栏似乎是一个常见的标题元素，所以我可能遗漏了一些东西。

<md-toolbar md-theme="input">
    <md-input-container flex>
    <md-icon class="material-icons">&#xE8B6;</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

【问题讨论】：

那么缺少什么？预期不明确

标签： javascript css angularjs material-design angularjs-material

【解决方案1】：

虽然这并不能解决在工具栏/标题中尝试使用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">&#xE8B6;</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

【讨论】：