designer
<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-field/core-field.html"> | |
<link rel="import" href="../core-icon/core-icon.html"> | |
<link rel="import" href="../core-input/core-input.html"> | |
<link rel="import" href="../core-icons/core-icons.html"> | |
<link rel="import" href="../core-menu/core-submenu.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; | |
} | |
#core_scaffold { | |
position: absolute; | |
top: 0px; | |
right: 0px; | |
bottom: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
} | |
#core_header_panel { | |
background-color: rgb(255, 255, 255); | |
} | |
#core_toolbar { | |
color: rgb(255, 255, 255); | |
background-color: rgb(79, 125, 201); | |
} | |
#core_menu { | |
font-size: 16px; | |
} | |
#core_header_panel1 { | |
width: 300px; | |
height: 400px; | |
left: 1210px; | |
top: 520px; | |
} | |
#core_icon { | |
height: 24px; | |
width: 24px; | |
} | |
#core_field { | |
background-color: rgb(255, 255, 255); | |
} | |
#core_animated_pages { | |
width: 420px; | |
height: 582px; | |
overflow: hidden; | |
background-color: rgb(238, 238, 238); | |
} | |
#core_card { | |
width: 300px; | |
height: 300px; | |
border-top-left-radius: 2px; | |
border-top-right-radius: 2px; | |
border-bottom-right-radius: 2px; | |
border-bottom-left-radius: 2px; | |
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; | |
background-color: rgb(255, 255, 255); | |
} | |
</style> | |
<core-scaffold id="core_scaffold"> | |
<core-header-panel mode="seamed" id="core_header_panel" navigation flex> | |
<core-toolbar id="core_toolbar"> | |
<core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout> | |
<core-icon icon="search" id="core_icon"></core-icon> | |
<core-input placeholder="text input" id="core_input" flex></core-input> | |
</core-field> | |
</core-toolbar> | |
<core-menu selected="Movies" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme"> | |
<core-item label="Movies" icon="settings" size="24" id="core_item" on-tab="{{ showMovies }}" horizontal center layout active></core-item> | |
<core-item label="Series" icon="settings" size="24" id="core_item1" on-tab="{{ showSeries }}" horizontal center layout></core-item> | |
</core-menu> | |
</core-header-panel> | |
<div id="div" tool>Viewr</div> | |
<core-animated-pages selected="{{ $.core_item.selected }}" selectedindex="0" notap id="core_animated_pages"> | |
<section id="section" layout horizontal center center-justified active> | |
<core-card id="core_card" layout vertical></core-card> | |
</section> | |
<section id="section1"> | |
</section> | |
<section id="section2"> | |
</section> | |
</core-animated-pages> | |
</core-scaffold> | |
</template> | |
<script> | |
Polymer('my-element', { | |
showMovies: function (){ | |
alert("1"); | |
}, | |
showSeries: function (){ | |
alert("2"); | |
} | |
}); | |
</script> | |
</polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment