PolymerElements / paper-drawer-panel

A Material Design two-section responsive panel
https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel
25 stars 42 forks source link

This example in README.md is wrong #146

Closed tanin47 closed 8 years ago

tanin47 commented 8 years ago

In README.md, it provides the example:

<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar>
      <div>Application</div>
    </paper-toolbar>
    <div> Drawer content... </div>
  </paper-header-panel>
  <paper-header-panel main>
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
      <div>Title</div>
    </paper-toolbar>
    <div> Main content... </div>
  </paper-header-panel>
</paper-drawer-panel>

It doesn't work properly (e.g. the icon doesn't show up, I cannot close the drawer). I think the correct version is this:

  3  <paper-drawer-panel id="drawer" force-narrow>                                
  4       <div drawer>                                                               
  5         <paper-header-panel>                                                     
  6           <paper-toolbar>                                                        
  7             <div>Application</div>                                               
  8           </paper-toolbar>                                                       
  9         </paper-header-panel>                                                    
 10         <div> Drawer content... </div>                                           
 11       </div>                                                                     
 12       <div main>                                                                 
 13         <paper-header-panel>                                                     
 14           <paper-toolbar>                                                        
 15             <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
 16             <div>Title</div>                                                     
 17           </paper-toolbar>                                                       
 18         </paper-header-panel>                                                    
 19         <div> Main content... </div>                                             
 20       </div>                                                                     
 21     </paper-drawer-panel> 

Thanks

blasten commented 8 years ago

The drawer will close if the viewport width is smaller than the responsiveWidth which is 768px or if you have the force-narrow attribute on the paper-drawer-panel.