<ion-list>: <button ion-item> VS <ion-item>?

Ionic Framework ionic-v3
1

What is the purpose to have both and as a child elements of ? Does they have semantic or behavior difference?

I’m confused which one to use as they seems to do the same (both support click handler).

I would prefer to have just 1 well defined way to do things or a documented description of the differences.

See:
https://github.com/driftyco/ionic2/blob/master/ionic/components/item/test/sliding/main.html#L13

https://github.com/driftyco/ionic2/blob/master/ionic/components/item/test/sliding/main.html#L26

2

There are three common ways to use an item:

  • Use <ion-item> for something that is only non-clickable text.
  • Use <button ion-item> for something that can be clicked/tapped. Typically this element will also have a (click) handler.
  • Use <a ion-item> for when the item needs to contain a href.

By default, <button ion-item> and <a ion-item> will receive a right arrow icon on iOS to signal that tapping the item will reveal more information. To hide this icon, add the detail-none attribute to the item (eg: <button ion-item detail-none>). To add the icon when it is not displayed by default, add the detail-push attribute (eg: <ion-item detail-push>).

We can add some links to this, though, since it is buried in the docs.

5 Likes
3

I think it should be added to http://ionicframework.com/docs/v2/components/#lists

1 Like
4

Thanks, I’ll pass that along. :slight_smile: