Просмотр исходного кода

add new icons to menu item using font awesome

tags/2.037
Patrick Sun 5 лет назад
Родитель
Сommit
e34b30d8dc
3 измененных файлов: 9 добавлений и 12 удалений
  1. +0
    -2
      src/app/app.component.html
  2. +3
    -3
      src/app/app.component.ts
  3. +6
    -7
      src/app/main-menu-items.ts

+ 0
- 2
src/app/app.component.html Просмотреть файл

</ng-template> </ng-template>
</kendo-menu> </kendo-menu>
</div> </div>
<fa-icon ngif [icon]="faCoffee"></fa-icon> &nbsp; text
<fa-icon [icon]="faCoffee"></fa-icon> &nbsp; text
<router-outlet></router-outlet> <router-outlet></router-outlet>





+ 3
- 3
src/app/app.component.ts Просмотреть файл

import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { mainMenuItems } from './main-menu-items'; import { mainMenuItems } from './main-menu-items';


@Component({ @Component({
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
faCoffee = faCoffee
title = 'broker'; title = 'broker';
public items: any[] = mainMenuItems; public items: any[] = mainMenuItems;


public hasFa (item: any) : boolean { public hasFa (item: any) : boolean {
console.log(item);
//console.log(item);
return item.hasOwnProperty('fa'); return item.hasOwnProperty('fa');
} }
} }

+ 6
- 7
src/app/main-menu-items.ts Просмотреть файл

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faChartArea, faChartPie, faIdCard, faIdCardAlt, faMoneyCheck, faUniversity, faUserCircle } from '@fortawesome/free-solid-svg-icons';


export const mainMenuItems: any[] = [ export const mainMenuItems: any[] = [
{ {
text: '', text: '',
icon: 'menu'
fa: faUniversity
}, },
{ {
text: 'SFM', text: 'SFM',
icon: 'more-vertical', icon: 'more-vertical',
fa: faCoffee,
items: [ items: [
{ text: 'Summary', icon: 'calculator', url: './#dashboard'},
{ text: 'Summary', fa: faChartArea, url: './#dashboard'},
{ text: '--', separator: "true" }, { text: '--', separator: "true" },
{ text: 'Logout', icon: 'logout', url: './#login'}] { text: 'Logout', icon: 'logout', url: './#login'}]
}, },
icon: 'user', icon: 'user',
items: [ items: [
{ text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, { text: 'Add ', icon: 'plus', url: 'https://google.com.au' },
{ text: 'List All', icon: 'table' },
{ text: 'List All', fa: faIdCard },
{ text: '--', separator: "true" }, { text: '--', separator: "true" },
{ text: 'Search' ,icon: 'search'}, { text: 'Search' ,icon: 'search'},
{ text: '--', separator: "true" }, { text: '--', separator: "true" },


{ {
text: 'Brokers', text: 'Brokers',
icon: 'user',
fa: faUserCircle,
items: [ items: [
{ text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, { text: 'Add ', icon: 'plus', url: 'https://google.com.au' },
{ text: 'List All', icon : 'table' },
{ text: 'List All', fa: faIdCardAlt},
{ text: '--', separator: "true" }, { text: '--', separator: "true" },
{ text: 'Search' , icon: 'search'}, { text: 'Search' , icon: 'search'},
{ text: '--', separator: "true" }, { text: '--', separator: "true" },

Загрузка…
Отмена
Сохранить