Angular Material 顶部的标签墨栏

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;
 ...
}

你会得到你想要的效果。例如，这是一个代码笔 - http://codepen.io/anon/pen/vKdkzj 。我会在上面放一个自定义覆盖 class 或 id，这样你就不会在全局范围内破坏任何东西。

自定义覆盖的示例如下所示 -

在您的选项卡上添加自定义 ID 或 class:

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

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

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

Answer 2

覆盖 .mat-ink-bar class

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

Angular Material 顶部的标签墨栏

Angular Material Tabs ink bar on top

css

angularjs

angular-material