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 最终会占用所有 space 并将按钮推出父级 [=33] =]:

<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>

查看下面的示例link 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.mat-form-field {
  width: 100%;
}

3。使用 CSS 'flex' 属性，而不是 @angular/flex-layout 指令

对于大项目，我建议使用 flex CSS properties and avoid using flex directives from @angular/flex-layout 包。

虽然乍一看，放置一个 flex 指令可能比编写 CSS 样式更方便，但一旦项目开始增长并且您构建了 [=61]，它就会在更大的项目上适得其反=] 类和混合并开始在组件中扩展它们：

'flex' 指令会在应用样式属性的位置上产生歧义。
调试问题需要了解实际的 CSS flex 属性，就像您在浏览器的开发人员工具中 see/manipulate 它们一样。所以使用 'flex' 指令：
- 将要求开发人员了解指令的属性如何转换为 CSS;
- 一旦他们开始工作 CSS 他们必须手动将其转换为指令，这会引入另一个故障点。

Answer 3

在 angular material 中，您可以通过多种方式做到这一点，其中一种方式是通过 ::ng-deep 覆盖样式。对于组输入和按钮的对齐，您可以使用弹性框或 table.

在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;
}

Answer 4

在同一个 material 表单字段中，使用带有 matSuffix 指令的按钮，如下所示：

<mat-form-field class="example-full-width w-full" appearance="fill">
  <mat-label>Request name</mat-label>
  <input type="tel" matInput>
  <button matSuffix>Create request</button>
</mat-form-field>

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

Angular-material: input-group and md-buttons on same line

css

angular

angular-material