Polymer 1.0 中的错误纸标签

Question

我最近从 Polymer 0.5 转变为 1.0，我立即注意到的一个审美问题是可点击元素的行为，尤其是 paper-tabs 和 paper-button。单击时，文本会以一种奇怪而突然的方式调整大小，如下所示：

您可能已经注意到，有一次我单击了选项卡，它变为活动状态，但下方的栏并未在其下方滑动。

我怎样才能让它们更顺畅'in place'？像这样：

以下是 paper-tabs 的代码：

       <paper-toolbar id="mainToolbar" class="tall">
            <div class="top title flex">[[headerTitle]]</div>
            <my-tools class="top"></my-tools>
            <div class="bottom">
                <paper-tabs selected="[[selected]]" noink class="tabs">
                    <paper-tab id="discover"><a href="/">DISCOVER</a></paper-tab>
                    <paper-tab id="learn"><a href="/learn">LEARN</a></paper-tab>
                    <paper-tab id="explore"><a href="/explore">EXPLORE</a></paper-tab>
                </paper-tabs>
            </div>
        </paper-toolbar>

Answer 1

如果您查看paper-tab.html，您可以更改：

:host(:focus) .tab-content {
  opacity: 1;
  font-weight: 700;
}

并删除 font-weight 中的更改：

:host(:focus) .tab-content {
  opacity: 1;
}

Answer 2

您可以为下面的元素定义类。

#resolutionTabs span.tab {
  font-weight: 500 !important;
  font-family: 'Open Sans';
  font-size: 16px;
}

<paper-tabs id="resolutionTabs" attr-for-selected="data-resolution" selected="{{resolution}}">
  <paper-tab data-resolution="1080x1920"><span class="tab">1080x1920</span></paper-tab>
  <paper-tab data-resolution="1920x1080"><span class="tab">1920x1080</span></paper-tab>
  <paper-tab data-resolution="1280x1024"><span class="tab">1280x1024</span></paper-tab>
  <paper-tab data-resolution="1024x1280"><span class="tab">1024x1280</span></paper-tab>
</paper-tabs>

Polymer 1.0 中的错误纸标签

Buggy paper-tabs in Polymer 1.0

html

web-component

polymer