When to use ion-item

Rather than me trying to reverse engineer an answer out of what I can infer from the dom, I was hoping someone could offer me some guidance/principles around the use of some UI components.

I’ve three (loosely related) areas of confusion:

1. Ion-item. I understand the use of an ion-item within a list, but when would you use it outside a list - what does that give you? To me it makes sense when presenting homogeneous items (e.g. contacts) within a list but not sure of its wider use case outside of a list.

2. Ion-list: Should items within lists be homogeneous, or is there benefit in using the list for different types of UI elements e.g. some contacts, followed by a paragraph of explanation, . The docs assume lists of like items but my applications rarely work like that.

3. Ion-label: Why would you wrap a text element such as

   or

   in a ion-label. What does that give you, that using the element in isolation wouldn’t?

I support a single Ionic application, and I frequently find myself needing to insert a heading of a text element and wondering, because of the questions above, whether it should be:

> <h2>My middle of the page informative text</h2>

OR

> <ion-label>
> <h2>My middle of the page informative text</h2>
> /<ion-label>

OR

> <ion-item>
> <ion-label>
> <h2>My middle of the page informative text</h2>
> /<ion-label>
> </ion-item>

OR

> <ion-list>
> .......
> <ion-item>
> <ion-label>
> <h2>My middle of the page informative text</h2>
> /<ion-label>
> </ion-item>
> </ion-list>

Apologies for the long, fundamental, non-specific question but there’s not much out there that explains how best to structure ionic pages.

Thanks in advance

1 post - 1 participant

Read full topic