css - Angular Material 将垫子墨水条旋转到垂直位置

Question

我想修改 Angular Material 的 Tab 组件以垂直显示。所以我去了here (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接口(interface)，添加如下函数:

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`;
  });
}

也许有更好的方法来做这个，恐怕我有一个老派的 Vanilla 背景，我还在学习，

缺少的一件事是当您更改选项卡时主体仍然水平滚动。这似乎是通过强制 CSS 转换样式使用 JS 完成的，因此在不修改原始 mat-tab-group 源的情况下无法对其进行调整。

请记住，我只使用一个简单的选项卡组进行了基本测试。我不确定分页箭头是否可以正常工作。我将把它留给需要它的开发人员作为练习。

对于任何好奇的人来说，另一个练习:也许可以使用 CSS 转换旋转整个选项卡组，然后旋转选项卡标签和选项卡主体以将整个事物垂直。理论上，这将允许墨条和主体过渡按原样工作。但这可能是矫枉过正。