When to use ion-item

Ionic Framework
1

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

2

While you wait for more authoritative answers, here’s my take.

The primary heuristic I use in cases like this is “do I like the way that Ionic’s presentation of this element works in the context I’m trying to use it?”. If I can answer that question “yes”, I use the ionic element. If I can’t, I don’t.

As for how that applies to your specific areas of concern:

  1. I would only use an <ion-item> outside a list if the way it is styled happens to be convenient and I don’t feel like micromanaging the styling. Pretty rare.
  2. I find zero benefit in heterogeneous <ion-list>s, primarily because having all the items be the same height is one of the main points of <ion-list> in the first place. It’s a more natural UI, and fits idioms like virtual scrolling / pull-to-refresh much better. Many people run to <ion-card> for the situation you describe, but I’m not convinced there really is much of anything a generic UI component library like Ionic can do in such a vaguely-defined space.
  3. <ion-label> has some UI consistency attributes (like color and position) that can be convenient. If you want them, use it. If they aren’t needed, don’t.

Over the years, “Ionic” has morphed from primarily a “less sucky PhoneGap” to more of a “mobile-first, yet adaptable component library capable of dropping into various webapp frameworks”. Viewing it in that light, I think the primary concern should be “how does this look and feel to me and my users?”. Secondarily, I suppose, would be “I don’t totally love this, but it’s saving me some time microtweaking my own styling all over the place”.

3

That’s very useful thanks. I try to stay as close to the framework as possible, and avoid custom css where possible. I think I maybe need to snap out of that mindset a little, and accept that ionic can only do so much for me.

Thanks again.