Dart 聚合物铁弹性混合物';s Don';不工作,但上课
我让Polymer iron flex布局使用类在AngularDart组件中工作。由于它会生成一个弃用警告,我想我应该尝试推荐的替代方案:mixin的。它们不起作用 目前,我的Artister_component.dart中有此导入:Dart 聚合物铁弹性混合物';s Don';不工作,但上课,dart,polymer,angular-dart,Dart,Polymer,Angular Dart,我让Polymer iron flex布局使用类在AngularDart组件中工作。由于它会生成一个弃用警告,我想我应该尝试推荐的替代方案:mixin的。它们不起作用 目前,我的Artister_component.dart中有此导入: import 'package:polymer_elements/iron_flex_layout.dart'; 我还尝试将其添加到index.html中 <link rel="import" href="packages/polymer_ele
import 'package:polymer_elements/iron_flex_layout.dart';
我还尝试将其添加到index.html中
<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">
这与使用bower的文档中给出的示例不同。在my 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">
...
.集装箱{
@应用(--水平布局);
}
flexchild先生{
@应用(--layout-flex-3);
}
.flexchild-2{
@应用(--layout-flex-9);
}
...
我已经尝试将导入放在index.html和我的主css文件中,并且不影响样式设置。考虑到这些课程很有效,你会认为mixim的也会有效。我不断挖掘,找到了答案。我还发现该方法已被弃用。My pubspec定义了以下版本:
polymer: ^1.0.0-rc.17
polymer_elements: ^1.0.0-rc.8
我很确定解决方案是将这行代码添加到我的index.html中:
<link rel="import" href="packages/polymer/polymer.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>
我之所以不确定这是唯一的要求,是因为我一直在改变很多东西,以使其发挥作用。这是我的完整index.html:
<link rel="import" href="packages/polymer/polymer.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>
爵士猫
window.Polymer=window.Polymer |{};
window.Polymer.dom='shadow';
.集装箱{
@应用(--水平布局);
}
.元素索引{
@应用(--layout-flex-3);
}
.元素体{
@应用(--layout-flex-9);
}
.主要元素{
@应用(--layout-flex-7);
}
.元素侧栏{
@应用(--layout-flex-2);
}
加载。。。
现在我开始工作了,我将把我的样式移到一个单独的文件中。这是我使用mixin类的文件之一:
<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>
{{title}}
{{艺术家名}{{艺术家名}
细节
{{selectedArtist.first_name}{{{selectedArtist.last_name}
笔记
{{selectedArtist.notes}
录音
日期
标题
领导
{{credit.recording_date}日期:'d MMM yyyy'}
{{credit.title}
{{credit.first_name}{{credit.last_name}}
仪器{selectedArtist.primary_Instrument}
其他{{选定的Artist.Other_instruments}
出生{selectedArtist.Birth_year}
死亡{selectedArtist.Death_year}
根据对的回答,为polymer 1.1创建了一种新方法,该方法已被弃用