右文字对齐 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 保持在右边。

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 演示

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;
}

Answer 3

我找到的最简单的解决方案是重置mat-panel-description flex-grow ：

// my.component.css

mat-panel-description.right-aligned {
  flex-grow: 0;
}

// my.component.html

...
  <mat-expansion-panel-header>
    <mat-panel-description class="right-aligned">
      2014-2017
    </mat-panel-description>
  </mat-expansion-panel-header>
...

闪电战

Answer 4

将 fxLayoutAlign="end" 添加到 mat-panel-description。 它对我有用。

'<mat-panel-description fxLayoutAlign="end">
2014-2017
</mat-panel-description>'