Skip to content

Commit 3168ffd

Browse files
arielfaurarielfaur
committed
updated demo project
1 parent c44f5b0 commit 3168ffd

9 files changed

Lines changed: 16976 additions & 92 deletions

File tree

‎package-lock.json‎

Lines changed: 16912 additions & 44 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/tab1/tab1.page.html‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,6 @@
1717
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
1818
</ion-card-content>
1919
</ion-card>
20-
<ion-list lines="none">
21-
<ion-list-header>
22-
<ion-label>Resources</ion-label>
23-
</ion-list-header>
24-
<ion-item href="https://ionicframework.com/docs/">
25-
<ion-icon slot="start" color="medium" name="book"></ion-icon>
26-
<ion-label>Ionic Documentation</ion-label>
27-
</ion-item>
28-
<ion-item href="https://ionicframework.com/docs/building/scaffolding">
29-
<ion-icon slot="start" color="medium" name="build"></ion-icon>
30-
<ion-label>Scaffold Out Your App</ion-label>
31-
</ion-item>
32-
<ion-item href="https://ionicframework.com/docs/layout/structure">
33-
<ion-icon slot="start" color="medium" name="grid"></ion-icon>
34-
<ion-label>Change Your App Layout</ion-label>
35-
</ion-item>
36-
<ion-item href="https://ionicframework.com/docs/theming/basics">
37-
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
38-
<ion-label>Theme Your App</ion-label>
39-
</ion-item>
40-
</ion-list>
4120
</ion-content>
4221
<lib-ionic-pullup (onExpand)="footerExpanded()" (onCollapse)="footerCollapsed()" (dragged)="onDrag($event)" [(state)]="footerState" [toolbarTopMargin]="toolbarMargin" [minBottomVisible]="200" [dockable]="true">
4322

‎src/app/tab1/tab1.page.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { Component, OnInit, AfterViewInit } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22
import { IonPullUpFooterState, DraggedOutputEvent } from 'ionic-pullup';
33

44
@Component({
55
selector: 'app-tab1',
66
templateUrl: 'tab1.page.html',
77
styleUrls: ['tab1.page.scss']
88
})
9-
export class Tab1Page implements OnInit, AfterViewInit {
9+
export class Tab1Page implements OnInit {
1010
footerState: IonPullUpFooterState;
1111
toolbarMargin: number;
1212

@@ -18,9 +18,6 @@ export class Tab1Page implements OnInit, AfterViewInit {
1818
this.toolbarMargin = 100;
1919
}
2020

21-
ngAfterViewInit() {
22-
}
23-
2421
footerExpanded() {
2522
console.log('Footer expanded!');
2623
}
@@ -30,9 +27,7 @@ export class Tab1Page implements OnInit, AfterViewInit {
3027
}
3128

3229
toggleFooter() {
33-
3430
this.footerState = this.footerState === IonPullUpFooterState.Collapsed ? IonPullUpFooterState.Expanded : IonPullUpFooterState.Collapsed;
35-
3631
}
3732

3833
onDrag(value: DraggedOutputEvent) {

‎src/app/tab2/tab2.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { CommonModule } from '@angular/common';
55
import { FormsModule } from '@angular/forms';
66
import { Tab2Page } from './tab2.page';
77

8+
import { IonicPullupModule } from 'projects/ionic-pullup/src/public-api';
89
@NgModule({
910
imports: [
1011
IonicModule,
1112
CommonModule,
1213
FormsModule,
13-
RouterModule.forChild([{ path: '', component: Tab2Page }])
14+
RouterModule.forChild([{ path: '', component: Tab2Page }]),
15+
IonicPullupModule
1416
],
1517
declarations: [Tab2Page]
1618
})

‎src/app/tab2/tab2.page.html‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,49 @@
11
<ion-header>
2-
<ion-toolbar>
2+
<ion-toolbar color="secondary">
33
<ion-title>
44
Tab Two
55
</ion-title>
66
</ion-toolbar>
77
</ion-header>
88

9-
<ion-content></ion-content>
9+
<ion-content class="main">
10+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent semper feugiat nibh sed pulvinar proin. Sed lectus vestibulum mattis ullamcorper. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Id diam vel quam elementum pulvinar etiam non. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Aliquet enim tortor at auctor urna nunc id. Convallis a cras semper auctor. Tristique magna sit amet purus gravida quis blandit. Mi quis hendrerit dolor magna eget est lorem ipsum. Fringilla urna porttitor rhoncus dolor purus non. Diam phasellus vestibulum lorem sed risus ultricies. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Consequat mauris nunc congue nisi vitae suscipit tellus. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Ante in nibh mauris cursus mattis.</p>
11+
12+
<p>Enim facilisis gravida neque convallis. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Nisi lacus sed viverra tellus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Nec feugiat in fermentum posuere urna nec tincidunt praesent. Ipsum nunc aliquet bibendum enim facilisis. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Dui faucibus in ornare quam viverra orci sagittis eu volutpat. Suspendisse interdum consectetur libero id faucibus. Varius duis at consectetur lorem donec massa sapien faucibus. Urna nunc id cursus metus. Tortor aliquam nulla facilisi cras. Leo vel orci porta non pulvinar neque laoreet. Eu consequat ac felis donec et odio pellentesque. Velit laoreet id donec ultrices tincidunt arcu. Commodo ullamcorper a lacus vestibulum sed arcu. Tristique senectus et netus et.</p>
13+
14+
<p>Duis ut diam quam nulla porttitor massa id neque. Id aliquet lectus proin nibh nisl. Sodales ut eu sem integer vitae justo eget. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Morbi leo urna molestie at elementum eu. Integer feugiat scelerisque varius morbi enim. Interdum velit laoreet id donec ultrices tincidunt. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Tellus rutrum tellus pellentesque eu tincidunt tortor. Maecenas accumsan lacus vel facilisis. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Ante metus dictum at tempor commodo ullamcorper. Venenatis a condimentum vitae sapien pellentesque habitant. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Sed viverra tellus in hac habitasse platea. Vitae turpis massa sed elementum tempus. Mattis nunc sed blandit libero. In tellus integer feugiat scelerisque varius. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus.</p>
15+
16+
<p>In fermentum posuere urna nec tincidunt praesent semper. Neque viverra justo nec ultrices dui sapien. In fermentum posuere urna nec tincidunt. Urna et pharetra pharetra massa massa. Elit pellentesque habitant morbi tristique senectus et. Cras semper auctor neque vitae tempus quam pellentesque nec nam. Odio facilisis mauris sit amet massa vitae tortor condimentum. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Est ultricies integer quis auctor elit. Magna ac placerat vestibulum lectus mauris ultrices eros in.</p>
17+
18+
<p>Diam quam nulla porttitor massa. Aenean vel elit scelerisque mauris pellentesque pulvinar. Molestie at elementum eu facilisis sed odio morbi. Est ullamcorper eget nulla facilisi etiam dignissim diam quis. Dignissim suspendisse in est ante. Arcu cursus vitae congue mauris. Lacus vel facilisis volutpat est velit. Nascetur ridiculus mus mauris vitae. Sodales ut etiam sit amet nisl purus in. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Id leo in vitae turpis massa sed. Urna nunc id cursus metus. Euismod in pellentesque massa placerat duis ultricies lacus.</p>
19+
</ion-content>
20+
21+
<lib-ionic-pullup [(state)]="footerState" [minBottomVisible]="0" [dockable]="true">
22+
23+
<ion-toolbar color="dark" (click)="toggleFooter()" #ionDragFooter>
24+
<ion-title>Another footer sample</ion-title>
25+
</ion-toolbar>
26+
<ion-content color="dark">
27+
<ion-card>
28+
<ion-card-header>
29+
Header
30+
</ion-card-header>
31+
<ion-card-content>
32+
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
33+
</ion-card-content>
34+
</ion-card>
35+
36+
<ion-list inset>
37+
38+
<ion-item *ngFor="let item of [].constructor(15); let i = index">
39+
<ion-avatar slot="start">
40+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
41+
</ion-avatar>
42+
<ion-label>
43+
Item {{ i }}
44+
</ion-label>
45+
</ion-item>
46+
</ion-list>
47+
<div style="display: block; height: 72px"></div>
48+
</ion-content>
49+
</lib-ionic-pullup>

‎src/app/tab2/tab2.page.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
1+
ion-content.main {
2+
--padding-start: 16px;
3+
--padding-end: 16px;
4+
}

‎src/app/tab2/tab2.page.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
2+
import { IonPullUpFooterState } from 'ionic-pullup';
23

34
@Component({
45
selector: 'app-tab2',
56
templateUrl: 'tab2.page.html',
67
styleUrls: ['tab2.page.scss']
78
})
8-
export class Tab2Page {
9+
export class Tab2Page implements OnInit {
10+
11+
footerState: IonPullUpFooterState;
912

1013
constructor() {}
1114

15+
ngOnInit() {
16+
this.footerState = IonPullUpFooterState.Collapsed;
17+
}
18+
19+
toggleFooter() {
20+
this.footerState = this.footerState === IonPullUpFooterState.Collapsed ? IonPullUpFooterState.Expanded : IonPullUpFooterState.Collapsed;
21+
}
22+
1223
}

‎src/app/tabs/tabs-routing.module.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,6 @@ const routes: Routes = [
2727
}
2828
]
2929
},
30-
{
31-
path: 'tab3',
32-
children: [
33-
{
34-
path: '',
35-
loadChildren: () =>
36-
import('../tab3/tab3.module').then(m => m.Tab3PageModule)
37-
}
38-
]
39-
},
4030
{
4131
path: '',
4232
redirectTo: '/tabs/tab1',

‎src/app/tabs/tabs.page.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@
1111
<ion-label>Tab Two</ion-label>
1212
</ion-tab-button>
1313

14-
<ion-tab-button tab="tab3">
15-
<ion-icon name="send"></ion-icon>
16-
<ion-label>Tab Three</ion-label>
17-
</ion-tab-button>
1814
</ion-tab-bar>
1915

2016
</ion-tabs>

0 commit comments

Comments
 (0)