Polimer v1.0 demir listesi öğeleri düzen stili

Json verilerini almak ve demir listesi öğeleri oluşturmak için demir listesi için sağlanan demoyu kullanıyorum. Her şey iyi çalışıyor.Polimer v1.0 demir listesi öğeleri düzen stili

Ancak, dom-module her öğe için düzen stilini oluştururken, doğru değil ve @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical); alınıyor şüpheleniyorum. i iron-flex-layout.html içine doğrudan gitmek ve ürün I v.1 için stil belgelerine bir göz vardı ama

orada bariz bir şey göremiyordu

Tamam bak bu düzenleri için css kopyalarsanız

Teşekkür

Kod

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

kaynak

2015-07-18 Tasos

Merhaba Tasos gibi ... sadece <dom-module altında <style>...</style> var. Çözüm eklemek istediğiniz için teşekkür ederiz. Kendine cevap verir misin lütfen? Bu şekilde, soldaki onay işaretini tıklayarak kabul edilmiş olarak işaretleyebilirsiniz - burada [çözülmüş] başlık hacklerini kullanmamayı tercih ederiz. Teşekkürler! – halfer

@halfer evet 1. sırada yapmak istediğim şey buydu. Pek çok soru sormadım ve sayfanın en altındaki "Kendi sorunuzu cevapla" düğmesini bilmiyordum. Şimdi biliyorum. teşekkürler – Tasos

Probs yok. Ayrıca, hızlı ipucu: önceki bir sürüme geri dönmek isterseniz, [sürüm geçmişi] 'ni (http://stackoverflow.com/posts/31494614/revisions) araştırın ve geri yüklemek istediğiniz önceki sürümde "Geri Alma" yı seçin. . – halfer

Ben stil başka bir göz vardı dokümantasyon ve orada örnekler <dom-module .. yüklenen alamadım kullanırken yüzden

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

Yani <template> altında <style>..</style> yerleştirerek.

kaynak

2015-07-19 08:35:20 Tasos

Bu tekrar değişti.