Confused about ion-item usage

Ionic Framework ionic-v3
16

The item will look for an <ion-label> element and if it exists it will ignore other elements, but those can be added by using the item-content attribute. So this will work:

<ion-item>
  <div>My Div</div>
</ion-item>

but this will ignore the div and only show the label:

<ion-item>
  <ion-label>My Label</ion-label>
  <div>My Div</div>
</ion-item>

However, this will add the div because of the item-content:

<ion-item>
  <ion-label>My Label</ion-label>
  <div item-content>My Div</div>
</ion-item>

The element going in the item needs to have one of those attributes on it if it is being added in an item that already has an ion-label. I agree that this is confusing though, so I created an issue for us to discuss this more:

For the issue with the input, can you show me the code you used? I tried using the following:

<ion-item>
  <ion-input type="text" value="hi"></ion-input>
  <ion-input type="number" value="44"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Floating Label</ion-label>
  <ion-input type="text" value="hi"></ion-input>
  <ion-input type="number" value="44"></ion-input>
</ion-item>

<ion-item>
  <ion-label fixed>Fixed Label</ion-label>
  <ion-input type="text" value="hi"></ion-input>
  <ion-input type="number" value="44"></ion-input>
</ion-item>

And these are all working for me. The ng-content selects these elements to place them there but there can be multiple of the same elements placed there. For example, you can have 3 elements with the item-right attribute and they will all be placed on the right:

<ion-item>
  <ion-label>Weather</ion-label>
  <ion-icon item-right name="sunny"></ion-icon>
  <ion-icon item-right name="cloudy"></ion-icon>
  <ion-icon item-right name="rainy"></ion-icon>
</ion-item>

image

Sorry, but I don’t understand this question. Could you explain more? Thanks! :slight_smile:

4 Likes