Skip to content

Instantly share code, notes, and snippets.

@davidmaogomezz

davidmaogomezz/Ionic Tabs and Menu.markdown

Created September 16, 2015 18:29
Show Gist options
  • Save davidmaogomezz/ad6b224f2cf4824e994c to your computer and use it in GitHub Desktop.
Save davidmaogomezz/ad6b224f2cf4824e994c to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Tabs and Menu
Raw
index.html
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Ionic Framework Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body>
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item href="#/" menu-close>Home</ion-item>
<ion-item href="#/about" menu-close>About</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="tabs.html" type="text/ng-template">
<ion-view title="Home">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon="ion-gear-a" href="#/tab/settings" >
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Sign-Out" icon="ion-log-out">
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h1 style="text-align: center;">Home Page</h1>
</ion-content>
</ion-view>
</script>
<script id="settings.html" type="text/ng-template">
<ion-view title="Settings">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h1 style="text-align: center;">Settings Page</h1>
</ion-content>
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<ion-view title="About">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h1 style="text-align: center;">About Page</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
script.js
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
templateUrl: 'home.html',
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.settings', {
url: '/settings',
views: {
'settings-tab': {
templateUrl: 'settings.html'
}
}
})
.state('about', {
url: '/about',
controller: 'AboutCtrl',
templateUrl: 'about.html'
});
$urlRouterProvider.otherwise('/tab');
});
app.controller('TabsCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
}
});
app.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate) {
});
app.controller('AboutCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment