如何右对齐 angular 材料垂直标签

Question

我有垂直材料选项卡，如下图所示。

我想把那些标签放在右边，把内容放在左边。 我怎样才能做到这一点。

Stackblitz 演示

我已经使用 css flex 实现了垂直标签。（使用下面的 css）

:host /deep/ .mat-tab-group {
  flex-direction: row;
}
:host /deep/ .mat-tab-header {
  border-bottom: none;
}
:host /deep/ .mat-tab-header-pagination {
  display: none !important;
}
:host /deep/ .mat-tab-labels {
  flex-direction: column;
}
:host /deep/ .mat-ink-bar {
  height: 100%;
  left: 98% !important;
}
:host /deep/ .mat-tab-body-wrapper {
  flex: 1 1 auto;
}

我只想将标签放在页面的右侧

Answer 1

您可以使用flex-direction: row-reverse; 而不是row 。 它使标签 position 位于右边缘，也用于垂直条。 如果您希望条形的宽度始终为 2% 并且在 content 和 label 之间（如示例），则使用：

:host /deep/ .mat-ink-bar {
  height: 100%;
  width: 2% !important;
}

完整代码和stackblitz 演示：

:host /deep/ .mat-tab-group {
  flex-direction: row-reverse;
}
:host /deep/ .mat-tab-header {
  border-bottom: none;
}
:host /deep/ .mat-tab-header-pagination {
  display: none !important;
}
:host /deep/ .mat-tab-labels {
  flex-direction: column;
}
:host /deep/ .mat-ink-bar {
  height: 100%;
  width: 2% !important;
}
:host /deep/ .mat-tab-body-wrapper {
  flex: 1 1 auto;
}