├── .editorconfig ├── .gitignore ├── README.md ├── config.xml ├── ioni2a.gif ├── ionic.config.json ├── ionic2.gif ├── ionic2b.gif ├── ionic2c.gif ├── package.json ├── resources ├── android │ ├── icon │ │ ├── drawable-hdpi-icon.png │ │ ├── drawable-ldpi-icon.png │ │ ├── drawable-mdpi-icon.png │ │ ├── drawable-xhdpi-icon.png │ │ ├── drawable-xxhdpi-icon.png │ │ └── drawable-xxxhdpi-icon.png │ └── splash │ │ ├── drawable-land-hdpi-screen.png │ │ ├── drawable-land-ldpi-screen.png │ │ ├── drawable-land-mdpi-screen.png │ │ ├── drawable-land-xhdpi-screen.png │ │ ├── drawable-land-xxhdpi-screen.png │ │ ├── drawable-land-xxxhdpi-screen.png │ │ ├── drawable-port-hdpi-screen.png │ │ ├── drawable-port-ldpi-screen.png │ │ ├── drawable-port-mdpi-screen.png │ │ ├── drawable-port-xhdpi-screen.png │ │ ├── drawable-port-xxhdpi-screen.png │ │ └── drawable-port-xxxhdpi-screen.png ├── icon.png ├── ios │ ├── icon │ │ ├── icon-40.png │ │ ├── icon-40@2x.png │ │ ├── icon-50.png │ │ ├── icon-50@2x.png │ │ ├── icon-60.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72.png │ │ ├── icon-72@2x.png │ │ ├── icon-76.png │ │ ├── icon-76@2x.png │ │ ├── icon-small.png │ │ ├── icon-small@2x.png │ │ ├── icon-small@3x.png │ │ ├── icon.png │ │ └── icon@2x.png │ └── splash │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape@2x~ipad.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Portrait@2x~ipad.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default@2x~iphone.png │ │ └── Default~iphone.png └── splash.png ├── src ├── app │ ├── app.component.ts │ ├── app.module.ts │ ├── app.scss │ ├── main.dev.ts │ └── main.prod.ts ├── assets │ └── icon │ │ └── favicon.ico ├── components │ ├── fab-toolbar │ │ ├── declarations.d.ts │ │ ├── fab-toolbar.scss │ │ └── fab-toolbar.ts │ └── swipedtab │ │ ├── swipedtab.d.ts │ │ └── swipedtab.ts ├── declarations.d.ts ├── fab-toolbar.scss ├── fab-toolbar.ts ├── index.html ├── manifest.json ├── pages │ ├── about │ │ ├── about.html │ │ ├── about.scss │ │ └── about.ts │ ├── contact │ │ ├── contact.html │ │ ├── contact.scss │ │ └── contact.ts │ ├── home │ │ ├── home.html │ │ ├── home.scss │ │ └── home.ts │ ├── tabs │ │ ├── tabs.html │ │ └── tabs.ts │ └── test │ │ ├── test.html │ │ ├── test.scss │ │ └── test.ts ├── service-worker.js └── theme │ └── variables.scss ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | 10 | # We recommend you to keep these unchanged 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | insert_final_newline = true 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.tmp 8 | *.tmp.* 9 | log.txt 10 | *.sublime-project 11 | *.sublime-workspace 12 | .vscode/ 13 | npm-debug.log* 14 | 15 | .idea/ 16 | .sass-cache/ 17 | .tmp/ 18 | .versions/ 19 | coverage/ 20 | dist/ 21 | node_modules/ 22 | tmp/ 23 | temp/ 24 | hooks/ 25 | platforms/ 26 | plugins/ 27 | plugins/android.json 28 | plugins/ios.json 29 | www/ 30 | $RECYCLE.BIN/ 31 | 32 | .DS_Store 33 | Thumbs.db 34 | UserInterfaceState.xcuserstate 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # a simple example using swiped tabs (2 tabs) IONIC 2 3 | 4 | 5 | [Youtube Link](https://www.youtube.com/watch?v=dJTFt0aeRUo&feature=youtu.be)
6 | android
7 | ![](ionic2.gif)
8 | ios
9 | ![](ioni2a.gif)
10 | windows
11 | ![](ionic2c.gif)
12 | #Need Custom Work? 13 | If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at karraysoufien@gmail.com. 14 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | first 4 | An awesome Ionic/Cordova app. 5 | Ionic Framework Team 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /ioni2a.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/ioni2a.gif -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "first", 3 | "app_id": "", 4 | "v2": true, 5 | "typescript": true 6 | } 7 | -------------------------------------------------------------------------------- /ionic2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/ionic2.gif -------------------------------------------------------------------------------- /ionic2b.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/ionic2b.gif -------------------------------------------------------------------------------- /ionic2c.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/ionic2c.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-hello-world", 3 | "author": "Ionic Framework", 4 | "homepage": "http://ionicframework.com/", 5 | "private": true, 6 | "scripts": { 7 | "build": "ionic-app-scripts build", 8 | "watch": "ionic-app-scripts watch", 9 | "serve:before": "watch", 10 | "emulate:before": "build", 11 | "deploy:before": "build", 12 | "build:before": "build", 13 | "run:before": "build" 14 | }, 15 | "dependencies": { 16 | "@angular/common": "^2.0.0", 17 | "@angular/compiler": "^2.0.0", 18 | "@angular/compiler-cli": "0.6.2", 19 | "@angular/core": "^2.0.0", 20 | "@angular/forms": "^2.0.0", 21 | "@angular/http": "^2.0.0", 22 | "@angular/platform-browser": "^2.0.0", 23 | "@angular/platform-browser-dynamic": "^2.0.0", 24 | "@angular/platform-server": "^2.0.0", 25 | "@ionic/storage": "^1.0.3", 26 | "ion-multi-picker": "^1.0.5", 27 | "ionic-angular": "^2.0.0-rc.1", 28 | "ionic-native": "^2.2.3", 29 | "ionicons": "^3.0.0", 30 | "rxjs": "5.0.0-beta.12", 31 | "zone.js": "^0.6.21" 32 | }, 33 | "devDependencies": { 34 | "@ionic/app-scripts": "^0.0.36", 35 | "typescript": "^2.0.3" 36 | }, 37 | "cordovaPlugins": [ 38 | "cordova-plugin-device", 39 | "cordova-plugin-console", 40 | "cordova-plugin-whitelist", 41 | "cordova-plugin-splashscreen", 42 | "cordova-plugin-statusbar", 43 | "ionic-plugin-keyboard" 44 | ], 45 | "cordovaPlatforms": [ 46 | "ios", 47 | { 48 | "platform": "ios", 49 | "version": "", 50 | "locator": "ios" 51 | } 52 | ], 53 | "description": "first: An Ionic project" 54 | } 55 | -------------------------------------------------------------------------------- /resources/android/icon/drawable-hdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/icon/drawable-hdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-ldpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/icon/drawable-ldpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-mdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/icon/drawable-mdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/icon/drawable-xhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/icon/drawable-xxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/icon/drawable-xxxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-land-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-land-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-land-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-land-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-land-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-land-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-port-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-port-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-port-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-port-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-port-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/android/splash/drawable-port-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/icon.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-40.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-40@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-50.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-50@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-60.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-60@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-60@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-72.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-72@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-76.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-76@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-small.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-small@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon-small@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon.png -------------------------------------------------------------------------------- /resources/ios/icon/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/icon/icon@2x.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-568h@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-568h@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-667h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-667h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-Landscape-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-Landscape@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-Landscape~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-Portrait@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default-Portrait~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/ios/splash/Default~iphone.png -------------------------------------------------------------------------------- /resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/resources/splash.png -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Platform } from 'ionic-angular'; 3 | import { StatusBar } from 'ionic-native'; 4 | 5 | import { TabsPage } from '../pages/tabs/tabs'; 6 | 7 | 8 | @Component({ 9 | template: `` 10 | }) 11 | export class MyApp { 12 | rootPage = TabsPage; 13 | 14 | constructor(platform: Platform) { 15 | platform.ready().then(() => { 16 | // Okay, so the platform is ready and our plugins are available. 17 | // Here you can do any higher level native things you might need. 18 | StatusBar.styleDefault(); 19 | }); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicApp, IonicModule } from 'ionic-angular'; 3 | import { MyApp } from './app.component'; 4 | import { AboutPage } from '../pages/about/about'; 5 | import { ContactPage } from '../pages/contact/contact'; 6 | import { HomePage } from '../pages/home/home'; 7 | import { TabsPage } from '../pages/tabs/tabs'; 8 | import { MultiPickerModule } from 'ion-multi-picker'; 9 | import { FabToolbar } from '../components/fab-toolbar/fab-toolbar'; 10 | import { ionSlideTabs } from '../components/swipedtab/swipedtab'; 11 | 12 | @NgModule({ 13 | declarations: [ 14 | MyApp, 15 | AboutPage, 16 | ContactPage, 17 | HomePage, 18 | TabsPage, 19 | FabToolbar, 20 | ionSlideTabs 21 | ], 22 | imports: [ 23 | IonicModule.forRoot(MyApp) 24 | ], 25 | bootstrap: [IonicApp], 26 | entryComponents: [ 27 | MyApp, 28 | AboutPage, 29 | ContactPage, 30 | HomePage, 31 | TabsPage, 32 | FabToolbar, 33 | ionSlideTabs 34 | ], 35 | providers: [] 36 | }) 37 | export class AppModule {} 38 | -------------------------------------------------------------------------------- /src/app/app.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Global Sass 5 | // -------------------------------------------------- 6 | // Put style rules here that you want to apply globally. These 7 | // styles are for the entire app and not just one component. 8 | // Additionally, this file can be also used as an entry point 9 | // to import other Sass files to be included in the output CSS. 10 | // 11 | // Shared Sass variables, which can be used to adjust Ionic's 12 | // default Sass variables, belong in "theme/variables.scss". 13 | // 14 | // To declare rules for a specific mode, create a child rule 15 | // for the .md, .ios, or .wp mode classes. The mode class is 16 | // automatically applied to the element in the app. 17 | fab-toolbar.right { 18 | right: 0; 19 | button[ion-fab] { 20 | margin-right: 5px; 21 | float: right; 22 | } 23 | 24 | } 25 | 26 | fab-toolbar.left { 27 | left: 0; 28 | button[ion-fab] { 29 | margin-left: 5px; 30 | float: left; 31 | } 32 | 33 | } 34 | 35 | 36 | fab-toolbar { 37 | position: absolute; 38 | width: 68px; 39 | height: 68px; 40 | transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); 41 | z-index: 100; 42 | .backdrop { 43 | display: none; 44 | transition: all 100ms linear; 45 | position: absolute; 46 | } 47 | .fab-toolbar { 48 | height: 100%; 49 | width: 100%; 50 | overflow: hidden; 51 | position: absolute; 52 | ion-row { 53 | position: absolute; 54 | display: none; 55 | ion-col { 56 | button { 57 | div { 58 | transition: all 100ms linear; 59 | } 60 | } 61 | } 62 | ion-col.icon-and-title { 63 | ion-icon { 64 | font-size: 25px; 65 | } 66 | label { 67 | font-size: 10px; 68 | text-decoration: none; 69 | text-transform: none; 70 | } 71 | } 72 | } 73 | button[ion-fab] { 74 | transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); 75 | ion-icon { 76 | transition: all 100ms linear; 77 | } 78 | } 79 | } 80 | } 81 | 82 | fab-toolbar:not(.activated) { 83 | width: 68px; 84 | } 85 | fab-toolbar.activated { 86 | width: 100%; 87 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); 88 | 89 | .backdrop { 90 | display: block; 91 | opacity: 0; 92 | width: 100vw; 93 | height: 100vh; 94 | } 95 | button[ion-fab] { 96 | transition-delay: 100ms; 97 | ion-icon { 98 | opacity: 0; 99 | } 100 | } 101 | ion-row { 102 | display: -webkit-flex; 103 | display: -ms-flexbox; 104 | display: flex; 105 | opacity: 0; 106 | ion-col { 107 | button { 108 | div { 109 | transform: scale(0) 110 | } 111 | } 112 | } 113 | } 114 | } 115 | 116 | fab-toolbar.opened { 117 | .backdrop { 118 | opacity: 1; 119 | } 120 | button[ion-fab] { 121 | transition-delay: 100ms; 122 | ion-icon { 123 | opacity: 0; 124 | } 125 | } 126 | ion-row { 127 | width: 100%; 128 | position: absolute; 129 | height: 68px; 130 | z-index: 1; 131 | line-height: 100%; 132 | opacity: 1; 133 | ion-col { 134 | padding: 0px; 135 | button { 136 | height: 68px; 137 | width: 100%; 138 | margin: 0px; 139 | padding: 0px; 140 | div { 141 | transform: scale(1); 142 | } 143 | } 144 | } 145 | } 146 | } 147 | fab-toolbar:not(.activated).opened { 148 | ion-row { 149 | display: -webkit-flex; 150 | display: -ms-flexbox; 151 | display: flex; 152 | opacity: 0; 153 | transition-delay: 100ms; 154 | ion-col { 155 | button { 156 | div { 157 | transform: scale(0); 158 | } 159 | } 160 | } 161 | } 162 | } 163 | fab-toolbar:not(.activated).closed { 164 | width: 68px; 165 | } 166 | fab-toolbar.closed { 167 | ion-row { 168 | width: 100%; 169 | position: absolute; 170 | height: 68px; 171 | z-index: 1; 172 | line-height: 100%; 173 | ion-col { 174 | padding: 0px; 175 | button { 176 | height: 100%; 177 | width: 100%; 178 | margin: 0px; 179 | padding: 0px; 180 | } 181 | } 182 | } 183 | } 184 | -------------------------------------------------------------------------------- /src/app/main.dev.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /src/app/main.prod.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowser } from '@angular/platform-browser'; 2 | import { enableProdMode } from '@angular/core'; 3 | 4 | import { AppModuleNgFactory } from './app.module.ngfactory'; 5 | 6 | enableProdMode(); 7 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); 8 | -------------------------------------------------------------------------------- /src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newsof1111/ionic2-swipedTab-OpenProject/35017e91b245042525da276339a4c789825e2bab/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /src/components/fab-toolbar/declarations.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Declaration files are how the Typescript compiler knows about the type information(or shape) of an object. 3 | They're what make intellisense work and make Typescript know all about your code. 4 | 5 | A wildcard module is declared below to allow third party libraries to be used in an app even if they don't 6 | provide their own type declarations. 7 | 8 | To learn more about using third party libraries in an Ionic app, check out the docs here: 9 | http://ionicframework.com/docs/v2/resources/third-party-libs/ 10 | 11 | For more info on type definition files, check out the Typescript docs here: 12 | https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 13 | */ 14 | declare module '*'; -------------------------------------------------------------------------------- /src/components/fab-toolbar/fab-toolbar.scss: -------------------------------------------------------------------------------- 1 | fab-toolbar.right { 2 | right: 0; 3 | button[ion-fab] { 4 | margin-right: 5px; 5 | float: right; 6 | } 7 | 8 | } 9 | 10 | fab-toolbar.left { 11 | left: 0; 12 | button[ion-fab] { 13 | margin-left: 5px; 14 | float: left; 15 | } 16 | 17 | } 18 | 19 | 20 | fab-toolbar { 21 | position: absolute; 22 | width: 68px; 23 | height: 68px; 24 | transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); 25 | z-index: 100; 26 | .backdrop { 27 | display: none; 28 | transition: all 100ms linear; 29 | position: absolute; 30 | } 31 | .fab-toolbar { 32 | height: 100%; 33 | width: 100%; 34 | overflow: hidden; 35 | position: absolute; 36 | ion-row { 37 | position: absolute; 38 | display: none; 39 | ion-col { 40 | button { 41 | div { 42 | transition: all 100ms linear; 43 | } 44 | } 45 | } 46 | ion-col.icon-and-title { 47 | ion-icon { 48 | font-size: 25px; 49 | } 50 | label { 51 | font-size: 10px; 52 | text-decoration: none; 53 | text-transform: none; 54 | } 55 | } 56 | } 57 | button[ion-fab] { 58 | transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); 59 | ion-icon { 60 | transition: all 100ms linear; 61 | } 62 | } 63 | } 64 | } 65 | 66 | fab-toolbar:not(.activated) { 67 | width: 68px; 68 | } 69 | fab-toolbar.activated { 70 | width: 100%; 71 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); 72 | 73 | .backdrop { 74 | display: block; 75 | opacity: 0; 76 | width: 100vw; 77 | height: 100vh; 78 | } 79 | button[ion-fab] { 80 | transition-delay: 100ms; 81 | ion-icon { 82 | opacity: 0; 83 | } 84 | } 85 | ion-row { 86 | display: -webkit-flex; 87 | display: -ms-flexbox; 88 | display: flex; 89 | opacity: 0; 90 | ion-col { 91 | button { 92 | div { 93 | transform: scale(0) 94 | } 95 | } 96 | } 97 | } 98 | } 99 | 100 | fab-toolbar.opened { 101 | .backdrop { 102 | opacity: 1; 103 | } 104 | button[ion-fab] { 105 | transition-delay: 100ms; 106 | ion-icon { 107 | opacity: 0; 108 | } 109 | } 110 | ion-row { 111 | width: 100%; 112 | position: absolute; 113 | height: 68px; 114 | z-index: 1; 115 | line-height: 100%; 116 | opacity: 1; 117 | ion-col { 118 | padding: 0px; 119 | button { 120 | height: 68px; 121 | width: 100%; 122 | margin: 0px; 123 | padding: 0px; 124 | div { 125 | transform: scale(1); 126 | } 127 | } 128 | } 129 | } 130 | } 131 | fab-toolbar:not(.activated).opened { 132 | ion-row { 133 | display: -webkit-flex; 134 | display: -ms-flexbox; 135 | display: flex; 136 | opacity: 0; 137 | transition-delay: 100ms; 138 | ion-col { 139 | button { 140 | div { 141 | transform: scale(0); 142 | } 143 | } 144 | } 145 | } 146 | } 147 | fab-toolbar:not(.activated).closed { 148 | width: 68px; 149 | } 150 | fab-toolbar.closed { 151 | ion-row { 152 | width: 100%; 153 | position: absolute; 154 | height: 68px; 155 | z-index: 1; 156 | line-height: 100%; 157 | ion-col { 158 | padding: 0px; 159 | button { 160 | height: 100%; 161 | width: 100%; 162 | margin: 0px; 163 | padding: 0px; 164 | } 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/components/fab-toolbar/fab-toolbar.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, Input, Renderer } from '@angular/core'; 2 | 3 | 4 | /** 5 | * @name FabToolbar 6 | * @description 7 | * FabToolbar is Ionic v2 component which uses ionic fab buttons, buttons. Inspired by Google's Material Design 8 | * 9 | * On click Fab button will transform into tab like area with provided buttons 10 | * 11 | * @usage 12 | * *html - simply add the 'fab-toolbar' tag to your page and bind the properties. 13 | * ``` 14 | * 15 | * ``` 16 | * 17 | * *javascript - starting from Ionic 2 RC0.0 (AoT) you should provide all components inside app.module.ts 18 | * after adding them into app.module.ts import FabToolbar 19 | * ``` 20 | * import { FabToolbar } from './fab-toolbar/fab-toolbar'; 21 | * 22 | * public buttons = [ 23 | * { 24 | * icon: 'add', 25 | * title: 'Add', 26 | * color: 'dark', 27 | * handler: () => {console.log('added');} 28 | * }, 29 | * { 30 | * icon: 'cart', 31 | * title: 'Products', 32 | * color: 'dark', 33 | * handler: () => {console.log('Products');} 34 | * } 35 | * ] 36 | * ``` 37 | * 38 | * @see {@link https://github.com/ekhmoi/Ionic-Component-fab-toolbar Ionic-Component-fab-toolbar} 39 | * 40 | */ 41 | 42 | @Component({ 43 | selector: 'fab-toolbar', 44 | template: ` 45 |
46 |
47 | 48 | 49 | 56 | 57 | 58 | 59 |
60 | ` 61 | }) 62 | 63 | export class FabToolbar { 64 | 65 | public active: boolean = false; 66 | constructor(public el: ElementRef, public renderer: Renderer) {} 67 | 68 | 69 | @Input() position: string = 'left'; 70 | @Input() color: string = 'secondary'; 71 | @Input() icon: string = 'more'; 72 | @Input() cssClass: string = ''; 73 | @Input() enableBackdropDismiss: boolean = true; 74 | @Input() buttons: Array = []; 75 | 76 | ngOnInit() { 77 | this.renderer.setElementClass(this.el.nativeElement, this.position, true) 78 | } 79 | public onClick(event, button: any): void { 80 | // We are listening to click event on document in order to be able to close button on backdrop click 81 | // Therefore we need to check if user clicked on our component or outside 82 | if(!event && !button) { 83 | // clicked on backdrop 84 | if(this.enableBackdropDismiss === true && this.active) { 85 | this.closeButton(); 86 | return; 87 | } 88 | 89 | } 90 | if (this.el.nativeElement.contains(event.target)) { 91 | // User has clicked on our component. Check if he clicked on sub button or no. 92 | if(button) { 93 | let shouldDismiss = true; 94 | if (button.handler) { 95 | // a handler has been provided, execute it 96 | if (button.handler() === false) { 97 | // if the return value of the handler is false then do not dismiss 98 | shouldDismiss = false; 99 | } 100 | } 101 | 102 | if (shouldDismiss) { 103 | setTimeout(() => { 104 | this.closeButton(); 105 | }, 10); 106 | } 107 | } else { 108 | if(!this.active) this.openButton(); 109 | } 110 | } else { 111 | // User has clicked outside our component. 112 | // Check if `enableBackdropDismiss` is true and if component is opened. 113 | if(this.enableBackdropDismiss === true && this.active) { 114 | this.closeButton(); 115 | } 116 | } 117 | } 118 | 119 | public get width() { 120 | let width = window.innerWidth / 56 * 2; 121 | return 'scale(' + width + ')'; 122 | } 123 | 124 | public openButton(): void { 125 | this.renderer.setElementClass(this.el.nativeElement, 'activated', !this.active); 126 | setTimeout(() => { 127 | this.renderer.setElementClass(this.el.nativeElement, 'closed', false) 128 | this.renderer.setElementClass(this.el.nativeElement, 'opened', true); 129 | }, 400); 130 | this.renderer.setElementStyle(this.el.nativeElement, 'width', '100%'); 131 | this.active = !this.active; 132 | } 133 | 134 | public closeButton(): void { 135 | this.renderer.setElementClass(this.el.nativeElement, 'activated', !this.active); 136 | setTimeout(() => { 137 | this.renderer.setElementClass(this.el.nativeElement, 'opened', false) 138 | this.renderer.setElementClass(this.el.nativeElement, 'closed', true); 139 | this.renderer.setElementStyle(this.el.nativeElement, 'width', '68px'); 140 | }, 400); 141 | this.active = !this.active; 142 | } 143 | } -------------------------------------------------------------------------------- /src/components/swipedtab/swipedtab.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Declaration files are how the Typescript compiler knows about the type information(or shape) of an object. 3 | They're what make intellisense work and make Typescript know all about your code. 4 | 5 | A wildcard module is declared below to allow third party libraries to be used in an app even if they don't 6 | provide their own type declarations. 7 | 8 | To learn more about using third party libraries in an Ionic app, check out the docs here: 9 | http://ionicframework.com/docs/v2/resources/third-party-libs/ 10 | 11 | For more info on type definition files, check out the Typescript docs here: 12 | https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 13 | */ 14 | declare module '*'; -------------------------------------------------------------------------------- /src/components/swipedtab/swipedtab.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, Input, Renderer } from '@angular/core'; 2 | import { Slides,List, Item} from 'ionic-angular'; 3 | //import {List, Item} from 'ionic/ionic'; 4 | 5 | //'$timeout', '$compile', '$interval', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$ionicGesture', 6 | 7 | 8 | @Component({ 9 | selector: 'ion-slide-tabs', 10 | 11 | template: ` 12 |
13 |
14 | 15 | 16 | 23 | 24 | 25 | 26 |
27 | ` 28 | }) 29 | 30 | export class ionSlideTabs { 31 | 32 | public active: boolean = false; 33 | constructor(public el: ElementRef, public renderer: Renderer) {} 34 | 35 | 36 | @Input() position: string = 'left'; 37 | @Input() color: string = 'secondary'; 38 | @Input() icon: string = 'more'; 39 | @Input() cssClass: string = ''; 40 | @Input() enableBackdropDismiss: boolean = true; 41 | @Input() buttons: Array = []; 42 | 43 | ngOnInit() { 44 | this.renderer.setElementClass(this.el.nativeElement, this.position, true) 45 | } 46 | public onClick(event, button: any): void { 47 | // We are listening to click event on document in order to be able to close button on backdrop click 48 | // Therefore we need to check if user clicked on our component or outside 49 | if(!event && !button) { 50 | // clicked on backdrop 51 | if(this.enableBackdropDismiss === true && this.active) { 52 | this.closeButton(); 53 | return; 54 | } 55 | 56 | } 57 | if (this.el.nativeElement.contains(event.target)) { 58 | // User has clicked on our component. Check if he clicked on sub button or no. 59 | if(button) { 60 | let shouldDismiss = true; 61 | if (button.handler) { 62 | // a handler has been provided, execute it 63 | if (button.handler() === false) { 64 | // if the return value of the handler is false then do not dismiss 65 | shouldDismiss = false; 66 | } 67 | } 68 | 69 | if (shouldDismiss) { 70 | setTimeout(() => { 71 | this.closeButton(); 72 | }, 10); 73 | } 74 | } else { 75 | if(!this.active) this.openButton(); 76 | } 77 | } else { 78 | // User has clicked outside our component. 79 | // Check if `enableBackdropDismiss` is true and if component is opened. 80 | if(this.enableBackdropDismiss === true && this.active) { 81 | this.closeButton(); 82 | } 83 | } 84 | } 85 | 86 | public get width() { 87 | let width = window.innerWidth / 56 * 2; 88 | return 'scale(' + width + ')'; 89 | } 90 | 91 | public openButton(): void { 92 | this.renderer.setElementClass(this.el.nativeElement, 'activated', !this.active); 93 | setTimeout(() => { 94 | this.renderer.setElementClass(this.el.nativeElement, 'closed', false) 95 | this.renderer.setElementClass(this.el.nativeElement, 'opened', true); 96 | }, 400); 97 | this.renderer.setElementStyle(this.el.nativeElement, 'width', '100%'); 98 | this.active = !this.active; 99 | } 100 | 101 | public closeButton(): void { 102 | this.renderer.setElementClass(this.el.nativeElement, 'activated', !this.active); 103 | setTimeout(() => { 104 | this.renderer.setElementClass(this.el.nativeElement, 'opened', false) 105 | this.renderer.setElementClass(this.el.nativeElement, 'closed', true); 106 | this.renderer.setElementStyle(this.el.nativeElement, 'width', '68px'); 107 | }, 400); 108 | this.active = !this.active; 109 | } 110 | } -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Declaration files are how the Typescript compiler knows about the type information(or shape) of an object. 3 | They're what make intellisense work and make Typescript know all about your code. 4 | 5 | A wildcard module is declared below to allow third party libraries to be used in an app even if they don't 6 | provide their own type declarations. 7 | 8 | To learn more about using third party libraries in an Ionic app, check out the docs here: 9 | http://ionicframework.com/docs/v2/resources/third-party-libs/ 10 | 11 | For more info on type definition files, check out the Typescript docs here: 12 | https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 13 | */ 14 | declare module '*'; -------------------------------------------------------------------------------- /src/fab-toolbar.scss: -------------------------------------------------------------------------------- 1 | fab-toolbar.right { 2 | right: 0; 3 | button[ion-fab] { 4 | margin-right: 5px; 5 | float: right; 6 | } 7 | 8 | } 9 | 10 | fab-toolbar.left { 11 | left: 0; 12 | button[ion-fab] { 13 | margin-left: 5px; 14 | float: left; 15 | } 16 | 17 | } 18 | 19 | 20 | fab-toolbar { 21 | position: absolute; 22 | width: 68px; 23 | height: 68px; 24 | transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); 25 | z-index: 100; 26 | .backdrop { 27 | display: none; 28 | transition: all 100ms linear; 29 | position: absolute; 30 | } 31 | .fab-toolbar { 32 | height: 100%; 33 | width: 100%; 34 | overflow: hidden; 35 | position: absolute; 36 | ion-row { 37 | position: absolute; 38 | display: none; 39 | ion-col { 40 | button { 41 | div { 42 | transition: all 100ms linear; 43 | } 44 | } 45 | } 46 | ion-col.icon-and-title { 47 | ion-icon { 48 | font-size: 25px; 49 | } 50 | label { 51 | font-size: 10px; 52 | text-decoration: none; 53 | text-transform: none; 54 | } 55 | } 56 | } 57 | button[ion-fab] { 58 | transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); 59 | ion-icon { 60 | transition: all 100ms linear; 61 | } 62 | } 63 | } 64 | } 65 | 66 | fab-toolbar:not(.activated) { 67 | width: 68px; 68 | } 69 | fab-toolbar.activated { 70 | width: 100%; 71 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); 72 | 73 | .backdrop { 74 | display: block; 75 | opacity: 0; 76 | width: 100vw; 77 | height: 100vh; 78 | } 79 | button[ion-fab] { 80 | transition-delay: 100ms; 81 | ion-icon { 82 | opacity: 0; 83 | } 84 | } 85 | ion-row { 86 | display: -webkit-flex; 87 | display: -ms-flexbox; 88 | display: flex; 89 | opacity: 0; 90 | ion-col { 91 | button { 92 | div { 93 | transform: scale(0) 94 | } 95 | } 96 | } 97 | } 98 | } 99 | 100 | fab-toolbar.opened { 101 | .backdrop { 102 | opacity: 1; 103 | } 104 | button[ion-fab] { 105 | transition-delay: 100ms; 106 | ion-icon { 107 | opacity: 0; 108 | } 109 | } 110 | ion-row { 111 | width: 100%; 112 | position: absolute; 113 | height: 68px; 114 | z-index: 1; 115 | line-height: 100%; 116 | opacity: 1; 117 | ion-col { 118 | padding: 0px; 119 | button { 120 | height: 68px; 121 | width: 100%; 122 | margin: 0px; 123 | padding: 0px; 124 | div { 125 | transform: scale(1); 126 | } 127 | } 128 | } 129 | } 130 | } 131 | fab-toolbar:not(.activated).opened { 132 | ion-row { 133 | display: -webkit-flex; 134 | display: -ms-flexbox; 135 | display: flex; 136 | opacity: 0; 137 | transition-delay: 100ms; 138 | ion-col { 139 | button { 140 | div { 141 | transform: scale(0); 142 | } 143 | } 144 | } 145 | } 146 | } 147 | fab-toolbar:not(.activated).closed { 148 | width: 68px; 149 | } 150 | fab-toolbar.closed { 151 | ion-row { 152 | width: 100%; 153 | position: absolute; 154 | height: 68px; 155 | z-index: 1; 156 | line-height: 100%; 157 | ion-col { 158 | padding: 0px; 159 | button { 160 | height: 100%; 161 | width: 100%; 162 | margin: 0px; 163 | padding: 0px; 164 | } 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/fab-toolbar.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, Input, Renderer } from '@angular/core'; 2 | 3 | 4 | /** 5 | * @name FabToolbar 6 | * @description 7 | * FabToolbar is Ionic v2 component which uses ionic fab buttons, buttons. Inspired by Google's Material Design 8 | * 9 | * On click Fab button will transform into tab like area with provided buttons 10 | * 11 | * @usage 12 | * *html - simply add the 'fab-toolbar' tag to your page and bind the properties. 13 | * ``` 14 | * 15 | * ``` 16 | * 17 | * *javascript - starting from Ionic 2 RC0.0 (AoT) you should provide all components inside app.module.ts 18 | * after adding them into app.module.ts import FabToolbar 19 | * ``` 20 | * import { FabToolbar } from './fab-toolbar/fab-toolbar'; 21 | * 22 | * public buttons = [ 23 | * { 24 | * icon: 'add', 25 | * title: 'Add', 26 | * color: 'dark', 27 | * handler: () => {console.log('added');} 28 | * }, 29 | * { 30 | * icon: 'cart', 31 | * title: 'Products', 32 | * color: 'dark', 33 | * handler: () => {console.log('Products');} 34 | * } 35 | * ] 36 | * ``` 37 | * 38 | * @see {@link https://github.com/ekhmoi/Ionic-Component-fab-toolbar Ionic-Component-fab-toolbar} 39 | * 40 | */ 41 | 42 | @Component({ 43 | selector: 'fab-toolbar', 44 | template: ` 45 |
46 |
47 | 48 | 49 | 56 | 57 | 58 | 59 |
60 | ` 61 | }) 62 | 63 | export class FabToolbar { 64 | 65 | public active: boolean = false; 66 | constructor(public el: ElementRef, public renderer: Renderer) {} 67 | 68 | 69 | @Input() position: string = 'left'; 70 | @Input() color: string = 'secondary'; 71 | @Input() icon: string = 'more'; 72 | @Input() cssClass: string = ''; 73 | @Input() enableBackdropDismiss: boolean = true; 74 | @Input() buttons: Array = []; 75 | 76 | ngOnInit() { 77 | this.renderer.setElementClass(this.el.nativeElement, this.position, true) 78 | } 79 | public onClick(event, button: any): void { 80 | // We are listening to click event on document in order to be able to close button on backdrop click 81 | // Therefore we need to check if user clicked on our component or outside 82 | if(!event && !button) { 83 | // clicked on backdrop 84 | if(this.enableBackdropDismiss === true && this.active) { 85 | this.closeButton(); 86 | return; 87 | } 88 | 89 | } 90 | if (this.el.nativeElement.contains(event.target)) { 91 | // User has clicked on our component. Check if he clicked on sub button or no. 92 | if(button) { 93 | let shouldDismiss = true; 94 | if (button.handler) { 95 | // a handler has been provided, execute it 96 | if (button.handler() === false) { 97 | // if the return value of the handler is false then do not dismiss 98 | shouldDismiss = false; 99 | } 100 | } 101 | 102 | if (shouldDismiss) { 103 | setTimeout(() => { 104 | this.closeButton(); 105 | }, 10); 106 | } 107 | } else { 108 | if(!this.active) this.openButton(); 109 | } 110 | } else { 111 | // User has clicked outside our component. 112 | // Check if `enableBackdropDismiss` is true and if component is opened. 113 | if(this.enableBackdropDismiss === true && this.active) { 114 | this.closeButton(); 115 | } 116 | } 117 | } 118 | 119 | public get width() { 120 | let width = window.innerWidth / 56 * 2; 121 | return 'scale(' + width + ')'; 122 | } 123 | 124 | public openButton(): void { 125 | this.renderer.setElementClass(this.el.nativeElement, 'activated', !this.active); 126 | setTimeout(() => { 127 | this.renderer.setElementClass(this.el.nativeElement, 'closed', false) 128 | this.renderer.setElementClass(this.el.nativeElement, 'opened', true); 129 | }, 400); 130 | this.renderer.setElementStyle(this.el.nativeElement, 'width', '100%'); 131 | this.active = !this.active; 132 | } 133 | 134 | public closeButton(): void { 135 | this.renderer.setElementClass(this.el.nativeElement, 'activated', !this.active); 136 | setTimeout(() => { 137 | this.renderer.setElementClass(this.el.nativeElement, 'opened', false) 138 | this.renderer.setElementClass(this.el.nativeElement, 'closed', true); 139 | this.renderer.setElementStyle(this.el.nativeElement, 'width', '68px'); 140 | }, 400); 141 | this.active = !this.active; 142 | } 143 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic", 3 | "short_name": "Ionic", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/imgs/logo.png", 8 | "sizes": "512x512", 9 | "type": "image/png" 10 | }], 11 | "background_color": "#4e8ef7", 12 | "theme_color": "#4e8ef7" 13 | } -------------------------------------------------------------------------------- /src/pages/about/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | About 5 | 6 | 7 | 8 | 9 | 10 | hzllo 11 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/pages/about/about.scss: -------------------------------------------------------------------------------- 1 | page-about { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/about/about.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { NavController } from 'ionic-angular'; 4 | 5 | @Component({ 6 | selector: 'page-about', 7 | templateUrl: 'about.html' 8 | }) 9 | export class AboutPage { 10 | 11 | constructor(public navCtrl: NavController) { 12 | 13 | 14 | } 15 | public sof() { 16 | // this.navCtrl.push(TestPage); 17 | console.log('hbjb'); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/pages/contact/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Contact 5 | 6 | 7 | 8 | 9 | 10 | 11 | Follow us on Twitter 12 | 13 | 14 | @ionicframework 15 | 16 | 17 | 20 | 21 | -------------------------------------------------------------------------------- /src/pages/contact/contact.scss: -------------------------------------------------------------------------------- 1 | page-contact { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/contact/contact.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { NavController,ActionSheetController } from 'ionic-angular'; 4 | 5 | @Component({ 6 | selector: 'page-contact', 7 | templateUrl: 'contact.html' 8 | }) 9 | export class ContactPage { 10 | 11 | constructor(public navCtrl: NavController,public actionSheetCtrl: ActionSheetController) { 12 | alert('ddd'); 13 | } 14 | sof() { 15 | let actionSheet = this.actionSheetCtrl.create({ 16 | title: 'Modify your album', 17 | buttons: [ 18 | { 19 | text: 'Destructive', 20 | role: 'destructive', 21 | handler: () => { 22 | console.log('Destructive clicked'); 23 | } 24 | },{ 25 | text: 'Archive', 26 | handler: () => { 27 | console.log('Archive clicked'); 28 | } 29 | },{ 30 | text: 'Cancel', 31 | role: 'cancel', 32 | handler: () => { 33 | console.log('Cancel clicked'); 34 | } 35 | } 36 | ] 37 | }); 38 | actionSheet.present(); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | IONIC 2 SWIPED TAB 4 | 5 | 6 | 7 | 8 | 9 | 10 | TAB1 11 | 12 | 13 | 14 | TAB2 15 | 16 | 17 | 18 |
19 | 20 |
21 | 26 | 27 |

TAB1

28 | 29 | 30 |

TAB2

31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home 2 | { 3 | .SKactiveSegment 4 | { 5 | color:rgba(138, 34, 40, 0.98) !important; 6 | } 7 | .indicatorSegment 8 | { 9 | -webkit-transition: 0.3s all; 10 | -moz-transition: 0.3s all; 11 | -o-transition: 0.3s all; 12 | transition: 0.3s all; 13 | transform-origin: top 0 left 0; 14 | width:50%; 15 | height:2px; 16 | background-color:rgba(138, 34, 40, 0.98) !important;; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Platform } from 'ionic-angular'; 3 | import { NavController } from 'ionic-angular'; 4 | import { Slides } from 'ionic-angular'; 5 | import { ViewChild } from '@angular/core'; 6 | 7 | @Component({ 8 | selector: 'page-home', 9 | templateUrl: 'home.html' 10 | }) 11 | export class HomePage { 12 | @ViewChild('mySlider') slider: Slides; 13 | 14 | public selected = 0; 15 | public indicator = null; 16 | public mySlideOptions = {}; 17 | 18 | ngAfterViewInit() 19 | { 20 | this.indicator = document.getElementById("indicator"); 21 | if (this.platform.is('windows')) 22 | { 23 | this.indicator.style.opacity = '0'; 24 | } 25 | } 26 | 27 | constructor(public navCtrl: NavController, public platform: Platform) 28 | { 29 | this.platform = platform; 30 | } 31 | 32 | select(index) 33 | { 34 | this.selected = index; 35 | if (index === 1) 36 | this.indicator.style.webkitTransform = 'translate3d(100%,0,0)'; 37 | if (index === 0) 38 | this.indicator.style.webkitTransform = 'translate3d(0%,0,0)'; 39 | this.slider.slideTo(index, 500); 40 | } 41 | 42 | onSlideChanged($event) 43 | { 44 | if (((($event.touches.startX - $event.touches.currentX) <= 100) || (($event.touches.startX - $event.touches.currentX) > 0)) && (this.slider.isBeginning() || this.slider.isEnd())) 45 | { 46 | //console.log("interdit Direction"); 47 | } 48 | else 49 | { 50 | //console.log("OK Direction"); 51 | this.indicator.style.webkitTransform = 'translate3d(' + (-($event.translate) / 4) + 'px,0,0)'; 52 | } 53 | 54 | } 55 | 56 | panEvent(e) 57 | { 58 | let currentIndex = this.slider.getActiveIndex(); 59 | if (currentIndex === 1) 60 | { 61 | this.selected = 1; 62 | this.indicator.style.webkitTransform = 'translate3d(100%,0,0)'; 63 | } 64 | if (currentIndex === 0) 65 | { 66 | this.selected = 0; 67 | this.indicator.style.webkitTransform = 'translate3d(0%,0,0)'; 68 | } 69 | } 70 | 71 | 72 | 73 | } 74 | -------------------------------------------------------------------------------- /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 { HomePage } from '../home/home'; 4 | import { AboutPage } from '../about/about'; 5 | import { ContactPage } from '../contact/contact'; 6 | 7 | @Component({ 8 | templateUrl: 'tabs.html' 9 | }) 10 | export class TabsPage { 11 | // this tells the tabs component which Pages 12 | // should be each tab's root Page 13 | tab1Root: any = HomePage; 14 | tab2Root: any = AboutPage; 15 | tab3Root: any = ContactPage; 16 | 17 | constructor() { 18 | 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/pages/test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | About 5 | 6 | 7 | 8 | 9 | 10 | test 11 | 12 | -------------------------------------------------------------------------------- /src/pages/test/test.scss: -------------------------------------------------------------------------------- 1 | page-test { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/test/test.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { NavController } from 'ionic-angular'; 4 | 5 | @Component({ 6 | selector: 'page-test', 7 | templateUrl: 'test.html' 8 | }) 9 | export class TestPage { 10 | 11 | constructor(public navCtrl: NavController) { 12 | 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | // tick this to make the cache invalidate and update 2 | const CACHE_VERSION = 1; 3 | const CURRENT_CACHES = { 4 | 'read-through': 'read-through-cache-v' + CACHE_VERSION 5 | }; 6 | 7 | self.addEventListener('activate', (event) => { 8 | // Delete all caches that aren't named in CURRENT_CACHES. 9 | // While there is only one cache in this example, the same logic will handle the case where 10 | // there are multiple versioned caches. 11 | const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => { 12 | return CURRENT_CACHES[key]; 13 | }); 14 | 15 | event.waitUntil( 16 | caches.keys().then((cacheNames) => { 17 | return Promise.all( 18 | cacheNames.map((cacheName) => { 19 | if (expectedCacheNames.indexOf(cacheName) === -1) { 20 | // If this cache name isn't present in the array of "expected" cache names, then delete it. 21 | console.log('Deleting out of date cache:', cacheName); 22 | return caches.delete(cacheName); 23 | } 24 | }) 25 | ); 26 | }) 27 | ); 28 | }); 29 | 30 | // This sample illustrates an aggressive approach to caching, in which every valid response is 31 | // cached and every request is first checked against the cache. 32 | // This may not be an appropriate approach if your web application makes requests for 33 | // arbitrary URLs as part of its normal operation (e.g. a RSS client or a news aggregator), 34 | // as the cache could end up containing large responses that might not end up ever being accessed. 35 | // Other approaches, like selectively caching based on response headers or only caching 36 | // responses served from a specific domain, might be more appropriate for those use cases. 37 | self.addEventListener('fetch', (event) => { 38 | 39 | event.respondWith( 40 | caches.open(CURRENT_CACHES['read-through']).then((cache) => { 41 | return cache.match(event.request).then((response) => { 42 | if (response) { 43 | // If there is an entry in the cache for event.request, then response will be defined 44 | // and we can just return it. 45 | 46 | return response; 47 | } 48 | 49 | // Otherwise, if there is no entry in the cache for event.request, response will be 50 | // undefined, and we need to fetch() the resource. 51 | console.log(' No response for %s found in cache. ' + 52 | 'About to fetch from network...', event.request.url); 53 | 54 | // We call .clone() on the request since we might use it in the call to cache.put() later on. 55 | // Both fetch() and cache.put() "consume" the request, so we need to make a copy. 56 | // (see https://fetch.spec.whatwg.org/#dom-request-clone) 57 | return fetch(event.request.clone()).then((response) => { 58 | 59 | // Optional: add in extra conditions here, e.g. response.type == 'basic' to only cache 60 | // responses from the same domain. See https://fetch.spec.whatwg.org/#concept-response-type 61 | if (response.status < 400 && response.type === 'basic') { 62 | // We need to call .clone() on the response object to save a copy of it to the cache. 63 | // (https://fetch.spec.whatwg.org/#dom-request-clone) 64 | cache.put(event.request, response.clone()); 65 | } 66 | 67 | // Return the original response object, which will be used to fulfill the resource request. 68 | return response; 69 | }); 70 | }).catch((error) => { 71 | // This catch() will handle exceptions that arise from the match() or fetch() operations. 72 | // Note that a HTTP error response (e.g. 404) will NOT trigger an exception. 73 | // It will return a normal response object that has the appropriate error code set. 74 | console.error(' Read-through caching failed:', error); 75 | 76 | throw error; 77 | }); 78 | }) 79 | ); 80 | }); -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/v2/theming/ 3 | @import "ionic.globals"; 4 | 5 | 6 | // Shared Variables 7 | // -------------------------------------------------- 8 | // To customize the look and feel of this app, you can override 9 | // the Sass variables found in Ionic's source scss files. 10 | // To view all the possible Ionic variables, see: 11 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 12 | 13 | $text-color: #000; 14 | $background-color: #fff; 15 | 16 | 17 | // Named Color Variables 18 | // -------------------------------------------------- 19 | // Named colors makes it easy to reuse colors on various components. 20 | // It's highly recommended to change the default colors 21 | // to match your app's branding. Ionic uses a Sass map of 22 | // colors so you can add, rename and remove colors as needed. 23 | // The "primary" color is the only required color in the map. 24 | 25 | $colors: ( 26 | primary: #387ef5, 27 | secondary: #32db64, 28 | danger: #f53d3d, 29 | light: #f4f4f4, 30 | dark: #222, 31 | favorite: #69BB7B 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 | $ionicons-font-path: "../assets/fonts"; 72 | @import "ionicons"; 73 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "declaration": true, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "module": "es2015", 12 | "moduleResolution": "node", 13 | "target": "es5" 14 | }, 15 | "exclude": [ 16 | "node_modules" 17 | ], 18 | "compileOnSave": false, 19 | "atom": { 20 | "rewriteTsconfig": false 21 | } 22 | } -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------