Полимер Железный Flex Mixin's не работает, но классы Do

Я получил Polymer iron-flex-layout для работы в моем компоненте AngularDart с использованием классов. Поскольку он генерирует предупреждение об устаревании, я подумал, что попробовал бы альтернативную альтернативу: mixin's. Они не работают.Полимер Железный Flex Mixin's не работает, но классы Do

В настоящее время, у меня есть импорт в моем artist_component.dart:

import 'package:polymer_elements/iron_flex_layout.dart';

Я также попытался добавить это к моему index.html

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

Это отличается от примера, приведенного в документации который использует беседу. В моей artist_component.html у меня есть:

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

Я пытался ставить импорт в index.html и в моем главном файле CSS наряду с моделированием без аффекта. Учитывая, что занятия работают, вы, возможно, подумаете, что mixim тоже.

источник

2016-07-28 curt

Я продолжал копать, и я нашел ответ. Я также узнал, что метод устарел. Мой pubspec определяет эти версии:

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

Я уверен, что решение было добавить эту строку кода в моей index.html:

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

Причина я не уверен, что это единственным требованием является то, что я меняю много вещей, чтобы заставить его работать. Это мой полный 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>

Теперь, когда я начал работать, я двигаю стиль в отдельный файл. Это один из тех файлов, которые я использую классы подмешать:

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

На основании ответа на this question, новый метод был создан для полимера 1.1, и это один устарели.

источник

2016-07-29 22:04:26 curt

Полимер Железный Flex Mixin's не работает, но классы Do

ответ

Смежные вопросы