search

Polymer / old-docs-site

Old Polymer site. Replaced by these repos: polymer-project.org, polymer-library-docs
https://www.polymer-project.org
1.02k stars 2.44k forks source link

Polymer 2 - responsive navigation pattern example for polymer-starter-kit #1959

Closed logicalphase closed 5 years ago

logicalphase commented 7 years ago

Description

Recommend adding an additional example of responsive navigation pattern using P2 PSK for consistency in helping new user orientation to Polymer. While the current RNP example does show a solid working example, it falls outside the PSK process, which may be confusing for some users just getting started.

Example: Add force-narrow to PSK ../src/my-app.html -

While the standard calls for the our drawer to remain open in wide displays, there may be occasions when this is not ideal for specific use cases. Polymer makes it just as easy to override the default drawer behavior and force the drawer to remain closed in wide displays unless the user takes action to open it.

Just add the attribute 'force-narrow' in the app-drawer-layout wrapper element as follows.

Important: The starter kit layout requires you keep the fullbleed attribute in place or it will break the display unless you refactor the layout structure.

    <app-drawer-layout fullbleed force-narrow>
      <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view1" href="/view1">View One</a>
          <a name="view2" href="/view2">View Two</a>
          <a name="view3" href="/view3">View Three</a>
        </iron-selector>
      </app-drawer>

Just thinking that keeping primary Polymer starter app docs focused on the starter app when possible will help the user, and I would be happy to write the updates for these, including the PSK version of the full RNP example here if agreed to. Cheers.

ghost commented 7 years ago

Thanks for raising this. I'm following up internally.

logicalphase commented 7 years ago

Okay. Sounds good.

dnhyde commented 7 years ago

@hyperpress Thanks a lot! I was struggling using just force-narrow and deleting the fullbleed attribute. In a previous version of PSK2 (a week before I/O) only force-narrow worked fine (still like that in the documentation), do you think this has something to do with the lazy imports, I noticed the only difference with my previous version was adding: <link rel="lazy-import" href="my-view1.html"> (deleting this still breaks the display) I don't get what you mean with "unless you refactor the layout structure" Anyway you saved my day :)

logicalphase commented 7 years ago

My pleasure @dnhyde. I'm hoping we'll see more clear examples for PS2 in the docs to help users acclimate. I should have expanded my first comment to say that "refactored." I just meant layouts other than fullbleed in original PSK2. Thank you for the kind words.

logicalphase commented 5 years ago

Closing this as addressed in Polymer 3 starter kit example apps.