The following patterns apply the elevations in which content should scroll, how to size flexible space, and when to anchor specific elements.
When building applications there are some repeated behaviours regarding the structure of the app. Responsive drawers, flexible toolbars, scrolling... Any of these could repeat across complex applications. This documentation website, for example, needs some of them; and maybe you'll need them too. To solve those problems the md-app was created.
It contains all the behaviours you need to build complex application shells, that will be simple, responsive and it will integrate seamlessly with drawers, toolbars and content.
The md-app component supports md-app-toolbar, md-app-drawer and md-app-content, which are aliases for md-toolbar, md-drawer and md-content respectively. Look at the examples:
This pattern can be used when you need a toolbar, a responsive drawer and content to be displayed following the Material Guidelines. This is the default behaviour.
md-app children is irrelevant. The component will take care of this based on the props that you pass.Sometimes you may need a fixed toolbar, to make all options always available. You can also combine this with the "waterfall" effect.
When you have a large amount of content to be displayed, and you want to focus on the reading part, you can hide the toolbar temporarily and reveal it when scrolling.
Maybe the focus of your page is the title, followed by the content itself. A page that shows the details of a single contact is a great example of this scenario. So you can use flexible behaviour to give higher piority to your content after scrolling.
When your page has some primary navigation buttons, such as tabs and others, you may want them to always be available. You can make the second row of your toolbar always visible, hiding the first one when it's not needed. As an example, the WhatsApp main page has this behaviour.
If you want to give focus to the content cards, you may want to use the overlap. It's just an awesome effect!
In these examples we have 3 distinct areas: Toolbar, Drawer and Content. You should create them using the following tags:
md-app-toolbar: Creates the toolbar accepting any options from the md-toolbarmd-app-drawer: Places the drawer panel, that also accepts any options from the md-drawer. You can have a left or right placed drawer. Placing multiple drawers is currently not supported.md-app-content: Here you will add any content for your page.The following properties can be applied:
| Name | Description | Default |
|---|---|---|
| md-mode String | Sets the toolbar mode. See below the detailed description of each mode. | null |
| md-mode="fixed" String | Makes the toolbar fixed without any scrolling effect. | - |
| md-mode="fixed-last" String | Keeps the second row of the toolbar fixed and always visible. This NEEDS two md-toolbar-row inside the Toolbar. | - |
| md-mode="reveal" String | Hides the toolbar temporarily and shows it after the scroll. This is a good approach for mobile. | - |
| md-mode="flexible" String | Makes the height and the title size flexible to give the content a higher priority. | - |
| md-mode="overlap" String | Enables the overlapping content. | - |
| md-waterfall Boolean | Enables the waterfall effect, that can be combined with any md-mode. | false |
| md-scrollbar Boolean | Enables the md-scrollbar class to the scrollable content. Read more about the Scrollbar documentation. | true |
It supports all options of md-toolbar. Please refer to the Toolbar page to check out the API.
It supports all options of md-drawer. Please refer to the Drawer page to check out the API.
It supports all options of md-content. Please refer to the Content page to check out the API.