如何右對齊 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;
}