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/
Related
I'm trying to increase the size of the ion-slide and the img to match each other.
I'm trying to do this using CSS, but I'm not managing to increase the size of the two together.
HTML:
<ion-view view-title="Prefeitura Municipal">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-content>
<ion-slide-box>
<ion-slide>
<div class = "box boxImagem">
<img ng-src="img/Boletos.jpg" class="minha-imagem">
</div>
</ion-slide>
<ion-slide>
<div class = "box boxImagem2">
<img ng-src="img/Arraiá.jpg" class="minha-imagem">
</div>
</ion-slide>
<ion-slide>
<div class = "box boxImagem3">
<img ng-src="img/Alimentação.jpg" class="minha-imagem">
</div>
</ion-slide>
</ion-slide-box>
<div>
<div class="row icon-row">
<ion-item class="col text-center">
<img class="full-image" src="img/capitol-building.png"></img>
<br>Prefeitura
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/leader-with-loudspeaker.png" ui-sref="app.principal"></img>
<br>Ouvidoria<br>
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/earth-pictures.png"></img>
<br>Turismo<br>
</ion-item>
</div>
<div class="row icon-row">
<ion-item class="col text-center">
<img class="full-image" src="img/college-graduation.png"></img>
<br>Educação <br>
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/doctor-stethoscope.png"></img>
<br>Saúde
</ion-item>
<ion-item class="col text-center">
<img class="full-image" src="img/bus-service.png"></img>
<br>Serviços<br>Públicos
</ion-item>
<!-- <ion-item class="col text-center">
<a class="botao button button-positive" href="#/app/site">Icon</a>
<br>Site
</ion-item> -->
</div>
</div>
</ion-content>
<div class="bar bar-footer bar-balanced">
<button class="button icon ion-android-home">Inicio</button>
<h1 class="title">Prefeitura</h1>
<button class="button icon ion-earth pull-right">Site</button>
</div>
</ion-view>
CSS
boxImgem, .boxImagem2, .boxImagem3{
width: 100%;
height: 100%;
}
.minha-imagem{
float: left;
width: 100%;
text-align: center;
margin: 0px 0px 0;
}
As far as I know the width is set via JavaScript and thus will overwrite the css rules.
Also it's easier to help if you use a service such as codepen to create a working demo of your code
<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
In the div two button and on image now how to set div in vertically center.
<ion-view class="ion" view-title="Browse">
<ion-content class="content" >
<div class="list landing-div">
<img class="landing-image" src="img/slpash_logo.png" >
div{
vertical-align: text-top;
}
<div class="row sub-div">
<div class="col">
<button class="button icon-left ion-person button-full landing-button-left" type="submit">LOGIN</button>
</div>
<div class="col">
<button class="button icon-right ion-android-list button-full landing-button-right" ui-sref="#/app/register" type="submit">SIGNUP</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
I am working on ionic1 and angularjs I have already worked with tabs but now I am facing an issues where my tabs should be appear only in a particular div so on the particular area of my html page only my ion-tabs should work but it is not displaying well as we i am expected.
here is my .html page
<ion-modal-view>
<div class="bar bar-header bar-calm">
<button class="button icon ion-navicon"></button>
<h1 class="title">Happy Home</h1>
<button class="button" ng-click="closeLogout()">LogOut</button>
</div>
<ion-content>
<div class = "row responsive-sm" style = "padding-top:50px">
<div class = "col">
<label class="item item-input item-select">
<br>
<select>
<option>B09-301</option>
<option selected>G45-94</option>
<option>R8910</option>
</select>
</label>
</div>
</div>
<div style="background-color: #DEE0E0">
<div class = "row">
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-home item-floating-label" ></i>
MEMBERS
</div>
</div>
</div>
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-model-s item-floating-label"></i>
Vechical
</div>
</div>
</div>
<div class = "col-33">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-bookmarks item-floating-label"></i>
Booking
</div>
</div>
</div>
</div>
<div class ="row">
<div class = "col col-top">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-person-stalker item-floating-label"></i>
Staff
</div>
</div>
</div>
<div class = "col col-top">
<div class="card">
<div class="item item-text-avatar" style="background-color: #11C1F3">
<i class="icon ion-ios-home-outline item-floating-label"></i>
Visitor
</div>
</div>
</div>
</div>
</div>
<div class = "row">
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tab title="MyDues">
<ion-content>
<h1>happy home Dues</h1>
</ion-content>
</ion-tab>
<ion-tab title="Deposite">
<ion-content>
<h1>happy home Deposite</h1>
</ion-content>
</ion-tab>
<ion-tab title="Advance">
<ion-content>
<h1>happy home Advance</h1>
</ion-content>
</ion-tab>
<ion-tab title="History">
<ion-content>
<h1>happy home History</h1>
</ion-content>
</ion-tab>
</ion-tabs>
</div>
</ion-content>
Here you can see the ion-tabs where i have implemented the tabs div
and here is the sample image where i should use ion-tabs help me if some one know how to use the ion-tabs for my MY DUES,ADVANCE,DEPOSIT,HISTORY.
THANK YOU,
Put inside of <div> and add this css to this div
width: 100%;
position: fixed;
Working for me
I am working on ionic 3, I got this way, I put the tab inside ion-content and works for me.
<ion-content>
<ion-card>
<ion-row fixed padding>
<ion-col>
<h2 class="card-titulo"> Localidade</h2>
<h2 class="card-titulo"> Data Início</h2>
</ion-col>
<ion-col>
<h2 class="card-descricao">
<ion-icon name="pin"></ion-icon>
Fortaleza-CE
</h2>
<h2 class="card-descricao">
<ion-icon name="calendar"></ion-icon>
24/01/18 10:47
</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Clima</ion-label>
<ion-select [(ngModel)]="clima">
<ion-option>Frio</ion-option>
<ion-option>quente</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Equipamento</ion-label>
<ion-select [(ngModel)]="equipamento">
<ion-option>Medidor</ion-option>
<ion-option>Equipament teste</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
<ion-content>
<tabs-obra></tabs-obra>
</ion-content>
<ion-fab bottom right>
<button ion-fab mini (click)="abrirListaAtividade()">
<ion-icon name="checkmark"></ion-icon>
</button>
</ion-fab>
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>
I want to set a image for background in ionic. here is my code.it's not working.in here style sheet is not working. when I should add the style sheet ? I dnot know how to find the error.
<ion-side-menus enable-menu-with-back-views="false" style="background: url('../img/background.jpg');background-size: 100% 100%;background-repeat: no-repeat;color: #EF4836;">
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header ionBarM " align-title="center">
<ion-nav-back-button style="color: white">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear button-light ion-navicon custom-icon" menu-toggle="right" style=" color: white;">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<div class="bar bar-subheader ionSubBar ">
<div class="button-bar">
</div>
</div>
<ion-content class="has-subheader" style="background: url('../img/background.jpg');background-size: 100% 100%;background-repeat: no-repeat;color: #EF4836;">
<ion-refresher .... </ion-refresher>
<ion-list>
<div class="list list-inset" data-ng-repeat="announcement in announcements">
<a class="item item-thumbnail-left" ui-sref="app.shop({id:announcement.id})" ng-click="showshop({{$index}})">
......
</a>
</div>
</ion-list>
</ion-content>
</ion-side-menus>
Do like this,
Style.css
/*Back Ground image For App*/
ion-view {
background-image:url("../img/background.jpg") !important;
background-repeat:no-repeat;
background-size:cover;
overflow:hidden;
}