designer
<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-header-panel/core-header-panel.html"> | |
<link rel="import" href="../core-menu/core-submenu.html"> | |
<link rel="import" href="../core-item/core-item.html"> | |
<link rel="import" href="../core-scroll-header-panel/core-scroll-header-panel.html"> | |
<polymer-element name="my-element"> | |
<template> | |
<style> | |
:host { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
} | |
#core_icon_button { | |
left: 22px; | |
top: 30px; | |
position: absolute; | |
} | |
#core_header_panel { | |
width: 300px; | |
height: 400px; | |
left: 200px; | |
top: 100px; | |
position: absolute; | |
} | |
#core_toolbar { | |
background-color: rgb(79, 125, 201); | |
color: rgb(255, 255, 255); | |
} | |
#section { | |
height: 1000px; | |
background: linear-gradient(rgb(214, 227, 231), lightblue); | |
} | |
#core_menu { | |
font-size: 16px; | |
left: 80px; | |
top: 550px; | |
position: absolute; | |
} | |
#core_submenu1 { | |
left: 250px; | |
top: 550px; | |
position: absolute; | |
width: 350px; | |
height: 260px; | |
} | |
#core_scroll_header_panel { | |
width: 380px; | |
height: 460px; | |
left: 600px; | |
top: 90px; | |
position: absolute; | |
} | |
#core_toolbar1 { | |
background-color: rgb(66, 133, 244); | |
color: rgb(241, 241, 241); | |
fill: rgb(241, 241, 241); | |
} | |
#section1 { | |
height: 5000px; | |
background: linear-gradient(rgb(214, 227, 231), lightblue); | |
} | |
</style> | |
<core-header-panel mode="standard" id="core_header_panel"> | |
<core-toolbar id="core_toolbar"> | |
<core-icon-button icon="menu" id="core_icon_button1"></core-icon-button> | |
<div id="div">Header</div> | |
</core-toolbar> | |
<section id="section"></section> | |
</core-header-panel> | |
<core-submenu id="core_submenu1" icon="settings" label="Favorites"> | |
<core-item id="core_item2" label="Favorite 1" horizontal center layout></core-item> | |
<core-item id="core_item3" label="Favorite 2" horizontal center layout></core-item> | |
<core-item id="core_item4" label="Favorite 3" horizontal center layout></core-item> | |
</core-submenu> | |
<core-menu selected="1" id="core_menu"> | |
<core-submenu id="core_submenu" icon="settings" label="Topics"> | |
<core-item id="core_item" label="Topic 1" horizontal center layout></core-item> | |
<core-item id="core_item1" label="Topic 2" horizontal center layout></core-item> | |
</core-submenu> | |
</core-menu> | |
<core-scroll-header-panel headermargin="128" condenses headerheight="192" id="core_scroll_header_panel"> | |
<core-toolbar id="core_toolbar1" class="tall"> | |
<core-icon-button icon="arrow-back" id="core_icon_button2"></core-icon-button> | |
<div id="div1" flex></div> | |
<core-icon-button icon="search" id="core_icon_button3"></core-icon-button> | |
<core-icon-button icon="more-vert" id="core_icon_button4"></core-icon-button> | |
<div id="div2" class="bottom indent">Title</div> | |
</core-toolbar> | |
<section id="section1" content> | |
<core-icon-button icon="menu" id="core_icon_button" theme="core-light-theme"></core-icon-button> | |
</section> | |
</core-scroll-header-panel> | |
</template> | |
<script> | |
Polymer({ | |
}); | |
</script> | |
</polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment