Polymer 1.0 Paper-Tabs 对内容没有反应

Question

使用 Polymer 1.0，paper-tab 元素不会响应其 content/titles 的大小。相反，所有选项卡都是固定大小，看起来很糟糕。据我所知，默认行为是让他们响应标题。

<!doctype html>
<html>

<head>

  <title>unquote</title>

  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body>
  <paper-header-panel>
    <paper-toolbar>
        <paper-tabs>
          <paper-tab>
              ABOUT
          </paper-tab>
          <paper-tab>
            <div>
              TOUR SCHEDULE
            </div>
          </paper-tab>
            <paper-tab>
              <div> 
                VIDEOS
              </div>
            </paper-tab>
            <paper-tab>
              <div> 
                HOST
              </div>
            </paper-tab>
            <paper-tab>
              <div> 
                LONG TITLE THIS IS
              </div>
            </paper-tab>
        </paper-tabs>
    </paper-toolbar>
  </paper-header-panel>
</body>
</script>
</html>

Answer 1

尝试导入 iron-flex-layout（确保它在您的 bower_components 文件夹中！）并像这样使用 selected 和 flex 属性：

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
...
<paper-tabs scrollable flex>
    <paper-tab>
        ...
    </paper-tab>
</paper-tabs>

Answer 2

如果您希望标签适合其内容，您可以覆盖默认的标签伸缩：

<style is="custom-style">
  paper-tab {
    flex: none;
  }
</style>

http://jsbin.com/bizoso/edit?html,output

如果你想让标签填满工具栏，你可以class="flex"到paper-tabs。

  <paper-tabs class="flex">

http://jsbin.com/xevepi/edit?html,output

Polymer 1.0 Paper-Tabs 对内容没有反应

Polymer 1.0 Paper-Tabs Are Not Responsive To Content

polymer