All geek questions in one place

Angular Material not locked by side panel

I have a sidebar:

enter image description here Button 1 Button 2 This starter app consists of a toolbar, SideNav (with two buttons) and a content area.

This is the content area!

The current behavior is when I remove the md-is-locked-open attribute and start showing the sidebar, if the user clicks the button, the sidebar is fullscreen and not inside the content area.

enter image description here Thus, it differs in the following points from the locked version:

  • On the toolbar
  • It stands out for its main content.
  • above the content area

Mandatory behavior . What do I need to change so that it is inside the content area? Thus, it looks exactly the same as when it is locked.

  • He should remove the toolbar
  • Do not overlap the main content (just move it to the right =
  • Do not select other content

Codepen Here

+5
source share
1 answer

Just change:

 <div layout="row" flex>

above sidenav for:

 <md-content layout="row" flex>

and the corresponding closing tag. What is it!

The md toolbar must be connected to the md content in order to get the behavior you are looking for.

EDIT

For more requirements, please check out this Codepen I made. It does exactly what you want (redefine sidenav behavior to hide the overlay and click the content on the right): http://codepen.io/anon/pen/pjXYMa

+5
source

Source: https://habr.com/ru/post/1236954/

More articles:


All Articles