Wie erreichen Sie in Polymer Project 1.0 so etwas wie Container oder Gitter?

Question

Ich möchte mit dem Polymer Starter Kit + den vorgefertigten Polymerelementen eine responsive Website erstellen.

Nun, wie etwas wie ein Container oder Grid wie in einem CSS Framework wie Bootstrap zu erreichen?

Ist es möglich mit nur Polymer, oder meine einzigen Optionen sind meine eigenen benutzerdefinierten Code oder ein Framework/Grid-System wie Skelett, Bourbon ordentlich, etc?

Ich habe versucht, bei Eisen-flex-Layout zu sehen, aber es oben nicht kollabiert nicht voneinander wie ein Gitter auf kleineren Bildschirmgrößen, können Sie es hier sehen:

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> 

Es "kollabiert" nicht, so dass die Boxen untereinan- der stehen, wenn Sie die Größe des Fensters ändern, es skaliert einfach.

Also, wie soll ich es angehen?

EDIT: Ich möchte so etwas wie dieses Ziel erreichen: http://www.bootply.com/4CJ9GOYEuH

Also, wenn Sie die Größe des Fensters die dics auf die aufeinander kollabieren wird, statt nebeneinander zu bleiben.

Answer 1

Versuchen Sie Eisen Grid IRON-GRID und finden Sie mehr Custome Elements bei Bedarf.

Answer 2

Sie können die iron-flex-layout und iron-media-query in Kombination verwenden. Die Iron-Media-Abfrage wird basierend auf der Größe des Darstellungsbereichs aktualisiert und Sie können die Übereinstimmung der Medienabfrage mit anderen Elementen verknüpfen.

Naiv, könnten Sie Folgendes tun, aber Sie könnten auch queryMatches verwenden, um die "flex-n" -Klassen für Ihr Layout zu generieren.

<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

Sie können Bootstrap des Grids CSS innerhalb einer Web-Komponente hinzuzufügen, so etwas wie:

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

Die Bootstrap Rasterstilen für eine zu große SO beantworten, so here is a JSFiddle, und hier it is on GitHub.

Und dann innerhalb dieser Komponente können Sie es verwenden, wie Sie in <div class="container-fluid"> sind:

<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 Ich habe --bootstrap-grid-gutter hinzugefügt, um die Rinne Größe zu konfigurieren, aber ich kann nicht die Haltepunkte konfigurierbar aufgrund machen zu issues with the CSS shim. Sie könnten das mit <iron-media-query> konfigurierbar machen, wenn Sie es brauchen.