A pull-up footer component for Ionic. The pull-up footer is a UI component built on top of Ionic's footer and offers an efficient way to hide/reveal information. The footer can fully expand to cover the content area of the screen or can be configured to expand to a maximum height. The component will compute the available screen height providing for header and tabs.
demo.mov
See demo page
-
Install from NPM
npm install ionic-pullup@latest hammerjs @types/hammerjs -
Import IonicPullupModule in page module
import { IonicPullupModule } from 'ionic-pullup'; @NgModule({ imports: [ IonicModule, CommonModule, ... IonicPullupModule ] }) export class MyPageModule {}
-
Add component to page template
Add a
lib-ionic-pullupelement after the template'sion-contentelement (if any).Declare a two-way binding
stateto control component states collapsed or expanded. Use a function to toggle states such astoggleFooter()in the example below.Mark elements in the template that should respond to drag events with the
#ionDragFootertemplate variable.Use optional parameters
toolbarTopMarginto set a top boundary (margin) for the footer to expand, andminBottomVisibleto set a footer area to be always visible (minimum).Finally, use
onExpandandonCollapseevents to capture footer events if required.<ion-header> <ion-toolbar> <ion-title> Home </ion-title> </ion-toolbar> </ion-header> <ion-content> ...home page content... </ion-content> <lib-ionic-pullup (onExpand)="footerExpanded()" (onCollapse)="footerCollapsed()" [(state)]="footerState" [toolbarTopMargin]="100" [minBottomVisible]="200"> <ion-toolbar color="light" (click)="toggleFooter()" #ionDragFooter> <ion-title>Tap or drag</ion-title> </ion-toolbar> <ion-content> ...scrollable content within footer... </ion-content> </lib-ionic-pullup>
-
Declare initial state in page component
import { Component, OnInit } from '@angular/core'; import { IonPullUpFooterState} from 'ionic-pullup'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'] }) export class HomePage implements OnInit { footerState: IonPullUpFooterState; constructor() {} ngOnInit() { this.footerState = IonPullUpFooterState.Collapsed; } // optional capture events footerExpanded() { console.log('Footer expanded!'); } // optional capture events footerCollapsed() { console.log('Footer collapsed!'); } // toggle footer states toggleFooter() { this.footerState = this.footerState === IonPullUpFooterState.Collapsed ? IonPullUpFooterState.Expanded : IonPullUpFooterState.Collapsed; } } ```
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent