【问题标题】:Controlling mat-tab item position in angular以角度控制 mat-tab 项目的位置
【发布时间】:2019-09-25 17:01:08
【问题描述】:

我正在尝试使用 angular material 选项卡组件达到以下结果:

到目前为止,我没有成功的尝试是使用带有 margin-left: auto 的 flex 属性,它应该将特定项目一直推到右边。

在这里添加我的代码:

<mat-tab-group>
  <mat-tab label="Top 5"></mat-tab>
  <mat-tab label="All Drivers"> Content 2</mat-tab>
  <mat-tab style="margin-left: auto" label="All Drivers"> Content 3</mat-tab>
</mat-tab-group>

在检查工具上,我设法使用 margin-left: auto 但不是在 CSS 文件中实现了这一点。

有什么建议吗?

【问题讨论】:

  • 你的问题解决了吗?

标签: css angular angular-material


【解决方案1】:

您可以在 style.css 文件中使用以下 CSS 类:StackBlitz

.mat-tab-label:last-child {
  margin-left: auto; 
}

【讨论】:

    【解决方案2】:

    您可以使用 ::ng-deep,具体取决于您使用的版本。
    (在 Angular 8 中,这是折旧的)

    ::ng-deep .mat-tab-label:last-child {
      padding-left: calc(50%) !important; 
    }
    

    【讨论】:

      猜你喜欢
      • 2020-03-17
      • 1970-01-01
      • 2019-04-12
      • 2017-11-05
      • 2018-06-06
      • 1970-01-01
      • 2015-11-12
      • 1970-01-01
      • 2020-09-28
      相关资源
      最近更新 更多