CODEWITHSUNDEEP
htmlcsscordovaionic-framework
UniSound Waterloo
UniSound Waterloo

Reputation: 561

Ionic avatar picture with checkbox in one line

I am creating a mobile app with ionic framework. I want to use . With avatar image on the left, text in the middle and checkbox on the right. How can I do that? The following code is not right, but that's what I have now. 

<ion-list>
        <div class="list"><a class="item item-avatar"><img src="img/profile.jpg"></a></div>
        <ion-checkbox style="background-color:#594d65;color:white;"><b>Red</b></ion-checkbox>
</ion-list>

enter image description here

Upvotes: 0

Views: 1618

Answers (1)

Michel Calacina
Michel Calacina

Reputation: 21

I have made it with something like that. enjoy!

<ion-list no-lines>
    <ion-list-header>
      List With Checkboxes No Lines
    </ion-list-header>
    <ion-item *ngFor="let user of users">
      <ion-avatar item-left>
        <img src={{user.thumbnailUrl}}>
      </ion-avatar>
      <ion-label>{{user.email}}</ion-label>
      <ion-checkbox item-right checked="true"></ion-checkbox>
      </ion-item>
 </ion-list>

Upvotes: 2

Related Questions