Question

我对Angular非常陌生，我正在尝试创建一个具有比默认输入字段长的表单。这是我当前的代码：

person.component.html

<form class="new-person-form">
    <mat-card>
        <mat-form-field>
            <input matInput placeholder="Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday">
        </mat-form-field>
        <mat-checkbox>Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

person.component.html

<form class="new-person-form">
    <mat-card fxLayout="row">
        <mat-form-field>
            <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

这是结果：

|                                                                          |
|   Name___________  Birthday_______  [] Active                            |
|                                                                          |

我正在尝试将Name的长度延长到页面的50％，所以类似这样：

|                                                                          |
|   Name___________________________  Birthday_______  [] Active            |
|                                                                          |

我不太擅长CSS，所以我认为FlexLayout可能是我所需要的，但到目前为止，我还无法使其正常工作。

Answer 1

这将更改格式字段的宽度

<mat-form-field [style.width.px]=327>
  <input matInput placeholder="Template Name" value="{{templateName}}">
</mat-form-field>

Answer 2

强制样式应为

.mat-input-wrapper{
  width:400px !important;
}

OR

<mat-form-field style="width:400px !important" ...>
   ...
</mat-form-field>

如果您不想处理页面上的所有输入字段，请尝试添加类。

Answer 3

以下将通过使用50%来使Viewport Width的字段style="width:50vw"

<mat-form-field style="width:50vw" ...>
   ...
</mat-form-field>

Answer 4

使用fxLayout可以创建一个flexbox。为了使flexbox中的每个元素都消耗满行，应使用fxFlexFill。要使元素占用剩余空间，可以使用fxFlex。

您也可以使用fxLayoutGap代替样式中的填充。另外，如果您希望在没有更多空间时将元素移到下一行，则可以使用fxLayout =“ row wrap”。

以下是您要找的一些示例：

    <form class="new-person-form">
        <h3>full Rows:</h3>
        <mat-card fxLayout="row wrap">
            <mat-form-field fxFlexFill>
                <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field fxFlexFill>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-25-25:(checkbox consumes same space as Birthday)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex="25">
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-remaining-required:(Birthday consumes remaining space)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex>
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox>Active</mat-checkbox>
      </mat-card>
    </form>

我还创建了一个working example in stack blitz。

Answer 5

您可以使用该CSS技巧

<button mat-button [color]=" boolean_condition ? 'accent' : 'primary'">

Answer 6

您可以使用材料文档，只需要输入col大小即可。阅读以下内容以了解： https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins

在输入垫形字段上设置角形材料的宽度

6 个答案: