Difference between <ion-item> and a <div> with the item classes

1

Hey, i’m wondering what the difference is between these elements. since i kind of found myself sometimes using the <ion-item> and <ion-list> tag and also using <div class="list"> and <div class="item"> is there any difference in performance ? i only noticed that <ion-item> with an ui-sref ads a <a> tag with class="item-content" is there anything else??

2

<ion-item> and <ion-list> are custom Angular directives. As a directive they will be called ionItem and ionList.

For example ionList lives in: ionic / js / angular / directive / list.js
There are swipe events, scroll events and a lot of other stuff prepared for it :slight_smile:

3

Oooh I see, thanks i looked it up and these were the comments for anyone wondering

/**
* @ngdoc directive
* @name ionList
* @module ionic
* @delegate ionic.service:$ionicListDelegate
* @codepen JsHjf
* @restrict E
* @description
* The List is a widely used interface element in almost any mobile app, and can include
* content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
*
* Both the list, which contains items, and the list items themselves can be any HTML
* element. The containing element requires the `list` class and each list item requires
* the `item` class.
*
* However, using the ionList and ionItem directives make it easy to support various
* interaction modes such as swipe to edit, drag to reorder, and removing items.
*
* Related: {@link ionic.directive:ionItem}, {@link ionic.directive:ionOptionButton}
* {@link ionic.directive:ionReorderButton}, {@link ionic.directive:ionDeleteButton}, [`list CSS documentation`](/docs/components/#list).

Thanks for explaining

4

No problemo, that’s what this forum is for :wink: