Some components not working on IE9.

Autocomplete

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

{{item.display}} No matches found for "{{ctrl.searchText}}".
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.

Buttons

Normal

Button Primary Disabled Warn Accent No ink

Raised

Button Primary Disabled Warn Accent

Themed

Primary Hue 1 Warn Hue 2 Accent Accent Hue 1

FAB

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}}

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, Radio and Switch

Checkbox 1: {{ data.cb1 }} Checkbox 2 (md-warn): {{ data.cb2 }} Checkbox: Disabled Checkbox: Disabled, Checked Checkbox (md-primary): No Ink
{{ d.label }}

Selected Value: {{ data.group2 }}

Add Remove

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

Slider

RGB      
R
G
B
Rating: {{rating}}/5 - demo of theming classes
md-default
md-warn
md-primary
Disabled
Disabled, Discrete

Grid

A
B
C
D
E
F
G
H
I
J
K

Progress

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
Linear

Select

{{state.abbrev}}

{{ userState ? 'You selected ' + userState : 'You haven\'t selected a state yet' }}

{{ multiNeighborhood.length ? multiNeighborhood.join(', ') : 'Choose some' }} {{ opt }}

{{ multiNeighborhood ? 'You selected ' + multiNeighborhood : 'You haven\'t selected anything yet' }}

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

{{ favoriteTopping ? 'Your favorite topping is ' + favoriteTopping : 'Please select a topping'}}

{{ user ? user.name : 'Assign to user' }} {{user.name}}

You have assigned the task to: {{ user ? user.name : 'No one yet' }}

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

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
Disabled Item Two
Remove Tab
Add a new Tab: Add Tab

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

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