Angular Material Md-工具栏输入
Angular Material Md-toolbar Input
有没有办法像这样在 md-toolbar 中添加 md-input-container?
这很简单。只需将 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;
}
显然正确的方法是为工具栏中的输入创建自定义 class 并应用上述样式,这样您就不会最终覆盖其他输入标签的默认样式。
有没有办法像这样在 md-toolbar 中添加 md-input-container?
这很简单。只需将 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;
}
显然正确的方法是为工具栏中的输入创建自定义 class 并应用上述样式,这样您就不会最终覆盖其他输入标签的默认样式。