Polymer 1.0 How to vertical menu

1.2k views Asked by At

m-layout code:

<style>
    paper-item{
        background-color: #EBEBEB;
        width : 100%;
        padding:20px;
        color : #252525;
        font-size: 13px;
        font-family: "RobotoDraft",Helvetica,Arial,sans-serif;
          font-weight: 300;
          line-height: 24px;
    }
</style>

<dom-module id="m-layout" >
<template>
    <!-- Drawer Menu -->
    <paper-drawer-panel>
      <paper-header-panel navigation flex drawer style="background-color : #EBEBEB">
        <paper-material elevation="1">
            <paper-toolbar style="color : #252525; background-color : #EBEBEB;" >
              <div flex style="text-align: center;">ID</div>
            </paper-toolbar>
        </paper-material>

        <!-- Menu -->
        <div vertical layout style="height:400px" >
          <paper-menu>
            <paper-item>Notice</paper-item>
            <paper-item>Lecture</paper-item>
          </paper-menu>      
        </div>
      </paper-header-panel>

    <!-- Main -->
    <paper-header-panel main>
      <paper-toolbar style="background-color : #259DFF">
        <paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
         <div>Title</div>
        </paper-toolbar>
      <div style ="padding:20px; color : #252525;"> Main content... </div>
    </paper-header-panel>

   </paper-drawer-panel>
</template>
</dom-module>

I want vertical drawer menu but width attribute in paper-item is not apply. And I apply vertical layout in Menu ... I tried to continue but fail.... drawer menu item is located horizontal..

It is the first time to Web study & Polymer.... I understand some attibute.. What should I do to make vertical menu?

0

There are 0 answers