paper-tabs 标签边框 - 聚合物

Question

我已经 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

图片

有没有人想过如何更正此问题以使选择栏位于边框前面？

Answer 1

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

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

谢谢！

paper-tabs 标签边框 - 聚合物

paper-tabs tab borders - Polymer

html

css

polymer