yannbf/ionic3-components

A project full of ionic 3 components and samples - to make life easier :)

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):

Damodar Lohani 💻 📢 🎨 📝	Cory McArthur 💻 📢 🎨	mike-carr 🔌	Fernando del olmo 💻	medeirosrafael 🐛	Javier 💻 🎨	Mohd Mazlan Bin Mohd Nor 💻 🎨
Daniel Sogl 💻 🚇	Jerônimo do Nascimento 💻	Mateus Duraes 💻 🎨	Nazır Doğan 💻	Abdelghafour Rakhma 💻 🎨	AndreasGassmann 🐛	Lucas Carvalho Corrêa 💻
Stephan Strate 💻	Sabyasachi Patra 💻 🎨	Duane Helton 🚇	Jordan Benge 👀 🎨	Dimitri Belopopsky 📖	Luan Rocha 💻 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!

ionic3-components's Issues

Bug: No way to close Modals -> Small Modal -> "Signup modal with slider"

no further text

"Color Changing sliders" don't work

What should happen? I only see red or black text on a white background.

Ionic 2 runtime Permission

Hi ,

Can you please share a sample code or link, showing Marshmallow runtime permission using ionic 2 framework in Hybrid app

errors when run ionic serve

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request

hello,
I upgraded to ionic 3.2.1 and when i run your app, I run before npm install and then ionic serve and I get errors

'npm install' is stuck not finishing

After cloning latest commit , npm install is not finishing , It got stucked.

crop upload image.

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[x] support request

in the camera.provider.ts, I set 'crop = true' when I choose img from photolibrary. But it doesn't do anything. It does work for getPictureFromCamera(). I wonder this is intended or it's a bug.

getPictureFromPhotoLibrary() {
    return this.getImage(this.camera.PictureSourceType.PHOTOLIBRARY, true);
  }

How to resolve ESLint warnings

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[ x ] support request

The ESLint threw many warnings, when I run 'ionic serve' in WebStorm 2017.2.
I don't know how to configure it. Could anyone give some information about this?

Steps to reproduce the bug:

Related code:

A space is required after '{'
A space is required before '}'
Exceeds maximum line length of 120
This type is not allowed in the operand for the '||' operator because it is a number. Only booleans are 
            allowed. 

Important information:

The version :
node 6.11.1
ionic 3.13.0
cordova 7.0.1
webstorm 2017.2
I never changed the package.json

"Free Mode Slides" resizes visibly

When I go to the "Free Mode Slides" page I can see them getting "loaded" and then resized. Seems at first they are 100% width and then get resized to 50%.

Wrong title on "Slides" (shows "Lists")

no further text

Distinguish between official and custom components

Lots of the examples are "default" from the documentation, but some are also combinations or custom. I think the app should maybe distinguish between the both.

modal with navigation

Hi there,
i am trying to use your modalNav page which works half way>
When i push a page the old one get destroyed in the stack so the back button functionality is broken

log error is : Uncaught (in promise): navigation stack needs at least one root page

Appart from ModalWithNavigationPage, ModalNavPage and MoveDocumentPage, is there any thing i have missed ?

about ionic build --prod error

hello , have u ever exec : ionic build --prod ?
it seem report an error ~

Bug: "Social Cards" user names are overlaid on date and wrong title "Card with Images"

iPhone 5S, iOS 10.2.1, via Ionic View

Overrided ion-items menus when side menu set with Material Design.

I'm submitting a ... (check one with "x")

[X] bug report
[ ] feature request
[ ] support request

When you set sidemenu with Material Design option, the items Home, Ionic Official Components and Login are overrided with the menu header.

I get a error, when i build the project use command : npm run ionic:build --prod

I get a error, when i want to build the project use command : npm run ionic:build --prod
i use : npm 4.6.1; node 8.6.0, i did nothing after git clone .

please help me , it has speed me three days . and used any methods i can find.

Side menu Integration

I am trying to use the Avatar side menu for my app, but I cant integrate it into my app. What all code and files are needed to be copied?
Could anyone help me out with it please as I need it for my project asap?
Thank you.

P.S: I'm a newbie to ionic

Bug: Profiles' "Back" buttons are displayed beneath the system status bar

iPhone 5S, iOS 10.2.1

Menu doesn't highlight currently selected menu item

no further text

Login Page constructor call twice

import { AppState } from './app.global';
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform,MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Subject } from 'rxjs';
import { Menu } from 'ionic-angular/components/menu/menu';

// import { HomePage } from '../pages/home/home';
// import { ListPage } from '../pages/list/list';

@component({
templateUrl: 'app.html'
})
export class MyApp {

@ViewChild(Nav) nav: Nav;

rootPage: any = 'LoginPage';
activePage = new Subject();

pages: Array<{ title: string, component: any, active: boolean, icon: string }>;
state: any;

GoogleMaps [deprecated] Please use GoogleMaps.create()

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request

Important Info
There is a new way of instantiating a map

this.map = GoogleMaps.create(element.nativeElement, mapOptions);

References
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ReleaseNotes/ionic-googlemaps-4.4.0/README.md

<t>

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[ ] support request

Steps to reproduce the bug:

Related code:

    insert any relevant code here

Important information:

Lazy load and routes

I'm submitting a ...

[ ] bug report
[x] feature request
[ ] support request

Steps to reproduce the bug:
I'm wondering if using lazy loaded component and pages might help performance on start.
For web browsers it's interesting to have also hash routes to go through a determined state or route.
There are some examples about this: https://ionicacademy.com/ionic-3-lazy-loading

Related code:

tab1 = MyClientsPage; // from import

// can be
tab1:string = 'MyClientsPage';

Your download should include empty www folder, so cordova prepare doesn't get confused!

I'm submitting a ... (check one with "x")

[ x] bug report
[ ] feature request
[ ] support request

Steps to reproduce the bug:
ran steps up to
cordova prepare
Then I get
Error: Current working directory is not a Cordova-based project.

Fix is to have an empty www folder in git clone
See this related issue: ionic-team/ionic-cli#935
Related code:

    insert any relevant code here

Important information:

ModalController cssClass option

How to dynamically pass cssClass in ModalController.
As per document
let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 }, {cssClass: 'classname'});

But getting error - cssClass does not exist in the type model options.
May i know how to use dynamically cssClass while creating ModalController .

Enhance project structure with angular modules

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[x] support request

Important information:
The project needs to be better organized in terms of code architecture. It should follow good angular practices so it would have a module for components, another for pipes, etc.

Any discussion is greatly appreciated, this way the project could be used as reference for good practices in Angular, but right now it needs to be better worked on.

tree component

I'm submitting a tree component

[ ] bug report
[x] feature request
[ ] support request

Hello Yann,
Awesome repository, many thanks for sharing this! Have you thought about adding/developing an ionic tree component, in a kind of similar way as this Angular Tree Component ? It would be very helpful I guess!
Cheers
Pierre

[Warning] Native: tried calling Diagnostic.requestRuntimePermissions, but the Diagnostic plugin is not installed.

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[X ] support request

Related code:
/src/pages/ionic-native/runtime-permissions/runtime-permissions.ts

  // You can use this kind of method, which is passing a permission value..
  requestPermission(permission) {
    this.diagnostic.requestRuntimePermission(permission).then((status) => {
      if (status === this.diagnostic.permissionStatus.GRANTED) {
        alert('Permission granted!');
      } else {
        alert('Permission not granted. STATUS: ' + status);
      }
    }, error => {
      console.error('permission error:', error);
    });
  }

  // There is also a method that takes an array of permissions to ask for them at once
  requestAllPermissions() {
    const permissions = Object.keys(this.PERMISSION).map(k => this.PERMISSION[k]);
    this.diagnostic.requestRuntimePermissions(permissions).then((status) => {
      alert(JSON.stringify(status));
    }, error => {
      console.error('permission error:', error);
    });
  }

Important information:

hi,
diagnostic.requestRuntimePermissions and diagnostic.requestRuntimePermissionss only support platform android?

see https://www.npmjs.com/package/cordova.plugins.diagnostic#requestruntimepermissions

we try run this app on ios,

[Warning] Native: tried calling Diagnostic.requestRuntimePermissions, but the Diagnostic plugin is not installed. (vendor.js, line 184286)
[Warning] Install the Diagnostic plugin: 'ionic cordova plugin add cordova.plugins.diagnostic' (vendor.js, line 184286)
[Error] permission error: – "plugin_not_installed"

Server return html not render in ionic 3 and angular 4

I try to implement ccavenue payment gateway in ionic 3 app, i am calling request api then server return html code in json. i want to render html code as page, but html code not render.
If any other option to show return html code, please help me

"Sliding item" could use a hint text to surface the interaction needed

no further text

Componentize stuff!

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[x] support request

Important information:
So there are many pieces of code that could be extracted to components, so any help on this would be greaty appreciated 🥇

Timeline Layout bug

[x ] bug report
[ ] feature request
[ ] support request

Steps to reproduce the bug:
Removing or Reducing the content of the ion-card-content, makes whole layout buggy.
Screens taken from Chrome's iPad Pro, iPad and Nexus 6P are attached below.
Tested and confirmed to have same behavior on real devices as well (OnePlus One, Galaxy S7 Edge
and Moto G(1st gen))

Please help, thank you.
timelinebug ipad pro
timelinebug ipad
timelinebug nexus 6p

display live data in chart

Hi, with ionic 1 it was easy to bind the chart-data to a variable and the chart always adapted live to the actual values
chart-data="graph.data"
Do you know how to do this now with ionic 2?
With
data: this.graph.data
the chart loads with the right data, but I have to recall the chart-function to update the chart with the new data completely.
Thanks!

demo does't work

I'm submitting a ... (check one with "x")

[ ] bug report
[ ] feature request
[ ] support request

Steps to reproduce the bug:

Related code:

    insert any relevant code here

Important information:

Bug: "Profile 5" has no visible header (but can be left by tapping where a button would be)

no further text

how can I use my ionic as a online project，www？

help please~

Masonary style cards

I'm submitting a ... (check one with "x")

[ ] bug report
[x] feature request
[ ] support request

How about showcasing masonary style ionic cards which adjust themselves during screen size change. Usage of Grid provides less flexibility.

Demo site currently unavailable

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request

Steps to reproduce the bug:
Visit https://ioniccomponents.yannbraga.com/

Important information:

I am trying to visit the demo first. But the site is down. Seems problem with hosting.

Nested Page Ionic 2/3

Is there any way to created nested pages in ionic 2/3? Just like android an Activity can be used for multiple fragments.

Some of the content is fixed for a parent page and just want to add child pages in this way parent pages fixed content will be at the same state and in same position but navigate only child pages.

When android hardware back key preesed it will pop from last child page to parent page and kill the app.

How can i achieve it?

In case of component use t in a page then how to maintain the navigation stack?

Can you please help me out?

code ionic view not working

Hi !
The project in the repository of ionic view , is public ?
Because i cant download with this code bd1b6d71.
Thnks

Bug: "Cards with Badge" has wrong title "Cards with Images"

no further text

sudo ionic serve errors

please help!
when I run : sudo ionic serve
come into the error:

Error on iOS build

Hi,

First I would like to say a big thanks for putting all together all these stuff, very good and useful work.

Then so exiting after downloading I tried to deploy it on my iPhone using Xcode.

Just run an "ionic platform add ios" command and open the project in xCode 8.3 (running on macOS sierra 10.12.3)

Build failed whit issue :

/Users/lionel/Desktop/Ionic Dev Local/ionic3-components-master/platforms/ios/Advanced Ionic2 Components/Images.xcassets: None of the input catalogs contained a matching app icon set named "AppIcon".

After what I tried to build with "ionic build ios" before re-open it in Xcode and then I have the following error:

** BUILD FAILED **

The following build commands failed:
CompileStoryboard PROJECT_NAME/CDVLaunchScreen.storyboard
CompileXIB PROJECT_NAME/Classes/MainViewController.xib

(2 failures)

Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/lionel/Desktop/Ionic Dev Local/ionic3-components-master/platforms/ios/cordova/build-debug.xcconfig,-workspace,Advanced Ionic2 Components.xcworkspace,-scheme,Advanced Ionic2 Components,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone 5s,build,CONFIGURATION_BUILD_DIR=/Users/lionel/Desktop/Ionic Dev Local/ionic3-components-master/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/lionel/Desktop/Ionic Dev Local/ionic3-components-master/platforms/ios/build/sharedpch

Hope I gave you enough informations

Regards

Had problem when build windows/android

Cannot build it on android/windows

Steps to reproduce the bug:
Error: ./src/pages/miscellaneous/real-estate-listing/real-estate-listing.ts
Module parse failed: Unexpected token (40:653)
You may need an appropriate loader to handle this file type.
| RealEstateListingPage = __decorate([
| Component({
| selector: 'page-real-estate-listing',template:/ion-inline-start:"/home/tri/Desktop/ionic3-components-master/src/pages/miscellaneous/real-estate-listing/real-estate-listing.html"/<ion-header no-border>\n <ion-navbar>\n <ion-title>\n {{estateProperty.name}}\n </ion-title>\n </ion-navbar>\n</ion-header>\n\n<ion-content fullscreen elestic-header>\n <section class="housing-image"\n [ngStyle]="{ \'background-image\': \'url(\' + estateProperty.image + \')\'}">\n <section class="housing-banner" padding>\n <span class="housing-title">{{estateProperty.name}}</span>\n <span class="price">${{estateProperty.price}}</span>\n </section>\n </section>\n <section class="main-content">\n <ion-grid class="main-features">\n <ion-row>\n <ion-col text-center *ngFor="let feature of estateProperty.features">\n <ion-icon [name]="feature.icon"></ion-icon>\n <span class="item-block">{{feature.title}}</span>\n </ion-col>\n </ion-row>\n </ion-grid>\n <ion-grid class="listing-details">\n <ion-row>\n <p margin-left margin-right no-margin-top style="text-align: justify">\n {{estateProperty.description}}\n </p>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-icon name="home"></ion-icon>{{estateProperty.style}}\n </ion-col>\n <ion-col>\n <ion-icon name="pin"></ion-icon>{{estateProperty.size}}\n </ion-col>\n </ion-row>\n <ion-row *ngFor="let a of [1,1,1,1,1,1,1,1,1,1]">\n <ion-col>\n info here\n </ion-col>\n </ion-row>\n </ion-grid>\n </section>\n</ion-content>\n<ion-footer>\n <button ion-button large full no-margin color="danger" >\n get in touch now\n </button>\n</ion-footer>/ion-inline-end:"/home/tri/Desktop/ionic3-components-master/src/pages/miscellaneous/real-estate-listing/real-estate-listing.html"/,
| }),
| __metadata("design:paramtypes", [NavController])
@ ./src/pages/miscellaneous/real-estate-listing/real-estate-listing.module.ts 10:0-62
@ ./src lazy
@ ./node_modules/ionic-angular/util/ng-module-loader.js
@ ./node_modules/ionic-angular/util/module-loader.js
@ ./node_modules/ionic-angular/components/popover/popover-component.js
@ ./node_modules/ionic-angular/index.js
@ ./src/app/app.module.ts
@ ./src/app/main.ts
at new BuildError (/home/tri/Desktop/ionic3-components-master/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at callback (/home/tri/Desktop/ionic3-components-master/node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
at emitRecords.err (/home/tri/Desktop/ionic3-components-master/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/home/tri/Desktop/ionic3-components-master/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/home/tri/Desktop/ionic3-components-master/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/home/tri/Desktop/ionic3-components-master/node_modules/webpack/lib/Compiler.js:368:12)
at next (/home/tri/Desktop/ionic3-components-master/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/home/tri/Desktop/ionic3-components-master/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/home/tri/Desktop/ionic3-components-master/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/home/tri/Desktop/ionic3-components-master/node_modules/webpack/lib/Compiler.js:365:9)

Important information:

Why should cordova.js and verdor.js be imported two times in src/index.html?

Input type (instagram-login) Float Screen when OnFocus

I'm trying instagram-login

When I try in my android, and I focus to type username..
The screen go up like this pict
https://forum.ionicframework.com/uploads/default/original/3X/7/d/7d59faf5622c48031d7286b84abbbdb4744dda10.png
how can i solve that.
that's ionic problem??
Or something. Ty

Feature: Accordion

I'm submitting a ... (check one with "x")

[ ] bug report
[X] feature request
[ ] support request

It would be great if you include an accordion list component 😃

Unable to perform click on floating action button

I am using a hybrid app(with ionic framework). I am trying to automate it using appium.
I can click on other tabs and buttons present in the app but unable to perform the click on floating action "+" button. I tried following code:
driver.findElementByXPath("//android.widget.Button[@content-desc='closeadd']").click()
After Executing this appium is not giving me any error but not perform the click on button even.
With another native app I could perform the same operation.

how to define the root url?

eg: #/nav/n4/miscellaneous
the url "/nav/n4" ,i don't see where does it config ?

Right side menu not displaying properly when screen in landscape view

[ ] bug report
[x ] feature request
[ ] support request

When screen turns landscape view right side menu not displaying proper way here is screenshot how it looks like.

Petition: Styled sidemenu

Hi, i was looking for some sidemenu styled for ios and android, can you add it as an example on your app?

Will appreciate it so much :)

Thank you so much