Ionic 2.x/3.x - Ionic Categories

Ionic 2.x/3.x - Ionic Categories

Easily add categories to your app with a few lines of code.

$10.00

Not yet rated
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.1
Size:
16mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
861ad82e
Released:
3 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
categories, category, list, design, iclic labs, iclic, 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.


Plugin by icliclabs.com

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

Description

Easily add categories to your app. This plugin works on iOS, Android and Windows Phone. The component is very easy to use and should only take a few minutes to include to your app.

Test Before You Buy

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

Features

  1. Works with iOS, Android and Windows Phone.
  2. Only 1 line to add to your template
  3. Comes with serveral full and detailed examples.
  4. 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-categories.ts file into your app directory
  2. Import the IonCategories component and add it to the declarations list in the app/app.module.ts file

That's all!

Usage

  1. in your page template, add <ion-categories> in your ion-content, the parameter categories is a mandatory reference to an array of IonCategoriesOptions.

That's all. Here is an example of a Page template, very simple. Just add the ion-categories component:

<!-- simply add <ion-categories> to your ion-content element, that's all! -->
<ion-content>
  <ion-categories [categories]="categories"></ion-categories>
</ion-content>

Here is how to define categories:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonCategory } from '../../../components/ion-categories'

@Component({
  selector: 'example1-page',
  templateUrl: 'example1.html'
})
export class Example1Page {
  private categories: Array<IonCategory>;

  constructor(public navCtrl: NavController) {
    this.categories = [{
      key: 'use your key/id here (optional)'
      title: 'Dinner',
      description: '39 items', // (optional)
      hasOverlay: true, // (optional)
      background: 'url(./assets/images/1.jpg) center center / cover no-repeat', // CSS background property
      onClick: function(category) {
        alert('key=' + category.key);                                                                                                                                                                                                                                                                                                                                                    
      }
    }]
  }
}

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.

Andrew Sarosy

Andrew Sarosy   ·   3 years ago

I'm getting "Can't bind to 'categories' since it isn't a known property of 'ion-categories'." when I try to follow the posted sample code...

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Andrew, email me at icl1clabs@gmail.com with some code. I should be able to help you find your issue :) Cheers

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

Andrew Sarosy

Andrew Sarosy   ·   3 years ago

I'm getting "Can't bind to 'categories' since it isn't a known property of 'ion-categories'." when I try to follow the posted sample code...

Iclic Labs

Iclic Labs   ·   3 years ago

Hey Andrew, email me at icl1clabs@gmail.com with some code. I should be able to help you find your issue :) Cheers

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