Skip to content

Latest commit

 

History

History
49 lines (43 loc) · 1.64 KB

polymer.md

File metadata and controls

49 lines (43 loc) · 1.64 KB

##A Simple Polymer App

Here we'll just implement the sample Getting Started application from the Polymer component app-layout's source.

Once you've initialized your project, then you'll need to:

proto add -t bower polymer
proto add -t bower iron-icons
proto add -t bower paper-icon-button
proto add -t bower app-layout
proto use app-layout/app-drawer-layout
proto use app-layout/app-drawer
proto use app-layout/app-scroll-effects
proto use app-layout/app-header
proto use app-layout/app-header-layout
proto use app-layout/app-toolbar
proto use app-layout/demo/sample-content
proto add async -D

Next you'll need to edit index.html and add some html to the <body>

<style>
	app-header {
		background-color: #00897B;
		color: #fff;
	}
	paper-icon-button {
		--paper-icon-button-ink-color: white;
	}
	app-drawer-layout:not([narrow]) [drawer-toggle] {
		display: none;
	}
</style>
<app-drawer-layout>
	<app-drawer slot="drawer">
		<app-toolbar>Getting Started</app-toolbar>
	</app-drawer>
	<app-header-layout>
		<app-header slot="header" reveals effects="waterfall">
			<app-toolbar>
				<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
				<div main-title>Title</div>
			</app-toolbar>
		</app-header>
		<sample-content size="100"></sample-content>
	</app-header-layout>
</app-drawer-layout>

Then launch the app. You are done.