Polymer v1.0 Eisen-Liste Artikel Layout-Styling

Ich benutze die Demo für Eisen-Liste zur Verfügung gestellt json Daten zu holen und erstellen Sie die Eisen-Liste Elemente. Alles funktioniert gut.Polymer v1.0 Eisen-Liste Artikel Layout-Styling

Allerdings ist beim Erstellen einer dom-module das Layout-Styling für jedes Element nicht korrekt und ich vermute, @apply(--layout-horizontal); @apply(--layout-flex); @apply(--layout-vertical); werden nicht abgeholt.

Wenn ich gehe direkt in iron-flex-layout.html und kopieren Sie die CSS für die Layouts die Elemente ok aussehen

ich einen Blick auf Styling-Dokumentation v.1 hatte, aber ich konnte nichts offensichtlich dort

sehen

dank

-Code

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

Quelle

2015-07-18 Tasos

Hallo Tasos geladen mit tun bekommen. Danke, dass Sie eine Lösung hinzufügen möchten. Würdest du es bitte zu einer Selbstantwort bewegen? Auf diese Weise können Sie es als akzeptiert markieren, indem Sie auf das Häkchen-Symbol auf der linken Seite klicken - wir bevorzugen hier keine [gelösten] Titel-Hacks zu verwenden. Vielen Dank! – halfer

@halfer ja, das wollte ich auf Platz 1 machen. Ich habe nicht viele Fragen gestellt und wusste nicht über den Button "Beantworte deine Frage" unten auf der Seite. Jetzt weiß ich. danke – Tasos

Keine probs. Kurzer Tipp: Wenn Sie zu einer früheren Version zurückkehren möchten, durchsuchen Sie den [Versionsverlauf] (http://stackoverflow.com/posts/31494614/revisions) und wählen Sie "Rollback" für die frühere Version, die Sie wiederherstellen möchten . – halfer

ich hatte noch einen Blick auf das Styling Dokumentation und die Beispiele dort haben <style>...</style> knapp unterhalb des <dom-module ... wie so

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

So <style>..</style> unter <template> platzieren, wenn <dom-module .. nicht.

Quelle

2015-07-19 08:35:20 Tasos

Das hat sich wieder geändert. '

Polymer v1.0 Eisen-Liste Artikel Layout-Styling

Antwort