mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(): wrap templates in <ion-page>
This commit is contained in:
Dan Bucholtz
@ -30,6 +30,24 @@
|
|||||||
</ion-col>
|
</ion-col>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
|
|
||||||
|
<ion-row>
|
||||||
|
<ion-col>
|
||||||
|
<h2>Search Input</h2>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-col>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>Ionic Text Input</ion-label>
|
||||||
|
<ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10"></ion-searchbar>
|
||||||
|
</ion-item>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col>
|
||||||
|
Value:
|
||||||
|
<span id="searchOutput">{{searchValue}}</span>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
|
||||||
<ion-row>
|
<ion-row>
|
||||||
<ion-col>
|
<ion-col>
|
||||||
<h2>Numeric Input</h2>
|
<h2>Numeric Input</h2>
|
||||||
@ -168,6 +186,25 @@
|
|||||||
<ion-col>
|
<ion-col>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
|
|
||||||
|
<ion-row>
|
||||||
|
<ion-col>
|
||||||
|
<h2>Segment</h2>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
<ion-row>
|
||||||
|
<ion-col>
|
||||||
|
<ion-segment [(ngModel)]="segmentValue" >
|
||||||
|
<ion-segment-button value="taco"></ion-segment-button>
|
||||||
|
<ion-segment-button value="burrito"></ion-segment-button>
|
||||||
|
<ion-segment-button value="enchilada"></ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col>
|
||||||
|
Value:
|
||||||
|
<span >{{segmentValue}}</span>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
</ion-grid>
|
</ion-grid>
|
||||||
|
|
||||||
<a href='home'>Home</a>
|
<a href='home'>Home</a>
|
||||||
|
|||||||
@ -68,7 +68,7 @@
|
|||||||
"autoprefixer": "6.7.7",
|
"autoprefixer": "6.7.7",
|
||||||
"chalk": "2.2.2",
|
"chalk": "2.2.2",
|
||||||
"circular-dependency-plugin": "4.3.0",
|
"circular-dependency-plugin": "4.3.0",
|
||||||
"common-tags": "1.6.0",
|
"common-tags": "1.7.0",
|
||||||
"copy-webpack-plugin": "4.3.1",
|
"copy-webpack-plugin": "4.3.1",
|
||||||
"core-object": "3.1.5",
|
"core-object": "3.1.5",
|
||||||
"css-loader": "0.28.8",
|
"css-loader": "0.28.8",
|
||||||
@ -284,17 +284,17 @@
|
|||||||
"integrity": "sha512-i2j2J9KIobCqyX6LlrlYhaHgd7qmP1pzHs4XAthHgth8m6c4gsHsh+Pl3fqknD7AX18ghpqo3tVtv0EFhSFU3w=="
|
"integrity": "sha512-i2j2J9KIobCqyX6LlrlYhaHgd7qmP1pzHs4XAthHgth8m6c4gsHsh+Pl3fqknD7AX18ghpqo3tVtv0EFhSFU3w=="
|
||||||
},
|
},
|
||||||
"@ionic/angular": {
|
"@ionic/angular": {
|
||||||
"version": "0.0.2-16",
|
"version": "0.0.2-17",
|
||||||
"resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-16.tgz",
|
"resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-17.tgz",
|
||||||
"integrity": "sha512-9ZS3GgO8X9G/df/2Pi9vZPgNyDYvsn2ees10Mt2u84SJC5Gf1OhbkLGiPbwVsOAxQV1qOgGCl50TXaXErNZj+A==",
|
"integrity": "sha512-o2w2l7Mc7CAsSdC/d268ODDqD0HQ+gxP9V0RTpcS+E0jBEXybOW5dG/a75fT7uccdxeiscTv3XkzsyQBCIJwYA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@stencil/core": "0.1.1-0"
|
"@stencil/core": "0.1.1-0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@ionic/core": {
|
"@ionic/core": {
|
||||||
"version": "0.0.2-39",
|
"version": "0.0.2-41",
|
||||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-39.tgz",
|
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-41.tgz",
|
||||||
"integrity": "sha512-v+dOmZjV3HAn26cBITBl7LqZXV4XOdeFwZR0GrlR7VHiNgC6HBGBtlF2/yOlnHuU5KPzTZLSVbia9BwmytCt4g=="
|
"integrity": "sha512-7mBe4RbrvD+LDL5HaEsWe5p2WDM4xf4vE+cMHNzPmqFN6lx60c3XkA1twVXZBjfcarYTCqne3SvbbHGfOrkS9w=="
|
||||||
},
|
},
|
||||||
"@ionic/storage": {
|
"@ionic/storage": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
@ -1503,9 +1503,9 @@
|
|||||||
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
|
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
|
||||||
},
|
},
|
||||||
"common-tags": {
|
"common-tags": {
|
||||||
"version": "1.6.0",
|
"version": "1.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.0.tgz",
|
||||||
"integrity": "sha512-sgmgEodNLbxnSSoR5a2xH23CoDJ9J5MKsJS/tqplfmJLpikG0oWMpAb+tM8ERQCMpp9I+ERf6SYl158G6GwX0w==",
|
"integrity": "sha512-A63PFbYd8ccyVZbqZkWjQ9+BqSaROt/BCNesdhZZNjvUXx1U59fA+XDeaIJWqrgPsoIdmYds1qofDNDvrffw9Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"babel-runtime": "6.26.0"
|
"babel-runtime": "6.26.0"
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-menu>
|
</ion-menu>
|
||||||
|
|
||||||
<ion-nav #nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav>
|
<ion-nav #nav #content swipeBackEnabled="false" main name="app"></ion-nav>
|
||||||
|
|
||||||
</ion-split-pane>
|
</ion-split-pane>
|
||||||
|
|
||||||
|
|||||||
@ -69,12 +69,15 @@ export class AppComponent implements OnInit {
|
|||||||
// Check if the user has already seen the tutorial
|
// Check if the user has already seen the tutorial
|
||||||
this.storage.get('hasSeenTutorial')
|
this.storage.get('hasSeenTutorial')
|
||||||
.then((hasSeenTutorial) => {
|
.then((hasSeenTutorial) => {
|
||||||
|
console.log('hasSeenTutorial: ', hasSeenTutorial);
|
||||||
if (hasSeenTutorial) {
|
if (hasSeenTutorial) {
|
||||||
this.rootPage = TabsPage;
|
this.rootPage = TabsPage;
|
||||||
} else {
|
} else {
|
||||||
this.rootPage = TutorialPage;
|
this.rootPage = TutorialPage;
|
||||||
}
|
}
|
||||||
// this.platformReady()
|
getNav(this.navRef).then((nav) => {
|
||||||
|
nav.setRoot(this.rootPage);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// load the conference data
|
// load the conference data
|
||||||
@ -121,7 +124,9 @@ export class AppComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
openTutorial() {
|
openTutorial() {
|
||||||
return getNav(this.navRef).setRoot(TutorialPage);
|
return getNav(this.navRef).then((navElement) => {
|
||||||
|
navElement.setRoot(TutorialPage);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
listenToLoginEvents() {
|
listenToLoginEvents() {
|
||||||
@ -145,7 +150,7 @@ export class AppComponent implements OnInit {
|
|||||||
|
|
||||||
isActive(page: PageInterface) {
|
isActive(page: PageInterface) {
|
||||||
return 'primary';
|
return 'primary';
|
||||||
//const childNav = getNav(this.navRef).getChildNavs()[0];
|
// const childNav = getNav(this.navRef).getChildNavs()[0];
|
||||||
|
|
||||||
// Tabs are a special case because they have their own navigation
|
// Tabs are a special case because they have their own navigation
|
||||||
/*if (childNav) {
|
/*if (childNav) {
|
||||||
@ -163,8 +168,10 @@ export class AppComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNav(elementRef: ElementRef) {
|
function getNav(elementRef: ElementRef): Promise<HTMLIonNavElement> {
|
||||||
return elementRef.nativeElement as HTMLIonNavElement;
|
return (elementRef.nativeElement as any).componentOnReady().then(() => {
|
||||||
|
return elementRef.nativeElement as HTMLIonNavElement;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PageInterface {
|
export interface PageInterface {
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import { App } from '@ionic/angular';
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
template: `
|
template: `
|
||||||
|
<ion-page>
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-item (click)="close('http://ionicframework.com/docs/v2/getting-started')">
|
<ion-item (click)="close('http://ionicframework.com/docs/v2/getting-started')">
|
||||||
<ion-label>Learn Ionic</ion-label>
|
<ion-label>Learn Ionic</ion-label>
|
||||||
@ -23,6 +24,7 @@ import { App } from '@ionic/angular';
|
|||||||
<ion-label>Support</ion-label>
|
<ion-label>Support</ion-label>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
</ion-page>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
export class PopoverPage {
|
export class PopoverPage {
|
||||||
|
|||||||
@ -1,52 +1,54 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-button menuToggle> <!-- TODO menuToggle -->
|
<ion-toolbar>
|
||||||
<ion-icon name="menu"></ion-icon>
|
<ion-button menuToggle> <!-- TODO menuToggle -->
|
||||||
</ion-button>
|
<ion-icon name="menu"></ion-icon>
|
||||||
<ion-title>About</ion-title>
|
|
||||||
|
|
||||||
<ion-buttons slot="end">
|
|
||||||
<ion-button slot="icon-only" (click)="presentPopover($event)">
|
|
||||||
<ion-icon name="more" style="width: 20px"></ion-icon> <!-- TODO remove temporary width style -->
|
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</ion-buttons>
|
<ion-title>About</ion-title>
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-content>
|
<ion-buttons slot="end">
|
||||||
<div class="about-header">
|
<ion-button slot="icon-only" (click)="presentPopover($event)">
|
||||||
<img src="assets/img/ionic-logo-white.svg" alt="ionic logo">
|
<ion-icon name="more" style="width: 20px"></ion-icon> <!-- TODO remove temporary width style -->
|
||||||
</div>
|
</ion-button>
|
||||||
<div padding class="about-info">
|
</ion-buttons>
|
||||||
<h4>Ionic Conference</h4>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-list no-lines>
|
<ion-content>
|
||||||
<ion-item>
|
<div class="about-header">
|
||||||
<ion-icon name="calendar" slot="start"></ion-icon>
|
<img src="assets/img/ionic-logo-white.svg" alt="ionic logo">
|
||||||
<ion-label>Date</ion-label>
|
</div>
|
||||||
<ion-datetime displayFormat="MMM DD, YYYY" max="2056" [(ngModel)]="conferenceDate"></ion-datetime>
|
<div padding class="about-info">
|
||||||
</ion-item>
|
<h4>Ionic Conference</h4>
|
||||||
|
|
||||||
<ion-item>
|
<ion-list no-lines>
|
||||||
<ion-icon name="pin" slot="start"></ion-icon>
|
<ion-item>
|
||||||
<ion-label>Location</ion-label>
|
<ion-icon name="calendar" slot="start"></ion-icon>
|
||||||
<ion-select>
|
<ion-label>Date</ion-label>
|
||||||
<ion-select-option value="madison" selected>Madison, WI</ion-select-option>
|
<ion-datetime displayFormat="MMM DD, YYYY" max="2056" [(ngModel)]="conferenceDate"></ion-datetime>
|
||||||
<ion-select-option value="austin">Austin, TX</ion-select-option>
|
</ion-item>
|
||||||
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
|
|
||||||
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
|
|
||||||
</ion-select>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
|
||||||
|
|
||||||
<p>
|
<ion-item>
|
||||||
The Ionic Conference is a one-day conference featuring talks from the
|
<ion-icon name="pin" slot="start"></ion-icon>
|
||||||
Ionic team. It is focused on Ionic applications being built with
|
<ion-label>Location</ion-label>
|
||||||
Ionic 2. This includes migrating apps from Ionic 1 to Ionic 2,
|
<ion-select>
|
||||||
Angular concepts, Webpack, Sass, and many other technologies used
|
<ion-select-option value="madison" selected>Madison, WI</ion-select-option>
|
||||||
in Ionic 2. Tickets are completely sold out, and we’re expecting
|
<ion-select-option value="austin">Austin, TX</ion-select-option>
|
||||||
more than 1000 developers – making this the largest Ionic
|
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
|
||||||
conference ever!
|
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
|
||||||
</p>
|
</ion-select>
|
||||||
</div>
|
</ion-item>
|
||||||
</ion-content>
|
</ion-list>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The Ionic Conference is a one-day conference featuring talks from the
|
||||||
|
Ionic team. It is focused on Ionic applications being built with
|
||||||
|
Ionic 2. This includes migrating apps from Ionic 1 to Ionic 2,
|
||||||
|
Angular concepts, Webpack, Sass, and many other technologies used
|
||||||
|
in Ionic 2. Tickets are completely sold out, and we’re expecting
|
||||||
|
more than 1000 developers – making this the largest Ionic
|
||||||
|
conference ever!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,25 +1,27 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-buttons slot="start">
|
<ion-toolbar>
|
||||||
<ion-button> <!-- TODO menuToggle -->
|
<ion-buttons slot="start">
|
||||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
<ion-button> <!-- TODO menuToggle -->
|
||||||
</ion-button>
|
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||||
</ion-buttons>
|
</ion-button>
|
||||||
<ion-title>Account</ion-title>
|
</ion-buttons>
|
||||||
</ion-toolbar>
|
<ion-title>Account</ion-title>
|
||||||
</ion-header>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-content class="outer-content">
|
<ion-content class="outer-content">
|
||||||
<div padding-top text-center *ngIf="username">
|
<div padding-top text-center *ngIf="username">
|
||||||
<img src="http://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
|
<img src="http://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
|
||||||
<h2>{{username}}</h2>
|
<h2>{{username}}</h2>
|
||||||
|
|
||||||
<ion-list inset>
|
<ion-list inset>
|
||||||
<ion-item (click)="updatePicture()">Update Picture</ion-item>
|
<ion-item (click)="updatePicture()">Update Picture</ion-item>
|
||||||
<ion-item (click)="changeUsername()">Change Username</ion-item>
|
<ion-item (click)="changeUsername()">Change Username</ion-item>
|
||||||
<ion-item (click)="changePassword()">Change Password</ion-item>
|
<ion-item (click)="changePassword()">Change Password</ion-item>
|
||||||
<ion-item (click)="support()">Support</ion-item>
|
<ion-item (click)="support()">Support</ion-item>
|
||||||
<ion-item (click)="logout()">Logout</ion-item>
|
<ion-item (click)="logout()">Logout</ion-item>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,50 +1,52 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-buttons slot="start">
|
<ion-toolbar>
|
||||||
<ion-button> <!-- TODO menu toggle -->
|
<ion-buttons slot="start">
|
||||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
<ion-button> <!-- TODO menu toggle -->
|
||||||
</ion-button>
|
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||||
</ion-buttons>
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
|
||||||
<ion-title>Login</ion-title>
|
<ion-title>Login</ion-title>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="assets/img/appicon.svg" alt="Ionic logo">
|
<img src="assets/img/appicon.svg" alt="Ionic logo">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form #loginForm="ngForm" novalidate>
|
<form #loginForm="ngForm" novalidate>
|
||||||
<ion-list no-lines>
|
<ion-list no-lines>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label stacked color="primary">Username</ion-label>
|
<ion-label stacked color="primary">Username</ion-label>
|
||||||
<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
|
<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
|
||||||
required>
|
required>
|
||||||
</ion-input>
|
</ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
|
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
|
||||||
Username is required
|
Username is required
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label stacked color="primary">Password</ion-label>
|
<ion-label stacked color="primary">Password</ion-label>
|
||||||
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
|
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
|
||||||
</ion-input>
|
</ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
|
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
|
||||||
Password is required
|
Password is required
|
||||||
</p>
|
</p>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
<ion-row responsive-sm>
|
<ion-row responsive-sm>
|
||||||
<ion-col>
|
<ion-col>
|
||||||
<button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
|
<button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
<ion-col>
|
<ion-col>
|
||||||
<button ion-button (click)="onSignup()" color="light" block>Signup</button>
|
<button ion-button (click)="onSignup()" color="light" block>Signup</button>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,12 +1,14 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-button menuToggle>
|
<ion-toolbar>
|
||||||
<ion-icon name="menu"></ion-icon>
|
<ion-button menuToggle>
|
||||||
</ion-button>
|
<ion-icon name="menu"></ion-icon>
|
||||||
<ion-title>Map</ion-title>
|
</ion-button>
|
||||||
</ion-toolbar>
|
<ion-title>Map</ion-title>
|
||||||
</ion-header>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-content class="map-page">
|
<ion-content class="map-page">
|
||||||
<div #mapCanvas class="map-canvas"></div>
|
<div #mapCanvas class="map-canvas"></div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,36 +1,38 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-buttons slot="start">
|
<ion-toolbar>
|
||||||
<ion-button (click)="dismiss()">Cancel</ion-button>
|
<ion-buttons slot="start">
|
||||||
</ion-buttons>
|
<ion-button (click)="dismiss()">Cancel</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
|
||||||
<ion-title>
|
<ion-title>
|
||||||
Filter Sessions
|
Filter Sessions
|
||||||
</ion-title>
|
</ion-title>
|
||||||
|
|
||||||
<ion-buttons slot="end">
|
<ion-buttons slot="end">
|
||||||
<ion-button (click)="applyFilters()" strong>Done</ion-button>
|
<ion-button (click)="applyFilters()" strong>Done</ion-button>
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content class="outer-content">
|
<ion-content class="outer-content">
|
||||||
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-list-header>Tracks</ion-list-header>
|
<ion-list-header>Tracks</ion-list-header>
|
||||||
|
|
||||||
<ion-item *ngFor="let track of tracks" [attr.track]="track.name | lowercase">
|
<ion-item *ngFor="let track of tracks" [attr.track]="track.name | lowercase">
|
||||||
<span slot="start" class="dot"></span>
|
<span slot="start" class="dot"></span>
|
||||||
<ion-label>{{track.name}}</ion-label>
|
<ion-label>{{track.name}}</ion-label>
|
||||||
<ion-toggle [(ngModel)]="track.isChecked" color="secondary"></ion-toggle>
|
<ion-toggle [(ngModel)]="track.isChecked" color="secondary"></ion-toggle>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-item (click)="resetFilters()" detail-none class="reset-filters">
|
<ion-item (click)="resetFilters()" detail-none class="reset-filters">
|
||||||
Reset All Filters
|
Reset All Filters
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,64 +1,67 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-buttons slot="start">
|
<ion-toolbar>
|
||||||
<ion-button> <!-- TODO menu toggle -->
|
<ion-buttons slot="start">
|
||||||
Menu
|
<ion-button> <!-- TODO menu toggle -->
|
||||||
</ion-button>
|
Menu
|
||||||
</ion-buttons>
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
|
||||||
|
|
||||||
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
|
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
|
||||||
<ion-segment-button value="all">
|
<ion-segment-button value="all">
|
||||||
All
|
All
|
||||||
</ion-segment-button>
|
</ion-segment-button>
|
||||||
<ion-segment-button value="favorites">
|
<ion-segment-button value="favorites">
|
||||||
Favorites
|
Favorites
|
||||||
</ion-segment-button>
|
</ion-segment-button>
|
||||||
</ion-segment>
|
</ion-segment>
|
||||||
|
|
||||||
<ion-buttons slot="end">
|
<ion-buttons slot="end">
|
||||||
<ion-button (click)="presentFilter()" slot="icon-only">
|
<ion-button (click)="presentFilter()" slot="icon-only">
|
||||||
<!--<ion-icon ios="ios-options-outline" md="md-options"></ion-icon> -->
|
<!--<ion-icon ios="ios-options-outline" md="md-options"></ion-icon> -->
|
||||||
Filter
|
Filter
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
|
|
||||||
<ion-toolbar no-border-top>
|
<ion-toolbar no-border-top>
|
||||||
<ion-searchbar color="primary"
|
<ion-searchbar color="primary"
|
||||||
[(ngModel)]="queryText"
|
[(ngModel)]="queryText"
|
||||||
(ionInput)="updateSchedule()"
|
(ionInput)="updateSchedule()"
|
||||||
placeholder="Search">
|
placeholder="Search">
|
||||||
</ion-searchbar>
|
</ion-searchbar>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<ion-list #scheduleList [hidden]="shownSessions === 0">
|
Segment value is: {{segment}}
|
||||||
<div *ngFor="let group of groups" [hidden]="group.hide"> <!-- TODO should be ion-item-wrapper or whatever its called -->
|
<ion-list #scheduleList [hidden]="shownSessions === 0">
|
||||||
<ion-item-divider sticky>
|
<div *ngFor="let group of groups" [hidden]="group.hide"> <!-- TODO should be ion-item-wrapper or whatever its called -->
|
||||||
<ion-label>
|
<ion-item-divider sticky>
|
||||||
{{group.time}}
|
<ion-label>
|
||||||
</ion-label>
|
{{group.time}}
|
||||||
</ion-item-divider>
|
</ion-label>
|
||||||
<ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">
|
</ion-item-divider>
|
||||||
|
<ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">
|
||||||
|
|
||||||
<ion-item (click)="goToSessionDetail(session)">
|
<ion-item (click)="goToSessionDetail(session)">
|
||||||
<h3>{{session.name}}</h3>
|
<h3>{{session.name}}</h3>
|
||||||
<p>
|
<p>
|
||||||
{{session.timeStart}} —
|
{{session.timeStart}} —
|
||||||
{{session.timeEnd}}:
|
{{session.timeEnd}}:
|
||||||
{{session.location}}
|
{{session.location}}
|
||||||
</p>
|
</p>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item-options>
|
<ion-item-options>
|
||||||
<ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
|
<ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
|
||||||
Favorite
|
Favorite
|
||||||
</ion-item-option>
|
</ion-item-option>
|
||||||
<ion-item-option color="danger" click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
|
<ion-item-option color="danger" click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
|
||||||
Remove
|
Remove
|
||||||
</ion-item-option>
|
</ion-item-option>
|
||||||
</ion-item-options>
|
</ion-item-options>
|
||||||
</ion-item-sliding>
|
</ion-item-sliding>
|
||||||
</div>
|
</div>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,19 +1,21 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-title *ngIf="session">{{session.name}}</ion-title>
|
<ion-toolbar>
|
||||||
</ion-toolbar>
|
<ion-title *ngIf="session">{{session.name}}</ion-title>
|
||||||
</ion-header>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-content padding>
|
<ion-content padding>
|
||||||
<div *ngIf="session">
|
<div *ngIf="session">
|
||||||
<h1>{{session.name}}</h1>
|
<h1>{{session.name}}</h1>
|
||||||
<h4 *ngFor="let speaker of session?.speakers">
|
<h4 *ngFor="let speaker of session?.speakers">
|
||||||
{{speaker.name}}
|
{{speaker.name}}
|
||||||
</h4>
|
</h4>
|
||||||
<p>
|
<p>
|
||||||
{{session.timeStart}} - {{session.timeEnd}}
|
{{session.timeStart}} - {{session.timeEnd}}
|
||||||
</p>
|
</p>
|
||||||
<p>{{session.location}}</p>
|
<p>{{session.location}}</p>
|
||||||
<p>{{session.description}}</p>
|
<p>{{session.description}}</p>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,44 +1,46 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-buttons slot="start">
|
<ion-toolbar>
|
||||||
<ion-button> <!-- TODO menuToggle -->
|
<ion-buttons slot="start">
|
||||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
<ion-button> <!-- TODO menuToggle -->
|
||||||
</ion-button>
|
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||||
</ion-buttons>
|
</ion-button>
|
||||||
<ion-title>Signup</ion-title>
|
</ion-buttons>
|
||||||
</ion-toolbar>
|
<ion-title>Signup</ion-title>
|
||||||
</ion-header>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-content class="login-page">
|
<ion-content class="login-page">
|
||||||
|
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="assets/img/appicon.svg" alt="Ionic Logo">
|
<img src="assets/img/appicon.svg" alt="Ionic Logo">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form #signupForm="ngForm" novalidate>
|
<form #signupForm="ngForm" novalidate>
|
||||||
<ion-list no-lines>
|
<ion-list no-lines>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label stacked color="primary">Username</ion-label>
|
<ion-label stacked color="primary">Username</ion-label>
|
||||||
<ion-input [(ngModel)]="signup.username" name="username" type="text" #username="ngModel" required>
|
<ion-input [(ngModel)]="signup.username" name="username" type="text" #username="ngModel" required>
|
||||||
</ion-input>
|
</ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
|
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
|
||||||
Username is required
|
Username is required
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-label stacked color="primary">Password</ion-label>
|
<ion-label stacked color="primary">Password</ion-label>
|
||||||
<ion-input [(ngModel)]="signup.password" name="password" type="password" #password="ngModel" required>
|
<ion-input [(ngModel)]="signup.password" name="password" type="password" #password="ngModel" required>
|
||||||
</ion-input>
|
</ion-input>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
|
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
|
||||||
Password is required
|
Password is required
|
||||||
</p>
|
</p>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
<div padding>
|
<div padding>
|
||||||
<ion-button (click)="onSignup(signupForm)" type="submit" block>Create</ion-button>
|
<ion-button (click)="onSignup(signupForm)" type="submit" block>Create</ion-button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,23 +1,25 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-title>{{speaker?.name}}</ion-title>
|
<ion-toolbar>
|
||||||
</ion-toolbar>
|
<ion-title>{{speaker?.name}}</ion-title>
|
||||||
</ion-header>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-content padding class="speaker-detail">
|
<ion-content padding class="speaker-detail">
|
||||||
<div text-center *ngIf="speaker">
|
<div text-center *ngIf="speaker">
|
||||||
<img [src]="speaker.profilePic" [alt]="speaker.name"><br>
|
<img [src]="speaker.profilePic" [alt]="speaker.name"><br>
|
||||||
|
|
||||||
<ion-button clear small color="twitter">
|
<ion-button clear small color="twitter">
|
||||||
<ion-icon name="logo-twitter" slot="icon-only"></ion-icon>
|
<ion-icon name="logo-twitter" slot="icon-only"></ion-icon>
|
||||||
</ion-button>
|
</ion-button>
|
||||||
<ion-button clear small color="github">
|
<ion-button clear small color="github">
|
||||||
<ion-icon name="logo-github" slot="icon-only"></ion-icon>
|
<ion-icon name="logo-github" slot="icon-only"></ion-icon>
|
||||||
</ion-button>
|
</ion-button>
|
||||||
<ion-button clear small color="instagram">
|
<ion-button clear small color="instagram">
|
||||||
<ion-icon name="logo-instagram" slot="icon-only"></ion-icon>
|
<ion-icon name="logo-instagram" slot="icon-only"></ion-icon>
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>{{speaker?.about}}</p>
|
<p>{{speaker?.about}}</p>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,66 +1,68 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header>
|
||||||
<ion-button menuToggle>
|
<ion-toolbar>
|
||||||
<ion-icon name="menu"></ion-icon>
|
<ion-button menuToggle>
|
||||||
</ion-button>
|
<ion-icon name="menu"></ion-icon>
|
||||||
<ion-title>Speakers</ion-title>
|
</ion-button>
|
||||||
</ion-toolbar>
|
<ion-title>Speakers</ion-title>
|
||||||
</ion-header>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-content class="outer-content speaker-list">
|
<ion-content class="outer-content speaker-list">
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-grid fixed>
|
<ion-grid fixed>
|
||||||
<ion-row align-items-stretch>
|
<ion-row align-items-stretch>
|
||||||
|
|
||||||
<ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers" approxItemHeight="457px">
|
<ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers" approxItemHeight="457px">
|
||||||
|
|
||||||
<ion-card class="speaker-card">
|
<ion-card class="speaker-card">
|
||||||
<ion-card-header>
|
<ion-card-header>
|
||||||
<ion-item detail-none (click)="goToSpeakerDetail(speaker)">
|
<ion-item detail-none (click)="goToSpeakerDetail(speaker)">
|
||||||
<ion-avatar slot="start">
|
<ion-avatar slot="start">
|
||||||
<img [src]="speaker.profilePic" alt="Speaker profile pic">
|
<img [src]="speaker.profilePic" alt="Speaker profile pic">
|
||||||
</ion-avatar>
|
</ion-avatar>
|
||||||
{{speaker.name}}
|
{{speaker.name}}
|
||||||
</ion-item>
|
|
||||||
</ion-card-header>
|
|
||||||
|
|
||||||
<ion-card-content class="outer-content">
|
|
||||||
<ion-list>
|
|
||||||
<ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
|
|
||||||
<h3>{{session.name}}</h3>
|
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
</ion-card-header>
|
||||||
|
|
||||||
<ion-item (click)="goToSpeakerDetail(speaker)">
|
<ion-card-content class="outer-content">
|
||||||
<h3>About {{speaker.name}}</h3>
|
<ion-list>
|
||||||
</ion-item>
|
<ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
|
||||||
</ion-list>
|
<h3>{{session.name}}</h3>
|
||||||
</ion-card-content>
|
</ion-item>
|
||||||
|
|
||||||
<ion-row no-padding>
|
<ion-item (click)="goToSpeakerDetail(speaker)">
|
||||||
<ion-col col-12 col-lg-auto text-center text-lg-left>
|
<h3>About {{speaker.name}}</h3>
|
||||||
<ion-button clear small color="primary"(click)="goToSpeakerTwitter(speaker)">
|
</ion-item>
|
||||||
<ion-icon name="logo-twitter" slot="start"></ion-icon>
|
</ion-list>
|
||||||
Tweet
|
</ion-card-content>
|
||||||
</ion-button>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-12 col-lg-auto text-center>
|
|
||||||
<ion-button clear small color="primary" (click)="openSpeakerShare(speaker)">
|
|
||||||
<ion-icon name='share-alt' slit="start"></ion-icon>
|
|
||||||
Share
|
|
||||||
</ion-button>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-12 col-lg-auto text-center text-lg-right>
|
|
||||||
<ion-button clear small color="primary" (click)="openContact(speaker)">
|
|
||||||
<ion-icon name='chatboxes' slot="start"></ion-icon>
|
|
||||||
Contact
|
|
||||||
</ion-button>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
|
|
||||||
</ion-card>
|
<ion-row no-padding>
|
||||||
|
<ion-col col-12 col-lg-auto text-center text-lg-left>
|
||||||
|
<ion-button clear small color="primary"(click)="goToSpeakerTwitter(speaker)">
|
||||||
|
<ion-icon name="logo-twitter" slot="start"></ion-icon>
|
||||||
|
Tweet
|
||||||
|
</ion-button>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col col-12 col-lg-auto text-center>
|
||||||
|
<ion-button clear small color="primary" (click)="openSpeakerShare(speaker)">
|
||||||
|
<ion-icon name='share-alt' slit="start"></ion-icon>
|
||||||
|
Share
|
||||||
|
</ion-button>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col col-12 col-lg-auto text-center text-lg-right>
|
||||||
|
<ion-button clear small color="primary" (click)="openContact(speaker)">
|
||||||
|
<ion-icon name='chatboxes' slot="start"></ion-icon>
|
||||||
|
Contact
|
||||||
|
</ion-button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
|
||||||
</ion-col>
|
</ion-card>
|
||||||
</ion-row>
|
|
||||||
</ion-grid>
|
</ion-col>
|
||||||
</ion-list>
|
</ion-row>
|
||||||
</ion-content>
|
</ion-grid>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
@ -1,35 +1,36 @@
|
|||||||
<ion-header>
|
<ion-page>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-button> <!-- TODO menuToggle -->
|
||||||
|
<ion-icon slot="start" name="menu"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Support</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
<ion-toolbar>
|
</ion-header>
|
||||||
<ion-buttons slot="start">
|
|
||||||
<ion-button> <!-- TODO menuToggle -->
|
|
||||||
<ion-icon slot="start" name="menu"></ion-icon>
|
|
||||||
</ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
<ion-title>Support</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
|
|
||||||
</ion-header>
|
<ion-content>
|
||||||
|
<div class="logo">
|
||||||
|
<img src="assets/img/appicon.svg" alt="Ionic Logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
<ion-content>
|
<form #submitForm="ngForm" novalidate (ngSubmit)="submit(submitForm)">
|
||||||
<div class="logo">
|
<ion-list no-lines>
|
||||||
<img src="assets/img/appicon.svg" alt="Ionic Logo">
|
<ion-item>
|
||||||
</div>
|
<ion-label stacked color="primary">Enter your support message below</ion-label>
|
||||||
|
<ion-textarea [(ngModel)]="supportMessage" name="supportQuestion" #supportQuestion="ngModel" rows="6" required></ion-textarea>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
|
||||||
<form #submitForm="ngForm" novalidate (ngSubmit)="submit(submitForm)">
|
<p ion-text [hidden]="supportQuestion.valid || submitted === false" color="danger" padding-left>
|
||||||
<ion-list no-lines>
|
Support message is required
|
||||||
<ion-item>
|
</p>
|
||||||
<ion-label stacked color="primary">Enter your support message below</ion-label>
|
|
||||||
<ion-textarea [(ngModel)]="supportMessage" name="supportQuestion" #supportQuestion="ngModel" rows="6" required></ion-textarea>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
|
||||||
|
|
||||||
<p ion-text [hidden]="supportQuestion.valid || submitted === false" color="danger" padding-left>
|
<div padding>
|
||||||
Support message is required
|
<ion-button block type="submit">Submit</ion-button>
|
||||||
</p>
|
</div>
|
||||||
|
</form>
|
||||||
<div padding>
|
</ion-content>
|
||||||
<ion-button block type="submit">Submit</ion-button>
|
</ion-page>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</ion-content>
|
|
||||||
@ -1,14 +1,16 @@
|
|||||||
<ion-tabs name="conference">
|
<ion-page>
|
||||||
<ion-tab title="Schedule" icon="calendar">
|
<ion-tabs name="conference">
|
||||||
<ion-nav [root]="tab1Root"></ion-nav>
|
<ion-tab title="Schedule" icon="calendar">
|
||||||
</ion-tab>
|
<ion-nav [root]="tab1Root"></ion-nav>
|
||||||
<ion-tab title="Speakers" icon="contacts">
|
</ion-tab>
|
||||||
<ion-nav [root]="tab2Root"></ion-nav>
|
<ion-tab title="Speakers" icon="contacts">
|
||||||
</ion-tab>
|
<ion-nav [root]="tab2Root"></ion-nav>
|
||||||
<ion-tab title="Map" icon="map">
|
</ion-tab>
|
||||||
<ion-nav [root]="tab3Root"></ion-nav>
|
<ion-tab title="Map" icon="map">
|
||||||
</ion-tab>
|
<ion-nav [root]="tab3Root"></ion-nav>
|
||||||
<ion-tab title="About" icon="information-circle">
|
</ion-tab>
|
||||||
<ion-nav [root]="tab4Root"></ion-nav>
|
<ion-tab title="About" icon="information-circle">
|
||||||
</ion-tab>
|
<ion-nav [root]="tab4Root"></ion-nav>
|
||||||
</ion-tabs>
|
</ion-tab>
|
||||||
|
</ion-tabs>
|
||||||
|
</ion-page>
|
||||||
@ -1,44 +1,46 @@
|
|||||||
<ion-header no-border>
|
<ion-page>
|
||||||
<ion-toolbar>
|
<ion-header no-border>
|
||||||
<ion-buttons slot="end" end *ngIf="showSkip">
|
<ion-toolbar>
|
||||||
<ion-button (click)="startApp()" color="primary">Skip</ion-button>
|
<ion-buttons slot="end" end *ngIf="showSkip">
|
||||||
</ion-buttons>
|
<ion-button (click)="startApp()" color="primary">Skip</ion-button>
|
||||||
</ion-toolbar>
|
</ion-buttons>
|
||||||
</ion-header>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
<ion-content no-bounce>
|
<ion-content no-bounce>
|
||||||
<ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager>
|
<ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager>
|
||||||
|
|
||||||
<ion-slide>
|
<ion-slide>
|
||||||
<img src="assets/img/ica-slidebox-img-1.png" class="slide-image"/>
|
<img src="assets/img/ica-slidebox-img-1.png" class="slide-image"/>
|
||||||
<h2 class="slide-title">
|
<h2 class="slide-title">
|
||||||
Welcome to <b>ICA</b>
|
Welcome to <b>ICA</b>
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
|
The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
|
||||||
</p>
|
</p>
|
||||||
</ion-slide>
|
</ion-slide>
|
||||||
|
|
||||||
<ion-slide>
|
<ion-slide>
|
||||||
<img src="assets/img/ica-slidebox-img-2.png" class="slide-image"/>
|
<img src="assets/img/ica-slidebox-img-2.png" class="slide-image"/>
|
||||||
<h2 class="slide-title" >What is Ionic?</h2>
|
<h2 class="slide-title" >What is Ionic?</h2>
|
||||||
<p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
|
<p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
|
||||||
</ion-slide>
|
</ion-slide>
|
||||||
|
|
||||||
<ion-slide>
|
<ion-slide>
|
||||||
<img src="assets/img/ica-slidebox-img-3.png" class="slide-image"/>
|
<img src="assets/img/ica-slidebox-img-3.png" class="slide-image"/>
|
||||||
<h2 class="slide-title">What is Ionic Pro?</h2>
|
<h2 class="slide-title">What is Ionic Pro?</h2>
|
||||||
<p><b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
|
<p><b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
|
||||||
</ion-slide>
|
</ion-slide>
|
||||||
|
|
||||||
<ion-slide>
|
<ion-slide>
|
||||||
<img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
|
<img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
|
||||||
<h2 class="slide-title">Ready to Play?</h2>
|
<h2 class="slide-title">Ready to Play?</h2>
|
||||||
<ion-button clear="true" (click)="startApp()">
|
<ion-button clear="true" (click)="startApp()">
|
||||||
Continue
|
Continue
|
||||||
<ion-icon slot="icon-end" name="arrow-forward"></ion-icon>
|
<ion-icon slot="icon-end" name="arrow-forward"></ion-icon>
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</ion-slide>
|
</ion-slide>
|
||||||
|
|
||||||
</ion-slides>
|
</ion-slides>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
Reference in New Issue
Block a user