Vue Material -

App

The following patterns applies the elevations in which content should scroll, how to size flexible space, and when to anchor specific elements.

When building applications there is some repeated behaviours regarding the structure of the app. Responsive drawers, flexible toolbars, scrolling... Either scenario could repeat across all 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 has all behaviour to build complex application shells, that will be simple, responsive and it will integrate seamlessly with the 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:

Regular Toolbars

When you need a toolbar, a responsive drawer and a content to be displayed following the Material Guidelines. This is the default behaviour.

The order of md-app children is irrelevant. The component will take care of this based on the props that you pass.
Default

Fixed Toolbars

Sometimes you may need a fixed toolbar, to make all options always available. You can also combine this with the "waterfall" effect.

Fixed + Waterfall

Reveal after scroll

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.

Reveal

Flexible height and text size

Maybe the focus of your page is the title, following by the content itself. The page that shows 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.

Flexible

The last toolbar row fixed

When your page have some primary navigation buttons, such as tabs and others, you may want them to be always 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 have this behaviour.

Navigation fixed

Flexible space with overlapping content

If you want to give focus on the content cards you may want to use the overlap. It's just an awesome effect!

Overlapping content

API - md-app

In both 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-toolbar
  • md-app-drawer: Places the drawer panel, that also accepts any options from the md-drawer. You can have a left or right placed drawers. Or both.
  • md-app-content: Here you will add any content for your page.
Any other tag passed as a direct child of the md-app tag will be ignored. The component will only look for those three tags and choose the right placement for them.

The following properties can be applied:

NameDescriptionDefault
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 show 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

API - md-app-toolbar

It supports all options of md-toolbar. Please refer to the Toolbar page to check out the API.

API - md-app-drawer

It supports all options of md-drawer. Please refer to the Drawer page to check out the API.

API - md-app-content

It supports all options of md-content. Please refer to the Content page to check out the API.