角材料2垫列表项内容位置

Question

我正在尝试以下内容以基于列表索引覆盖有角度的material2 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设置mat-list-item的对齐方式 justify-content

<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