
Pratheepan Thevadasan
hi, the ionic view id is stating that it is private. Is there a public view that can be used to test this out ?
Beautiful profile header component for your ionic app
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
Installation
IonProfileHeader
component and add it to the declarations
list in the app/app.module.ts
fileThat's all!
Usage
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:
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.
hi, the ionic view id is stating that it is private. Is there a public view that can be used to test this out ?
hi, the ionic view id is stating that it is private. Is there a public view that can be used to test this out ?
hi, the ionic view id is stating that it is private. Is there a public view that can be used to test this out ?
hi, the ionic view id is stating that it is private. Is there a public view that can be used to test this out ?
Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.
{{ rating.comment }}
{{ rating.comment }}