A pull-up footer component for Ionic
Member since 2015
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.
Hey there! You'll need to log in before you can leave a comment here.
Ohh man, thanks for this! Is Excellent! PD: Please add the "init-minimized" property! <ion-pull-up-footer class="bar-positive" minimize="true" init-minimized="true" max-height="150"> scope: { onExpand: '&', onCollapse: '&', onMinimize: '&', minimize: '=', maxHeight: '=?', defaultHeight: '=?', initMinimized: '=' } function computeHeights() { //...Your code if($scope.initMinimized){ minimize(); } //...Your code }
This is a really great plugin (as are the side tabs)! What happens on Android < 4.4.1 without Crosswalk? Does the pull-up not work at all? Does it just not animate nicely? I'd like to integrate this plugin into an app, but I will not bother with Crosswalk.
FYI: There seems to be a bug with setting the scroll property for the popup. In Chrome on desktop, the content will scroll properly (when the content is long enough). However, on Android (4.4.4), the content will NOT scroll. The scroll-bar does show that scrolling is required, but it simply will not work. Scrolling works decently on iOS (8). It's not inertia scrolling, but it does work.
The plugin requires Crosswalk on Android < 4.4 or otherwise the UI won't render (it breaks!). Give it a try if you want, but I could not find a fix yet. As for the other bug, could you please open a new issue on GitHub?
Very nice!! I have a question....how can I make work with a sliderbox inside the ion-pull-up-content?
Do you mean to include an Ionic's slidebox? I am not even sure that would work, never tried!
You need to give the slidebox some height. Check this out: http://codepen.io/arielfaur/pen/meWMRp
There is the ion-pull-up-trigger directive. Is there an option to control only the slide up or slide down?
Hi my friend! One question... is possible to do that like Android? from up to down? Maybe an Ionic Pull-Down Header? hahaha
When I launch the example index.html, I get the following in the console: Uncaught TypeError: angular.module(...).constant(...).constant(...).directive(...).component is not a function(…). I trust the ratings and your wonderful reviews, which makes me believe I didn't install the plugin incorrectly. I followed the directions and used bower to do the install. I am at a loss of what to try next. Any suggestions??? Thank you in advance for your hard work and time.
i used this plugin but it has some error: TypeError: undefined is not a function at computeDefaultHeights (file:///android_asset/www/lib/ionic-drawer/ion-pullup.js:65:31)
I am getting error for [footer]="pullup" in the below code. If I remove it it will work. Why it is not working?? <ion-pullup (onExpand)="footerExpanded()" (onCollapse)="footerCollapsed()" [(state)]="footerState"> <ion-pullup-tab [footer]="pullup" (tap)="toggleFooter()"> <ion-icon name="arrow-up" *ngIf="footerState == 0"></ion-icon><ion-icon name="arrow-down" *ngIf="footerState == 1"></ion-icon> </ion-pullup-tab> <ion-toolbar color="primary" (tap)="toggleFooter()"> <ion-title>Footer</ion-title> </ion-toolbar> <ion-content> ... FOOTER CONTENT ... </ion-content> </ion-pullup>
Just remove the [footer]="pullup" But I am facing a problem when I try to drag the component up or down, it apparently only works when we click on it.
I am getting error for [footer]="pullup" in the below code. If I remove it it will work. Why it is not working?? <ion-pullup (onExpand)="footerExpanded()" (onCollapse)="footerCollapsed()" [(state)]="footerState"> <ion-pullup-tab [footer]="pullup" (tap)="toggleFooter()"> <ion-icon name="arrow-up" *ngIf="footerState == 0"></ion-icon><ion-icon name="arrow-down" *ngIf="footerState == 1"></ion-icon> </ion-pullup-tab> <ion-toolbar color="primary" (tap)="toggleFooter()"> <ion-title>Footer</ion-title> </ion-toolbar> <ion-content> ... FOOTER CONTENT ... </ion-content> </ion-pullup>
Just remove the [footer]="pullup" But I am facing a problem when I try to drag the component up or down, it apparently only works when we click on it.
i used this plugin but it has some error: TypeError: undefined is not a function at computeDefaultHeights (file:///android_asset/www/lib/ionic-drawer/ion-pullup.js:65:31)
When I launch the example index.html, I get the following in the console: Uncaught TypeError: angular.module(...).constant(...).constant(...).directive(...).component is not a function(…). I trust the ratings and your wonderful reviews, which makes me believe I didn't install the plugin incorrectly. I followed the directions and used bower to do the install. I am at a loss of what to try next. Any suggestions??? Thank you in advance for your hard work and time.
Hi my friend! One question... is possible to do that like Android? from up to down? Maybe an Ionic Pull-Down Header? hahaha
There is the ion-pull-up-trigger directive. Is there an option to control only the slide up or slide down?
You need to give the slidebox some height. Check this out: http://codepen.io/arielfaur/pen/meWMRp
Do you mean to include an Ionic's slidebox? I am not even sure that would work, never tried!
Very nice!! I have a question....how can I make work with a sliderbox inside the ion-pull-up-content?
The plugin requires Crosswalk on Android < 4.4 or otherwise the UI won't render (it breaks!). Give it a try if you want, but I could not find a fix yet. As for the other bug, could you please open a new issue on GitHub?
FYI: There seems to be a bug with setting the scroll property for the popup. In Chrome on desktop, the content will scroll properly (when the content is long enough). However, on Android (4.4.4), the content will NOT scroll. The scroll-bar does show that scrolling is required, but it simply will not work. Scrolling works decently on iOS (8). It's not inertia scrolling, but it does work.
This is a really great plugin (as are the side tabs)! What happens on Android < 4.4.1 without Crosswalk? Does the pull-up not work at all? Does it just not animate nicely? I'd like to integrate this plugin into an app, but I will not bother with Crosswalk.
Ohh man, thanks for this! Is Excellent! PD: Please add the "init-minimized" property! <ion-pull-up-footer class="bar-positive" minimize="true" init-minimized="true" max-height="150"> scope: { onExpand: '&', onCollapse: '&', onMinimize: '&', minimize: '=', maxHeight: '=?', defaultHeight: '=?', initMinimized: '=' } function computeHeights() { //...Your code if($scope.initMinimized){ minimize(); } //...Your code }
Hey there! You'll need to log in before you can leave a rating here.
Very niceee!
Nice
Exactly what I needed.
just awesome! thank you
Actually its six of five stars
I agree with Alex 6 stars, very nice plug in!
Thanks for your work Ariel ! Your components are great !
Thanks Ariel. This component works great and your support is awesome.
{{ rating.comment }}
{{ rating.comment }}
Thanks Ariel. This component works great and your support is awesome.
Thanks for your work Ariel ! Your components are great !
I agree with Alex 6 stars, very nice plug in!
Actually its six of five stars
just awesome! thank you
Exactly what I needed.
Nice
Very niceee!
