角度材质：同一行上的输入组和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 properties，并避免使用@angular/flex-layout软件包中的flex指令。

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

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

Answer 3

在角形材质中，您可以通过多种方式来执行此操作，其中一种方式是:: ng-deep覆盖样式。为了使组输入和按钮对齐，可以使用弹性框或表格。

在component.html

中

<div fxFlex="40%">
    <mat-form-field floatLabel="auto" hideRequiredMarker appearance="outline">
         <mat-label>Search</mat-label>
         <input matInput type="text">                                                 
    </mat-form-field>
</div>
<div fxFlex="20%">
    <button mat-flat-button color="accent" type="button">Search</button>
</div>

在component.scss或css中

mat-form-field {
    width: 100%;        
    input {
        width: 100%;
        caret-color: black; 
    }
}
button {
    margin-top: 4px;
    height: 60px;
    border-radius: 0px 4px 4px 0px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: white;
    color: black;
}

::ng-deep .mat-form-field-appearance-outline {
    color: black !important;
    .mat-form-field-outline-end {
        border-radius: 0px !important;
    }
}
::ng-deep .mat-form-field-outline {
    color: black !important;
    border-radius: 4px 0px 0px 4px !important;
}
::ng-deep .mat-form-field-outline-thick {
    color: black !important;
}