Lists

The most essential component for any app that involves displaying a list of items is a list component. List structure is pretty simple. In Ionic, if you have a parent element named ion-list and any number of children inside it named ion-item, the items align themselves in the form of an Ionic-styled list. For instance, replace the preceding buttons snippet with the following lists snippet in the ion-content section:

<ion-list>         <ion-item>             Light         </ion-item>         <ion-item>             Primary         </ion-item>         <ion-item>             Secondary         </ion-item>         <ion-item>             Danger         </ion-item>         <ion-item>             Dark         </ion-item>  </ion-list>

You should see the following:

By adding an attribute called no-lines to the ion-list directive, the line will disappear. If you update ...

Get Learning Ionic - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.