Since no one has provided any code samples, I'll share mine as I was able to figure it out. Credit to the previous answer for the inspiration.
This is how I approached it:
Add the following SCSS code either globally or in the necessary location (If you need basic CSS conversion, that's up to you):
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);
}
Next, make these modifications to your component TypeScript file. You can place this in your main app component TS if vertical tabs will be used frequently; otherwise, add it to each relevant component:
Firstly, implement the DoCheck interface and include the following function:
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`;
});
}
There might be a more efficient way to achieve this in Angular, but coming from a traditional vanilla background, I'm still learning,
One issue remaining is that the tab body may still scroll horizontally when switching tabs. This appears to require altering CSS transform styles through JavaScript, making it difficult to adjust without modifying the original mat-tab-group source code.
Please note that my testing was limited to a basic tab group. I cannot guarantee that pagination arrows will function correctly with this setup. That task is left for the developer who requires it.
For those interested, a potential challenge could involve rotating the entire tab group using CSS transforms, then counter-rotating the tab labels and bodies to recreate the vertical orientation. In theory, this approach should maintain ink bar and body transitions. However, it may be unnecessary complexity.