css - Angular-material:input-group 和 md-buttons 在同一行

Question

我在尝试使用 angular-material 在同一行中包含一个输入组和几个按钮时遇到了一些问题。

下面的 HTML 结构产生了如下图所示的结果，这不是我想要的:

<section layout-align="end center" layout-padding flex>
    <div layout="row" layout-align="start center" flex>
        <div class="input-group">
            <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon">
            <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span>
        </div>
    </div>
    <section layout-padding>
        <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button>
        <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button>
    </section>
</section>

但是，如果我尝试将所有元素包含在同一 layout="row" 中，input-group 最终会占用所有空间并将按钮推出父 div 的:

<section class="no-print" layout-align="end center" layout-padding flex>
    <div layout="row" layout-align="start center" flex>
        <div class="input-group">
            <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon">
            <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span>
        </div>
        <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button>
        <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button>
    </div>
</section>

是否有使用 angular-material 将输入组和几个按钮都放在同一行的正确方法，还是我必须创建自己的样式？

Answer 1

想为这个热门问题提供现代答案。

<强>1。在按钮上使用 [matSuffix]

Angular Material 让您回到那个位置并提供 matSuffix指令将一个元素放在表单字段的末尾。

因此，您的解决方案如下所示:

  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <input matInput type="search">
      <button mat-button matSuffix mat-stroked-button aria-label="search">
        <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>

在 https://stackblitz.com/edit/angular-mvndsv 查看示例的完整代码.

<强>2。使mat-form-field填充宽度

为了满足父元素的宽度，改变mat-form-field的样式:

mat-form-field.mat-form-field {
  width: 100%;
}

<强>3。使用 CSS“flex”属性，而不是 @angular/flex-layout 指令

对于大型元素，我建议使用 flex CSS properties并避免使用 @angular/flex-layout 中的 flex 指令包。

虽然乍一看，放置一个 flex 指令而不是编写 CSS 样式看起来很方便，但一旦元素开始增长并且您构建了 CSS 类，它就会适得其反和混合并开始在组件中扩展它们:

1. 'flex' 指令会在应用样式属性的位置上产生歧义。
2. 调试问题需要了解实际的 CSS flex 属性，正如您在浏览器的开发人员工具中看到/操作的那样。所以使用'flex'指令:
   • 将要求开发人员了解指令的属性如何转换为 CSS；
   • 一旦他们获得了可用的 CSS，他们就必须手动将其转换为指令，这会引入另一个失败点。