Angular Material mat-list-item-content 位置

Question

我正在尝试根据列表索引覆盖 Angular Material 2 mat-list-item-content 样式。

组件 HTML:

<div fxLayout="column" fxLayoutAlign="start center" fxFill>
    <mat-list dense class="mat-list">
      <mat-list-item *ngFor="let message of messages" class="{{message.float}}">
         <mat-label>{{message.text}}</mat-label>
      </mat-list-item>
    </mat-list>
</div>

组件 CSS

.left .mat-list-item-content {
  float: left;
}

.right .mat-list-item-content {
  float: right;
}

谢谢

Answer 1

您可以使用 flex-box justify-content 设置 mat-list-item 的对齐方式

<mat-list role="list">
  <mat-list-item class="left" role="listitem">
   LEFT
  </mat-list-item>
  <mat-list-item class="right" role="listitem">
     Right
  </mat-list-item>
</mat-list>

下面是样式。请注意，您应该将此样式放在根样式 (/src/styles.css) 中，否则此样式将不起作用。

/* LEFT align */
.mat-list .mat-list-item.left .mat-list-item-content{
      justify-content: flex-start;
}

/* RIGHT align */
.mat-list .mat-list-item.right .mat-list-item-content{
      justify-content: flex-end;
}

/* If you will use matLine */

  /* LEFT align */
.mat-list .mat-list-item.left .mat-list-text>*{
  margin: 0 auto 0 0;
}
  /* RIGHT align */
.mat-list .mat-list-item.right .mat-list-text>*{
  margin: 0 0 0 auto;
}

请查看此链接以获取实时示例代码 https://stackblitz.com/edit/so-answer-alignment-list?file=styles.css