angular materialの入力マットフォームフィールドの幅を設定します

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

FxLayoutを使用して、フレックスボックスを作成できます。 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>

スタックブリッツでの使用例 も作成しました。