Bottom sheet

You can show a bottom sheet using the service $mdBottomSheet

Bottom sheet can be dismissed with the service or a swipe down.

Click to open a bottom sheet.

Show as List
Show as Grid

{{alert}}



Chips

Chips work like tags that you can add to any text field. The are displayed with a nice style and can be inserted or removed.

You can use these as a normal element using the directive md-tooltip


Use a custom chip template.

{{$chip}} (fruit)

Use the default chip template.


Use Placeholders and override hint texts.


Display with custom template.

{{$chip.name}} ({{$chip.type}})
Readonly



Contact Chips

Contact Chips work like tags with contact pictures that you can add to any text field. The are displayed with a nice style and can be inserted or removed.

You can use these as a normal element using the directive md-tooltip


Contacts {{contact.name}}

{{contact.name}}

{{contact.email}}

{{contact.name}}

{{contact.name}}

{{contact.email}}

Dialog

You can show a Dialog using the service $mdDialog

Open a dialog over the app's content. Press escape or click outside to close the dialog and send focus back to the triggering button.

Click to open a dialog

Alert Dialog
Confirm Dialog
Custom Dialog

{{alert}}



Progress bar circular

You can use determined progress bars and indeterminate progress bars using the directive md-progress-circular

For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take

For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator

Determinate

Indeterminate




Progress bar linear

Linear progress bars are good for showing normal loading on page transitions

You can include these via the directive md-progress-linear




Toast messages

Toast messages create a toast styled message inside a container defined from actions from the user. You can have different types of toast messages.

You can assign include these messages with the service $mdToast.Toast can be dismissed with a swipe, a timer, or a button.

Show Custom Show Simple Show With Action

Toast Position: "{{getToastPosition()}}"
{{name}}



Toolbar scroll shrink

Toolbar that collapses when scrolling down.

You can use these as a normal toolbar using the attribute md-scroll-shrink

My App Title

{{item.who}}

{{item.what}}

{{item.who}}

{{item.notes}}




Tooltip

Tooltips can be shown when the button is hovered, focused, or touched.

You can use these as a normal toolbar using the directive md-tooltip

Insert Drive Photos





Additionally, the Tooltip's `md-visible` attribute can use data-binding to programmatically show/hide itself. Toggle the checkbox below...

Insert Drive



Toolbar: md-warn

Toolbars can have different styles. In this example the syle is md-warn.

Toolbar: md-warn
Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.

Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.

Ad sea dolor accusata consequuntur. Sit facete convenire reprehendunt et. Usu cu nonumy dissentiet, mei choro omnes fuisset ad. Te qui docendi accusam efficiantur, doming noster prodesset eam ei. In vel posse movet, ut convenire referrentur eum, ceteros singulis intellegam eu sit.

Sit saepe quaestio reprimique id, duo no congue nominati, cum id nobis facilisi. No est laoreet dissentias, idque consectetuer eam id. Clita possim assueverit cu his, solum virtute recteque et cum. Vel cu luptatum signiferumque, mel eu brute nostro senserit. Blandit euripidis consequat ex mei, atqui torquatos id cum, meliore luptatum ut usu. Cu zril perpetua gubergren pri. Accusamus rationibus instructior ei pro, eu nullam principes qui, reque justo omnes et quo.

Sint unum eam id. At sit fastidii theophrastus, mutat senserit repudiare et has. Atqui appareat repudiare ad nam, et ius alii incorrupte. Alii nullam libris his ei, meis aeterno at eum. Ne aeque tincidunt duo. In audire malorum mel, tamquam efficiantur has te.

Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.

Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea.

Duo at aliquid mnesarchum, nec ne impetus hendrerit. Ius id aeterno debitis atomorum, et sed feugait voluptua, brute tibique no vix. Eos modo esse ex, ei omittam imperdiet pro. Vel assum albucius incorrupte no. Vim viris prompta repudiare ne, vel ut viderer scripserit, dicant appetere argumentum mel ea. Eripuit feugait tincidunt pri ne, cu facilisi molestiae usu.

Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.

Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea.

Duo at aliquid mnesarchum, nec ne impetus hendrerit. Ius id aeterno debitis atomorum, et sed feugait voluptua, brute tibique no vix. Eos modo esse ex, ei omittam imperdiet pro. Vel assum albucius incorrupte no. Vim viris prompta repudiare ne, vel ut viderer scripserit, dicant appetere argumentum mel ea. Eripuit feugait tincidunt pri ne, cu facilisi molestiae usu.




Side navigation

sidenavigations include the possibility to open side menu navigations. They can be opened by default or controlled via a controller.You can use these as a using the directive md-sidenav


Sidenav Left

Close Sidenav Left

This sidenav is locked open on your device. To go back to the default behavior, narrow your display.

The left sidenav will 'lock open' on a medium (>=960px wide) device.
Shrink the page to see it collapse.

Toggle left
Toggle right

Sidenav Right

Close Sidenav Right



Tabs

Use the directive md-tabs and md-tab to create awesome tabs with animation when scrolling. You can bind the selected tab via the selected attribute on the md-tabs element.


Remove Tab
Add a new Tab: Add Tab



Static tabs

Use the directive md-tabs and md-tab combined with ng-switch to create awesome static tabs.


Item One {{data.secondLabel}} Item Three
View for Item #1
data.selectedIndex = 0
View for {{data.secondLabel}}
data.selectedIndex = 1
View for Item #3
data.selectedIndex = 2
Item Two: Disabled