add icons to main menu
This commit is contained in:
parent
6647a6ccd0
commit
4e8f7a4c69
3 changed files with 15 additions and 9 deletions
|
@ -29,13 +29,13 @@ export class MyApp {
|
|||
|
||||
// used for an example of ngFor and navigation
|
||||
this.pages = [
|
||||
{ title: 'Timeline', component: StreamPage, params: {stream: 'personal'} },
|
||||
{ title: 'Mentions', component: StreamPage, params: {stream: 'mentions'} },
|
||||
{ title: 'Global', component: StreamPage, params: {stream: 'global'} },
|
||||
{ title: 'Bookmarks', component: StreamPage, params: {stream: 'bookmarks'} },
|
||||
{ title: 'Settings', component: SettingsPage, params: {}},
|
||||
{ title: 'About', component: AboutPage, params: {}},
|
||||
{ title: 'Logout', component: {}, params: {}},
|
||||
{ title: 'Timeline', icon: 'home', component: StreamPage, params: {stream: 'personal'} },
|
||||
{ title: 'Mentions', icon: 'at', component: StreamPage, params: {stream: 'mentions'} },
|
||||
{ title: 'Global', icon: 'globe', component: StreamPage, params: {stream: 'global'} },
|
||||
{ title: 'Bookmarks', icon: 'bookmarks', component: StreamPage, params: {stream: 'bookmarks'} },
|
||||
{ title: 'Settings', icon: 'settings', component: SettingsPage, params: {}},
|
||||
{ title: 'About', icon: 'information-circle', component: AboutPage, params: {}},
|
||||
{ title: 'Logout', icon: 'exit', component: {}, params: {}},
|
||||
];
|
||||
|
||||
}
|
||||
|
|
|
@ -8,7 +8,8 @@
|
|||
<ion-content>
|
||||
<ion-list>
|
||||
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
|
||||
{{p.title}}
|
||||
<ion-icon name="{{p.icon}}"></ion-icon>
|
||||
<span class="menuText">{{p.title}}</span>
|
||||
</button>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
@ -16,4 +17,4 @@
|
|||
</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>
|
||||
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
|
||||
|
|
|
@ -14,3 +14,8 @@
|
|||
// To declare rules for a specific mode, create a child rule
|
||||
// for the .md, .ios, or .wp mode classes. The mode class is
|
||||
// automatically applied to the <body> element in the app.
|
||||
|
||||
.menuText {
|
||||
left: 45px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
Reference in a new issue