ionic-pullup icon indicating copy to clipboard operation
ionic-pullup copied to clipboard

Fixes for module importing and latest Ionic version

Open m-spyratos opened this issue 9 years ago • 1 comments

Module Updates:

  • Updated module's typescript build. Fixes relative path includes.
  • Converted "scroll-content" style, to ".scroll-content", for latest ionic. Fixes pull-up content not scrolling to the end.
  • Updated demo with latest Ionic version.

Github Page Updates:

We need to update the Github page with the following:

Import Styles

Import ion-pullup.scss into your app's main scss file.

@import "../../node_modules/ionic-pullup/src/ion-pullup.scss";

Inject directive in your app's module

import {IonPullUpComponent, IonPullUpTabComponent} from 'ionic-pullup';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    IonPullUpComponent,
    IonPullUpTabComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

Include pull-up in your page

Import ion-pullup.ts in your TypeScript code.

import {IonPullUpFooterState} from 'ionic-pullup';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  footerState: IonPullUpFooterState;

  constructor(public navCtrl: NavController) {
    this.footerState = IonPullUpFooterState.Collapsed;
  }

  footerExpanded() {
    console.log('Footer expanded!');
  }

  footerCollapsed() {
    console.log('Footer collapsed!');
  }

  toggleFooter() {
    this.footerState = this.footerState == IonPullUpFooterState.Collapsed ? IonPullUpFooterState.Expanded : IonPullUpFooterState.Collapsed;
  }

}

(HTML is the same)

m-spyratos avatar Jan 31 '17 11:01 m-spyratos

@arielfaur, Please let me know if you have any questions or concerns about this pull request.

Currently in the repo I have uploaded the compiled files along with the source typescript files. This is not ideal and you might want to consider a building/publishing process for your plugin. For convenience, I have included two npm scripts:

npm run build
npm run release

The first one will install the node_modules and compile the typescript files, generating the corresponding javascript and map files, and the second one will do the same as the build script, plus will publish to the npm.

m-spyratos avatar Feb 01 '17 15:02 m-spyratos