Ionic 2.x/3.x - Ionic Cover Header

Ionic 2.x/3.x - Ionic Cover Header

Amazing profile/details page with cover pictures for your app

$10.00

Not yet rated
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.0.2
Size:
0mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
cb287156
Released:
7 years ago
Updated:
7 years ago
Category:
Plugins
Tags:
cover header, cover, profile page, profile, details, header, facebook, airbnb, play store, food, dish, ionic2, ionic3

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.

USING IONIC v1? CHECK OUT http://market.ionic.io/plugins/ionic-profile-header


Plugin by icliclabs.com

This plugin is compatible with Ionic v2.x and v3.x!

Description

Ionic Cover Header allows you to add a transparent nav bar to your profile and details pages easily. The nav bar will automatically become opaque as you scroll down the page. You can simply reproduce the design of the amazing details pages of the facebook app, airbnb app or even the play store app.

Test Before You Buy

You can test the app using Ionic View and enter the app id cb287156.

Features

  1. Works with iOS, Android and Windows Phone.
  2. Works for user profile pages, product details pages, etc.
  3. Easy to include in your existing app.
  4. The directive is very easy to use.
  5. Compatible with your existing code.
  6. It comes with all 4 examples
  7. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the app/components/ion-cover-header.ts into your app directory
  2. Import IonCoverHeader component and add it to the declarations list in the app/app.module.ts file

That's all!

Usage

  1. in your profile view, add ion-cover-header="220" to your ion-header, the parameter is the height in pixel when the header must be opaque

That's all. Here is an example of a view:

    <!-- add the directive ion-cover-header to your ion-header, the parameter is the height in pixels when the header bar should be fully opaque (default 200)-->
    <ion-header ion-cover-header="240">
      <ion-navbar color="facebook">
        <ion-title>Rosie Ochoa</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content class="facebook-example">
      <!-- here is an example of how you can have a facebook-like profile, feel free to modify it -->
      <div class="profile-info" style="background: url(../img/facebook_profile_cover.jpg)">
        <img src="../img/facebook_profile_picture.jpg" />
        <h2>Rosie Ochoa</h2>
      </div>
      <!-- end of the profile header-->


      <!-- the rest of the content is up to you-->
      <ion-card>
        ...
      </ion-card>
    </ion-content>

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.

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

Willian Ribeiro Angelo

Willian Ribeiro Angelo   ·   7 years ago

I would like to buy using Paypal, is it possible?

Iclic Labs

Iclic Labs   ·   7 years ago

It is possible. Email me at icl1clabs@gmail.com so I can give you the instructions.

  ·   just now

{{ reply.comment }}



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

chris

chris   ·   7 years ago

Hi. I would like to buy this plugin. If I buy this, could you give me the entire source of this plugin?

Iclic Labs

Iclic Labs   ·   7 years ago

Yes, when you buy the plugin, you have access to the entire source.

  ·   just now

{{ reply.comment }}



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

chris

chris   ·   7 years ago

I am using div element in ion-header area instead of ion-navbar, so your plugin is not working. could you give me some help? here is my code. <ion-header ion-cover-header="240"> <div class="j_header whome"> <div class="left"> <button type="button" class="button btn_back" (click)="onBack()"></button> </div> <h1 class="t_tit"><span>{{contentInfo.title}}</span></h1> <div class="right"> <ul class="clear"> <li class="fleft" tappable (click)="onLike()"><a class="icon btn_like" [class.on]="contentInfo.likeItAt == 'Y'"></a></li> </ul> </div> </div> </ion-header>

Iclic Labs

Iclic Labs   ·   7 years ago

Hey @chris, email me at icl1clabs@gmail.com so I can help you find a solution to your problem. Cheers.

  ·   just now

{{ reply.comment }}



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

Jayser Mendez

Jayser Mendez   ·   7 years ago

Use one of the examples, didn't work

Iclic Labs

Iclic Labs   ·   7 years ago

hey @JayserMendez, if you have difficulties implementing the plugin, email me at icl1clabs@gmail.com. Cheers.

  ·   just now

{{ reply.comment }}



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

Suraj Kumar Gorai

Suraj Kumar Gorai   ·   6 years ago

Not working with my IONIC 3 Application, I follow instructions: Installation 1. Copy the app/components/ion-cover-header.ts into your app directory 2. Import IonCoverHeader component and add it to the declaration list in the app/app.module.ts file. I try to implement IonCoverHeader more than two pages. When I declare IonCoverHeader in app/app.module.ts file plugin not work. But when I declare IonCoverHeader in a specific page module then its work fine. But then I am not able to use IonCoverHeader in another page it shows error: ERROR Error: Uncaught (in promise): Error: Type IonCoverHeader is part of the declaration of 2 modules: AppModule and ApplicationDetailPageModule! Please consider moving IonCoverHeader to a higher module that imports AppModule and ApplicationDetailPageModule. You can also create a new NgModule that exports and includes IonCoverHeader then import that NgModule in AppModule and ApplicationDetailPageModule. Please help me it's urgent.

Suraj Kumar Gorai

Suraj Kumar Gorai   ·   6 years ago

I solve my issue by using : https://stackoverflow.com/a/43676386/2143446

  ·   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.

Suraj Kumar Gorai

Suraj Kumar Gorai   ·   6 years ago

Not working with my IONIC 3 Application, I follow instructions: Installation 1. Copy the app/components/ion-cover-header.ts into your app directory 2. Import IonCoverHeader component and add it to the declaration list in the app/app.module.ts file. I try to implement IonCoverHeader more than two pages. When I declare IonCoverHeader in app/app.module.ts file plugin not work. But when I declare IonCoverHeader in a specific page module then its work fine. But then I am not able to use IonCoverHeader in another page it shows error: ERROR Error: Uncaught (in promise): Error: Type IonCoverHeader is part of the declaration of 2 modules: AppModule and ApplicationDetailPageModule! Please consider moving IonCoverHeader to a higher module that imports AppModule and ApplicationDetailPageModule. You can also create a new NgModule that exports and includes IonCoverHeader then import that NgModule in AppModule and ApplicationDetailPageModule. Please help me it's urgent.

Suraj Kumar Gorai

Suraj Kumar Gorai   ·   6 years ago

I solve my issue by using : https://stackoverflow.com/a/43676386/2143446

  ·   just now

{{ reply.comment }}



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

Jayser Mendez

Jayser Mendez   ·   7 years ago

Use one of the examples, didn't work

Iclic Labs

Iclic Labs   ·   7 years ago

hey @JayserMendez, if you have difficulties implementing the plugin, email me at icl1clabs@gmail.com. Cheers.

  ·   just now

{{ reply.comment }}



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

chris

chris   ·   7 years ago

I am using div element in ion-header area instead of ion-navbar, so your plugin is not working. could you give me some help? here is my code. <ion-header ion-cover-header="240"> <div class="j_header whome"> <div class="left"> <button type="button" class="button btn_back" (click)="onBack()"></button> </div> <h1 class="t_tit"><span>{{contentInfo.title}}</span></h1> <div class="right"> <ul class="clear"> <li class="fleft" tappable (click)="onLike()"><a class="icon btn_like" [class.on]="contentInfo.likeItAt == 'Y'"></a></li> </ul> </div> </div> </ion-header>

Iclic Labs

Iclic Labs   ·   7 years ago

Hey @chris, email me at icl1clabs@gmail.com so I can help you find a solution to your problem. Cheers.

  ·   just now

{{ reply.comment }}



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

chris

chris   ·   7 years ago

Hi. I would like to buy this plugin. If I buy this, could you give me the entire source of this plugin?

Iclic Labs

Iclic Labs   ·   7 years ago

Yes, when you buy the plugin, you have access to the entire source.

  ·   just now

{{ reply.comment }}



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

Willian Ribeiro Angelo

Willian Ribeiro Angelo   ·   7 years ago

I would like to buy using Paypal, is it possible?

Iclic Labs

Iclic Labs   ·   7 years ago

It is possible. Email me at icl1clabs@gmail.com so I can give you the instructions.

  ·   just now

{{ reply.comment }}



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

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}