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.
Related
Hey guys I am currently working on a project with ionic and the menu has been giving more problems than it should.
Recently I have been trying to add the menu close attribute, but where ever I put it does not seem to matter. I have been placing it with a click action, with an ion-item prepend, and other failed attempts.
Below is a piece of my code for my app.component.html
<ion-menu contentId="potifyMenu" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Additional Resources</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-button menuClose expand="full" (click)="map_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="block" fill="outline" menuClose ion-item (click)="complete_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="full" ion-button menuClose (click)="complete_go()">
<ion-icon name="checkmark-circle-outline"></ion-icon> Cmpleted Work Orders
</ion-button>
</ion-item>
<ion-item>
<ion-button expand="full" menuClose (click)="complete_go()">
<ion-icon slot="start" name="checkmark-circle-outline"></ion-icon> Completed Work Orders
</ion-button>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
Figured out a solution from a past post that never showed up in my million of searches.
just needed to encapusulate the button with a toggle
"<ion-menu-toggle>
<ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
"
How to toggle Menu in Ionic 4
I have the same issue as menuClose directive work perfectly in ionic 3 to control toggle. In ionic 5 use ion-menu-toggle component to toggle menu close and open on the menu item. If you don't want to add toggle menu for menu item having submenu then don't use ion-menu-toggle component on those menu items.
Ionic 5 control menu and submenu close and dropdown
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>
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>
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>
I'm building an Ionic 2 app that has a <ion-list> with <ion-item>s with (click) events. On loading the page with the <ion-list> it takes a few seconds before the <ion-item> click events become active and tappable. Tapping the items has no effect until a couple of seconds after the page has loaded.
I have only a few items in the list, and have tried with the virtualScroll list but to no effect.
What could be the cause of this?
I've figured out a work around for this unresponsiveness. Instead of using an ion-item use a <div> tag with tappable and ion-item attributes set.
The code below shows the fix in place
<ion-list [virtualScroll]="news">
<div tappable ion-item *virtualItem="let n" text-wrap (click)="openNews(n)">
<ion-row>
<ion-col width-20>
<img *ngIf="n.thumbnail" [src]="n.thumbnail">
</ion-col>
<ion-col width-80 text-wrap>
<h2>{{n.post_title}}</h2>
<p [innerHTML]="n.post_excerpt"></p>
</ion-col>
</ion-row>
</div>
</ion-list>