All Ionic, Materialized

Ionic + Material Expansion

No need to add new styling! Ionic Material includes all Ionic components out of the box, closely themed to the Google Material Design spec.

View the DEMO APP "Thronester" in /demo/www/ to see how things can be pieced together (notice: it does push the limits on Android).

Ionic Material aims to provide Ionic with the "...visual language [that] synthesizes the classic principles of good design with the innovation and possibility of technology and science."

More Color

Ionic Material builds on Ionic's color naming conventions, and provides 3 variations based off Google's color style guide (900, 500, 100 - respectively). These can, of course, be overridden to fit your needs.


Add -900 (darker) or -100 (lighter) to Ionic's color classes to use the extended scheme colors

View Code
<div class="tabs tabs-balanced-900"> <div class="tab"> My Dark Green Tabs </div> </div>

Material Buttons

Materials buttons work like regular Ionic buttons, but they contain ink by default.

FAB:


* Check out the ink API or using motion with FAB

RAISED:


FLAT:


CLEAR:
View Code
<strong>FAB:</strong><br /> <button class="button button-fab button-balanced icon ion-leaf"></button> <button class="button button-fab button-assertive icon ion-bug"></button> <button class="button button-fab ink-dark button-calm icon ion-tshirt"></button> <button class="button button-fab button-dark icon ion-heart" data-ink-color="#ff0000" data-ink-opacity=".8"></button><br /><br /> <strong>RAISED:</strong><br /> <button class="button button-raised button-stable ink-dark">High Rider</button><br /><br /> <strong>FLAT:</strong> <br /><button class="button button-flat button-positive icon-left ion-outlet">Outlets = Emojis</button> <strong>FLAT:</strong> <br /><button class="button button-flat button-assertive">Clearly Awesome</button>

Ionic Buttons

Ionic buttons have been altered to resemble Material Design guidelines. They can have ink too, but all except -clear require adding .ink class to inkify.






View Code
<button class="button button-large button-dark"> Large Button </button> <button class="button button-positive"> Button </button> <button class="button button-small button-royal"> Small </button> <br /> <button class="button button-outline button-assertive"> Outlined Button </button> <br /> <button class="button button-clear button-dark"> Clear Button </button> <br /> <button class="button button-block button-calm"> Block / Full Button </button> <br /> <button class="button icon-left ion-home button-balanced">Icon Left</button> <button class="button icon-right ion-star button-energized">Icon Right</button>

Headers

Headers come in a variety of default color options, and can contain left/right buttons. View Ionic Header Docs. Material Design usually suggests left-aligning the title.

Header Icons + Fab
View Code
<div class="bar bar-header bar-calm-900"> <div class="buttons buttons-left header-item"> <span class="left-buttons"> <button class="button button-icon button-clear ion-navicon"> </button> </span> </div> <div class="h1 title title-left light">Header Icons + Fab</div> <div class="buttons buttons-right header-item"> <span class="right-buttons"> <button class="button button-balanced button-fab"> <i class="icon ion-star"></i> </button> </span> </div> </div>
Header Fab Left
View Code
<div class="bar bar-header bar-dark"> <div class="buttons buttons-left header-item"> <span class="left-buttons"> <button class="button button-energized-900 button-fab"> <i class="icon ion-star"></i> </button> </span> </div> <div class="h1 title title-left fab-left light">Header Fab Left</div> <div class="buttons buttons-right header-item"> <span class="right-buttons"> <button class="button button-icon button-clear ion-android-more-vertical"> </button> </span> </div> </div>
Normal Header
View Code
<div class="bar bar-header bar-assertive"> <div class="buttons buttons-left header-item"> <span class="left-buttons"> <button class="button button-icon button-clear ion-navicon"> </button> </span> </div> <div class="h1 title title-left light">Normal Header</div> <div class="buttons buttons-right header-item"> <span class="right-buttons"> <button class="button button-icon button-clear ion-android-more-vertical"> </button> </span> </div> </div>

Footers

View Code
<div class="bar bar-footer bar-energized-100"> <div class="title">Footer</div> <div class="buttons buttons-right"> <button class="button button-energized-900 button-fab"> <i class="icon ion-code light"></i> </button> </div> </div>
View Code
<div class="bar bar-footer bar-royal-100"> <div class="title">Footer - Fab Left</div> <div class="buttons buttons-left"> <button class="button button-royal-100 button-fab"> <i class="icon ion-code royal"></i> </button> </div> </div>

Tabs

Supports all ionic tabs

View Code
<div class="tabs tabs-dark"> <a class="tab-item"> Home </a> <a class="tab-item"> Favorites </a> <a class="tab-item"> Settings </a> </div>
View Code
<div class="tabs tabs-positive"> <a class="tab-item active"> <i class="icon ion-home"></i> </a> <a class="tab-item"> <i class="icon ion-star"></i> </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> </a> </div>
View Code
<div class="tabs tabs-balanced tabs-icon-top"> <a class="tab-item"> <i class="icon ion-home"></i> Home </a> <a class="tab-item active"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item"> <i class="icon ion-gear-a"></i> Settings </a> </div>
View Code
<div class="tabs tabs-royal tabs-icon-left"> <a class="tab-item"> <i class="icon ion-home"></i> Home </a> <a class="tab-item"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item active"> <i class="icon ion-gear-a"></i> Settings </a> </div>
View Code
<div class="tabs-striped tabs-color-assertive"> <a class="tab-item active" data-ink-color="#ef473a" data-ink-opacity=".35"> <i class="icon ion-home"></i> Home </a> <a class="tab-item" data-ink-color="#ef473a" data-ink-opacity=".35"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item" data-ink-color="#ef473a" data-ink-opacity=".35"> <i class="icon ion-gear-a"></i> Settings </a> </div>

Button Bars

1 2 3 4
View Code
<div class="button-bar"> <a class="button button-raised ink-dark">1</a> <a class="button button-raised ink-dark">2</a> <a class="button button-raised ink-dark">3</a> <a class="button button-raised ink-dark">4</a> </div>
1 2 3 4
View Code
<div class="button-bar bar-balanced"> <a class="button button-raised">1</a> <a class="button button-raised">2</a> <a class="button button-raised">3</a> <a class="button button-raised">4</a> </div>
1 2 3 4
View Code
<div class="button-bar bar-positive"> <a class="button button-raised ink-dark">1</a> <a class="button button-raised ink-dark">2</a> <a class="button button-raised ink-dark">3</a> <a class="button button-raised ink-dark">4</a> </div>

Plain List

View Code
<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item"> Butterfinger </a> <a class="item"> Kit Kat </a> <a class="item"> Snickers </a> <div class="item item-divider"> Hard Candy </div> <a class="item"> Jolly Rancher </a> <a class="item"> Skittles </a> </div>

Icon List

View Code
<div class="list"> <a class="item item-icon-left" > <i class="icon ion-email"></i> Check mail </a> <a class="item item-icon-left" > <i class="icon ion-mic-a"></i> Record album <span class="item-note"> Grammy </span> </a> <a class="item item-icon-left" > <i class="icon ion-person-stalker"></i> Friends <span class="badge badge-assertive">0</span> </a> </div>

Button List

Mom
Dad
Sis
Bro
View Code
<div class="list"> <div class="item item-button-right"> Mom <button class="button button-balanced ink"> <i class="icon ion-ios-telephone"></i> </button> </div> <div class="item item-button-right"> Dad <button class="button button-balanced ink"> <i class="icon ion-ios-telephone"></i> </button> </div> <div class="item item-button-right"> Sis <button class="button button-balanced ink"> <i class="icon ion-ios-telephone"></i> </button> </div> <div class="item item-button-right"> Bro <button class="button button-balanced ink"> <i class="icon ion-ios-telephone"></i> </button> </div> </div>

Avatar List

View Code
<div class="list"> <a class="item item-avatar"> <img src="img/material1.jpg"> <h2>Material</h2> <p>Sheets of paper</p> </a> <a class="item item-avatar"> <img src="img/material2.jpg"> <h2>Motion</h2> <p>Accent and bring attention</p> </a> <a class="item item-avatar"> <img src="img/material3.jpg"> <h2>Ink</h2> <p>Fluidity</p> </a> </div>

Thumbnail List

View Code
<div class="list"> <a class="item item-thumbnail-left"> <img src="img/ionic.png"> <h2>Ionic Framework</h2> <p>A mobile development revolution</p> </a> <a class="item item-thumbnail-left"> <img src="img/google-material.png"> <h2>Material Design</h2> <p>A visual language of design & innovation</p> </a> <a class="item item-thumbnail-left"> <img src="img/logo.png"> <h2>Ionic Material</h2> <p>Their love-child</p> </a> </div>

Inset List

I'm not crazy
I'm just...
A little inset
View Code
<div class="list list-inset"> <div class="item"> I'm not down </div> <div class="item"> I'm not upset </div> <div class="item"> I'm just inset </div> </div>

Cards

Arya Stark

"Joffrey. Cersei. Ilyn Payne. Hound. Polliver. The Mountain."

The quickest way to a man's heart is through Arya's needle. She has two speeds: Walk and Kill, and is the reason why Waldo is still hiding.

1 Like 5 Comments

View Code
<div class="list card stable-bg"> <div class="item item-avatar"> <img src="img/arya.jpg"> <h2>Arya Stark</h2> <p>"Joffrey. Cersei. Ilyn Payne. Hound. Polliver. The Mountain."</p> </div> <div class="item item-body"> The quickest way to a man's heart is through Arya's needle. She has two speeds: Walk and Kill, and is the reason why Waldo is still hiding. <p> <a class="subdued">1 Like</a> <a class="subdued">5 Comments</a> </p> </div> <div class="item tabs tabs-secondary tabs-icon-left"> <a class="tab-item" data-ink-color="#336699" data-ink-opacity="0.5"> <i class="icon ion-thumbsup"></i> Like </a> <a class="tab-item" data-ink-color="#336699" data-ink-opacity="0.5"> <i class="icon ion-chatbox"></i> Comment </a> <a class="tab-item" data-ink-color="#336699" data-ink-opacity="0.5"> <i class="icon ion-share"></i> Share </a> </div> </div>

Forms


I read the terms & conditions.
Haha, you liar. There are no T&Cs.

View Code
<div class="list"> <label class="item item-input item-floating-label"> <span class="input-label">First Name</span> <input type="text" placeholder="First Name"> </label> <label class="item item-input item-floating-label"> <span class="input-label">Last Name</span> <input type="text" placeholder="Last Name"> </label> <br /> <div class="item item-checkbox"> <label class="checkbox"> <input type="checkbox"> </label> I read the terms & conditions </div> <div class="item item-checkbox"> <label class="checkbox"> <input type="checkbox"> </label> Haha, you liar. There are no T&C's </div> <br /> <label class="item item-radio"> <input type="radio" name="group"> <div class="item-content"> Tap Me </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="group"> <div class="item-content"> Or Tap Me </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="group"> <div class="item-content"> Or Tap Me </div> <i class="radio-icon ion-checkmark"></i> </label> <div class="item range range-positive"> <i class="icon ion-ios-sunny-outline"></i> <input type="range" name="volume" min="0" max="100" value="33"> <i class="icon ion-ios-sunny"></i> </div> <label class="item item-input item-select"> <div class="input-label"> Most Influential Teletubby </div> <select> <option>Laa-Laa</option> <option selected>Tinky Winky</option> <option>Dipsy</option> <option>Po</option> <option>Noo-noo</option> </select> </label> <button class="button button-block button-calm ink" data-ink-color="#9DEAFF" data-ink-opacity="1"> Submit </button> </div>