右のテキストは、マット拡張パネルのマテリアルコンポーネントを揃えます
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;
}
これが実際の動作です
2014年から2017年までは右に行き詰まっていたでしょう。
パネルヘッダーのコンテンツは、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のデモです
このソリューションに基づく: 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;
}