Polymer Papier-Header-Panel wird nicht richtig rendern

Ich postete ein ähnliches Problem hier in StackOverFlow in Bezug auf Papier-Header-Panel von Polymer wurde beantwortet, aber die Lösung ist nicht effizient oder richtige Art und Weise zu tun, können Sie schauen es here. Spezifischer Import sollte nicht der generischen wie erwähnt gemacht werden .Polymer Papier-Header-Panel wird nicht richtig rendern

Mein Code für sie richtig zu machen ist folgende:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link rel="import" 
      href="bower_components/paper-header-panel/paper-header-panel.html"> 
    <link rel="import" 
      href="bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" 
      href="bower_components/iron-flex-layout/iron-flex-layout.html"> 
    <link rel="import" 
      href="bower_components/iron-flex-layout/classes/iron-flex-layout.html"> 

</head> 

<body class="fullbleed layout vertical"> 
    <!-- paper-header-panel must have an explicit height --> 
    <paper-header-panel class="flex"> 
     <paper-toolbar> 
      <div>Header</div> 
     </paper-toolbar> 
     <div>Content</div> 
    </paper-header-panel> 
</body> 

</html>

Aber das Problem ist, dass dieser Import bereits veraltet ist.

<link rel="import" 
      href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">

Die Dokumentationen empfohlen, die neue Klasse zu verwenden, die ist.

<link rel="import" 
      href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">

Aber es ist nicht richtig das Papier-Header-Panel.

Was habe ich verpasst? Oder was ist mein Fehler? Jede Hilfe würde sehr geschätzt werden. Vielen Dank!

Quelle

2016-03-24 Ariel Magbanua

Von der Quelle: https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html

Eine Reihe von Layout-Klassen, die Sie Layouteigenschaften direkt in Markup angeben lassen.

Sie müssen diese Datei in jedes Element einfügen, das sie benötigt. Beispiel Verwendung:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> 
<style is="custom-style" include="iron-flex iron-flex-alignment"></style> 
<div class="layout horizontal layout-start"> 
    <div>cross axis start alignment</div> 
</div> 
Folgende Importe stehen zur Verfügung:

Eisen-flex

Eisen-flex-Reverse

Eisen-flex-Ausrichtung

Eisen-flex-Faktoren

Eisenpositionierung

Sie müssten nur die Modelle iron-flex und iron-positioning für Ihren Anwendungsfall hinzufügen.

Ex.

<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> 
<style is="custom-style" include="iron-flex iron-positioning"></style> 
<body class="fullbleed layout vertical"> 
    <!-- paper-header-panel must have an explicit height --> 
    <paper-header-panel class="flex"> 
     <paper-toolbar> 
      <div>Header</div> 
     </paper-toolbar> 
     <div>Content</div> 
    </paper-header-panel> 
</body>

Quelle

2016-03-24 05:10:00

Verstanden! Vielen Dank. Ich werde das in Zukunft beachten. –

Polymer Papier-Header-Panel wird nicht richtig rendern

Antwort

Verwandte Themen