designer

designer.html

<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">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        top: 0px;
        left: 0px;
      }
      #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;
      }
    
    .heading {
      padding: 10px 15px;
      background-color: #f3f3f3;
      border: 1px solid #dedede;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    .content {
      padding: 15px;
      border: 1px solid #dedede;
      border-top: none;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    
    
    </style>
    <core-scaffold id="core_scaffold">
      <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
        <core-toolbar id="core_toolbar"></core-toolbar>
        <core-menu valueattr="label" id="core_menu" theme="core-light-theme">
          <core-item id="core_item" icon="settings" label="Item1" horizontal center layout></core-item>
          <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
        </core-menu>
      </core-header-panel>
      <div id="div" tool>Title</div>
      <div id="div1" class="heading" onclick="document.querySelector('#collapse1').toggle();">Collapse #1</div>
      <core-collapse id="collapse1" class="core-collapse-closed">
        <div class="content">
          <div>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.</div>
        </div>
      </core-collapse>
      <br></br>
    </core-scaffold>
  </template>

  <script>

    Polymer({
      
    });

  </script>

</polymer-element>