Autocomplete

Use <md-autocomplete> to search for matches from local or remote data sources.

{{item.display}}
Simulate query for results? Disable caching of queries? Disable the input?

By default, <md-autocomplete> will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.

Bottom Sheet

Usage

Bottom sheets can be displayed by clicking one of the buttons below. Once shown, it can be dismissed by either swiping down or clicking in the shaded area.

Actions

Use one of the following buttons to display a bottom sheet.

Important

This coponents needs some amount of content based on the translate property that adds an offset to the bottom sheet to place it properly. Once implemented on a project this component may need some extra CSS tweaking to the styles of the elementmd-bottom-sheet.

Show as List Show as Grid

{{alert}}
Buttons

Normal

Button Primary (MD-NoInk) Disabled Warn

Raised

Button Primary Disabled Warn

FAB

Themed

Primary Hue 1 Warn Hue 2 Accent Accent Hue 1

Inputs
Errors
This is required.
The name has to be less than 30 characters long.
This is required.
You've got to charge something! You can't just give away a Missile Defense System.
You should charge at least $800 an hour. This job is a big deal... if you mess up, everyone dies!
$5,000 an hour? That's a little ridiculous. I doubt event Bill Clinton could afford that.
Checkbox and Radio
Checkbox 1: {{ data.cb1 }} Checkbox: Disabled Checkbox (md-primary): No Ink Checkbox 2 (md-warn): {{ data.cb2 }} Checkbox: Disabled, Checked
{{ d.label }}

Selected Value: {{ data.group2 }}

Add Remove

Switch
Switch 1: {{ data.cb1 }} Switch 2 (md-warn): {{ data.cb2 }} Switch (Disabled) Switch (Disabled, Active) Switch (md-primary): No Ink Switch 5 message: {{ message }}
Dialog

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.

Alert Dialog Confirm Dialog Custom Dialog

{{alert}}
Slider
RGB      

Red

Green

Blue

Rating: {{rating}}/5 - demo of theming classes

md-default

md-warn

md-primary

Disabled
Disabled, Discrete
Grid
1
2
3
4
5
6
7
8
9
10
11
Progress Circular
Determinate

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.

Indeterminate

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.

Theming
Progress Linear
Select

Enter an address

{{state.abbrev}}

Pick your pizza below

{{size}} {{topping.name}} {{topping.name}}

You ordered a {{size.toLowerCase()}} pizza with {{selectctrl.topping.toLowerCase()}}.

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.

Toggle left
Toggle right

Sidenav Right

Close Sidenav Right
Subheader
Unread Messages {{message.who}}

{{message.what}}

{{message.who}}

{{message.notes}}

Late Messages {{message.who}}

{{message.what}}

{{message.who}}

{{message.notes}}

Read Messages {{message.who}}

{{message.what}}

{{message.who}}

{{message.notes}}

Archived messages {{message.who}}

{{message.what}}

{{message.who}}

{{message.notes}}

Tabs

Tab One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.

Tab Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.

Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.

Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.

Tab Three

Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.

Toast

Toast can be dismissed with a swipe, a timer, or a button.

Show Custom Show Simple Show With Action

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

Awesome Md App Refresh

The tooltip is visible when the button is hovered, focused, or touched.

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