Skip to content
πŸ• Ionic 4 UI Component Library.
Branch: master
Clone or download
Latest commit aa77dd6 May 15, 2019

README.md

Fivethree Ionic 4 UI Library

npm version

Costumizable UI Components for Ionic 4.

Documentation | Component Demos | Getting Started | Get In Touch

gallery pull-to-refresh feature discovery dialog bottom-sheet

✨ Features

  • Twitter inspired Image Gallery
  • Material Design Pull-to-Refresh
  • Flexible Dialog Component
  • Feature Discovery
  • Material Design App Bar for Ionic Tabs
  • more components

πŸ“¦ Installation

To get started, install the package from npm. The latest version supports Ionic 4 and Angular 7.

Step 1. Install the UI Library

You can use either npm or yarn to install @fivethree/core from npm.

npm install --save @fivethree/core @angular/animations hammerjs

Step 2. Configure your Ionic App

Once the packages are installed, import BrowserAnimationsModule in app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    ...
    BrowserAnimationsModule,
    ...
  ]
})
export class AppModule {}

Step 3. Usage Instructions

To use the UI Library import it into a Page or Component Module. You can either import the full FivethreeCoreModule or one of the feature modules (e.g. FivGalleryModule).

For example:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { FivethreeCoreModule } from '@fivethree/core';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    FivethreeCoreModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

πŸ”¨ Development

This package is under active construction.

  • Run ng build core to rebuild the component library.
  • Run ionic s to serve the project site.
You can’t perform that action at this time.