如何使用CSS混合使用Angular 2，Dart和Polymer [英] How to use CSS mixins with Angular 2, Dart and Polymer

问题描述

我在我的angular2-dart项目中使用了polymer和polymer_elements。

我可以添加聚合物元素

我的.dart p>

  import'package：angular2 / core.dart'; 
 //聚合物导入
 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']，
封装：ViewEncapsulation.Native 
）
 class BookSplashComponent {
 //没有什么重要的
} 
  

我的.html

 < paper-card class =rate> 
< div class =rate-content> 
< div class =card-content> 
< div class =rate-header>为此相册评分< / div> 
< div class =rate-name> Mac Miller< / div> 
< div> Live from space< / div> 
< / div> 
< div class =card-actions> 
< paper-icon-button class =rate-iconicon =star>< / paper-icon-button> 
< / div> 
< / div> 
< div class =rate-image>< / div> 
< / paper-card> 
  

我的.css with mixins（不起作用）

  paper-card.rate {@apply（ -  layout-horizo​​ntal）; } 
 .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-gray-600）; margin：10px 0; } 
 paper-icon-button.rate-icon {
 --iron-icon-fill-color：white; 
 --iron-icon-stroke-color：var（ -  paper-gray-600）; 
} 
  

但是如果我用相应的样式替换mixins，

我试着纸卡可以有一个水平图像的例子：
https://elements.polymer-project.org /elements/paper-card?active=paper-card&view=demo:demo/index.html

解决方案

这是Polymer特定的，仅适用于Polymer元素的样式标签或头元素中的< style is =custom-style> / p>

I'm using polymer and polymer_elements in my angular2-dart project.

I'm able to add polymer elements (such as paper-card), but I'm not able to use css-mixins, I don't know if I missing an import or something.

My .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
}

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

My .css with mixins (which doesn't work)

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);
  }

But if I replace mixins with the corresponding styles it works! Probably I'm missing something stupid.

I'm trying "Paper-cards can have a horizontal image" example here: https://elements.polymer-project.org/elements/paper-card?active=paper-card&view=demo:demo/index.html

解决方案

This is Polymer specific and works only in the style tag of a Polymer element or in a <style is="custom-style"> in the head element.

这篇关于如何使用CSS混合使用Angular 2，Dart和Polymer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！