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>
Related
I want to insert a slider just below the header(inside the ion-content). But I'm getting white space from the top, left and right as shown in the figure.
My HTML code for the slider is
<ion-navbar color="river">
<ion-row>
<ion-col width-10 style="text-align: right">
<button ion-button icon-only (click)="shop();" color="yel" clear end>
<ion-icon name="cart"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: center">
<button ion-button icon-only (click)="product();" color="yel" clear end>
<ion-icon name="pricetag"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: left">
<button ion-button icon-only (click)="feedback();" color="yel" clear end>
<ion-icon name="md-chatbubbles"></ion-icon>
</button>
</ion-col>
</ion-row>
how can I avoid white space in between the header and the slider?
May be your ion-content like this <ion-content padding></ion-content>, Remove the padding and try . <ion-content></ion-content>
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 want to display name="ios-navigate" (which is showing as a navigation icon in bellow image) right side in the column partition. I have given item-right attribute to the button element inside 'ion-col' but its not working.
Its currently displaying bellow,
<ion-item>
<ion-row>
<ion-col width-33>
<button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear item-right (click)="RedirectWebsite(item.Website)">
<ion-icon name="md-globe" item-left large></ion-icon>
WWW
</button>
</ion-col>
<ion-col width-33>
<button ion-button icon-left clear item-right [disabled]="!item.Phone" (click)="dialNumber(item.Phone)">
<ion-icon name="md-call" color="primary" item-left large></ion-icon>
Phone
</button>
</ion-col>
<ion-col width-33>
<button ion-button item-right icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
<ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-item>
Check out the latest ion-grid API based on flexbox. width-* is deprecated for col-*. Also item-left and item-right attributes work for ion-item elements.
You need to use row attributes.Try justify-content-end to align horizontally right.
<ion-row justify-content-end>
<ion-col col-4>
<button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear (click)="RedirectWebsite(item.Website)">
<ion-icon name="md-globe" item-left large></ion-icon>
WWW
</button>
</ion-col>
<ion-col col-4>
<button ion-button icon-left clear [disabled]="!item.Phone" (click)="dialNumber(item.Phone)">
<ion-icon name="md-call" color="primary" item-left large></ion-icon>
Phone
</button>
</ion-col>
<ion-col col-4>
<button ion-button icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
<ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon>
</button>
</ion-col>
</ion-row>
I created a navbar like this:
<ion-navbar color="primary">
<ion-title>{{team.name}}</ion-title>
<ion-buttons end>
<button (click)="goHome()">
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
The problem is that the Home button is showing with some strange grey background like in the image below:
I'm using Ionic2 RC3
How can I fix it?
<ion-navbar color="primary">
<ion-title>{{team.name}}</ion-title>
<ion-buttons end>
<button ion-button icon-only item-right (click)="goHome()">
<ion-icon name="home" ></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
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>