Polimero v1.0 articoli in lista di ferro styling layout

Sto usando la demo fornita per iron-list per recuperare i dati JSON e creare gli elementi della lista di ferro. Tutto funziona bene.Polimero v1.0 articoli in lista di ferro styling layout

Tuttavia, quando si crea uno dom-module lo stile del layout per ogni elemento non è corretto e ho il sospetto che lo @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical); non venga prelevato.

se vado direttamente in iron-flex-layout.html e copiare il css per quegli schemi le voci sembrano ok

ho dato un'occhiata a documentazione styling per v.1, ma non ho potuto vedere nulla evidente in là

grazie

Codice

<body unresolved> 
    <paper-scroll-header-panel class="fit" condenses keep-condensed-header> 
    <paper-toolbar class="tall"> 
    <paper-icon-button icon="arrow-back"></paper-icon-button> 
    <div class="flex"></div> 
    <paper-icon-button icon="search"></paper-icon-button> 
    <paper-icon-button icon="more-vert"></paper-icon-button> 
    <div class="bottom title">iron-list</div> 
</paper-toolbar> 
<my-request></my-request> 
</paper-scroll-header-panel> 

<dom-module id="my-request"> 
<template> 
    <iron-ajax auto id="ajaxPost" url="the-url" handle-as="json" last-response="{{data}}" on-respone="handleResponse"></iron-ajax> 
    <iron-list items="{{data.items}}" as="item"> 
    <style> 

    iron-list { 
     background-color: var(--paper-grey-200, #eee); 

    } 

    .item { 
     @apply(--layout-horizontal); 

     margin: 16px 16px 0 16px; 
     padding: 20px; 

     border-radius: 8px; 
     background-color: white; 
     border: 1px solid #ddd; 
    } 

    .pad { 
     padding: 0 16px; 
     @apply(--layout-flex); 
     @apply(--layout-vertical); 
    } 

    .primary { 
     font-size: 16px; 
     font-weight: bold; 
    } 

    .secondary { 
     font-size: 14px; 
    } 

    .dim { 
     color: gray; 
     position: absolute; 
     right: 70px; 
     bottom: 10px; 
    } 
    .more { 
     position: absolute; 
     bottom: 10; 
     right: 37px; 
     color:#D3D3D3; 
    } 


    </style> 
    <template> 
    <div> 
     <div class="item"> 
     <iron-image style="box-shadow: 0 0 5px rgba(0,0,0,0.50);background-color:gray;width:80px; height:80px;" sizing="cover" src="[[item.path]]" preload></iron-image> 
     <div class="pad"> 
      <div class="primary">{{item.the_title}}</div> 
      <div class="secondary">{{item.info}}</div> 
      <div class="dist secondary dim"><span>{{item.lat}}</span>,<span>{{item.lng}}</span></div> 
     </div> 
     <iron-icon class="more" icon="star"></iron-icon> 
     <iron-icon icon="more-vert"></iron-icon> 
     </div> 
    </div> 
    </template> 
</iron-list> 
</template> 
</dom-module> 

<script> 
    (function() { 
    Polymer({ 
     is: 'my-request', 
     handleResponse: function() { 
     console.log('handleResponse'); 
     } 

    }); 
    })(); 
</script> 
</body>

fonte

2015-07-18 Tasos

Hi Tasos. Grazie per aver voluto aggiungere una soluzione. Lo sposteresti in una risposta personale, per favore? In questo modo, puoi contrassegnarlo come accettato facendo clic sull'icona del segno di spunta a sinistra: preferiamo non utilizzare gli hack del titolo [risolti] qui. Grazie! – halfer

@halfer sì questo è quello che volevo fare al 1 ° posto. Non ho fatto molte domande e non conoscevo il pulsante "Rispondi alla tua domanda" in fondo alla pagina. Adesso lo so. grazie – Tasos

Nessun problema. Inoltre, suggerimento: se vuoi tornare a una versione precedente, esplora la [cronologia delle versioni] (http://stackoverflow.com/posts/31494614/revisions) e scegli "Ripristina" nella versione precedente che desideri ripristinare . – halfer

ho avuto un altro sguardo al styling la documentazione e gli esempi ci hanno <style>...</style> appena sotto la <dom-module ... in questo modo

<dom-module id="the-id"> 
<style> 
. 
. 
</style>

Così mettendo <style>..</style> sotto <template> quando si utilizza <dom-module .. non si ottiene caricato in.

fonte

2015-07-19 08:35:20 Tasos

Che è cambiato di nuovo. '