Ok. I am currently using tabs on the bottom part of my screen for navigation. I have them set up with a margin from the top of 30% so that I can see index.html in the background.
This is my style.css
.margin{
margin-top: 30%;
border-top: dotted;
}
This is one of my tabs
<ion-content class="margin">
<p>This is the Friends page</p>
</ion-content>
This is my index.html which I want to appear in the background.
</head>
<body ng-app="starter">
<div id="map-canvas"></div>
<ion-content></ion-content>
<ion-nav-view></ion-nav-view>
</body>
</html>
This is my app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'ProfileCtrl'
}
}
})
.state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/tab-search.html',
controller: 'SearchCtrl'
}
}
})
.state('tab.trucks', {
url: '/trucks',
views: {
'tab-trucks': {
templateUrl: 'templates/tab-trucks.html',
controller: 'TrucksCtrl'
}
}
});
$urlRouterProvider.otherwise('/tab/dash');
});
Am I going about this the right way with my index.html set to display the map?
Thanks!