
Ionic Cover Item
Amazing list/explore/category pages with cover items for your Ionic apps
$10.00
Details
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
Description
Ionic Cover Item is a gorgeous component allowing you to have amazing designs for your list pages with cover images. Simply add to your current item list the ion-cover-item directive.
Test Before You Buy
You can test the app using Ionic View and enter the app id e848b935.
Features
- Works with iOS, Android and Windows Phone.
- Works for list pages, explore pages, category pages, directory, etc.
- Easy to include in your existing app.
- The directive is very easy to use.
- Compatible with your existing code.
- This component contains an easy to use directive. It comes with the AirBnb, restaurants list and artists directory page example
- 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
- Copy the lib/ion-cover-item.js into your lib folder
- Update your index.html to include the lib/ion-cover-item/ion-cover-item.js file
- Update the app.js file and add dbaq.ionCoverItem to the list of modules, i.e. angular.module('starter', ['ionic', 'dbaq.ionCoverItem'])
That's all!
Usage
Here is an example of a view:
```
Explore Places
<!-- regular list from ionic -->
<div class="list">
<!-- <ion-cover-item> is very easy to use, you just have to specify the `cover` attribute with the path to your image -->
<ion-cover-item ng-repeat="place in places" class="airbnb-style" cover="place.cover" ng-click="goTo('details');">
<!-- put your item html -->
<h2>{{ place.name }}</h2>
<p>{{ place.description }}</p>
</ion-cover-item>
</div>
```
If you want to customize the default style, you can add a class to the directive and define the style in your css file:
.airbnb-style.ion-cover-item {
justify-content: center;
text-align: center;
height: 340px;
border: 1px solid #333;
}
This component is structured, easy to customize and integrate into your Ionic app, BUT feel free to email me if you need any help.
Other Popular Plugins:
- Ionic Categories: Ionic v2.x/v3.x
- Ionic Passcode Square: Ionic v2.x/v3.x
- Ionic Passcode Flat: Ionic v2.x/v3.x
- Ionic Passcode Round: Ionic v2.x/v3.x
- Ionic Shrinking Header: Ionic v2.x/v3.x
- Ionic Material Sidemenu: Ionic v2.x/v3.x
- Ionic Walkthrough: Ionic v2.x/v3.x
- Ionic Contacts Inviter: Ionic v2.x/v3.x
- Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
- Ionic Profile Header: Ionic v2.x/v3.x
- Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
- Ionic Phone Number Validator: Ionic v1.x
- Ionic Cover Item: Ionic v1.x
- 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.