【ionic】ion-side-menuとion-tabsを同じ画面で使う
はじめに
今回やりたかったのはこんな画面
スタートテンプレートでサイドメニューとタブのものがそれぞれあるのでそれらを参考にした。
実装
まずはベースとなるHTMLを作る。ion-nav-viewがあるだけ。
index.html
<body ng-app="starter"> <ion-nav-view></ion-nav-view> </body>
app.jsで、
menu.html > tabs.html > content1.html、contents2.html、contents3.htmlと階層構造になるように設定する。
js/app.js
angular.module('starter', ['ionic', 'starter.controllers']) ・・・ .config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'templates/menu.html', controller: 'AppCtrl' }) // メニューの下にタブを置く .state("app.tab", { url: "/tab", views: { "menuContent": { templateUrl: "templates/tabs.html", controller: "TabCtrl" } } }) // タブ1 .state("app.tab.content1", { url: "/content1", views: { "tab-content1": { templateUrl: "templates/content1.html", controller: "Content1Ctrl" } } }) // タブ2、タブ3の中身を同様に ・・・ // デフォルト $urlRouterProvider.otherwise("app/tab/content1"); });
コントローラはとりあえず作っただけ。何もしてない。
js/controllers.js
angular.module('starter.controllers', []) // 共通コントローラー .controller("AppCtrl", function($scope, $ionicModal, $timeout) { }) // タブコントローラー .controller("TabCtrl", function($scope, $stateParams) { }) // コンテンツ1 .controller("Contents1Ctrl", function($scope, $stateParams) { }) // コンテンツ2、コンテンツ3も同様に
templates/menu.html
<ion-side-menus> <!-- 左メニュー --> <ion-side-menu side="left"> <ion-header-bar class="bar-stable"> <h1 class="title">メニュー</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item menu-close ng-click="showInformation()">メニュー1</ion-item> <ion-item menu-close ng-click="showInformation()">メニュー2</ion-item> <ion-item menu-close ng-click="showInformation()">メニュー3</ion-item> </ion-list> </ion-content> </ion-side-menu> <!-- メインコンテンツ --> <ion-side-menu-content> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> </button> </ion-nav-buttons> </ion-nav-bar> <!-- ここにtabs.htmlを差し込む形 --> <ion-nav-view name="menuContent"></ion-nav-view> </ion-side-menu-content> </ion-side-menus>
templates/tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive"> <ion-tab title="タブ1" icon-off="ion-ios-book" icon-on="ion-ios-book" href="#/app/tab/contents1"> <ion-nav-view name="tab-contents1"></ion-nav-view> </ion-tab> ・・・ </ion-tabs>
templates/contents1.html
<ion-view view-title="タブ1"> <ion-content> <p>タブ1</p> </ion-content> </ion-view>
コードばっかりになってしまったけど、なんとなくイメージはできました。
以上です