Add note about content projection in ion-item docs

[olapersson]

Short description of the problem:

I think the documentation needs a note on how the content gets arranged in by the ion-item directive. I can try to write a suggestion but I don't know if I'd get it accurate.

Also there seems to be no way of including something which isn't a ion-select, ion-input or ion-textarea inside the wrapper that ion-item creates around a nested ion-label.

What behavior are you expecting?

If you add an ion-label and a button side by side inside the ion-item, the button wont render at all unless you add item-right to it. If there's only a button in the ion-item, it shows up but if you add a label as well all other content is discarded.

Looking at the template used it makes sense, there's no way of finding out just by reading the docs: https://github.com/driftyco/ionic/blob/2.0/ionic/components/item/item.ts#L44

When item-left is added to the button element it's included before the form related items while item-right shows it after.

There's no (obvious) way to add an element which isn't a ion-select, ion-input or ion-textarea together with label inside the generated div.input-wrapper.

I believe there cases where this would be useful, for example when the included form widgets aren't appropriate and you want for example a searchable modal or a slider.

I ended up putting a disabled text input with a click handler on it to display a modal with a searchable list of options. An ion-select would be closer to the element it represents but seems I don't think I can override Alert with a Modal.

Steps to reproduce: Doesn't work:

      <ion-item>
        <ion-label>
          Label
        </ion-label>
        <button (click)="onDoSearch()">
          {{buttonLabel}}
          <ion-icon name="md-arrow-dropdown" item-right></ion-icon>
        </button>
      </ion-item>

Does work (item-right on the button):

<ion-item>
  <ion-label>Label​</ion-label>
  <button item-right (click)="onDoSearch()">
    {{buttonLabel}}
    <ion-icon name="md-arrow-dropdown" item-right></ion-icon>
  </button>
</ion-item>

However there's no way to have the button rendered inside the .input-wrapper created around the ion-label element.

Which Ionic Version? 2.x

[brandyscarney]

This issue was moved to driftyco/ionic-site#579