List of records with clickable icons/fields

Ionic Framework
#1

I want to use the <ion-list><ion-item *ngFor="...."> pattern to generate a list of contact records. In the contact records would be little icons like “edit”, “map” (next to address), “phone” (next to phone#, to make a call), etc.

I like this pattern because it formats things nicely, has the separator, etc.

However, the <ion-item> eats up all the clicks, so making things inside the item clickable is hard.

Should I be using just a <div> instead of <ion-item>, as the container for my records? And is there any value to embedding these <div> inside an <ion-list> container, or should <ion-list> only be used with <ion-item>?

I’m using the v6 beta, as this is a new app.

#2

What could alternatively work is the sliding items like swipe right to call & left to email OR click to open map

#3

Give the ion-icons a class and give a z-index: 9. This places the icon on top of the ion-item to prevent trigger on the whole ion item.

1 Like
#4

OK. But I want to use the sliding behavior for activities that affect the whole record - like “delete this contact”, and the icons for actions that affect part of the record, like a map icon next to the address field, phone icon next to the phone# field. Thanks.

1 Like
#5

Cool, that works, thanks!

#6

Glad it worked, You’re welcome!