How to add an icon/image to routes using Aurelia? -
i wanted add image/icon navigation links specified in aurelia's router configuration.
i found answer on github. can add settings
property in router configuration allows specify path image. in case using svg:
import {inject} 'aurelia-framework'; import {router} 'aurelia-router'; @inject(router) export class app { constructor(router) { this.router = router; this.router.configure(config => { config.title = 'aurelia'; config.map([ {route: ['', 'dogs'], moduleid: './dogs', nav: true, title: 'dogs', settings: './img/dogs-nav.svg'}, {route: ['cats', 'cats'], moduleid: './cats', nav: true, title: 'cats', settings: './img/cats-nav.svg'}, }); } }
<ul class="nav navbar-nav"> <li repeat.for="row of router.navigation" class="${row.isactive ? 'active' : ''}"> <a href.bind="row.href"> <img src="${row.settings}"> <span>${row.title}</span> </a> </li> </ul>
Comments
Post a Comment