Ich habe Schwierigkeiten, iron-list
zu bekommen, um nett mit iron-flex-layout
und paper-card
zu spielen. Was ich hoffe, ist für die paper-card
flex erweitern auf beiden Achsen, um die Seite zu decken (mit seinem Rand als Stoßstange) und dann für die iron-list
vertikal in seinem Container zu erweitern, um meine Eisen-Liste mit all seinen "virtuellen Liste zu zeigen " Zauber.Polymer Eisen-Liste mit Flexbox
Wohin gehe ich falsch?
<script src="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-card/paper-card.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-progress/paper-progress.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-list/iron-list.html">
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
body {
margin: 0;
height: 100vh;
}
paper-card {
margin: 1em;
}
iron-list {
border-bottom: 1px solid #f00;
border-top: 1px solid #000;
}
</style>
<div class="vertical layout">
<template is="dom-bind" id="app">
<paper-card heading="My paper card" class="flex">
<div class="card-content layout vertical">
<div>[[listing.length]]</div>
<iron-list items="[[listing]]" class="flex">
<template>
<div class="layout horizontal">
<div>[[item.name]]</div>
<div>[[item.value]]</div>
</div>
</template>a
</iron-list>
</div>
</paper-card>
</template>
</div>
<script>
"use strict";
window.addEventListener('WebComponentsReady', e => {
app.listing = [];
for (var i = 0; i < 100; i++) {
app.push('listing', { name: i, value: i });
}
});
</script>
Fiddle: https://jsfiddle.net/4czLkjfj/
Dieser Teil des Problems behebt - danke ..... aber es ist immer noch ein Problem mit die "Eisen-Liste", wobei es sich vertikal nach unten ausdehnen sollte, um den Behälter zu füllen. (Ich habe eine obere und untere Grenze mit verschiedenen Farben gesetzt, um das Problem zu markieren) ... zur Zeit hat es '0' Höhe – Cheetah
Mit dieser Antwort konnte ich die extra paar Schritte gehen: https://jsfiddle.net/ 4czLkjfj/3 /. Wenn Sie die Antwort bearbeiten, um dies hinzuzufügen, werde ich sie als beantwortet markieren. – Cheetah