Stylizacja układu elementów listy polimerów v1.0

Używam demonstracji dostarczonej do spisu żelazek, aby pobrać dane json i utworzyć elementy listy żelaznej. Wszystko działa dobrze.Stylizacja układu elementów listy polimerów v1.0

Jednak przy tworzeniu dom-module stylizacja układu dla każdego elementu jest niepoprawna i podejrzewam, że nie są pobierane @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical);.

jeśli pójdę bezpośrednio do iron-flex-layout.html i skopiuj css dla tych układów elementy wyglądają ok

miałem do obejrzenia dokumentacji stylizacji dla v.1, ale nie mogłem zobaczyć coś oczywistego tam

Dzięki

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>

Źródło

2015-07-18 Tasos

Hi Tasos. Dziękuję, że chcesz dodać rozwiązanie. Czy mógłbyś przenieść to do samo odpowiedzi? W ten sposób możesz oznaczyć go jako zaakceptowany, klikając ikonę haczyka po lewej stronie - wolimy nie używać [rozwiązanych] hacków tutaj. Dzięki! – halfer

@halfer tak to chciałem zrobić na pierwszym miejscu. Nie zadawałem tak wielu pytań i nie znałem przycisku "Odpowiedz na własne pytanie" na dole strony. Teraz wiem. dzięki – Tasos

Brak problemów. Szybka wskazówka: jeśli chcesz powrócić do wcześniejszej wersji, po prostu zapoznaj się z [historia wersji] (http://stackoverflow.com/posts/31494614/revisions) i wybierz "Cofnij" we wcześniejszej wersji, którą chcesz przywrócić . – halfer

miałem inne spojrzenie na stylizacji dokumentacja i przykłady tam mają <style>...</style> tuż pod <dom-module ... jak tak

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

więc umieszczenie <style>..</style> poniżej <template> podczas korzystania <dom-module .. nie dostać załadowany.

Źródło

2015-07-19 08:35:20 Tasos

To się znowu zmieniło. '