代码之家 › 专栏 › 技术社区 › Alex Pappas

角度材料旋转垫墨条到垂直位置

material-design angular-material angular css

0

Alex Pappas · 技术社区 · 6 年前

我想修改角度材质的制表符组件,使其垂直显示。所以我去了 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度,并正确地放在右边。条的宽度也可以设置为与选项卡的高度相等。

1 回复 | 直到 6 年前

1

0

vssadineni 6 年前

我想

<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标签的高度。