web-dev-qa-db-ja.com

右のテキストは、マット拡張パネルのマテリアルコンポーネントを揃えます

mat-expansion-panelコンポーネントの説明テキストを右に揃えたい

私は右揃えのテキストを使用しようとしましたが、何も変化していませんこれは私のHTMLです

<mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Cycle ingénieur en informatique
      </mat-panel-title>
      <mat-panel-description>
        2014-2017
      </mat-panel-description>
    </mat-expansion-panel-header>
    ....
  </mat-expansion-panel>

CSS：

mat-panel-description {
    text-align: right;
}

これが実際の動作です

example

2014年から2017年までは右に行き詰まっていたでしょう。

htmlcssangularangular-material
11
Hamza Haddad

パネルヘッダーのコンテンツは、flexboxであるスパンに含まれているため、これを使用してコンテンツを横にプッシュできます。

見る：

<mat-expansion-panel>
<mat-expansion-panel-header class="right-aligned-header">
  <mat-panel-title>
    Cycle ingénieur en informatique
  </mat-panel-title>
  <mat-panel-description>
    2014-2017
  </mat-panel-description>
</mat-expansion-panel-header>

css（これはグローバルcssである必要があります。たとえば、コンポーネントスタイルではないstyles.css）：

.right-aligned-header > .mat-content {
    justify-content: space-between;
}

.mat-content > mat-panel-title, .mat-content > mat-panel-description {
  flex: 0 0 auto;
}

これが Stack Blitzのデモです

10
JayChase

このソリューションに基づく： https://github.com/angular/components/issues/10024

.mat-expansion-panel-header-description, .mat-expansion-panel-header-title {
  flex-basis: 0;
}

問題をもう一度読んで、これは私にとってうまくいきました：

.mat-expansion-panel-header-description {
  display: flex;
  justify-content: flex-end;
}
1
Dieter