Polymer Paper Tabs 滚动问题

标签 polymer polymer-1.0

在 Polymer 1.0 中,当我尝试为选项卡添加可滚动选项时,宽度似乎变为 0。

<paper-toolbar id="mainToolbar">
    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
    <span class="flex"></span>

    <!-- Toolbar icons -->
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="search"></paper-icon-button>

    <!-- Application name -->
    <div class="middle paper-font-display2 app-name">Polymer Starter Kit</div>

    <!-- Tabs -->
    <paper-tabs id="scrollableTabs" tabindex="0" selected="0" scrollable class="bottom x-scope self-end paper-tabs-0">
        <paper-tab>Bordeaux</paper-tab>
        <paper-tab>Burgundy</paper-tab>
        <paper-tab>Champagne</paper-tab>
        <paper-tab>Rhone</paper-tab>
        <paper-tab>France</paper-tab>
        <paper-tab>Italy</paper-tab>
        <paper-tab>Spain</paper-tab>
        <paper-tab>Americas</paper-tab>
        <paper-tab>Australia & NZ</paper-tab>
        <paper-tab>Rest of World</paper-tab>
        <paper-tab>Spirits & Fortifieds</paper-tab>
    </paper-tabs>

</paper-toolbar>

如果我删除可滚动项,它们会正常显示。

文档说 如果为 true,选项卡是可滚动的,选项卡宽度基于标签宽度。 太好了......但是在哪里设置标签宽度?

最佳答案

在评论中@Tasos 的提示后,我设法通过在纸张标签上使用 flex 使其工作,并做了一些测试。
在 Scrollable 演示中,它在没有宽度的情况下工作正常,只是因为它在工具栏中没有类 bottom,这就是宽度困惑的原因。

关于Polymer Paper Tabs 滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31345759/

相关文章:

polymer - document.querySelector 与 Polymer.dom(this.$).querySelector

javascript - Polymer elemento <chart-pie> 和绑定(bind)

javascript - 获取模板 if 语句内的节点

firebase - 许多 Firebase 元素会减慢一切

javascript - polymer 插入点检查

javascript - 修改 Polymer 的采样器支架以加载自定义元素而不是 iframe

javascript - 无法在 Polymer 中动态地将元素插入自定义元素

javascript - 如何知道iron-list何时完成创建html

forms - 聚合物 : manually submitting a form

javascript - polymer 结合 on-tap 事件 on inside-h-t-m-l