Inside my Ionic application, Let's say I have an ion-list with some ion-items inside like this:
<ion-list>
<ion-item>
I love kittens!
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive">Edit</ion-option-button>
</ion-item>
// Some other items in the list
</ion-list>
I want to programmatically (e.g click of a button), open up the option menu on all the items. Same effect as if the user has swiped all the items to the left simultaneously.
I was not able to find any documentation on this. How can I achieve that?
I know it's pretty late but it's for someone who wants to do that same.
This not an actual solution but a direction to get it done.
You need to find out the call ionic gives on left/right swipe of item and just call that method from your code(off course after adding required dependencies).
Related
I need your help. I recently started teaching Ionic, later I ran into a small problem. I use a bottom tab template for the menu. The problem is that in the ion-header I have an ion-back-button. This button works fine, but unfortunately, when you reload the page in the browser, this button disappears. How to make sure that the knpoka does not disappear? Thank you
<ion-header *ngIf="fullBox">
<ion-toolbar>
<ion-title>Details №{{fullBox.id}}</ion-title>
<ion-back-button slot="start" (click)="goBack()"></ion-back-button>
</ion-toolbar>
</ion-header>
goBack() {
this.router.navigate(['']);
}
The functionality of ion-back-button is based on the app's history. When you refresh as #NajamUsSaqib says your history is lost.
I can see you are giving some funcionality to ion-back-button with (click) attribute, but is not necesary for this component because that it's the main functionality of the button.
For your problem, you can replace the ion-back-button with a simple button and maintain the click method you are using. This should show always the button regardless of app's history.
Regards.
So I want to create a modal-like behavior for the search.
When the ion-searchbar is focused, a modal would slide from the bottom showing search history, which would hold the suggestion once the user starts typing. The problem with ionic nodals is the backdrop, I couldn't keep the ion-searchbar active to input search words.
This component is called Popover, you can create them pretty much like you do with a modal but using an PopoverController instead. The PopoverController.create() method has an event parameter that will tell which element will be the anchor for the popover, set that to your search bar and it should be magically aligned.
By default a backdrop is shown when the popover is created but it can be deactivated via showBackdrop property upon creation.
Take a look at the Ionic's Popover API Docs for further information
I ended up by using segments, as below:
<div *ngIf="segment == 'prodSection'">
...
</div>
<div *ngIf="segment == 'searchSection'">
...
</div>
I styled the two divs in a way to be on top of each other and added events to the searchbar like:
<ion-searchbar (ionFocus)="openSearch()" (ionCancel)="retProd()"></ion-searchbar>
And toggeled between the segments with setting the segment variable's value with each event.
I've got a blank starter Ionic 3 app that I'm testing on iOS 131.1.2.
The homepage has a vertical <ion-list> in the <ion-content> and scroll works fine on load.
From the homepage, I've got a nav push() to a map page. On the map page, the map works fine. It's a standard Google Maps implementation with a <div id="map"></div> in the template to display a Google Map.
When using the back button to return from the map page to the homepage, vertical scroll stops working on my <ion-list>. The app doesn't freeze completely as I can still tap list items to see details etc. It's just the scroll that breaks on going back to the homepage.
What could I try to fix this?
I'm happy to add full reproducible code - I'm just hoping someone might point me in the right direction before having to add all that here. Thanks!
Continuous clicking on ion-icon does call decrementQty() method multiple times on IOS while it is working on Android.
<ion-icon qty-icons name="remove" (click)="decrementQty()">
Problem: If I click multiple times on the icon-icon, decrementQty() does not get called.
Expected: decrementQty() should be called multiple times with click events as on Android.
how can I achieve the same on IOS?
There are 2 possible issues:
If you add the click handler directly to the ion-icon element, the hitbox could be only the actual icon itself, which makes it hard to click. The easiest way to solve this would be to wrap it in a button.
IOS has a click delay of 300ms on every element except a few (<a> and <button> elements, maybe more). Ionic provides a directive called tappable to remove this delay. <ion-icon tappable qty-icons name="remove" (click)="decrementQty()">
All in all my suggestion would be to wrap the icon in a button and add the click handler there.
I want to make a button in ionic not clickable, so how can I do it?
I have buttons inside a header bar and they are scores, so people can't click on them.
use ng-disable
<button ng-disable="true"></button>