angularjs - 可以在“Angular Material ”选项卡之间添加垂直分隔符吗？

Question

客户要求我们在 Angular Material 选项卡之间添加一条垂直线。虽然这似乎令人不悦，但我们不知道如何实现这一点。
这是一个例子: Angular Material tabs

我们已经尝试了 Angular md-divider，但这似乎只适用于需要水平线的垂直列表。如有任何帮助，我们将不胜感激。

Answer 1

在我看来，仅仅为了样式而添加标记是错误的。我要么使用边框，要么使用伪元素。

.md-tab {
  border-right: 1px solid red;
}

<强> Demo 1

.md-tab:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: green;
}

<强> Demo 2

要隐藏最后一个选项卡的边框，您可以使用 Angular 的 $last 添加一个类并定位该类(如果您不使用 ng-repeat，则手动添加它) 。

ng-class="{'last-tab-class': $last}"

.md-tab.last-tab-class {
  border-right: none;
}