Initial commit
This commit is contained in:
22
src/app/app.component.ts
Normal file
22
src/app/app.component.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Platform } from 'ionic-angular';
|
||||
import { StatusBar } from '@ionic-native/status-bar';
|
||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||
|
||||
import { TabsPage } from '../pages/tabs/tabs';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'app.html'
|
||||
})
|
||||
export class MyApp {
|
||||
rootPage:any = TabsPage;
|
||||
|
||||
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
|
||||
platform.ready().then(() => {
|
||||
// Okay, so the platform is ready and our plugins are available.
|
||||
// Here you can do any higher level native things you might need.
|
||||
statusBar.styleDefault();
|
||||
splashScreen.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
1
src/app/app.html
Normal file
1
src/app/app.html
Normal file
@@ -0,0 +1 @@
|
||||
<ion-nav [root]="rootPage"></ion-nav>
|
||||
40
src/app/app.module.ts
Normal file
40
src/app/app.module.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { NgModule, ErrorHandler } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
|
||||
import { MyApp } from './app.component';
|
||||
|
||||
import { AboutPage } from '../pages/about/about';
|
||||
import { ContactPage } from '../pages/contact/contact';
|
||||
import { HomePage } from '../pages/home/home';
|
||||
import { TabsPage } from '../pages/tabs/tabs';
|
||||
|
||||
import { StatusBar } from '@ionic-native/status-bar';
|
||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
MyApp,
|
||||
AboutPage,
|
||||
ContactPage,
|
||||
HomePage,
|
||||
TabsPage
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
IonicModule.forRoot(MyApp)
|
||||
],
|
||||
bootstrap: [IonicApp],
|
||||
entryComponents: [
|
||||
MyApp,
|
||||
AboutPage,
|
||||
ContactPage,
|
||||
HomePage,
|
||||
TabsPage
|
||||
],
|
||||
providers: [
|
||||
StatusBar,
|
||||
SplashScreen,
|
||||
{provide: ErrorHandler, useClass: IonicErrorHandler}
|
||||
]
|
||||
})
|
||||
export class AppModule {}
|
||||
16
src/app/app.scss
Normal file
16
src/app/app.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
// http://ionicframework.com/docs/theming/
|
||||
|
||||
|
||||
// App Global Sass
|
||||
// --------------------------------------------------
|
||||
// Put style rules here that you want to apply globally. These
|
||||
// styles are for the entire app and not just one component.
|
||||
// Additionally, this file can be also used as an entry point
|
||||
// to import other Sass files to be included in the output CSS.
|
||||
//
|
||||
// Shared Sass variables, which can be used to adjust Ionic's
|
||||
// default Sass variables, belong in "theme/variables.scss".
|
||||
//
|
||||
// To declare rules for a specific mode, create a child rule
|
||||
// for the .md, .ios, or .wp mode classes. The mode class is
|
||||
// automatically applied to the <body> element in the app.
|
||||
5
src/app/main.ts
Normal file
5
src/app/main.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
BIN
src/assets/icon/favicon.ico
Normal file
BIN
src/assets/icon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/imgs/logo.png
Normal file
BIN
src/assets/imgs/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
49
src/index.html
Normal file
49
src/index.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic App</title>
|
||||
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="theme-color" content="#4e8ef7">
|
||||
|
||||
<!-- add to homescreen for ios -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
|
||||
<!-- cordova.js required for cordova apps (remove if not needed) -->
|
||||
<script src="cordova.js"></script>
|
||||
|
||||
<!-- un-comment this code to enable service worker
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('service-worker.js')
|
||||
.then(() => console.log('service worker installed'))
|
||||
.catch(err => console.error('Error', err));
|
||||
}
|
||||
</script>-->
|
||||
|
||||
<link href="build/main.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Ionic's root component and where the app will load -->
|
||||
<ion-app></ion-app>
|
||||
|
||||
<!-- The polyfills js is generated during the build process -->
|
||||
<script src="build/polyfills.js"></script>
|
||||
|
||||
<!-- The vendor js is generated during the build process
|
||||
It contains all of the dependencies in node_modules -->
|
||||
<script src="build/vendor.js"></script>
|
||||
|
||||
<!-- The main bundle js is generated during the build process -->
|
||||
<script src="build/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
13
src/manifest.json
Normal file
13
src/manifest.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "Ionic",
|
||||
"short_name": "Ionic",
|
||||
"start_url": "index.html",
|
||||
"display": "standalone",
|
||||
"icons": [{
|
||||
"src": "assets/imgs/logo.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}],
|
||||
"background_color": "#4e8ef7",
|
||||
"theme_color": "#4e8ef7"
|
||||
}
|
||||
11
src/pages/about/about.html
Normal file
11
src/pages/about/about.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-title>
|
||||
About
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
</ion-content>
|
||||
3
src/pages/about/about.scss
Normal file
3
src/pages/about/about.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
page-about {
|
||||
|
||||
}
|
||||
14
src/pages/about/about.ts
Normal file
14
src/pages/about/about.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NavController } from 'ionic-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-about',
|
||||
templateUrl: 'about.html'
|
||||
})
|
||||
export class AboutPage {
|
||||
|
||||
constructor(public navCtrl: NavController) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
17
src/pages/contact/contact.html
Normal file
17
src/pages/contact/contact.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-title>
|
||||
Contact
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>Follow us on Twitter</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-icon name="ionic" item-start></ion-icon>
|
||||
@ionicframework
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
3
src/pages/contact/contact.scss
Normal file
3
src/pages/contact/contact.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
page-contact {
|
||||
|
||||
}
|
||||
14
src/pages/contact/contact.ts
Normal file
14
src/pages/contact/contact.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NavController } from 'ionic-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-contact',
|
||||
templateUrl: 'contact.html'
|
||||
})
|
||||
export class ContactPage {
|
||||
|
||||
constructor(public navCtrl: NavController) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
17
src/pages/home/home.html
Normal file
17
src/pages/home/home.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-title>Home</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<h2>Welcome to Ionic!</h2>
|
||||
<p>
|
||||
This starter project comes with simple tabs-based layout for apps
|
||||
that are going to primarily use a Tabbed UI.
|
||||
</p>
|
||||
<p>
|
||||
Take a look at the <code>src/pages/</code> directory to add or change tabs,
|
||||
update any existing page or create new pages.
|
||||
</p>
|
||||
</ion-content>
|
||||
3
src/pages/home/home.scss
Normal file
3
src/pages/home/home.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
page-home {
|
||||
|
||||
}
|
||||
14
src/pages/home/home.ts
Normal file
14
src/pages/home/home.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NavController } from 'ionic-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'page-home',
|
||||
templateUrl: 'home.html'
|
||||
})
|
||||
export class HomePage {
|
||||
|
||||
constructor(public navCtrl: NavController) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
5
src/pages/tabs/tabs.html
Normal file
5
src/pages/tabs/tabs.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<ion-tabs>
|
||||
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
|
||||
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
|
||||
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
|
||||
</ion-tabs>
|
||||
19
src/pages/tabs/tabs.ts
Normal file
19
src/pages/tabs/tabs.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { AboutPage } from '../about/about';
|
||||
import { ContactPage } from '../contact/contact';
|
||||
import { HomePage } from '../home/home';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tabs.html'
|
||||
})
|
||||
export class TabsPage {
|
||||
|
||||
tab1Root = HomePage;
|
||||
tab2Root = AboutPage;
|
||||
tab3Root = ContactPage;
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
31
src/service-worker.js
Normal file
31
src/service-worker.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Check out https://googlechromelabs.github.io/sw-toolbox/ for
|
||||
* more info on how to use sw-toolbox to custom configure your service worker.
|
||||
*/
|
||||
|
||||
|
||||
'use strict';
|
||||
importScripts('./build/sw-toolbox.js');
|
||||
|
||||
self.toolbox.options.cache = {
|
||||
name: 'ionic-cache'
|
||||
};
|
||||
|
||||
// pre-cache our key assets
|
||||
self.toolbox.precache(
|
||||
[
|
||||
'./build/main.js',
|
||||
'./build/vendor.js',
|
||||
'./build/main.css',
|
||||
'./build/polyfills.js',
|
||||
'index.html',
|
||||
'manifest.json'
|
||||
]
|
||||
);
|
||||
|
||||
// dynamically cache any other local assets
|
||||
self.toolbox.router.any('/*', self.toolbox.fastest);
|
||||
|
||||
// for any other requests go to the network, cache,
|
||||
// and then only use that cached resource if your user goes offline
|
||||
self.toolbox.router.default = self.toolbox.networkFirst;
|
||||
88
src/theme/variables.scss
Normal file
88
src/theme/variables.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
// Ionic Variables and Theming. For more info, please see:
|
||||
// http://ionicframework.com/docs/theming/
|
||||
|
||||
// Font path is used to include ionicons,
|
||||
// roboto, and noto sans fonts
|
||||
$font-path: "../assets/fonts";
|
||||
|
||||
|
||||
// The app direction is used to include
|
||||
// rtl styles in your app. For more info, please see:
|
||||
// http://ionicframework.com/docs/theming/rtl-support/
|
||||
$app-direction: ltr;
|
||||
|
||||
|
||||
@import "ionic.globals";
|
||||
|
||||
|
||||
// Shared Variables
|
||||
// --------------------------------------------------
|
||||
// To customize the look and feel of this app, you can override
|
||||
// the Sass variables found in Ionic's source scss files.
|
||||
// To view all the possible Ionic variables, see:
|
||||
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
|
||||
|
||||
|
||||
|
||||
|
||||
// Named Color Variables
|
||||
// --------------------------------------------------
|
||||
// Named colors makes it easy to reuse colors on various components.
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding. Ionic uses a Sass map of
|
||||
// colors so you can add, rename and remove colors as needed.
|
||||
// The "primary" color is the only required color in the map.
|
||||
|
||||
$colors: (
|
||||
primary: #488aff,
|
||||
secondary: #32db64,
|
||||
danger: #f53d3d,
|
||||
light: #f4f4f4,
|
||||
dark: #222
|
||||
);
|
||||
|
||||
|
||||
// App iOS Variables
|
||||
// --------------------------------------------------
|
||||
// iOS only Sass variables can go here
|
||||
|
||||
|
||||
|
||||
|
||||
// App Material Design Variables
|
||||
// --------------------------------------------------
|
||||
// Material Design only Sass variables can go here
|
||||
|
||||
|
||||
|
||||
|
||||
// App Windows Variables
|
||||
// --------------------------------------------------
|
||||
// Windows only Sass variables can go here
|
||||
|
||||
|
||||
|
||||
|
||||
// App Theme
|
||||
// --------------------------------------------------
|
||||
// Ionic apps can have different themes applied, which can
|
||||
// then be future customized. This import comes last
|
||||
// so that the above variables are used and Ionic's
|
||||
// default are overridden.
|
||||
|
||||
@import "ionic.theme.default";
|
||||
|
||||
|
||||
// Ionicons
|
||||
// --------------------------------------------------
|
||||
// The premium icon font for Ionic. For more info, please see:
|
||||
// http://ionicframework.com/docs/ionicons/
|
||||
|
||||
@import "ionic.ionicons";
|
||||
|
||||
|
||||
// Fonts
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "roboto";
|
||||
@import "noto-sans";
|
||||
Reference in New Issue
Block a user