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接口并添加以下功能：

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

也许有更好的方法可以做到这一点，恐怕我有一个老式的香草背景并且我还在学习，

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

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

另一个好奇的练习：也许可以通过CSS变换旋转整个选项卡组，然后向后旋转选项卡标签和选项卡主体以使整个物件垂直。从理论上讲，这将允许墨栏和主体过渡按原样工作。但这可能是矫kill过正。

Answer 2

我认为

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

是您需要修改的元素。而不是左侧定位，您需要按照上图所示具有顶部底部定位。这不能仅使用css完成，因为只要您点击或单击选项卡，左侧位置就会动态更新。并在中

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

} 而不是height取width：2px，并且height应该是.mat-tab-label的高度。

角材料将垫子墨水棒旋转到垂直位置

2 个答案: