CODEWITHSUNDEEP
ionic-frameworksassionic3
Nabil Mohammed Nalakath
Nabil Mohammed Nalakath

Reputation: 879

How to have seperator line for menu icons also in ion list?

enter image description here

I want to have the list seperator line that i have marked in the above image under my icons also like in the second image.

enter image description here

Here is my code for the ionic list:

app.html:

<ion-list >

  <button  class="menu-text" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    <ion-icon [name]="p.icon" class="icon-color" item-left> </ion-icon> 
    {{ p.title }}
  </button>


</ion-list>

app.component.ts:

 this.pages = [
  { title: 'My Profile', component: MyprofilePage , icon: 'md-person'},
  { title: 'My Goals', component: MygoalsPage, icon: 'md-flag' }, 

];

app.scss:

 .icon-color{
    color:#8ad5ef;
    font-size: 1px; 

}

.menu-text{
    color:#8ad5ef;
    font-size: .9em; 
}

What should i do to get the desired effect ?

Upvotes: 0

Views: 36

Answers (1)

Abinesh Joyel
Abinesh Joyel

Reputation: 2093

Try like this

<ion-list>
  <button no-padding ion-item icon-right *ngFor="let p of pages" (click)="openPage(p)">
    <ion-icon [name]="p.icon" class="icon-color"> </ion-icon> 
    {{ p.title }}
  </button>
</ion-list>

demo link

Upvotes: 1

Related Questions