我是离子2的新手,我用离子CLI创建了一个侧面菜单,我有几页,但现在我想为每个菜单项添加一个不同的图标,我该怎么做?
这是我的app.html:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在我的app.components.ts中,我有这些页面:
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Estatísticas', component: "EstatisticasPage"},
{ title: 'Registrar vendas', component: "RegistrarVendasPage" },
{ title: 'Listar vendas', component: "VendasPage" },
{ title: 'Produtos', component: "ProdutosPage" },
{ title: 'Funcionários', component: "FuncionariosPage" },
{ title: 'Clientes', component: "ClientesPage" },
];
答案 0 :(得分:1)
您只需要向pages
数组中添加其他属性,然后使用<ion-icon>
。
this.pages = [
{ title: 'Estatísticas', component: "EstatisticasPage", icon: 'home' },
...
]
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
<ion-icon item-end [name]="p.icon">
</button>
答案 1 :(得分:0)
@luisenrike有一个很好的解决方案。只需添加到他的图标中,别忘了在app.component.ts
中添加图标类型,否则您可能会遇到错误。
pages: Array<{title: string, component: any, icon: string}>