So verwenden Sie CSS-Mixins mit Angular 2, Dart und Polymer

Ich verwende Polymere und Polymerelemente in meinem angular2-dart-Projekt.So verwenden Sie CSS-Mixins mit Angular 2, Dart und Polymer

Ich bin in der Lage, Polymerelemente (wie Papier-Karte) hinzuzufügen, aber ich kann nicht css-mixins verwenden, ich weiß nicht, ob ich einen Import oder etwas vermisse.

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

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

Mein .css- mit Mixins

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

(was nicht funktioniert) Aber wenn ich Ersetzen Sie Mixins durch die entsprechenden Styles i t funktioniert! Vermutlich vermisse ich etwas Dummes.

Ich versuche, „Papier-Karten können eine horizontale Bild haben“ Beispiel hier: https://elements.polymer-project.org/elements/paper-card?active=paper-card&view=demo:demo/index.html

Quelle

2016-05-27 Ermans

Ist das oben genannte CSS in book_splash_component.css '? –

@ GünterZöchbauer ja, ist es richtig? Ich habe auch versucht, das css in die .html-Datei innerhalb von einzubetten, aber nein. – Ermans

Haben Sie versucht, mit Schatten dom zu spielen, wie es in der Winkelkomponente oder auf Polymer deaktivieren, was zu sehen, passieren ?

Quelle

2016-05-28 03:31:24

Ich habe versucht, ViewEncapsulation in Emulated oder None zu ändern, aber Mixins werden immer noch nicht erkannt. Vielleicht, wie Günter sagte, arbeiten sie nur innerhalb von

So verwenden Sie CSS-Mixins mit Angular 2, Dart und Polymer

Antwort