3

Question: Seems too simple - how can I achieve an item with title text and detail text?

Example: enter image description here

Note: I have tried two possible solutions. Both result in a blank white item without content. 

<ion-item-sliding>
      <ion-item>
        <ion-icon name="pin" item-start color="primary"></ion-icon>
        <ion-list>
          <ion-item>
            <ion-label>Title </ion-label>
          </ion-item>
          <ion-item>
            <ion-input disabled="true" [(ngModel)]="event.detail"></ion-input>
          </ion-item>
        </ion-list>
      </ion-item>
    </ion-item-sliding>

and 

  <ion-item-sliding>
      <ion-item>
            <ion-icon name="pin" item-start color="primary"></ion-icon>
        <ion-grid>
         <ion-row>
          <ion-column>
            <ion-label>Title</ion-label>
          </ion-column>
          <ion-column>
            <ion-input disabled="true" [(ngModel)]="event.detail"></ion-input>
          </ion-column>
        </ion-row>
        </ion-grid>
      </ion-item>
    </ion-item-sliding>
sebaferreras
  • 44,206
  • 11
  • 116
  • 134
jublikon
  • 3,427
  • 10
  • 44
  • 82

1 Answers1

4

You can use the Thumbnail List item (docs):

  <ion-item>
    <ion-thumbnail item-start>
      <ion-icon name="pin" item-start color="primary"></ion-icon>
    </ion-thumbnail>
    <h2>Title</h2>
    <p text-wrap>{{ event.detail }}</p>
  </ion-item>
sebaferreras
  • 44,206
  • 11
  • 116
  • 134