ionic-pullup

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.

• Easily customized
• Uses hardware accelerated CSS transitions
• Footer responds to tap and drag events
• Integrates with Ionic's themes
• Exposes interface for expand/collapse/minimize events
• Detects device orientation and adjusts height accordingly

Demo

Tap or slide the bar to reveal more content!

Sample 1

Sample 2

Sample 3

Install module

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

Import IonPullUpFooterState in your page component to control the footer

We can bind a footer state variable. This allows us to manage the footer by triggering state changes.

        import { IonPullUpFooterState } from 'ionic-pullup';
        
        @Component({
          selector: 'page-about',
          templateUrl: 'about.html'
        })
        export class AboutPage {

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

        }
        

Then bind the footerState member variable to lib-ionic-pullup component state property in order to set up two-way data binding. We can also susbscribe to expand and collapse events to be notified of any state changes.

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

Customize

The pullup component can be easily customized using SCSS variables for tab (handle) size, radius, background and foreground colors, as well as drop shadows. An icon can also be inserted inside the tab to indicate status.