右文本对齐 mat-expansion-panel 材料组件

Question

我想将 mat-expansion-panel 组件的描述文本右对齐

我试过使用 align-text to right 但没有任何改变这是我的 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 保持在右边。

原文由 Hamza Haddad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

面板标题内容包含在一个 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 演示

原文由 JayChase 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

基于此解决方案： 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;
}

原文由 Dieter 发布，翻译遵循 CC BY-SA 4.0 许可协议