我想修改 Angular Material 的选项卡组件以垂直显示。所以我去了here (Tabs) 并使用了CSS。我设法垂直显示标签。使用以下 CSS：
.mat-tab-group {
display: flex;
flex-direction: row!important;
}
.mat-tab-labels {
display: flex;
flex-direction: column!important;
}
如何旋转栏以使其垂直显示并位于标签标签的右侧？也希望吧台的转场也能保留。
我认为该条可以顺时针旋转 90 度并正确定位在右侧。栏的宽度也可以设置为等于标签的高度。
【问题讨论】：
标签： css angular angular-material material-design
似乎没有人提供代码示例，所以我会在我弄明白之后提供。感谢其他答案的见解。
这是我的做法。
把它放在某个 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`;
});
}
也许有一个更好的方法可以在 Angular 中做到这一点，恐怕我有一个老式的香草背景，我还在学习，
缺少的一件事是，当您更改标签时，正文仍会水平滚动。这似乎是使用 JS 通过暴力强制 CSS 转换样式来完成的，因此如果不修改原始 mat-tab-group 源就无法调整它。
请记住，我只使用一个简单的标签组进行了基本测试。我不确定分页箭头是否能正常工作。我将把它作为练习留给需要它的开发人员。
另一个适合任何好奇的人的练习：也许可以使用 CSS 变换旋转整个选项卡组，然后将选项卡标签和选项卡主体旋转回以使整个事物垂直。理论上，这将允许墨条和主体过渡按原样工作。但这可能是矫枉过正。
【讨论】：
我觉得
<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 的高度。
【讨论】：