2015-09-02 13 views
6

Mi piacerebbe creare un sito Web reattivo con il Polymer Starter Kit + gli elementi polimerici prefabbricati.Come ottenere qualcosa come contenitori o griglia in Polymer Project 1.0 - come?

Ora, come ottenere qualcosa come un contenitore o una griglia come in un framework css come bootstrap?

È possibile solo con Polymer oppure le mie uniche opzioni sono il mio codice personalizzato o un sistema framework/grid come scheletro, bourbon pulito, ecc.?

ho cercato di guardare ferro-flex-layout, ma non crolla l'uno sopra l'altro come una griglia su schermi di dimensioni più piccole, si può vedere qui:

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> 

Non "collassa" in modo che le scatole si trovino l'una sotto l'altra se ridimensionate la finestra, ma si ridimensiona.

Quindi, come dovrei avvicinarmi?

EDIT: Vorrei realizzare qualcosa di simile: http://www.bootply.com/4CJ9GOYEuH

Quindi, se si ridimensiona la finestra i dics crollerà sulla parte superiore di ogni altra, invece di stare uno accanto all'altro.

+0

Avete visto [questo] (https://elements.polymer-project.org/guides/flex-layout) documentazione su 'iron-flex-layout'? –

+0

Sì, ma mi piacerebbe ottenere qualcosa del genere: http://www.bootply.com/4CJ9GOYEuH Quindi se ridimensionate la finestra i dics collasseranno l'uno sopra l'altro, invece di stare uno vicino all'altro . – lastnoob

risposta

0

Prova Iron Grid IRON-GRID e trova altro Custome Elements se necessario.

+0

Grazie, l'ho provato, ma sfortunatamente non posso usarlo correttamente, o non supporta righe e contenitori come ad esempio in bootstrap, come puoi vedere nel mio link bootply OP. Qual é?:) – lastnoob

+0

Devi usare le dimensioni delle colonne. Se vuoi che si impilino su dispositivi di piccole dimensioni, inserisci s12, ecc. – The5heepDev

+0

Nota, iron-grid è concesso in licenza con GNU GPL v3. Se stai creando un software che vuoi ridistribuire, potrebbe essere un problema (a meno che il tuo software non sia anche GPL). Si spera che gli autori della griglia di ferro alla fine lo pubblicheranno sotto MIT o BSD. –

1

È possibile utilizzare iron-flex-layout e iron-media-query in combinazione. Iron-media-query si aggiornerà in base alla dimensione del viewport e puoi associare le sue corrispondenze media-query ad altri elementi.

Ingenuamente, si potrebbe fare quanto segue, ma allo stesso modo è possibile utilizzare queryMatch per generare le classi "flex-n" per il proprio layout.

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

Grazie! Quindi correggimi se sbaglio, ma fondamentalmente questo è il seguente, giusto? L'iron-media-query controllerà se la larghezza della vista è maggiore o minore di 600px, quindi se è maggiore, verrà utilizzato il primo modello e, se è più piccolo, il secondo. Potresti mostrarmi in codice come fare il collasso uno sopra l'altro come una griglia o altro? Lo apprezzerei davvero. Inoltre cosa ne pensi [IRON-GRID] (https://github.com/The5heepDev/iron-grid/) @ user3457398 collegato? – lastnoob

0

È possibile aggiungere CSS griglia di bootstrap all'interno di un componente web, qualcosa di simile:

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

Il Bootstrap stili di griglia sono troppo grande per un SO rispondere, così here is a JSFiddle, e qui it is on GitHub.

E poi all'interno di questa componente è possibile utilizzare proprio come siete in <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> 

In the Fiddle ho aggiunto --bootstrap-grid-gutter per configurare la dimensione grondaia, ma non posso fare i punti di interruzione a causa configurabili a issues with the CSS shim. Potresti renderlo configurabile con <iron-media-query> se necessario.