角度材质:同一行上的输入组和md按钮

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

请尝试以下代码:

<form layout layout-align="center" layout-padding>
    <div layout="row" flex>
        <md-input-container flex class="md-icon-float md-block md-title">
            <label>Your font number</label>
            <!-- below is the material icons -->
            <md-icon class="material-icons">phone</md-icon>
            <input type="text">
        </md-input-container>
        <div>
            <md-button class="md-raised">
            <!-- below is the material icons -->
                <md-icon class="material-icons">search</md-icon>
            </md-button>
        </div>
    </div>  
</form>

请参阅以下链接中的示例 http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000

Answer 2

希望为这个受欢迎的问题提供当代的答案。

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 {
  width: 100%;
}

3.使用CSS的“ flex”属性，而不是@angular/flex-layout指令

对于大型项目，我建议使用flex CSS属性，并避免使用@ angular / flex-layout包中的flex指令。

乍一看，放置flex指令而不是编写CSS样式似乎很方便，一旦项目开始增长，并且您构建CSS类和mixins并开始在组件中扩展它们，它将对更大的项目适得其反：

1. “ flex”指令会使样式属性从何处应用产生歧义。
2. 调试问题需要了解实际的CSS flex属性，就像您在浏览器的开发人员工具中看到/操纵它们一样。因此，使用“ flex”指令：
   • 需要开发人员了解如何将指令的属性转换为CSS；
   • 一旦使用了CSS，他们就必须手动将其转换为指令，这会带来另一个故障点。