On my homepage I have a set of tabs. When I click on the + icon, a new page (AddReportPage) is being pushed (this.navCtrl.push(AddReportPage)).
On this new page I want to display a new set of tabs with different icons and different functions(see image 2).
But when I use the ion-tabs, they're not being displayed...
These tabs have to execute functions with ionSelect.
Do you have a solution?
1.
2.
You could try to use the tabsHideOnSubPages property in your tab tag: Ionic Docs - Tab.
<ion-tabs>
<ion-tab tabsHideOnSubPages="true" [root]="AddReportPage"></ion-tab>
</ion-tabs>
Then in your pushed page you'll be able to see the tabs from there.
I managed to get pretty much the same result with an ion-toolbar in a ion-footer.
Thanks for the help!
<ion-footer>
<ion-toolbar>
<ion-row>
<ion-col no-padding>
<button ion-button icon-only clear (click)="getPicture()">
<ion-icon name="images"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear>
<ion-icon name="paper-plane"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
Related
I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks
<ion-list>
<ion-item><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item>
<ion-item><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:
<ion-list>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage1();">Go page 1</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage2();">Go page 2</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage3();">Go page 3</ion-button>
</ion-label>
</ion-item>
</ion-list>
Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.
Read - Ionic CSS Utilities
you can use text-center
The inline contents are centered within the line box.
Try like this'
<ion-list >
<ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
stackblitz - code
You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/
Example Usage:
<ion-item text-center>
<button ion-button>click me</button>
</ion-item>
If you don't want the whole item content to be centered you can use css to center just the button.
e.g. wrapping the button with a text-center wrapper div inside the ion-item
Ionic Framework Center button within ionic item
I used this method
<ion-grid>
<ion-row>
<ion-col size="12" class="ion-text-center">
<ion-button>
Login
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
I’m using IONIC 3.19.1.
<ion-content padding>
<ion-list>
<button ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</button>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
in the above code snippet the <h2>{{shift.operatorCode}}</h2> <p>{{shift.date}}</p> are note rendering. Pls see the attachment.
Thanks.
You are putting the HTML inside a button with the ion-item attribute. Change it to just using the ion-item element and if you need click handling the you can use the binding.
Should look something like this:
<ion-content padding>
<ion-list>
<ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</ion-item>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Added three icons on my ionic home.html using the below code. Problem is they are looking very dis-aligned and very small in size on IOS.
<ion-header>
<ion-navbar color="headercolor" style="height:25px;">
<ion-title style="text-align:center;font-size:11px;margin-top:20px;">Tags</ion-title>
<button ion-button (click)="back()" style="background-color:transparent;margin-top:-50px;">
<ion-icon name="arrow-back" class="icon" style="color: #ffffff;font-size:20px;"></ion-icon>
</button>
<ion-buttons end>
<button ion-button icon-only (click)="home()">
<ion-icon name="home" class="icon" style="font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="mailto()">
<ion-icon name="mail" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="msg()">
<ion-icon name="chatboxes" class="icon" style="color: #ffffff;font-size:17px;" ></ion-icon>
</button>
<button ion-button icon-only (click)="close()">
<ion-icon name="close" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
What is the problem in my code and how can I fix this?
Below first screenshot is of Android and second screenshot is of iOS.
Android screenshot
iOS screenshot
this is the default icon for ios and android, so if you want to use same icon for both platform then use this: md-arrow-round-back
Now Android back button will be used for both platforms.
In the Android back button you can see a border. It can be removed by box-shadow:none.
For Alignment use <ion-row> -> all elements will be aligned
To increase the icon size use font-size property in the icon tag. The icon size will be increased too.
Is there a simple way to make ion-cards swipe rather than stack vertically one above the other?
I currently have the cards stacking vertically using this code:
<ion-content class="outer-content speaker-list">
<ion-card *ngFor="#speaker of speakers" class="speaker">
<ion-card-header>
<ion-item>
<ion-avatar item-left>
<img [src]="speaker.profilePic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-list>
<button ion-item *ngFor="#session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
</button>
<button ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</button>
</ion-list>
</ion-card-content>
<ion-item>
<button (click)="goToSpeakerTwitter(speaker)" clear item-left>
<ion-icon name="logo-twitter"></ion-icon>
Tweet
</button>
<button (click)="openSpeakerShare(speaker)" clear item-right>
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-item>
</ion-card>
</ion-content>
I am looking for a simple way to get them to swipe rather than stack. There are various plugins that do Tinder like swiping cards but I was wondering if there is a setting that can be given to ion-card to make the cards do a simple swipe (I am not looking for the Tinder visual effect) like a carousel.
I am using ionic V2.