0
私はangular2-dartプロジェクトでポリマーとポリマーエレメントを使用しています。角度2、ダーツ、ポリマーでCSSミックスインを使用する方法
ポリマー成分(ペーパーカードなど)を追加することはできますが、私はcss-mixinsを使用することができません。インポートがないかどうかわかりません。
マイ.dart
import 'package:angular2/core.dart';
//Polymer imports
import 'package:polymer_elements/paper_card.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_icon_button.dart';
import 'package:polymer_elements/iron_icon.dart';
import 'package:polymer_elements/paper_styles/classes/typography.dart';
import 'package:polymer_elements/iron_flex_layout/classes/iron_flex_layout.dart';
@Component(
templateUrl: '../view/book_splash_component.html',
selector: 'book-splash',
styleUrls: const ['../view/css/book_splash_component.css'],
encapsulation: ViewEncapsulation.Native
)
class BookSplashComponent{
//nothing that matters
}
マイ.htmlを
<paper-card class="rate">
<div class="rate-content">
<div class="card-content">
<div class="rate-header">Rate this album</div>
<div class="rate-name">Mac Miller</div>
<div>Live from space</div>
</div>
<div class="card-actions">
<paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
</div>
</div>
<div class="rate-image"></div>
</paper-card>
(動作しない)ミックスイン
paper-card.rate { @apply(--layout-horizontal); }
.rate-image {
width: 100px;
height: 170px;
background: url('./donuts.png');
background-size: cover;
}
.rate-content {
@apply(--layout-flex);
float: left;
}
.rate-header { @apply(--paper-font-headline); }
.rate-name { color: var(--paper-grey-600); margin: 10px 0; }
paper-icon-button.rate-icon {
--iron-icon-fill-color: white;
--iron-icon-stroke-color: var(--paper-grey-600);
}
しかし、私の場合で私の.css mixinを対応するスタイルiに置き換える作品は!おそらく私は何か愚かなことを逃しています。
私はここに例「紙のカードは水平イメージを持つことができる」しようとしている: https://elements.polymer-project.org/elements/paper-card?active=paper-card&view=demo:demo/index.html
上記のCSSはbook_splash_component.css 'にありますか? –
@GünterZöchbauerはい、そうですか?私はの中の.htmlファイルにCSSを埋め込むようにしましたが、それは必要ありません。 – Ermans