6

Polymer Starter Kit + ビルド済みの Polymer 要素を使用してレスポンシブ Web サイトを作成したいと考えています。

では、ブートストラップのような css フレームワークでコンテナーやグリッドのようなものを実現するにはどうすればよいでしょうか?

Polymerだけで可能ですか、それとも私の唯一のオプションは、独自のカスタムコード、またはスケルトン、バーボンニートなどのフレームワーク/グリッドシステムですか?

私は iron-flex-layout を見ようとしましたが、小さな画面サイズのグリッドのように互いに重なり合うことはありません。ここで確認できます:

http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview

 <div class="horizontal layout" style="height:100%">
    <div class="flex-1">
      Left column
    </div>
    <div class="flex-4">
      Right column
    </div>
  </div>

「折りたたむ」わけではないので、ウィンドウのサイズを変更すると、ボックスが互いの下に配置され、拡大縮小するだけです。

では、どのようにアプローチすればよいのでしょうか。

編集:私はこのような何かを達成したいと思います: http://www.bootply.com/4CJ9GOYEuH

そのため、ウィンドウのサイズを変更すると、dics は互いに隣り合うのではなく、互いの上に折りたたまれます。

4

3 に答える 3

1

iron-flex-layoutとiron-media-queryを組み合わせて使用​​できます。Iron-media-query はビューポート サイズに基づいて更新され、その media-query の一致を他の要素にバインドできます。

素朴に、次のようにすることもできますが、同じように、queryMatches を使用してレイアウトの「flex-n」クラスを生成することもできます。

  <iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>

  <template is="dom-if" if="{{queryMatches}}">
    <div class="horizontal layout" style="height:100%">
      <div class="flex-1">
        Left column
      </div>
      <div class="flex-4">
        Right column
      </div>
    </div>
  </template>

  <template is="dom-if" if="{{!queryMatches}}">
    <div>Left column</div>
    <div>Right column</div>
  </template>
于 2015-09-03T04:49:39.270 に答える
0

次のように、Web コンポーネント内に Bootstrap のグリッド CSS を追加できます。

<dom-module id="bootstrap-grid">
    <template strip-whitespace>
        <style>
            /* Grid styles from Bootstrap */
        </style>
        <content></content>
    </template>
    <script>Polymer({ is: 'bootstrap-grid' });</script>
</dom-module>

Bootstrap グリッド スタイルは SO の回答には大きすぎるため、ここに JSFiddleがあり、ここに GitHub があります。

そして、このコンポーネント内で、あなたがいるのと同じようにそれを使うことができます<div class="container-fluid">:

<bootstrap-grid>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">one</div></div>
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">two</div></div>
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">three</div></div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">A</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">B</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">C</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">D</div></div>
    </div>
</bootstrap-grid>

Fiddleでガター サイズを構成するために追加しましたが、CSS shim の問題--bootstrap-grid-gutterにより、ブレークポイントを構成可能にすることはできません。必要に応じて、それを構成可能にすることができます。<iron-media-query>

于 2017-01-11T10:16:16.660 に答える