角度材质Md工具栏输入

时间:2017-01-12 20:49:57

标签: input angularjs-material

有没有办法在md-toolbar中添加md-input-container? enter image description here

1 个答案:

答案 0 :(得分:4)

这很简单。只需将md-input-container添加到工具栏中即可。

<md-toolbar class="myCustomClass">
  <div class="md-toolbar-tools">
    <md-input-container class="md-block" flex-gt-sm>
      <label>Search for item</label> 
      <input ng-model="searchPhrase" name="searchPhrase">
    </md-input-container>
  </div>
</md-toolbar>

如果搜索框位于高位,您可能需要调整垂直对齐方式。您可以通过添加以下css来完成此操作:

.myCustomClass md-input-container .md-errors-spacer{
  min-height: 0px !important;
}

显然,正确的方法是在工具栏中为输入创建自定义类并应用上述样式,这样您就不会覆盖其他输入标记的默认样式。