spacenerdmo/goober-ionic
Archived
1
0
Fork 0
Code Issues 33 Pull requests Packages Projects Releases 12 Wiki Activity

add icons to main menu

Browse source
This commit is contained in:
Morgan McMillian 2018-11-18 19:59:39 -08:00
parent 6647a6ccd0
commit 4e8f7a4c69
3 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/app.component.ts
View file

@ -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: {}},
];
}

5
src/app/app.html
View file

@ -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>

5
src/app/app.scss
View file

@ -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;
}