Ionic Cover Item

Ionic Cover Item

Amazing list/explore/category pages with cover items for your Ionic apps

$10.00

Purchase externally
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
list, ng-repeat, cover, item, image, background, restaurant, airbnb, places, artists, music,

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

  1. Works with iOS, Android and Windows Phone.
  2. Works for list pages, explore pages, category pages, directory, etc.
  3. Easy to include in your existing app.
  4. The directive is very easy to use.
  5. Compatible with your existing code.
  6. This component contains an easy to use directive. It comes with the AirBnb, restaurants list and artists directory page example
  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 lib/ion-cover-item.js into your lib folder
  2. Update your index.html to include the lib/ion-cover-item/ion-cover-item.js file
  3. 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:

  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.