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.

Plugin by icliclabs.com

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

Description

Ionic Profile Header is a gorgeous component allowing you to have amazing profile pages with cover images. Set up a background image with a beautiful custom blur effect.

Test Before You Buy

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

Features

1. Works with iOS, Android and Windows Phone.
2. Works for user profile pages, user settings pages
3. Easy to include in your existing app.
4. The component is very easy to use.
5. This component contains an easy to use component. It comes with several full examples and explanations.
6. 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-profile-header.ts into your app directory
2. Import IonProfileHeader component and add it to the declarations list in the app/app.module.ts file

That's all!

Usage

1. in your profile page, add <ion-profile-header [options]="options"> to your ion-content, the options parameter is mandatory. You can define a different background image and a profile image. You also can set up the strength of the blur, the colors, the main text and the subtext.

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

    <!-- classic header bar -->
    <ion-header">
      <ion-navbar>
        <ion-title>{{options.name.text}}</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
      <!-- add the ion-profile-header component here. options are mandatory. -->
      <ion-profile-header [options]="options"></ion-profile-header>

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

Here is a simple example of the options object:

    this.options = {
      background: {
        url: "https://...",
      },
      img: {
        url: "https://..."
      },
      name: {
        text: "Kylee Parker"
      }
    }

Here is an example of the full options object. You can add custom CSS classes so you can easily custom the component with your own CSS. You can also customize the blur effect (strength and colors):

    this.options = {
      background: {
        url: "https://...",
        classes: "your-custom-optional-background-class",
        blur: {
          value:'5px',
          colors: {
            start: 'rgba(43, 40, 50, 0.8)',
            mid:'rgba(83, 86, 99, 0.8)',
            end:'rgba(69, 77, 91, 0.6)'
          }
        }
      },
      img: {
        url: "https://...",
        classes: "your-custom-optional-img-class"
      },
      name: {
        text: "Kylee Parker",
        classes: 'your-custom-optional-name-class'
      },
      subtext: {
        text: "Ryderwood, GA",
        classes: 'your-custom-optional-subtext-class'
      }
    }

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.