42 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
43 |
44 |
45 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
46 |
47 |
48 |
49 |
Welcome to Ionic!
50 |
51 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
52 |
53 |
54 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
55 |
56 |
57 |
58 |
Welcome to Ionic!
59 |
60 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
61 |
62 |
63 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
64 |
65 |
66 |
67 |
Don’t Miss These Navigation Bar Interactions in iOS8
68 |
69 | Have you noticed how nicely the mobile Safari navigation bar condenses on scroll, and how the tab bar disappears?
70 |
71 | Video Player
72 | 00:1400:19
73 | In iOS8, Apple has made this type of interaction (and more!) very easily available to us all – well, almost… While Apple demoed the condensing navigation bar at WWDC, they have since changed it to hiding the navigation instead, and the tab bar is not included (I’m guessing they’ll add separate tab bar hiding properties later on…).
74 |
75 | Here are the cool new navigation bar interactions in iOS8 that will allow the user to see more of your content:
76 |
20 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
21 |
22 |
23 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
24 |
25 |
26 |
27 |
Don’t Miss These Navigation Bar Interactions in iOS8
28 |
29 | Have you noticed how nicely the mobile Safari navigation bar condenses on scroll, and how the tab bar disappears?
30 |
31 | Video Player
32 | 00:1400:19
33 | In iOS8, Apple has made this type of interaction (and more!) very easily available to us all – well, almost… While Apple demoed the condensing navigation bar at WWDC, they have since changed it to hiding the navigation instead, and the tab bar is not included (I’m guessing they’ll add separate tab bar hiding properties later on…).
34 |
35 | Here are the cool new navigation bar interactions in iOS8 that will allow the user to see more of your content:
36 |
37 |
Welcome to Ionic!
38 |
39 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
40 |
41 |
42 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
43 |
44 |
45 |
46 |
Don’t Miss These Navigation Bar Interactions in iOS8
47 |
48 | Have you noticed how nicely the mobile Safari navigation bar condenses on scroll, and how the tab bar disappears?
49 |
50 | Video Player
51 | 00:1400:19
52 | In iOS8, Apple has made this type of interaction (and more!) very easily available to us all – well, almost… While Apple demoed the condensing navigation bar at WWDC, they have since changed it to hiding the navigation instead, and the tab bar is not included (I’m guessing they’ll add separate tab bar hiding properties later on…).
53 |
54 | Here are the cool new navigation bar interactions in iOS8 that will allow the user to see more of your content:
55 |
56 |
Welcome to Ionic!
57 |
58 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
59 |
60 |
61 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
62 |
63 |
64 |
65 |
Don’t Miss These Navigation Bar Interactions in iOS8
66 |
67 | Have you noticed how nicely the mobile Safari navigation bar condenses on scroll, and how the tab bar disappears?
68 |
69 | Video Player
70 | 00:1400:19
71 | In iOS8, Apple has made this type of interaction (and more!) very easily available to us all – well, almost… While Apple demoed the condensing navigation bar at WWDC, they have since changed it to hiding the navigation instead, and the tab bar is not included (I’m guessing they’ll add separate tab bar hiding properties later on…).
72 |
73 | Here are the cool new navigation bar interactions in iOS8 that will allow the user to see more of your content:
74 |
87 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
88 |
89 |
90 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
91 |
92 |
93 |
94 |
95 |
96 |
Welcome to Ionic!
97 |
98 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
99 |
100 |
101 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
102 |
103 |
104 |
105 |
Welcome to Ionic!
106 |
107 | This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
108 |
109 |
110 | Take a look at the src/pages/ directory to add or change tabs, update any existing page or create new pages.
111 |
112 |
113 |
114 |
Don’t Miss These Navigation Bar Interactions in iOS8
115 |
116 | Have you noticed how nicely the mobile Safari navigation bar condenses on scroll, and how the tab bar disappears?
117 |
118 | Video Player
119 | 00:1400:19
120 | In iOS8, Apple has made this type of interaction (and more!) very easily available to us all – well, almost… While Apple demoed the condensing navigation bar at WWDC, they have since changed it to hiding the navigation instead, and the tab bar is not included (I’m guessing they’ll add separate tab bar hiding properties later on…).
121 |
122 | Here are the cool new navigation bar interactions in iOS8 that will allow the user to see more of your content:
123 |
124 |
125 |
126 |
127 |
--------------------------------------------------------------------------------
/src/pages/home/home.scss:
--------------------------------------------------------------------------------
1 | page-home {
2 |
3 | }
4 |
--------------------------------------------------------------------------------
/src/pages/home/home.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NavController, ViewController } from 'ionic-angular';
3 |
4 |
5 | import { ContactPage } from './../contact/contact';
6 |
7 |
8 |
9 | @Component({
10 | selector: 'page-home',
11 | templateUrl: 'home.html'
12 | })
13 | export class HomePage {
14 |
15 | page = ContactPage;
16 |
17 |
18 | constructor(public navCtrl: NavController,
19 | public viewCtrl: ViewController) {
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/pages/tabs/tabs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/pages/tabs/tabs.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { AboutPage } from '../about/about';
4 | import { ContactPage } from '../contact/contact';
5 | import { HomePage } from '../home/home';
6 |
7 | @Component({
8 | templateUrl: 'tabs.html'
9 | })
10 | export class TabsPage {
11 |
12 | tab1Root = HomePage;
13 | tab2Root = AboutPage;
14 | tab3Root = ContactPage;
15 |
16 | constructor() {
17 |
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check out https://googlechrome.github.io/sw-toolbox/ for
3 | * more info on how to use sw-toolbox to custom configure your service worker.
4 | */
5 |
6 |
7 | 'use strict';
8 | importScripts('./build/sw-toolbox.js');
9 |
10 | self.toolbox.options.cache = {
11 | name: 'ionic-cache'
12 | };
13 |
14 | // pre-cache our key assets
15 | self.toolbox.precache(
16 | [
17 | './build/main.js',
18 | './build/main.css',
19 | './build/polyfills.js',
20 | 'index.html',
21 | 'manifest.json'
22 | ]
23 | );
24 |
25 | // dynamically cache any other local assets
26 | self.toolbox.router.any('/*', self.toolbox.cacheFirst);
27 |
28 | // for any other requests go to the network, cache,
29 | // and then only use that cached resource if your user goes offline
30 | self.toolbox.router.default = self.toolbox.networkFirst;
31 |
--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/v2/theming/
3 | $font-path: "../assets/fonts";
4 |
5 | @import "ionic.globals";
6 |
7 |
8 | // Shared Variables
9 | // --------------------------------------------------
10 | // To customize the look and feel of this app, you can override
11 | // the Sass variables found in Ionic's source scss files.
12 | // To view all the possible Ionic variables, see:
13 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
14 |
15 |
16 |
17 |
18 | // Named Color Variables
19 | // --------------------------------------------------
20 | // Named colors makes it easy to reuse colors on various components.
21 | // It's highly recommended to change the default colors
22 | // to match your app's branding. Ionic uses a Sass map of
23 | // colors so you can add, rename and remove colors as needed.
24 | // The "primary" color is the only required color in the map.
25 |
26 | $colors: (
27 | primary: #488aff,
28 | secondary: #32db64,
29 | danger: #f53d3d,
30 | light: #f4f4f4,
31 | dark: #222
32 | );
33 |
34 |
35 | // App iOS Variables
36 | // --------------------------------------------------
37 | // iOS only Sass variables can go here
38 |
39 |
40 |
41 |
42 | // App Material Design Variables
43 | // --------------------------------------------------
44 | // Material Design only Sass variables can go here
45 |
46 |
47 |
48 |
49 | // App Windows Variables
50 | // --------------------------------------------------
51 | // Windows only Sass variables can go here
52 |
53 |
54 |
55 |
56 | // App Theme
57 | // --------------------------------------------------
58 | // Ionic apps can have different themes applied, which can
59 | // then be future customized. This import comes last
60 | // so that the above variables are used and Ionic's
61 | // default are overridden.
62 |
63 | @import "ionic.theme.default";
64 |
65 |
66 | // Ionicons
67 | // --------------------------------------------------
68 | // The premium icon font for Ionic. For more info, please see:
69 | // http://ionicframework.com/docs/v2/ionicons/
70 |
71 | @import "ionic.ionicons";
72 |
73 |
74 | // Fonts
75 | // --------------------------------------------------
76 |
77 | @import "roboto";
78 | @import "noto-sans";
79 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "lib": [
8 | "dom",
9 | "es2015"
10 | ],
11 | "module": "es2015",
12 | "moduleResolution": "node",
13 | "sourceMap": true,
14 | "target": "es5"
15 | },
16 | "include": [
17 | "src/**/*.ts"
18 | ],
19 | "exclude": [
20 | "node_modules"
21 | ],
22 | "compileOnSave": false,
23 | "atom": {
24 | "rewriteTsconfig": false
25 | },
26 | "files": [
27 | "typings/index.d.ts"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "no-duplicate-variable": true,
4 | "no-unused-variable": [
5 | true
6 | ]
7 | },
8 | "rulesDirectory": [
9 | "node_modules/tslint-eslint-rules/dist/rules"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "jquery": "registry:dt/jquery#1.10.0+20170310222111"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/typings/globals/jquery/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "resolution": "main",
3 | "tree": {
4 | "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f4fdcaca9c94f90442dcedb0c8a84399c47e731f/jquery/index.d.ts",
5 | "raw": "registry:dt/jquery#1.10.0+20170310222111",
6 | "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f4fdcaca9c94f90442dcedb0c8a84399c47e731f/jquery/index.d.ts"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/typings/index.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------