侧边菜单中的图标有下划线/太大了？

Posted 2021-03-30

我创建了带有图标的侧边菜单，并添加了一个活动类来更改所选页面的颜色。

一切正常，它只是在ios和android上有这个黑色下划线或图标有点太大。我是离子的新手，我在旅途中学习，但这个小问题让我烦恼。我想我会在iOS和Android上使图标变小一点，以便它可以工作吗？

任何帮助，将不胜感激。

在这里你可以看到我正在谈论的问题。

App.html

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

App.component.ts

openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page 
this.nav.setRoot(page.component);
// Color for the active item
page.color='dark';

for (let p of this.pages) {

  if(p.title==page.title){
    p.color='dark';
  }else{
    p.color='';
  }
}

答案

好吧，我找到了自己问题的答案，在问这个问题之前我应该​​做更多的研究。

我所要做的就是在ion-list标签中添加“no-lines”属性。

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

how do remove underline in side-menu ionic 2