代码之家 › 专栏 › 技术社区 › Charles L.

角度材质2“Mat”菜单的“Mat”按钮之间的间距

angular-material-6 angular-material2 angular-material angular css

Charles L. · 技术社区 · 6 年前

我正试图在我的 mat-button 在按钮文本之间( span )按钮图标( fa-icon )这将显示我的 mat-menu 单击时。我想让它看起来像这样:

我好像一点也不能让它工作。

这是我的代码:

<td mat-cell *matCellDef="let Participant">
  <button mat-button [matMenuTriggerFor]="participantStatusMenu" class="participantStatusBtn">
    <span>{{Participant.status | participantStatus}}</span>
    <fa-icon class="" [icon]="['fas', 'angle-down']" size="lg"></fa-icon>
  </button>
  <mat-menu #participantStatusMenu="matMenu" class="participantStatusMenu">
    <button *ngIf="Participant.status !== 1" mat-menu-item>{{1 | participantStatus}}</button>
    <button *ngIf="Participant.status !== 2" mat-menu-item>{{2 | participantStatus}}</button>
    <button *ngIf="Participant.status !== 3" mat-menu-item>{{3 | participantStatus}}</button>
  </mat-menu>
</td>

1 回复 | 直到 6 年前

Charles L. 6 年前

我通过以下方式实现了这一点:

/deep/ .mat-button-wrapper {
  width: 100%;

  span {
    float: left;
  }

  fa-icon {
    float: right;
  }
}

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

6 年前

Carl.G · 如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

6 年前

spottedmahn · 覆盖只读/禁用样式/CSS

6 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

6 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

6 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

6 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

6 年前

The Fox · “角度材质”对话框:复选框始终返回false

6 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

6 年前