有角度的材料將墊子墨條旋轉到垂直位置

Question

我想修改 Angular Material 的 Tab 組件以垂直顯示。 所以我去了這里 (Tabs)並使用了 CSS。 我設法垂直顯示標簽。 使用以下 CSS：

.mat-tab-group {
    display: flex;
    flex-direction: row!important;
}
.mat-tab-labels {
    display: flex;
    flex-direction: column!important;
}

但是mat-ink-bar按預期停留在底部：

如何旋轉欄以垂直顯示並位於選項卡標簽的右側？ 也希望吧台的過渡也能保留下來。

我認為該條可以順時針旋轉 90 度並正確定位在右側。 條的寬度也可以設置為等於選項卡的高度。

Answer 1

似乎沒有人提供代碼示例，所以我會因為我想通了。 感謝其他答案的洞察力。

這是我的做法。

把它放在某個 SCSS 的某個地方，無論是全局的還是你需要的地方（轉換為基本的 CSS，如果你需要它，我會留給你）：

mat-tab-group[vertical] {
  flex-direction: row;

  ::ng-deep mat-tab-header {
    flex-direction: column;
    border-bottom: 0px solid transparent;
    border-right: 1px solid rgba(0, 0, 0, 0.12);

    .mat-tab-label-container {
      flex-direction: column;

      .mat-tab-labels {
        flex-direction: column;
      }

      mat-ink-bar {
        left: initial !important;
        bottom: initial;
        right: 0;
        width: 2px !important;
        height: initial;
      }
    }
  }

  ::ng-deep .mat-tab-body-wrapper {
    flex-direction: column;
    width: 100%;
  }
}

:host-context(.dark) mat-tab-group[vertical] ::ng-deep mat-tab-header {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

現在對您的組件 TS 進行以下更改。 如果您經常使用垂直選項卡，您可能希望將其放在您的主應用程序組件 TS 中。 否則將其添加到每個相關組件中。

首先實現DoCheck接口，添加如下函數：

ngDoCheck() {
  document.querySelectorAll("mat-tab-group[vertical]").forEach((verticalTabGroup: HTMLElement) => {
    let inkBar: HTMLElement = verticalTabGroup.querySelector("mat-ink-bar");
    if (!inkBar) {
      return;
    }
    let active: HTMLElement = verticalTabGroup.querySelector(".mat-tab-label-active");
    if (!active) {
      return;
    }
    inkBar.style.top = `${active.offsetTop}px`;
    inkBar.style.height = `${active.offsetHeight}px`;
  });
}

也許有更好的方法來做這個，恐怕我有一個老派的香草背景，我還在學習，

缺少的一件事是當您更改選項卡時主體仍然水平滾動。 這似乎是通過強制 CSS 轉換樣式使用 JS 完成的，因此在不修改原始 mat-tab-group 源的情況下無法對其進行調整。

請記住，我只使用一個簡單的選項卡組進行了基本測試。 我不確定分頁箭頭是否可以正常工作。 我將把它留給需要它的開發人員作為練習。

對於任何好奇的人來說，另一個練習：也許可以使用 CSS 轉換旋轉整個選項卡組，然后旋轉選項卡標簽和選項卡主體以將整個事物垂直。 理論上，這將允許墨條和主體過渡按原樣工作。 但這可能是矯枉過正。

Answer 2

我認為

<mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 160px; width: 160px;"></mat-ink-bar>

是您需要修改的元素。 而不是左側定位，您需要根據上面的圖像進行頂部底部定位。這不能僅使用 css 來完成，因為每當您點擊或單擊選項卡時，左側位置都會動態更新。 並在 css 中

.mat-ink-bar {
position: absolute;
bottom: 0;
height: 2px;
transition: .5s cubic-bezier(.35,0,.25,1);

} 而不是高度取寬度：2px，高度應為 .mat-tab-label 的高度。