designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../core-ajax/core-ajax.html">

<polymer-element name="my-element" unresolved="">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
      }
      #paper_button_next {
        left: 57px;
        top: 50px;
        position: absolute;
      }
      #core_drawer_panel {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
      #section3 {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        background-color: rgb(250, 250, 250);
      }
      #section4 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #core_icon {
        left: 30px;
        top: 30px;
        position: absolute;
      }
      #effects {
        left: 22px;
        top: 112px;
        position: absolute;
      }
      #core_icon_button {
        left: 22px;
        top: 82px;
        position: absolute;
      }
      #core_icon_button1 {
        left: 2px;
        top: 2px;
        position: absolute;
      }
      #button_power {
        position: absolute;
        left: 22px;
        top: 52px;
      }
      #core_ajax {
        left: -256px;
        top: 0px;
        position: absolute;
      }
      #button_effects {
        position: absolute;
        left: 22px;
        top: 82px;
      }
    </style>
    <core-drawer-panel transition selected="main" id="core_drawer_panel" touch-action>
      <section id="menu" drawer>
        
      	<nav>
  				<core-toolbar><span>Single Page Polymer</span></core-toolbar>
  				<core-menu selected="0">
    				<paper-item noink>
      				<core-icon icon="label-outline"></core-icon>
      				<a href="#one">Single</a>
    				</paper-item>
    				<paper-item noink>
      				<core-icon icon="label-outline"></core-icon>
      				<a href="#two">page</a>
    				</paper-item>
   
  				</core-menu>
				</nav>
      
      
      
        <core-icon-button icon="settings-power" id="button_power" theme="core-light-theme" on-tap="{{ switchPower }}" horizontal layout start-justified>power</core-icon-button>
        <core-icon-button icon="apps" id="button_effects" theme="core-light-theme" on-tap="{{ switchEffects }}" start-justified>effects</core-icon-button>
      </section>
      <section id="section4" main>
        <div layout horizontal center-center fit>
  				<core-animated-pages  selected="0" transitions="slide-from-right">
    				<section layout vertical center-center>
      				<div>Single</div>
    				</section>
    				<section layout vertical center-center>
      				<div>page</div>
    				</section>
  
  				</core-animated-pages>
				</div>
        
        
        <paper-button id="paper_button_next">Next</paper-button>
        <core-ajax handleas="json" method="GET" id="core_ajax" hidden></core-ajax>
      </section>
    </core-drawer-panel>
    <a href="google.de">
  </a>
  </template>

  <script>

    Polymer({
      is: 'menu',
      switchPower: function (e) {
      	alert('switchPower');
			},
      switchEffects: function (e) {
      	alert('switchEffects');
			}
    });

  </script>

</polymer-element>