web-dev-qa-db-ja.com

Dialog angular material？

下のダイアログの右端にボタンを揃えたい

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

デモ

angularangular-materialangular-material2
12
user9450118

更新された回答（2018年12月20日現在）

align属性は、ダイアログコンポーネントのテーマSCSSファイルのダイアログアクションにflexbox= CSS属性を追加するために使用されることがわかりました。

（dialog.scssの抽出）

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

ソースコードの行は次のとおりです。 SCSSの行

元の答え

[align] HTML属性を使用できます：

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

デモ

17
Edric

align属性 HTML5ではサポートされていません なので、代わりにこのCSSを使用する必要があります。

.mat-dialog-actions {
    justify-content: flex-end;
}

これは、Angular align="end"、要素を調べて確認できます。

11
Maarti

削除する

{display: flex}

クラスmat-dialog-actionsのスタイリング

0
Esco

素材の一部であるツールバーのビルドを使用します。

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Edit Task</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
    </h4>
    <div mat-dialog-content>
    Modal Content here
    </div>

ヘッダーのカスタムCSS

.task-header {
    background-color: transparent;
    padding: 0 5px;
    height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}
0
Thomas