Skip to content

Instantly share code, notes, and snippets.

@satnami

satnami/Ionic side menu with tabs in subview.markdown

Created November 12, 2015 09:03
Show Gist options
  • Save satnami/7eab1423a458cc9a5947 to your computer and use it in GitHub Desktop.
Save satnami/7eab1423a458cc9a5947 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic side menu with tabs in subview
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic app</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<style>
.tab-nav.tabs {
bottom: 0;
transition: all 150ms ease-out !important;
}
.tabs-hide .tab-nav.tabs {
bottom: -50px;
transition: all 150ms ease-out !important;
}
</style>
</head>
<body>
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="list">
<a class="item" menu-close ui-sref="tabs.welcome">
Welcome
</a>
<div class="item item-divider">
Search restaurants
</div>
<a class="item" menu-close ui-sref="tabs.countries">
Countries
</a>
<div class="item item-divider">
Favorite restaurants
</div>
<a class="item" menu-close ui-sref="tabs.restaurant">
Restaurant I
</a>
<a class="item" menu-close ui-sref="tabs.restaurant">
Restaurant II
</a>
<a class="item" menu-close ui-sref="tabs.restaurant">
Restaurant III
</a>
</div>
</ion-side-menu>
</ion-side-menus>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive tabs-animation" ng-class="{ false:'tabs-hide' }[tabs.show]">
<ion-tab title="Home" icon="ion-ios-home-outline" ui-sref="tabs.restaurant">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Menu" icon="ion-ios-list-outline" ui-sref="tabs.restaurant-menu">
<ion-nav-view name="menu-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-email-outline" ui-sref="tabs.restaurant-contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="welcome.html" type="text/ng-template">
<ion-view view-title="Welcome">
<ion-content class="has-header has-footer padding">
<h1>Hi there!</h1>
<p>This is an Ionic app with a combination of a side menu and a tabs bar. As an example you can find restaurants based on their location or you could go directly to your favorite restaurant. The lists don't have a tabs bar and the restaurants do.</p>
<p>[ WORK IN PROGRESS... ]</p>
</ion-content>
</ion-view>
</script>
<script id="countries.html" type="text/ng-template">
<ion-view view-title="Countries">
<ion-content class="has-header has-footer">
<div class="list">
<a class="item item-icon-right" ng-repeat="country in countries" ui-sref="tabs.country">
{{ country.name }}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="country.html" type="text/ng-template">
<ion-view view-title="Country">
<ion-content class="has-header has-footer">
<div class="list">
<a class="item item-icon-right" ng-repeat="city in cities" ui-sref="tabs.city">
{{ city.name }}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="city.html" type="text/ng-template">
<ion-view view-title="City">
<ion-content class="has-header has-footer">
<div class="list">
<a class="item item-icon-right" ng-repeat="restaurant in restaurants" ui-sref="tabs.restaurant">
{{ restaurant.name }}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="restaurant.html" type="text/ng-template">
<ion-view view-title="Restaurant">
<ion-content class="has-header has-footer padding">
<h1>Home tab</h1>
</ion-content>
</ion-view>
</script>
<script id="restaurant-menu.html" type="text/ng-template">
<ion-view view-title="Restaurant">
<ion-content class="has-header has-footer">
<div class="list">
<a class="item item-icon-right" ng-repeat="category in categories" ui-sref="tabs.restaurant-menu-category">
{{ category.name }}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="restaurant-menu-category.html" type="text/ng-template">
<ion-view view-title="Item">
<ion-content class="has-header has-footer padding">
<h1>Item</h1>
</ion-content>
</ion-view>
</script>
<script id="restaurant-contact.html" type="text/ng-template">
<ion-view view-title="Restaurant">
<ion-content class="has-header has-footer padding">
<h1>Contact tab</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
Ionic side menu with tabs in subview.markdown
Raw
script.js
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'tabs.html',
controller: 'TabsCtrl'
})
.state('tabs.welcome', {
url: '/welcome',
views: {
'home-tab': {
templateUrl: 'welcome.html',
controller: 'WelcomeCtrl'
}
}
})
.state('tabs.countries', {
url: '/countries',
views: {
'home-tab': {
templateUrl: 'countries.html',
controller: 'CountriesCtrl'
}
}
})
.state('tabs.country', {
url: '/country',
views: {
'home-tab': {
templateUrl: 'country.html',
controller: 'CountryCtrl'
}
}
})
.state('tabs.city', {
url: '/city',
views: {
'home-tab': {
templateUrl: 'city.html',
controller: 'CityCtrl'
}
}
})
.state('tabs.restaurant', {
url: '/restaurant',
views: {
'home-tab': {
templateUrl: 'restaurant.html',
controller: 'RestaurantCtrl'
}
}
})
.state('tabs.restaurant-menu', {
url: '/restaurant/menu',
views: {
'menu-tab': {
templateUrl: 'restaurant-menu.html',
controller: 'RestaurantMenuCtrl'
}
}
})
.state('tabs.restaurant-menu-category', {
url: '/restaurant/menu/item',
views: {
'menu-tab': {
templateUrl: 'restaurant-menu-category.html'
}
}
})
.state('tabs.restaurant-contact', {
url: '/restaurant/contact',
views: {
'contact-tab': {
templateUrl: 'restaurant-contact.html'
}
}
});
$urlRouterProvider.otherwise('/tab/welcome');
})
.service('TabsService', function() {
this.show = false;
})
.controller('TabsCtrl', function($scope, TabsService) {
$scope.tabs = TabsService;
})
.controller('WelcomeCtrl', function($scope, TabsService) {
$scope.$on('$ionicView.enter', function(){
TabsService.show = false;
});
})
.controller('CountriesCtrl', function($scope, TabsService) {
$scope.$on('$ionicView.enter', function(){
TabsService.show = false;
});
$scope.countries = [
{ id: 1, name: 'Country A' },
{ id: 2, name: 'Country B' },
{ id: 3, name: 'Country C' },
{ id: 4, name: 'Country D' },
{ id: 5, name: 'Country E' },
{ id: 6, name: 'Country F' },
{ id: 7, name: 'Country G' }
];
})
.controller('CountryCtrl', function($scope, TabsService) {
$scope.$on('$ionicView.enter', function(){
TabsService.show = false;
});
$scope.cities = [
{ id: 1, name: 'City 1' },
{ id: 2, name: 'City 2' },
{ id: 3, name: 'City 3' },
{ id: 4, name: 'City 4' },
{ id: 5, name: 'City 5' }
];
})
.controller('CityCtrl', function($scope, TabsService) {
$scope.$on('$ionicView.enter', function(){
TabsService.show = false;
});
$scope.restaurants = [
{ id: 1, name: 'Restaurant I' },
{ id: 2, name: 'Restaurant II' },
{ id: 3, name: 'Restaurant III' },
{ id: 4, name: 'Restaurant IV' },
{ id: 5, name: 'Restaurant V' },
{ id: 6, name: 'Restaurant VI' },
{ id: 7, name: 'Restaurant VII' }
];
})
.controller('RestaurantCtrl', function($scope, TabsService) {
$scope.$on('$ionicView.enter', function(){
TabsService.show = true;
});
})
.controller('RestaurantMenuCtrl', function($scope, TabsService) {
$scope.$on('$ionicView.enter', function(){
TabsService.show = true;
});
$scope.categories = [
{ id: 1, name: 'Entree' },
{ id: 2, name: 'Main course' },
{ id: 3, name: 'Dessert' }
];
});
Raw
scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment