角度材料选项卡顶部的墨水条

Question

我有一个基本的标签集。它将作为按钮运行，没有实际内容：

<md-tabs md-align-tabs="bottom">
    <md-tab>Canvas 1</md-tab>
    <md-tab>Canvas 2</md-tab>
    <md-tab>Canvas 3</md-tab>
    <md-tab>Canvas 4</md-tab>
</md-tabs>

我正在尝试使用页面底部的标签集。有关如何将墨块移动到选项卡集合顶部而不是底部的任何想法？

md-align-tabs在我的测试中不会更改墨条的位置。我无法确定纯CSS的解决方案。

Answer 1

您希望覆盖md-pagination-wrapper css值。我不建议在全球范围内进行此操作，因为我不知道它会对它产生什么影响，但是如果你将其更改为

md-pagination-wrapper {
 height: 2px;
 ...
}

您将获得所需的效果。这是一个codepen例如 - http://codepen.io/anon/pen/vKdkzj。我会在其上放置一个自定义覆盖类或ID，因此您不会在全局范围内破坏任何内容。

自定义覆盖看起来像这样的一个例子 -

在标签上添加自定义ID或类：

 <md-tabs md-align-tabs="bottom" id="ink-top-fix">

用于从自定义ID（或类，无论您选择使用什么）中定位md-pagination-wrapper

#ink-top-fix md-pagination-wrapper {
   height: 2px;
}

Answer 2

覆盖 .mat-ink-bar 类

.mat-ink-bar{
   top:0px !important;
 }