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

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

material-design angular-material angular css

Alex Pappas · 技术社区 · 5 年前

我想修改角度材质的制表符组件,使其垂直显示。所以我去了 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 回复 | 直到 5 年前

vssadineni 5 年前

我想

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

推荐文章

coder-guy · 如何在角度应用程序中添加材质工具栏?

2 年前

Infii · 带有自定义数据模板的水平ListView

6 年前

ton1 · 如何添加borderTop以反应材质UI表?

6 年前

Demonic218 · 在Android中实现材质设计时出错

6 年前

Jus10 · 弗利特:你如何让卡片可以点击?

6 年前

Marko Zadravec · 带选项卡的引导导航

6 年前

James · 全宽材质UI网格无法正常工作

6 年前

HovSky · jQuery选项卡检查类未检查类

6 年前

Marko Zadravec · 更改django材质库中的选定颜色

6 年前

Geeta · 选定选项上未显示图像

6 年前