0

現在、Polymer 1.0 で次のコードを使用して、Web ページの一部をレスポンシブにしています (動作します)。

<template is="dom-bind">
   <iron-media-query query="(max-width: 750px)" query-matches="{%raw%}{{isLarge}}{%endraw%}"></iron-media-query>
   <!-- set an attribute if isLarge is true -->
     <div large$="{%raw%}{{!isLarge}}{%endraw%}">
       <div class="layout vertical">
       {{ content }}
       </div>
     </div>
     <div large$="{%raw%}{{isLarge}}{%endraw%}">
       <div class="layout horizontal">
       {{ content }}
       </div>
     </div>
</template>

私のcssには

[wide] {
      display: none;
    }

<div>falseの場合を非表示にします。

さて、 double なしでこれを解決するよりスマートな方法があるのではないかと思います<div>。

注意: Polymer 0.5<div layout vertical>では機能しますが、Polymer 1.0 では機能しません。代わりに、<div class="layout vertical">Polymer 1.0 でのみ機能するようです。

4

1 に答える 1

1

これを実現するにはいくつかの方法があります。

クラスの計算

あなたの特定のケースでは、コンテンツは同じままのようで、唯一の違いは水平/垂直クラスです。幸いなことに、これには計算値を使用できます。サンプルは次のとおりです。

<div large$="{%raw%}{{!isLarge}}{%endraw%}">
   <div class$="_computeThisClass(isLarge)">
      {{ content }}
   </div>
</div>

...

Polymer({
   ...
   _computeThisClass: function(isLarge) {
      if(isLarge) {
         return "layout horizontal";
      } else {
         return "layout vertical";
      }
   }
}

私にとって、この最後のものの欠点は、(AFAIK) js に適用する必要があるすべてのクラスを含める必要があることです。

hidden-属性の使用

要素を非表示にするだけの場合は、hidden属性を使用することをお勧めします。hereで説明されているように、これはブール値または計算値を取ることができます。例：

<div large$="{%raw%}{{!isLarge}}{%endraw%}" hidden$="{{!isLarge}}">
   <div class="layout vertical">
      {{ content }}
   </div>
</div>

欠点は、コンテンツがページにスタンプされることです (これは基本的に条件付きを適用していますdisplay: none;)。

条件付きテンプレートの使用

これには、条件付きテンプレートを使用するオプションもあります。例：

<template is="dom-if" if="{{!isLarge}}">
    <div large$="{%raw%}{{!isLarge}}{%endraw%}">
       <div class="layout vertical">
          {{ content }}
       </div>
    </div>
<template>

欠点は、後の段階 (条件が満たされたとき) にコンテンツがページにスタンプされるため、遅延が発生する可能性があることです。でも、コンディションが変わりそうにない時はいいね！

あなたの場合、単にクラスを計算するのが最善だと思います。

于 2016-01-06T20:37:11.120 に答える