Awesome
Ionic Advanced Components
This project uses Ionic 3 and Angular 5
There are currently no plans to update this project to the latest Ionic and Angular as the effort is quite big. If you are interested in doing so, contributions are appreciated!
Demo
If you just want to check this project out, you can see the online demo at https://yannbf.github.io/ionic3-components.
Please note that some plugins may only work when using a real device, so don't expect everything to work in the browser.
This repository was made in order to help people learn and speed up their development process. You will find many many different components, pages, pipes, services, of which can be very useful to you. Note though that these are all experimental!
The content here is a mix of tutorials found online, a few adapted codepen stuff, a few dribbble inspired layouts, and also other stuff made by the amazing contributors of this project.
HOPEFULLY you will like this repo and feel like contributing, so please if you can, contribute so we can have even more amazing content!
How do I use this in my project?
If you find something useful for you, all you gotta do is extract the code related to that page/component/functionality and move it to your project. Most of the pages and components do not use global code/style so that it is easier to extract to your project.
Setup
Requirements to use this project:
Node.js (https://nodejs.org/download/)
npm (Node Package Manager, it comes with node.js installation)
In case you're not with the latest version of npm:
$ sudo npm install npm -g
Cordova & Ionic Cli
To install both of them on your system just launch this command:
$ sudo npm install cordova ionic -g
Install NPM Dependencies
Once you clone this repository, run this command on your terminal to install all needed dependencies:
$ npm install
Install cordova plugin Dependencies
Run this command on your terminal to add a platform and install all needed puglins:
iOS:
$ ionic cordova platform add ios
$ ionic cordova run ios
Android:
$ ionic cordova platform add android
$ ionic cordova run android
Launching the App
After installing the needed dependencies you are done, launch your app with any of these commands
$ npm run ionic:serve (for npm)
$ yarn ionic:serve (for yarn)
$ ionic serve (if you have ionic installed globally)
Amazing contributors
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="http://www.dlohani.com.np"><img src="https://avatars1.githubusercontent.com/u/6360216?v=4" width="100px;" alt=""/><br /><sub><b>Damodar Lohani</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=lohanidamodar" title="Code">π»</a> <a href="#talk-lohanidamodar" title="Talks">π’</a> <a href="#design-lohanidamodar" title="Design">π¨</a> <a href="#blog-lohanidamodar" title="Blogposts">π</a></td> <td align="center"><a href="https://github.com/corysmc"><img src="https://avatars0.githubusercontent.com/u/6452188?v=4" width="100px;" alt=""/><br /><sub><b>Cory McArthur</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=corysmc" title="Code">π»</a> <a href="#talk-corysmc" title="Talks">π’</a> <a href="#design-corysmc" title="Design">π¨</a></td> <td align="center"><a href="http://ServiciosGlobalesTecnologicos.com/"><img src="https://avatars1.githubusercontent.com/u/1894500?v=4" width="100px;" alt=""/><br /><sub><b>mike-carr</b></sub></a><br /><a href="#plugin-miguelcarrascoq" title="Plugin/utility libraries">π</a></td> <td align="center"><a href="https://fdom-website.firebaseapp.com/"><img src="https://avatars3.githubusercontent.com/u/7361737?v=4" width="100px;" alt=""/><br /><sub><b>Fernando del olmo</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=Fdom92" title="Code">π»</a></td> <td align="center"><a href="https://github.com/medeirosrafael"><img src="https://avatars1.githubusercontent.com/u/13787877?v=4" width="100px;" alt=""/><br /><sub><b>medeirosrafael</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/issues?q=author%3Amedeirosrafael" title="Bug reports">π</a></td> <td align="center"><a href="https://github.com/javico2609"><img src="https://avatars0.githubusercontent.com/u/12940555?v=4" width="100px;" alt=""/><br /><sub><b>Javier</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=javico2609" title="Code">π»</a> <a href="#design-javico2609" title="Design">π¨</a></td> <td align="center"><a href="http://mazlan.my"><img src="https://avatars0.githubusercontent.com/u/5886788?v=4" width="100px;" alt=""/><br /><sub><b>Mohd Mazlan Bin Mohd Nor</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=mazlanmohdnor" title="Code">π»</a> <a href="#design-mazlanmohdnor" title="Design">π¨</a></td> </tr> <tr> <td align="center"><a href="https://github.com/danielsogl"><img src="https://avatars2.githubusercontent.com/u/15234844?v=4" width="100px;" alt=""/><br /><sub><b>Daniel Sogl</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=danielsogl" title="Code">π»</a> <a href="#infra-danielsogl" title="Infrastructure (Hosting, Build-Tools, etc)">π</a></td> <td align="center"><a href="https://github.com/jeronimonascimento"><img src="https://avatars0.githubusercontent.com/u/16031907?v=4" width="100px;" alt=""/><br /><sub><b>JerΓ΄nimo do Nascimento</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=jeronimonascimento" title="Code">π»</a></td> <td align="center"><a href="http://mateusduraes.github.io/"><img src="https://avatars2.githubusercontent.com/u/19319404?v=4" width="100px;" alt=""/><br /><sub><b>Mateus Duraes</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=mateusduraes" title="Code">π»</a> <a href="#design-mateusduraes" title="Design">π¨</a></td> <td align="center"><a href="https://github.com/nazrdogan"><img src="https://avatars1.githubusercontent.com/u/1672303?v=4" width="100px;" alt=""/><br /><sub><b>NazΔ±r DoΔan</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=nazrdogan" title="Code">π»</a></td> <td align="center"><a href="http://www.fahrenbyte.com"><img src="https://avatars2.githubusercontent.com/u/12659402?v=4" width="100px;" alt=""/><br /><sub><b>Abdelghafour Rakhma</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=Sletheren" title="Code">π»</a> <a href="#design-Sletheren" title="Design">π¨</a></td> <td align="center"><a href="https://github.com/AndreasGassmann"><img src="https://avatars2.githubusercontent.com/u/680814?v=4" width="100px;" alt=""/><br /><sub><b>AndreasGassmann</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/issues?q=author%3AAndreasGassmann" title="Bug reports">π</a></td> <td align="center"><a href="https://github.com/lucascco"><img src="https://avatars2.githubusercontent.com/u/6581094?v=4" width="100px;" alt=""/><br /><sub><b>Lucas Carvalho CorrΓͺa</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=lucascco" title="Code">π»</a></td> </tr> <tr> <td align="center"><a href="https://www.stephan-strate.de/"><img src="https://avatars2.githubusercontent.com/u/19595615?v=4" width="100px;" alt=""/><br /><sub><b>Stephan Strate</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=stephan-strate" title="Code">π»</a></td> <td align="center"><a href="https://github.com/Sab94"><img src="https://avatars0.githubusercontent.com/u/15252513?v=4" width="100px;" alt=""/><br /><sub><b>Sabyasachi Patra</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=Sab94" title="Code">π»</a> <a href="#design-Sab94" title="Design">π¨</a></td> <td align="center"><a href="http://xpressivetech.com/"><img src="https://avatars2.githubusercontent.com/u/1063019?v=4" width="100px;" alt=""/><br /><sub><b>Duane Helton</b></sub></a><br /><a href="#infra-tallcoder" title="Infrastructure (Hosting, Build-Tools, etc)">π</a></td> <td align="center"><a href="https://www.jordanbenge.com"><img src="https://avatars3.githubusercontent.com/u/11723093?v=4" width="100px;" alt=""/><br /><sub><b>Jordan Benge</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/pulls?q=is%3Apr+reviewed-by%3ABengejd" title="Reviewed Pull Requests">π</a> <a href="#design-Bengejd" title="Design">π¨</a></td> <td align="center"><a href="http://shadowmitia.github.io"><img src="https://avatars1.githubusercontent.com/u/3752363?v=4" width="100px;" alt=""/><br /><sub><b>Dimitri Belopopsky</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=ShadowMitia" title="Documentation">π</a></td> <td align="center"><a href="https://github.com/Luancarlos"><img src="https://avatars1.githubusercontent.com/u/15051544?v=4" width="100px;" alt=""/><br /><sub><b>Luan Rocha</b></sub></a><br /><a href="https://github.com/yannbf/ionic3-components/commits?author=Luancarlos" title="Code">π»</a> <a href="#design-Luancarlos" title="Design">π¨</a></td> </tr> </table> <!-- markdownlint-enable --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!