Material Design for Ionic

Material Design for Ionic

Bring Material Design to your Ionic applications

Free!

(5)
Jason Brown

Jason Brown

Member since 2015

Details

Version:
1.0.0
Size:
4mb
Ionic:
1.0.1
Platforms:
iOS, Android
Released:
9 years ago
Updated:
9 years ago
Category:
Themes
Tags:
material design, theme, material design lite

RC-1 has now been released!

Please review the repository https://github.com/delta98/ionic-material-design-lite until officially released

Bring Material Design to your Ionic based applications. This simple module will update Ionic Frameworks's common components and directives to use Google's Material Design (Lite) for the Android platform automatically.

Check out the repository here: https://github.com/delta98/ionic-material-design-lite

Hey there! You'll need to log in before you can leave a comment here.

Malik Brahimi

Malik Brahimi   ·   9 years ago

The installation is confusing,

Jason Brown

Jason Brown   ·   9 years ago

How so Malik? You can use bower to install the required dependencies 'bower install ionic-material-design-lite' You then need to add the following to your index.html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> The project has detailed installation instructions, if you need further assistance create a ticket on the project repo and I'll be happy to assist.

Darragh Flynn

Darragh Flynn   ·   9 years ago

When using Bower to add this theme to my project it seems to break my Android build instantly. It throws an error about being unable to unzip the android build output APK.

Madiba Razak

Madiba Razak   ·   9 years ago

great job , downloading it now , hope the performance is the same

Neil Cresswell

Neil Cresswell   ·   9 years ago

Looks very nice, but my alarm bells started going off when I read that you're pointing to an external web site to load necessary core fonts and JS in the main HTML wrapper. Apart from being against Apple's rules, "Apps that download code in any way or form will be rejected", that's a terribly bad idea for a mobile app to rely on having a connection for its library components, rather than having everything necessary included in the package. Luckily though I took a look at your repro, and saw that the remote dependencies will be fixed in future, yay, so I very much look forward to trying this out!

Madiba Razak

Madiba Razak   ·   9 years ago

so am getting breaking changes , when i include the ionic-material into the app dependecies , same issue when i run the demo app , any idea what is happening here , i post an issue on forum http://forum.ionicframework.com/t/ionic-material-design-lite-breaking-code/30816 BUT AWESOME WORK , WOULD BE USING THIS ALOT

Jason Brown

Jason Brown   ·   9 years ago

Neil, appreciate your concerns. Those core files are referenced externally whilst in alpha and will be resolved. Madiba, I will address your issues on the forum and ask you to report an issue on the github project also. I will update the description to indicate this is a early stage project and due for release 31st Aug. Thank you all for your feedback and checking out the project.

Madiba Razak

Madiba Razak   ·   9 years ago

resolve the problem i was facing ,which unfortunately had nothing to do the theme , would highly recommend using it , or take for a spin ,it cost nothing( as of this date :) )

Evans Erhobaga-Agofure

Evans Erhobaga-Agofure   ·   9 years ago

would love to try this out but the downloaded version doesn't seem to work for me

Jason Brown

Jason Brown   ·   9 years ago

Evans are you following the instructions in the README? What isn't working for you? Please log an issue here: https://github.com/delta98/ionic-material-design-lite

Rubén Barbero López

Rubén Barbero López   ·   9 years ago

Hi! I followed the instructions to install it, but now the example app sidemenu is all white, no elements, what happened?

Jason Brown

Jason Brown   ·   9 years ago

Rubén Barbero López it sounds like you have an error on the console, have you included all the ionic and angular libraries?

Madiba Razak

Madiba Razak   ·   9 years ago

hi jason -- still waiting on the rc -release ( dates keep changing ) :)

Jason Brown

Jason Brown   ·   9 years ago

Madiba Razak It was delayed by 2 weeks due to recent changes in the mdl library. Not long now.

Leonardo Minati

Leonardo Minati   ·   9 years ago

Hi Jason, i followed the README supplied with the framework but i cannot display the ink on the button-fab (and on other elements using the #ink class). What could be my mistake?

Jason Brown

Jason Brown   ·   9 years ago

Leonardo Minati I think you have mistaken this project for something else, there's isn't a ink class required.

Leonardo Minati

Leonardo Minati   ·   9 years ago

I've used a button tag like this: <button class="button button-fab button-energized icon ion-star"></button> As you said in the readme i activated the ink using the following in my main controller: ionicMaterialInk.displayEffect(); injecting ionicMaterialInk in the controller. I can't understand why ink isn't shown :-/

Leonardo Minati

Leonardo Minati   ·   9 years ago

Just to say, everything else works fine as expected!

Jason Brown

Jason Brown   ·   9 years ago

Leonardo, I think you've mistaken this project for https://github.com/zachsoft/Ionic-Material as the readme does not require you to inject anything into the controller or has any reference to ink. Please read https://github.com/delta98/ionic-material-design-lite for further reference regarding this project.

Marc-André

Marc-André   ·   8 years ago

Hi, I've tested your plugin and I wonder why it broke mostly all ionic css? Like text size, list item border style, even color are not the same. I think your plugin can be a major feature for Ionic's project! Do you plan to update it soon? Very nice work ;)

Vitor avancini

Vitor avancini   ·   8 years ago

Hello, is there any easy way to customize the material theme?

Ian Campelo

Ian Campelo   ·   8 years ago

Awesome! But I have an issue... How can I positionate the mdl-button--fab on the bottom of the page?Thanks a lot!

Adriano Massi

Adriano Massi   ·   8 years ago

Dear Jason, thank for your great work! I can't find a doc that explains me, for example, how to create the floating text input boxes displayed in the pictures above. Could you help me? I can't replicate the animated underline and the colored label floating up (I have the basic floating text effect only). Thanks!

Raju Bera

Raju Bera   ·   8 years ago

Loved the demo. but doesn't work for me in android 4.1.

nyle m

nyle m   ·   8 years ago

WIll this theme work on ionic2?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Oliver Kuchendorf

Oliver Kuchendorf   ·   8 years ago

Can I use with your theme all components from getmdl.io? (or just the once from your demo)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Cameron

Cameron   ·   7 years ago

Hi, are you aware that someone (doesn't seem like it's your name/account info) is selling this product as their own on codecanyon.net, even referencing your docs? https://codecanyon.net/item/ionic-material-design/12833673

Cameron

Cameron   ·   7 years ago

*correction...does not reference your docs, is a different product, probably uses a similar implementation to yours...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Gino Côté

Gino Côté   ·   7 years ago

Why compress all the Codepen demo? We want to see the code, (I know we can Tidy all but) And not using external CSS? All this CSS slowdown and freeze Codepen. Is this CSS part or your theme or added CSS to change style?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Gino Côté

Gino Côté   ·   7 years ago

Why compress all the Codepen demo? We want to see the code, (I know we can Tidy all but) And not using external CSS? All this CSS slowdown and freeze Codepen. Is this CSS part or your theme or added CSS to change style?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Cameron

Cameron   ·   7 years ago

Hi, are you aware that someone (doesn't seem like it's your name/account info) is selling this product as their own on codecanyon.net, even referencing your docs? https://codecanyon.net/item/ionic-material-design/12833673

Cameron

Cameron   ·   7 years ago

*correction...does not reference your docs, is a different product, probably uses a similar implementation to yours...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Oliver Kuchendorf

Oliver Kuchendorf   ·   8 years ago

Can I use with your theme all components from getmdl.io? (or just the once from your demo)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

nyle m

nyle m   ·   8 years ago

WIll this theme work on ionic2?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Raju Bera

Raju Bera   ·   8 years ago

Loved the demo. but doesn't work for me in android 4.1.

Adriano Massi

Adriano Massi   ·   8 years ago

Dear Jason, thank for your great work! I can't find a doc that explains me, for example, how to create the floating text input boxes displayed in the pictures above. Could you help me? I can't replicate the animated underline and the colored label floating up (I have the basic floating text effect only). Thanks!

Ian Campelo

Ian Campelo   ·   8 years ago

Awesome! But I have an issue... How can I positionate the mdl-button--fab on the bottom of the page?Thanks a lot!

Vitor avancini

Vitor avancini   ·   8 years ago

Hello, is there any easy way to customize the material theme?

Marc-André

Marc-André   ·   8 years ago

Hi, I've tested your plugin and I wonder why it broke mostly all ionic css? Like text size, list item border style, even color are not the same. I think your plugin can be a major feature for Ionic's project! Do you plan to update it soon? Very nice work ;)

Jason Brown

Jason Brown   ·   9 years ago

Leonardo, I think you've mistaken this project for https://github.com/zachsoft/Ionic-Material as the readme does not require you to inject anything into the controller or has any reference to ink. Please read https://github.com/delta98/ionic-material-design-lite for further reference regarding this project.

Leonardo Minati

Leonardo Minati   ·   9 years ago

Just to say, everything else works fine as expected!

Leonardo Minati

Leonardo Minati   ·   9 years ago

I've used a button tag like this: <button class="button button-fab button-energized icon ion-star"></button> As you said in the readme i activated the ink using the following in my main controller: ionicMaterialInk.displayEffect(); injecting ionicMaterialInk in the controller. I can't understand why ink isn't shown :-/

Jason Brown

Jason Brown   ·   9 years ago

Leonardo Minati I think you have mistaken this project for something else, there's isn't a ink class required.

Jason Brown

Jason Brown   ·   9 years ago

How so Malik? You can use bower to install the required dependencies 'bower install ionic-material-design-lite' You then need to add the following to your index.html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> The project has detailed installation instructions, if you need further assistance create a ticket on the project repo and I'll be happy to assist.

Jason Brown

Jason Brown   ·   9 years ago

Madiba Razak It was delayed by 2 weeks due to recent changes in the mdl library. Not long now.

Madiba Razak

Madiba Razak   ·   9 years ago

hi jason -- still waiting on the rc -release ( dates keep changing ) :)

Jason Brown

Jason Brown   ·   9 years ago

Rubén Barbero López it sounds like you have an error on the console, have you included all the ionic and angular libraries?

Rubén Barbero López

Rubén Barbero López   ·   9 years ago

Hi! I followed the instructions to install it, but now the example app sidemenu is all white, no elements, what happened?

Jason Brown

Jason Brown   ·   9 years ago

Evans are you following the instructions in the README? What isn't working for you? Please log an issue here: https://github.com/delta98/ionic-material-design-lite

Evans Erhobaga-Agofure

Evans Erhobaga-Agofure   ·   9 years ago

would love to try this out but the downloaded version doesn't seem to work for me

Madiba Razak

Madiba Razak   ·   9 years ago

resolve the problem i was facing ,which unfortunately had nothing to do the theme , would highly recommend using it , or take for a spin ,it cost nothing( as of this date :) )

Jason Brown

Jason Brown   ·   9 years ago

Neil, appreciate your concerns. Those core files are referenced externally whilst in alpha and will be resolved. Madiba, I will address your issues on the forum and ask you to report an issue on the github project also. I will update the description to indicate this is a early stage project and due for release 31st Aug. Thank you all for your feedback and checking out the project.

Madiba Razak

Madiba Razak   ·   9 years ago

so am getting breaking changes , when i include the ionic-material into the app dependecies , same issue when i run the demo app , any idea what is happening here , i post an issue on forum http://forum.ionicframework.com/t/ionic-material-design-lite-breaking-code/30816 BUT AWESOME WORK , WOULD BE USING THIS ALOT

Neil Cresswell

Neil Cresswell   ·   9 years ago

Looks very nice, but my alarm bells started going off when I read that you're pointing to an external web site to load necessary core fonts and JS in the main HTML wrapper. Apart from being against Apple's rules, "Apps that download code in any way or form will be rejected", that's a terribly bad idea for a mobile app to rely on having a connection for its library components, rather than having everything necessary included in the package. Luckily though I took a look at your repro, and saw that the remote dependencies will be fixed in future, yay, so I very much look forward to trying this out!

Madiba Razak

Madiba Razak   ·   9 years ago

great job , downloading it now , hope the performance is the same

Darragh Flynn

Darragh Flynn   ·   9 years ago

When using Bower to add this theme to my project it seems to break my Android build instantly. It throws an error about being unable to unzip the android build output APK.

Malik Brahimi

Malik Brahimi   ·   9 years ago

The installation is confusing,

Leonardo Minati

Leonardo Minati   ·   9 years ago

Hi Jason, i followed the README supplied with the framework but i cannot display the ink on the button-fab (and on other elements using the #ink class). What could be my mistake?

Hey there! You'll need to log in before you can leave a rating here.

Pham Tech   ·     ·   8 years ago

goood

Nguyen Anh Minh   ·     ·   8 years ago

Thanks for sharing!!!

Juan David Nicholls   ·     ·   8 years ago

Thanks for your work! :D

samuelmugi   ·     ·   5 years ago

Thanks for the theme

76alberto   ·     ·   4 years ago

Thanks

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

76alberto    ·     ·   4 years ago

Thanks

samuelmugi    ·     ·   5 years ago

Thanks for the theme

Juan David Nicholls    ·     ·   8 years ago

Thanks for your work! :D

Nguyen Anh Minh    ·     ·   8 years ago

Thanks for sharing!!!

Pham Tech    ·     ·   8 years ago

goood