I have the below html to build a side-menu in Ionic. I'm aiming to anchor the last item in the menu, 'login' to the bottom of the menu, away from the other items. Is there a simple way to do this in Ionic?
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/people">
<i class="icon ion-ios7-people"></i>
People
</ion-item>
<ion-item nav-clear menu-close href="#/app/places">
<i class="icon ion-ios7-location"></i>
Places
</ion-item>
<ion-item nav-clear menu-close href="#/app/perks">
<i class="icon ion-ios7-star"></i>
Perks
</ion-item>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Were are doing the same thing in a project I am building and found a solution that might help you. You can just adjust the styles to your needs.
<ion-side-menu side="right">
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#">Item1</ion-item>
<ion-item nav-clear menu-close href="#">Item2</ion-item>
<ion-item nav-clear menu-close href="#">Item3</ion-item>
<ion-item nav-clear menu-close href="#">Item4</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-stable">
<ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;">Logout</ion-item>
</ion-footer-bar>
</ion-side-menu>
#Louwki's answer is correct for Ionic 1, and only a little different in Ionic 2.
Updated for Ionic 2 (ion-footer-bar became ion-footer).
<ion-side-menu side="right">
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#">Item1</ion-item>
<ion-item nav-clear menu-close href="#">Item2</ion-item>
<ion-item nav-clear menu-close href="#">Item3</ion-item>
<ion-item nav-clear menu-close href="#">Item4</ion-item>
</ion-list>
</ion-content>
<ion-footer class="bar-stable">
<ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;bottom:0;">Logout</ion-item>
</ion-footer>
</ion-side-menu>
I did it like this. You don't need to add some CSS.
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Title</h1>
</header>
<ion-content class="has-header has-footer">
<ion-list>
<ion-item nav-clear menu-close ui-sref="home">Home</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-stable" ng-click="logout()">
<div class="title"><i class="icon ion-power"></i> Logout</div>
</ion-footer-bar>
</ion-side-menu>
Related
when i click home in a menu, there is used [this.navCtrl.setRoot(homepage);].
in that page it does not display menu button.
actullay this is my home page:
when i set setroot for homepage it shows like this
Html code in header:
<button ion-button menuToggle style="margin-top: 10px;" >
<ion-icon name="menu" style="color: white;"></ion-icon>
</button>
menu code:
<ion-menu [content]="mycontent" type="overlay"> <ion-content>
<ion-list class="nobottomborder">
<ion-item (click)="dashboard()">
<ion-icon ios="ios-home" md="md-home" class="sidebaricon"></ion-icon>
Home
</ion-item>
<ion-item (click)="addcart()">
<ion-icon ios="ios-cart" md="md-cart" class="sidebaricon"></ion-icon>
My Cart
</ion-item>
<ion-item (click)="orders()">
<ion-icon ios="ios-list-box" md="md-list-box" class="sidebaricon"></ion-icon>
My Orders
</ion-item>
<ion-item (click)="logout()">
<ion-icon ios="ios-exit" md="md-exit" class="sidebaricon"></ion-icon>
Logout
</ion-item>
<ion-item class="powered">
Powered by
<ion-row>
<img src="assets/imgs/logo.png" alt="logo">
</ion-row>
</ion-item>
</ion-list> </ion-content>
</ion-menu>
I have added like below and it is working great(I have homepage root initial) :
Home:
<ion-navbar>
<button menuToggle ion-button>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
I want to add a grayspace of between header and the first card starting.
And want to remove the line highlighting on the card's top area in the screen, I have mentioned it the screenshot provided.
.html
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
enter image description here
Add the bottom-border in the header.
ion-header {
border-bottom: 10px solid gray;
}
In ionic is having background white
You can change background in
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content style="background:lightgray;">
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
and change header
<ion-header style="border-bottom: 5px solid gray;">
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
I'm using ionic in my project. How can I set the back button on the left in the header? Here is my code:
<ion-header-bar class="bar-positive" align-title="left" >
<h1 class="title" style="text-align: center">More Info</h1>
<button ng-click="myGoBack()" class="button button-clear"> <i class="ion- chevron-left " ></i> Back </button>
</ion-header-bar>
<ion-view>
<ion-content >
<ion-list class="list-inset" style="margin-right: 1%;margin-right: 1%">
<ion-item style="margin-right: 1%;margin-right: 1%" class="item-text-wrap" ng-init="missionDetail.getAllFicheMissionDetails(missionId,desId);">
vehicule :{{payloadMissionDetail.vehicule}}
Mission :{{payloadMissionDetail.mission}}
Chau1 :{{payloadMissionDetail.ch}}
Chau2 :{{payloadMissionDetail.ch2}}
Départ :{{payloadMissionDetail.depart}}
</ion-item>
</ion-list>
You can use below code.
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
#Documentation : http://ionicframework.com/docs/api/directive/ionHeaderBar/
I'm trying to create an app that has a different right side menu when viewing a certain view. There are examples online on how to replace certain buttons in for opening the sidemenu, but there are none of how to replace the content of the menu.
I've got the following code:
menu.html (abstract view that all the other views inherit)
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<!-- Left side menu button -->
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- Right side menu button, updates internetstatus on click to determine whether or not to show music players-->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-music-note" menu-toggle="right" ng-click="checkConn()">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<!-- Left side menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/stages">
Stages
</ion-item>
<ion-item menu-close href="#/app/info">
Info
</ion-item>
<ion-item menu-close href="#/app/newsfeed">
News feed
</ion-item>
<ion-item menu-close href="#/app/floorplan">
Floorplan
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- Right side menu -->
<ion-side-menu side="right">
<ion-header-bar class="bar-stable">
<h1 class="title">Right</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-show="internetconn" style="padding: 5px;" class="player">
<iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&embed_uuid=bbb2b97a-f82c-4732-a951-94fcf0a7dd72&feed=https%3A%2F%2Fwww.mixcloud.com%2FERMAHGERD_BERTMERN%2F0715-spieje-summer-mixtape%2F&hide_cover=1&hide_tracklist=1&light=1&mini=1&hide_artwork=1&replace=0" frameborder="0"></iframe>
</ion-item>
<ion-item menu-close ng-show="internetconn" style="padding: 5px;" class="player">
<iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&embed_uuid=8b9f98e7-dee8-4492-94b1-df72753057d9&feed=https%3A%2F%2Fwww.mixcloud.com%2FERMAHGERD_BERTMERN%2F0515-spieje-mixtape-mei-2015%2F&hide_cover=1&hide_tracklist=1&light=1&mini=1&hide_artwork=1&replace=0" frameborder="0"></iframe>
</ion-item>
<ion-item menu-close ng-show="internetconn" style="padding: 5px;" class="player">
<audio style="width:100%" controls><source src="http://www.spieje.nl/downloads/mixtape/Spieje2015MixtapeApr.mp3" type="audio/mpeg"></audio>
</ion-item>
<ion-item menu-close ng-hide="internetconn">
Geen internet!
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Other view html (where menu must be different)
<ion-view view-title="Floorplan">
<!-- Override right button, change icon-->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-map" menu-toggle="right">
</button>
</ion-nav-buttons>
<!-- Override right menu content -->
<!-- Right side menu -->
<ion-side-menu side="right">
<ion-header-bar class="bar-stable">
<h1 class="title">Right</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>
<button class="button button-icon button-clear ion-map"></button>
</ion-item>
<ion-item>
<button class="button button-icon button-clear ion-paper-airplane"></button>
</ion-item>
<ion-item>
<button class="button button-icon button-clear ion-transgender"></button>
</ion-item>
<ion-item>
<button class="button button-icon button-clear ion-pizza"></button>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- Page content -->
<ion-content>
Image here
</ion-content>
</ion-view>
The button icon changes and works, but the result is that the right menu content stays the same and there is a weird list in the content view with the content I want to appear in the menu.
Is there a way to do this in the html like this, and if so, how. Or is my only option to use a boolean and use ng-show and ng-hide?
EDIT
I used a combination of $rootScope, $ionicView.enter and $ionicView.leave to keep track of when the view was selected. Then I used ng-show and ng-hide in the menu's.
The answer below is the answer to the question, but this didn't work for me as I had music players in the right menu and I wanted them to keep playing.
You need to use templates for each menu. The example below could help you:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
},
'menu-right#tab': {
templateUrl: 'templates/tab-activity-menu.html'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
},
'menu-right#tab': {
templateUrl: 'templates/tab-profile-menu.html'
}
}
});
$urlRouterProvider.otherwise("/tab/tab-activity");
})
.controller('NavCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.showMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('tabActivityCtrl', function($scope) {})
.controller('tabProfileCtrl', function($scope) {});
<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>Tabs Example</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content ng-controller="NavCtrl">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-music-note" ng-click="" menu-toggle="right">
</button>
</ion-nav-buttons>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<!-- Left side menu (fixed) -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<li>
<a class="item" menu-close nav-clear href="#/tab/home">Home</a>
</li>
<li>
<a class="item" menu-close href="#/tab/chat">Chat</a>
</li>
<li>
<a class="item" menu-close href="#/tab/drink">Drink</a>
</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
<!-- Right side menu (in templates different for each view) -->
<ion-side-menu side="right">
<div ui-view='menu-right' />
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/tab-activity.html" type="text/ng-template">
<ion-view title="tab-activity">
<ion-content>
<h3>tab-activity</h3>
<p>Example of Ionic tabs. Navigate to each tab, and navigate to child views of each tab and notice how each tab has its own navigation history.</p>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-profile.html" type="text/ng-template">
<ion-view title="tab-profile">
<!-- Override right button, change icon-->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-map" menu-toggle="right">
</button>
</ion-nav-buttons>
<!-- Page content -->
<ion-content>
<h3>tab-profile</h3>
<p>bla bla bla </p>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-activity-menu.html" type="text/ng-template">
<ion-header-bar class="bar-stable">
<h1 class="title">Activity Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li>
<a class="item" menu-close nav-clear href="#/tab/home">Home</a>
</li>
<li>
<a class="item" menu-close href="#/tab/chat">Chat</a>
</li>
<li>
<a class="item" menu-close href="#/tab/drink">Drink</a>
</li>
</ul>
</ion-content>
</script>
<script id="templates/tab-profile-menu.html" type="text/ng-template">
<ion-header-bar class="bar-assertive">
<h1 class="title">Profile Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li>
<a class="item" menu-close nav-clear href="#/tab/home">Test</a>
</li>
<li>
<a class="item" menu-close href="#/tab/chat">Check</a>
</li>
</ul>
</ion-content>
</script>
</body>
</html>
Need to create test 1 2 3 4 belongs to the header menu of Test
How to create mobile Side menu with sub menu in ionic framework?
<ion-list>
<ion-item menu-close-keep-history href="#/app/profile" class="item-icon-left">
<i class="icon ion-ios-home"></i> Test
</ion-item>
<ion-item menu-close-keep-history href="#/app/assignedtasks" class="item-icon-left">
<i class="icon ion-ios-paper"></i>
test 1
</ion-item>
<ion-item menu-close-keep-history href="#/app/requirements" class="item-icon-left">
<i class="icon ion-ios-paper"></i>
test 2
</ion-item>
<ion-item menu-close-keep-history href="#/app/machinery" class="item-icon-left">
<i class="icon ion-ios-paper"></i>
test 3
</ion-item>
<ion-item menu-close-keep-history href="#/app/chat" class="item-icon-left">
<i class="icon ion-ios-people"></i>
test 4
</ion-item>
<ion-item menu-close-keep-history href="#/app/settings" class="item-icon-left">
<i class="icon ion-ios-gear"></i>
Settings
</ion-item>
<ion-item menu-close-keep-history href="#/app/logout" class="item-icon-left">
<i class="icon ion-ios-locked"></i>
Logout
</ion-item>
</ion-list>