Created
July 11, 2014 03:24
-
-
Save dglazkov/b293f6b8d4b399b07cd8 to your computer and use it in GitHub Desktop.
designer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="import" href="../core-scaffold/core-scaffold.html"> | |
<link rel="import" href="../core-header-panel/core-header-panel.html"> | |
<link rel="import" href="../core-menu/core-menu.html"> | |
<link rel="import" href="../core-item/core-item.html"> | |
<link rel="import" href="../core-icon-button/core-icon-button.html"> | |
<link rel="import" href="../core-toolbar/core-toolbar.html"> | |
<link rel="import" href="../core-menu/core-submenu.html"> | |
<link rel="import" href="../core-icons/core-icons.html"> | |
<link rel="import" href="../paper-item/paper-item.html"> | |
<link rel="import" href="../core-animated-pages/core-animated-pages.html"> | |
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html"> | |
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-down.html"> | |
<link rel="import" href="../core-animated-pages/transitions/slide-up.html"> | |
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html"> | |
<polymer-element name="my-element"> | |
<template> | |
<style> | |
:host { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
#scaffold { | |
position: absolute; | |
top: 0px; | |
right: 0px; | |
bottom: 0px; | |
left: 0px; | |
} | |
#header { | |
background-color: rgb(255, 255, 255); | |
} | |
#toolbar { | |
color: rgb(255, 255, 255); | |
background-color: rgb(79, 125, 201); | |
} | |
#menu { | |
font-size: 16px; | |
} | |
#body { | |
padding: 20px; | |
} | |
#core_animated_pages { | |
width: 420px; | |
height: 582px; | |
overflow: hidden; | |
background-color: rgb(238, 238, 238); | |
} | |
</style> | |
<core-scaffold id="scaffold"> | |
<core-header-panel mode="seamed" id="header" navigation flex> | |
<core-toolbar id="toolbar"></core-toolbar> | |
<core-menu selected="Groceries" valueattr="label" selectedindex="1" id="menu" theme="core-light-theme"> | |
<paper-item label="Menu" icon="event" id="item-menu" center horizontal layout></paper-item> | |
<paper-item label="Groceries" icon="list" id="item-groceries" center horizontal layout active></paper-item> | |
</core-menu> | |
</core-header-panel> | |
<div id="title" tool>{{ $.menu.selected }}</div> | |
<div id="body"> | |
BODY | |
</div> | |
<core-animated-pages transitions="hero-transition" selectedindex="0" id="core_animated_pages"> | |
<section id="section" layout horizontal center center-justified hero active> | |
<div hero hero-id="title">MENU</div> | |
</section> | |
<section id="section1" layout horizontal center center-justified hero> | |
<div hero hero-id="title">GROCERIES</div> | |
</section> | |
</core-animated-pages> | |
</core-scaffold> | |
</template> | |
<script> | |
Polymer('my-element', { | |
}); | |
</script> | |
</polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment