Polymer Project 1.0'da kaplar veya ızgara gibi bir şey nasıl elde edilir - nasıl yapılır?

Question

Polimer Başlangıç ​​Kiti + önceden oluşturulmuş polimer elemanları ile uyumlu bir web sitesi oluşturmak istiyorum.

Şimdi, kapsayıcı ya da ızgara gibi bir css çerçevesinde ızgara gibi bir şeye nasıl ulaşılır?

Yalnızca Polymer ile yapılabilir mi, yoksa tek seçeneklerim kendi özel kodum veya iskelet, bourbon neat gibi bir çerçeve/ızgara sistemi mi?

Ben demir-esnek-düzen bakmaya çalıştı ama daha küçük ekran boyutlarında bir tablo gibi birbirinin üstüne çökmez, buradan görebilirsiniz:

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> 

Pencereyi yeniden boyutlandırırsanız kutuların birbirinin altına girmesi için "çökmez", sadece ölçekler.

Peki, buna nasıl yaklaşmalıyım?

DÜZENLEME: Böyle bir şey başarmak istiyorum : http://www.bootply.com/4CJ9GOYEuH

Yani dics yerine yanyana kalma, birbirinin üstüne üzerine çökecek penceresini yeniden boyutlandırmak eğer.

Answer 1

Iron Grid IRON-GRID'u deneyin ve gerekirse Custome Elements öğelerini bulun.

Answer 2

iron-flex-layout ve iron-media-query kombinasyonlarını birlikte kullanabilirsiniz. Demir-medya-sorgu, viewport boyutuna göre güncellenir ve medya-sorgu eşleşmelerini diğer öğelere bağlayabilirsiniz.

Ayrıca, aşağıdakileri yapabilirsiniz, ancak düzeniniz için "flex-n" sınıflarını oluşturmak için queryMatches kullanabilirsiniz. Böylece here is a JSFiddle ve burada it is on GitHub

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

Özyükleme ızgara stilleri SO cevap bir için çok büyük:

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

Answer 3

Sen, bir web bileşenlerin içinde böyle bir şey Bootstrap adlı ızgara CSS ekleyebilirsiniz.

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

In the Fiddle Ben oluk boyutunu yapılandırmak için --bootstrap-grid-gutter ekledik ama nedeniyle yapılandırılabilir kesme noktaları yapamaz:

Ve sonra bu bileşenlerin içinde size <div class="container-fluid"> konum gibi kullanabilirsiniz issues with the CSS shim. Gerekirse, <iron-media-query> ile yapılandırılabilir hale getirebilirsiniz.