web-dev-qa-db-ja.com

angular 4で左と右のテキストmat-card-headerを整列する方法

ヘッダーのテキストコンテンツをヘッダータグの左側と右側に揃える必要があります。いろいろなアイデアを試しましたが、うまくいきませんでした。助けて。

 <div style="width: 40%">
  <mat-card>
    <mat-card-header class="card-container">
      <mat-card-title class="card-container-right"> Test right</mat-card-title>
      <mat-card-title class="card-container-left"> Test left</mat-card-title>
    </mat-card-header>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>
htmlangularalignmentangular-materialmat-card
4
Sivabalakrishnan

mat-title要素を引き続き使用する場合も、これを行うことができます。

動作する を参照してくださいStackBlitzの例

あなたの（私はそれを呼ぶでしょう）example-card.component.htmlファイル

<mat-card  >
<mat-card-header>
 <mat-card-title class="card-container-left"> Test left</mat-card-title>
 <mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>

次に、example-card.component.css

.card-container-right{
  display: inline;
  float: right;
}

.card-container-left{
  display: inline;
}

..そして最後にstyles.css

.mat-card-header-text{
  width: 100% !important;
}

これの秘訣は、Angular materials .mat-card-header-textをmat-card-headerの幅の100％に上書きすることです。それ以外の場合は、インライン要素のように動作し、その子要素のテキスト。それらを離間させないようにします。

7
Narm

マットツールバーでマテリアルデザインが使用するものを使用できます

<mat-card-title>
   <span>Test left</span>
   <span class="fill-remaining-space"></span>
   <span>Test right</span>
</mat-card-title>

あなたの.css

.fill-remaining-space {
   flex: 1 1 auto;
}

申し訳ありませんが、これは動作しません!!!!!マットツールバーで動作し、マットカードタイトルでは動作しません。

これがどのように機能するか、私はどこかでそれを使用したことを知っていました

<mat-card>
  <mat-card-title-group>
    <span>Test left</span>
    <span class="fill-remaining-space"></span>
    <span>Test right</span>
  </mat-card-title-group>
</mat-card>

参考例： https://stackblitz.com/edit/angular-rb5vm

4
wFitz

。mat-card-headerクラスにカスタムCSSを追加

 .mat-card-header{
        justify-content: flex-end /* for right*/
        justify-content: flex-start /* for left*/
        justify-content: centre /* for center*/

    }
1
Codexxx