web-dev-qa-db-ja.com

角度材料：同じ行の入力グループとmdボタン

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>

enter image description here

ただし、同じ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>

enter image description here

angular-materialを使用して、入力グループといくつかのボタンをすべて同じ行に配置する正しい方法はありますか、または独自のスタイルを作成する必要がありますか？

cssangularangular-material
10
Tiago

次のコードを試してください：

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

30
基米王

この一般的な質問に対する現代的な答えを提供したいと思います。

1。ボタンで[matSuffix]を使用します

Angular Materialがその1つに戻り、フォームフィールドの末尾に要素を配置する 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。 @angular/flex-layoutディレクティブではなく、CSSの 'flex'プロパティを使用します

大きなプロジェクトの場合、 flex CSSプロパティ を使用し、 @ angular/flex-layout パッケージのflexディレクティブの使用を避けることをお勧めします。

一見すると、CSSスタイルを記述するよりもflexディレクティブを配置すると便利なように見えますが、プロジェクトが成長し始め、CSSクラスとミックスインを構築してコンポーネントで拡張を開始すると、より大きなプロジェクトで裏目に出ます。

  1. 'flex'ディレクティブは、スタイルプロパティが適用される場所に曖昧さをもたらします。
  2. 問題をデバッグするには、ブラウザの開発者ツールで表示/操作する実際のCSSフレックスプロパティを理解する必要があります。したがって、「flex」ディレクティブを使用します：
    • 開発者は、ディレクティブのプロパティがCSSに変換される方法を理解する必要があります。
    • また、CSSが機能するようになったら、手動でディレクティブに変換する必要があるため、別の障害点が発生します。
14
Alex Klaus