可以在Angular Material标签之间添加垂直分隔符吗？

Question

客户要求我们在角度材料标签之间添加垂直线。虽然这似乎令人不悦，但我们无法弄清楚如何实现这一目标 这是一个例子： Angular Material tabs

我们尝试过角度md-divider，但这似乎只适用于需要水平线的垂直列表。任何帮助表示赞赏。

Answer 1

在我看来，为样式添加标记是错误的。我要么使用border或伪元素。

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

Answer 2

将自定义样式添加到md-divider

<md-divider class="vertical-divider"></md-divider>

.vertical-divider {
  border-top-width: 0;
  border-right-width: 1px;
  border-right-style: solid;
  height: 100%;
}