聚合物纸标签的可变宽度

Question

我想实现 Polymer Paper Tabs，但是我正在努力寻找一种让标签具有不同宽度的方法。

我看到可滚动选项卡具有可变宽度，但是由于显示的滚动箭头，我不能将它们用于我的用例。

我试图通过手动更改宽度来编辑选项卡的 CSS，但这会更改选项卡的所有宽度。

Answer 1

如果您设置scrollable 属性，它将使选项卡的宽度是动态的。您还可以设置 hideScrollButton 属性以防止显示箭头。

<paper-tabs selected="0" scrollable hide-scroll-button>

Answer 2

您可以在纸张标签上方添加一个 div 包装纸并设置宽度

        <div id="tab_container" style="width:60%">
            <paper-tabs selected="{{selected}}">
                <paper-tab>Tab 1</paper-tab>
                <paper-tab>Tab 2</paper-tab>
                <paper-tab>Tab 3</paper-tab>
            </paper-tabs>
        </div>

聚合物纸标签的可变宽度

Variable Width for Polymer Paper Tabs

html

css

polymer

web-component