So erstellen Sie einen Material-Design-Header für die App mit Polymer

Question

<app-header fixed condenses effects="waterfall"> 
<app-toolbar> 
    <paper-icon-button icon="menu"></paper-icon-button> 
    <div title>My Menu</div> 
    <paper-icon-button icon="shopping-cart"></paper-icon-button> 
</app-toolbar> 

Der obige Code zeigt nur Mein Menü in einer leeren weißen Seite. Wie erstelle ich einen App-Header mit Material Design? Wo soll ich den Code ändern?

Answer 1

Haben Sie sich die paper-elements im Polymer-Katalog angesehen? Diese sind so konzipiert, dass sie den Spezifikationen für das Materialdesign entsprechen. Es gibt ein paper-header-panel Element und ein paper-toolbar Element, das wie erwartet angezeigt wird.

Answer 2

Sie sollten Polymer überprüfen app-elements Es bietet Ihnen Anwendungslayout einschließlich Schublade, Inhalt (Header, Footer)

<app-drawer-layout> 
 
<app-drawer> 
 
    <!-- drawer-content --> 
 
</app-drawer> 
 
<app-header-layout> 
 
    <app-header> 
 
    <app-toolbar> 
 
     <div title>App name</div> 
 
     </app-toolbar> 
 
    </app-header> 
 
    <!-- main content --> 
 
    </app-header-layout> 
 
</app-drawer-layout>