CODEWITHSUNDEEP
ionic-frameworkionic4
Millenial2020
Millenial2020

Reputation: 2941

How to put a right subtile on Ionic List

I'm using Ionic 4 and I want to add a subtitle to the right side of my list.

I want the right side to look the same as my left side. where I have the word 1 Slice.

enter image description here

This is my code.

<ion-header>
<ion-toolbar>
  <ion-title>Foods</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="primary" (click)="showModal()">
      <ion-icon slot="icon-only" name="add"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>


<ion-list>
  <ion-item>
    <ion-label>
      <h2>Pizza</h2>
      <p>1 Slice</p>
    </ion-label>
    <ion-text>366</ion-text>
  </ion-item>
</ion-list>

Upvotes: 1

Views: 1060

Answers (1)

BestMob
BestMob

Reputation: 91

Try slot="start" and slot="end"

 <ion-list>
      <ion-item>
        <ion-label slot="start">
          <h2>Pizza</h2>
          <p>1 Slice</p>
        </ion-label>
        <ion-label slot="end>
          <h2>Pizza</h2>
          <p>1 Slice</p>
        </ion-label>
      </ion-item>
    </ion-list>

Upvotes: 4

Related Questions