Question

使用Polymer 1.0，paper-tab元素无法响应其内容/标题的大小。相反，所有选项卡都是固定大小，看起来很糟糕。据我所知，默认行为是让他们对标题做出回应。

<!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>

enter image description here

Answer 1

如果您希望选项卡适合其内容，您可以覆盖默认选项卡展示：

<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

Answer 2

尝试导入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>

Polymer 1.0 Paper-Tabs不响应内容

2 个答案: