spacenerdmo/goober-ionic
Archived
1
0
Fork 0
Code Issues 33 Pull requests Projects Releases 12 Packages 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 // used for an example of ngFor and navigation
this.pages = [ this.pages = [
{ title: 'Timeline', component: StreamPage, params: {stream: 'personal'} }, { title: 'Timeline', icon: 'home', component: StreamPage, params: {stream: 'personal'} },
{ title: 'Mentions', component: StreamPage, params: {stream: 'mentions'} }, { title: 'Mentions', icon: 'at', component: StreamPage, params: {stream: 'mentions'} },
{ title: 'Global', component: StreamPage, params: {stream: 'global'} }, { title: 'Global', icon: 'globe', component: StreamPage, params: {stream: 'global'} },
{ title: 'Bookmarks', component: StreamPage, params: {stream: 'bookmarks'} }, { title: 'Bookmarks', icon: 'bookmarks', component: StreamPage, params: {stream: 'bookmarks'} },
{ title: 'Settings', component: SettingsPage, params: {}}, { title: 'Settings', icon: 'settings', component: SettingsPage, params: {}},
{ title: 'About', component: AboutPage, params: {}}, { title: 'About', icon: 'information-circle', component: AboutPage, params: {}},
{ title: 'Logout', component: {}, params: {}}, { title: 'Logout', icon: 'exit', component: {}, params: {}},
]; ];
} }

3
src/app/app.html
View file

@ -8,7 +8,8 @@
<ion-content> <ion-content>
<ion-list> <ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> <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> </button>
</ion-list> </ion-list>
</ion-content> </ion-content>

5
src/app/app.scss
View file

@ -14,3 +14,8 @@
// To declare rules for a specific mode, create a child rule // To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is // for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app. // automatically applied to the <body> element in the app.
.menuText {
left: 45px;
position: absolute;
}