## Material Loader

Start the loader Complete it
The loading bar will show at the top of the page.

## Material Tooltip

Insert Drive
The tooltip is visible when the button is hovered, focused, or touched.
Additionally, the Tooltip's `md-visible` attribute can use data-binding to programmatically show/hide itself. Toggle the checkbox below...
Insert Drive

`md-direction` attribute can used to dynamically change the direction of the tooltip.
Note: the direction default value is 'bottom'.

Left Top Bottom Right

## Material Toast

Toast can be dismissed with a swipe, a timer, or a button.
Notice the 'Show Custom' toast will not nudge the FABs positions since a custom parent was specified.
Show Simple Show With Action Show Custom

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

{{name}}
NOTE: The toast will show at the corner of the admin app

## Material Subheader

My Messages
Unread Messages

### {{message.what}}

#### {{message.who}}

{{message.notes}}

Late Messages

### {{message.what}}

#### {{message.who}}

{{message.notes}}

Read Messages

### {{message.what}}

#### {{message.who}}

{{message.notes}}

Archived messages

### {{message.what}}

#### {{message.who}}

{{message.notes}}

## Material Dialog

#### Basic Usage

Alert Dialog Confirm Dialog
INFO: {{status}}

#### Open From Close To

Open From Top Left - Close Slide Down

## Material Tab

Remove Tab

#### Add a new Tab:

Label Content Add Tab

## Material Hover

### Heading Here

Description goes here

### Heading Here

Description goes here

### Heading Here

Description goes here

## Material Progressbar Linear

#### Determinate

#### Indeterminate

#### Buffer

#### Query

## Material Progressbar Circular

#### Determinate

#### Indeterminate

#### Theming

## Modal

Open me! Large modal Small modal

Selection from a modal: {{ selected }}

## Pagination

Set page to: 3
Sizing

Page: {{bigCurrentPage}} / {{numPages}}

Limit the Maximum Visible Buttons

## Tabs

#### Simple Tabs

Static content here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quidem, officiis, et ex laudantium sed cupiditate voluptatum libero nobis sit illum voluptates beatae ab et at. {{tab.content}}

#### Justified Tabs

Justified content Short Labeled Justified content Long Labeled Justified content

#### Horizontal Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.

Consectetur adipisicing elit. Reprehenderit enim obcaecati inventore, beatae corporis voluptate, repudiandae voluptatum nesciunt ipsam provident aliquam accusamus assumenda est, veritatis molestias velit non minus laudantium.

Quod ea vel dolores earum veritatis quae sunt tempore odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.

Blanditiis tenetur harum distinctio voluptate asperiores non magnam delectus. Consequatur, deleniti rem magnam possimus necessitatibus iusto suscipit mollitia rerum.

Quod ea vel dolores earum veritatis quae sunt tempore odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!

#### Vertical Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.

Consectetur adipisicing elit. Reprehenderit enim obcaecati inventore, beatae corporis voluptate, repudiandae voluptatum nesciunt ipsam provident aliquam accusamus assumenda est, veritatis molestias velit non minus laudantium.

Blanditiis tenetur harum distinctio voluptate asperiores non magnam delectus. Consequatur, deleniti rem magnam possimus necessitatibus iusto suscipit mollitia rerum.

Quod ea vel dolores earum veritatis quae sunt tempore odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.

Consectetur adipisicing elit. Reprehenderit enim obcaecati inventore, beatae corporis voluptate, repudiandae voluptatum nesciunt ipsam provident aliquam accusamus assumenda est, veritatis molestias velit non minus laudantium.

Blanditiis tenetur harum distinctio voluptate asperiores non magnam delectus. Consequatur, deleniti rem magnam possimus necessitatibus iusto suscipit mollitia rerum.

Quod ea vel dolores earum veritatis quae sunt tempore consectetur adipisicing elit. Suscipit, odit molestias sit optio quaerat cupiditate iure repudiandae illum doloremque consectetur incidunt!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, aspernatur, eum fugit officiis numquam iste aut illo quos pariatur Eligendi, veniam, accusamus.

## Toast

Notification will show in lower right corner.

## Labels & Badges

Labels

Default label Primary Success

Info Warning Danger

7 1 2

4 8 16

Badges

## Popover & Tooltip

Popover
Tooltip

## Accordion or Collapse

This content is straight in the template. {{group.content}} Accordion
This content is straight in the template. {{group.content}} Collapse

## Collapse

Toggle collapse
Some content

## Alert

{{alert.msg}} Add Alert

## Ribbons

30% Off
Ribbon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?

30% Off
Ribbon-primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?

30% Off
Ribbon-success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?

30% Off
Ribbon-info

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?

30% Off
Ribbon-warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?

30% Off
Ribbon-danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti rerum reprehenderit ipsam natus saepe. Recusandae, itaque nulla in illum dolorum ea eveniet quaerat ipsa placeat magni commodi obcaecati mollitia necessitatibus?

## Panels

### Panel title

Panel content
Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

## Callout

#### Callout heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?

#### Callout heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?

#### Callout heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?

#### Callout heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, alias, in accusantium totam adipisci vel et suscipit quidem libero pariatur minus ratione quo doloremque error at nemo incidunt dicta quia?

## Well

Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!

## Scrollable Box

Scrollable Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, tenetur, repellat obcaecati unde esse doloribus accusamus exercitationem vitae corporis blanditiis aspernatur quibusdam porro rerum voluptatum quos eligendi necessitatibus enim! Maiores, doloribus, fuga, perspiciatis cupiditate aperiam repellendus natus nisi recusandae rerum optio consectetur nemo reprehenderit nesciunt molestiae at. Molestiae, nesciunt inventore dignissimos itaque exercitationem vero aliquam provident aperiam repudiandae nostrum. Ipsa, possimus, natus culpa magni rem iusto ut quisquam cupiditate aspernatur nemo sed aliquam quam illum illo quos dolor animi ipsum dolorem sunt beatae officia facere voluptatem omnis! Sapiente, illo voluptatibus amet omnis optio labore nesciunt porro facere praesentium laudantium molestiae voluptas eos incidunt quod nulla. Provident, debitis, odit qui ab facere adipisci laborum ea necessitatibus sapiente voluptatibus minima inventore veritatis unde nemo ipsa quisquam dolorum autem et minus repudiandae nostrum aliquam numquam aperiam similique vero delectus maiores non aliquid laboriosam eius impedit cum vel a corporis consequuntur natus earum suscipit. Repellat, laborum, cupiditate aperiam distinctio vero dolor est quibusdam sit rerum expedita tempore reiciendis quidem quisquam deserunt autem pariatur eos fugiat qui hic temporibus ullam dicta voluptatem sequi at iusto! Accusamus, iure, optio temporibus molestiae ab dolor blanditiis veritatis corporis eius reiciendis sed molestias obcaecati dolorem similique rerum illo excepturi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, tenetur, repellat obcaecati unde esse doloribus accusamus exercitationem vitae corporis blanditiis aspernatur quibusdam porro rerum voluptatum quos eligendi necessitatibus enim! Maiores, doloribus, fuga, perspiciatis cupiditate aperiam repellendus natus nisi recusandae rerum optio consectetur nemo reprehenderit nesciunt molestiae at. Molestiae, nesciunt inventore dignissimos itaque exercitationem vero aliquam provident aperiam repudiandae nostrum. Ipsa, possimus, natus culpa magni rem iusto ut quisquam cupiditate aspernatur nemo sed aliquam quam illum illo quos dolor animi ipsum dolorem sunt beatae officia facere voluptatem omnis! Sapiente, illo voluptatibus amet omnis optio labore nesciunt porro facere praesentium laudantium molestiae voluptas eos incidunt quod nulla. Provident, debitis, odit qui ab facere adipisci laborum ea necessitatibus sapiente voluptatibus minima inventore veritatis unde nemo ipsa quisquam dolorum autem et minus repudiandae nostrum aliquam numquam aperiam similique vero delectus maiores non aliquid laboriosam eius impedit cum vel a corporis consequuntur natus earum suscipit. Repellat, laborum, cupiditate aperiam distinctio vero dolor est quibusdam sit rerum expedita tempore reiciendis quidem quisquam deserunt autem pariatur eos fugiat qui hic temporibus ullam dicta voluptatem sequi at iusto! Accusamus, iure, optio temporibus molestiae ab dolor blanditiis veritatis corporis eius reiciendis sed molestias obcaecati dolorem similique rerum illo excepturi.

## Material Whiteframe

.md-whiteframe-1dp .md-whiteframe-2dp .md-whiteframe-3dp .md-whiteframe-4dp .md-whiteframe-5dp .md-whiteframe-6dp .md-whiteframe-7dp .md-whiteframe-8dp .md-whiteframe-9dp .md-whiteframe-10dp .md-whiteframe-11dp .md-whiteframe-12dp .md-whiteframe-13dp .md-whiteframe-14dp .md-whiteframe-15dp .md-whiteframe-16dp .md-whiteframe-17dp .md-whiteframe-18dp .md-whiteframe-19dp .md-whiteframe-20dp .md-whiteframe-21dp .md-whiteframe-22dp .md-whiteframe-23dp .md-whiteframe-24dp