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
を使用して、入力グループといくつかのボタンをすべて同じ行に配置する正しい方法はありますか、または独自のスタイルを作成する必要がありますか?
次のコードを試してください:
<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
この一般的な質問に対する現代的な答えを提供したいと思います。
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クラスとミックスインを構築してコンポーネントで拡張を開始すると、より大きなプロジェクトで裏目に出ます。