Difference between <ion-list> and <div class = "list"> in ionic structure?

Question

I am building an application with the Ionic Framework . I started with a standard start-up project for ion tabs, as described in the getting started guide . In the list now I want to put the separator as described here :

<div class="list"> <div class="item item-divider"> <!-- this creates the divider --> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> ... </div> 

to my surprise, however, the generated code in my list is as follows:

 <ion-list> <ion-item class="item-toggle"> Enable Friends <label class="toggle"> <input type="checkbox" ng-model="settings.enableFriends"> <div class="track"> <div class="handle"></div> </div> </label> </ion-item> </ion-list> 

So this made me wonder: what (if any) is the difference between <ion-list> and <div class="list"> ?

According to the pre-generated code, I tried to create a separator using <ion-divider> , but that didn't work. So I lived up to <div class="item item-divider"> , which works great. I'm just wondering what is the difference between these "magic" <ion-xxx> tags and the traditional <div class="xxx"> tags?

Any information is welcome!

Answer 1

I believe that using standard HTML formatting, such as <div class="list"> , will provide you with all the CSS styles you are looking for, but in some cases using Ionic directives will provide additional features that may not be available with pure HTML / CSS, you can find this link to the Ionic forum for more information on this.

Answer 2

It depends on your requirements. If you just need to display the list, then use HTML (), however, if you need additional functions, such as scrolling, reordering, editing, etc., then use.