paper-tabs标签边框 - 聚合物

时间:2017-08-03 12:25:51

标签: html css polymer

我已设置paper-tabs,但我希望每个标签之间都有分隔符。

我目前的设置如下:

CSS

paper-tabs {
    color: blue;
    background: var(--light-primary-color);
    --paper-tabs-selection-bar-color: var(--accent-color); 
}

paper-tab {
    border-right: 1px solid var(--divider-color);
    --paper-tab-ink: var(--default-primary-color);
}

paper-tab:last-child {
    border: none ;
}

HTML

<paper-tabs selected="0" scrollable>
    <paper-tab>NUMBER ONE ITEM</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>THE THIRD ITEM</paper-tab>
</paper-tabs>

但是我发现向paper-tab元素添加边框会导致边框位于选择栏上方。

GIF

enter image description here

图片

enter image description here

有没有人想过如何纠正这个问题,以便选择栏位于边界前面?

1 个答案:

答案 0 :(得分:1)

我建议您使用z-index属性。选择栏的z-index大于z-index边框的paper-tab

<强> CSS:

paper-tabs {
    color: blue;
    background: var(--light-primary-color);
    --paper-tabs-selection-bar-color: var(--accent-color);

    --paper-tabs-selection-bar:{
      z-index:1;
    }
  }

Plnkr:Sample

谢谢!