Question

我正在尝试向<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

Answer 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

如何在角材料中添加搜索栏？

1 个答案: