Polymer Eisen Flex Mixin funktioniert nicht, aber Klassen Do

Ich habe Polymer Eisen-Flex-Layout in meiner AngularDart Komponente mit Klassen arbeiten. Da es eine Verwarnungswarnung generiert, dachte ich, würde die empfohlene Alternative versuchen: Mixins. Sie funktionieren nicht.Polymer Eisen Flex Mixin funktioniert nicht, aber Klassen Do

Derzeit habe ich dieses Import in meinem artist_component.dart:

import 'package:polymer_elements/iron_flex_layout.dart';

Ich habe auch versucht, das Hinzufügen meiner index.html

<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">

Dies unterscheidet sich von dem Beispiel in der zugehörigen Dokumentation welches Bower benutzt. In meinem artist_component.html ich habe:

<style is="custom-style"> 
    .container { 
    @apply(--layout-horizontal); 
    } 
    .flexchild { 
    @apply(--layout-flex-3); 
    } 
    .flexchild-2 { 
    @apply(--layout-flex-9); 
    } 
</style> 
<section class="container"> 
    <section class="flexchild gutter"> 
...

Ich habe versucht, den Import in index.html und in meiner Haupt-CSS-Datei zusammen mit dem Styling setzt ohne zu beeinflussen. Wenn man bedenkt, dass Klassen funktionieren, würden Sie denken, dass dies auch mixim wäre.

Quelle

2016-07-28 curt

Ich graben weiter und ich fand eine Antwort. Ich fand auch heraus, dass die Methode veraltet ist. Meine pubspec definieren diese Versionen:

polymer: ^1.0.0-rc.17 
polymer_elements: ^1.0.0-rc.8

Ich bin mir ziemlich sicher, dass die Lösung, um diese Zeile Code zu meinem index.html hinzuzufügen war:

<link rel="import" href="packages/polymer/polymer.html">

Der Grund, warum ich bin nicht positiv, dass dies Die einzige Voraussetzung ist, dass ich viele Dinge geändert habe, um es zum Laufen zu bringen. Das ist meine komplette index.html:

<!DOCTYPE html> 
<html> 
<head> 
<title>Jazz Cat</title> 
<script> 
    window.Polymer = window.Polymer || {}; 
    window.Polymer.dom = 'shadow'; 
</script> 

<!-- For testing using pub serve directly use: --> 
<base href="/"> 
<!-- For testing in WebStorm use: --> 
<!-- <base href="/dart/web/"> --> 

<link rel="import" href="packages/polymer/polymer.html"> 
<link rel="import" href="packages/polymer_elements/iron_flex_layout.html"> 
<link href="master.css" rel="stylesheet" type="text/css" /> 
<style is="custom-style"> 
    .container { 
    @apply(--layout-horizontal); 
    } 
    .element-index { 
    @apply(--layout-flex-3); 
    } 
    .element-body { 
    @apply(--layout-flex-9); 
    } 
    .element-main { 
    @apply(--layout-flex-7); 
    } 
    .element-sidebar { 
    @apply(--layout-flex-2); 
    } 
</style> 
<script defer src="main.dart" type="application/dart"></script> 
<script defer src="packages/browser/dart.js"></script> 
</head> 
<my-app>Loading...</my-app> 
</html>

Jetzt, wo ich zur Arbeit kam, werde ich mein Styling in eine separate Datei verschieben. Dies ist eine der Dateien, in denen ich die mixin Klassen verwenden:

<section class="container"> 
<section class="element-index"> 
<h1>{{title}}</h1> 
    <paper-listbox class="scroll-list" (click)="onScroll()"> 
    <paper-item class="item-height" *ngFor="let artist of artists" [class.selected]="artist == selectedArtist" (click)="onSelect(artist)"> 
     {{artist.first_name}} {{artist.last_name}} 
    </paper-item> 
    </paper-listbox> 
<paper-button (click)="gotoDetail()">Detail</paper-button> 
<!--<paper-icon-button icon="refresh" (click)="gotoDetail()"></paper-icon-button>--> 
    <!--<button (click)="gotoDetail()">View Details</button>--> 
</section> 
<section class="element-body"> 
<div *ngIf="selectedArtist != null"> 
    <h2>{{selectedArtist.first_name}} {{selectedArtist.last_name}}</h2> 
    <!--<section class="layout horizontal">--> 
    <section class="container"> 
    <section class="element-main"> 
     <!--<dl class="justified"> 
     <dt>Instrument:</dt><dd>{{ selectedArtist.primary_instrument }} </dd> 
     <dt>Other:</dt><dd>{{ selectedArtist.other_instruments }}</dd> 
     <dt>Birth:</dt><dd>{{ selectedArtist.birth_year }}</dd> 
     <dt>Death:</dt><dd>{{ selectedArtist.death_year }}</dd> 
     </dl>--> 
     <h3>Notes</h3> 
     <p>{{ selectedArtist.notes }}</p> 
     <h3>Recordings</h3> 
     <table class="index"> 
     <th>Date</th> 
     <th>Title</th> 
     <th>Leader</th> 
     <tr *ngFor="let credit of artist_credits" > 
      <td class="tableDate">{{ credit.recording_date | date:'d MMM yyyy' }}</td> 
      <td>{{ credit.title }}</td> 
      <td>{{ credit.first_name }} {{ credit.last_name}}</td> 
     </tr> 
     </table> 
    </section> 
    <section class="element-sidebar"> 
     <dl class="narrow-list"> 
     <dt>Instrument</dt><dd>{{ selectedArtist.primary_instrument }} </dd> 
     <dt>Other</dt><dd>{{ selectedArtist.other_instruments }}</dd> 
     <dt>Birth</dt><dd>{{ selectedArtist.birth_year }}</dd> 
     <dt>Death</dt><dd>{{ selectedArtist.death_year }}</dd> 
     </dl> 
    </section> 
    </section> 
</div> 
</section> 
</section>

Basierend auf der Antwort auf this question, ein neues Verfahren für Polymer 1.1 und dieser wurde als veraltet erstellt.

Quelle

2016-07-29 22:04:26 curt

Polymer Eisen Flex Mixin funktioniert nicht, aber Klassen Do

Antwort

Verwandte Themen