I am using akveo/ngx-admin theme for my project. And i need to customise sidebar menu icons. nebular came with eva icons but i need fontawesome icons.
tried to change "/node_modules/#nebular/theme/components/menu/menu-item.component.html"
but html changes not reflecting
<span *ngIf="menuItem.group">
<!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
<i class="{{menuItem.icon}}"></i>
{{ menuItem.title }}
</span>
<a *ngIf="menuItem.link && !menuItem.url && !menuItem.children && !menuItem.group"
[routerLink]="menuItem.link"
[queryParams]="menuItem.queryParams"
[fragment]="menuItem.fragment"
[skipLocationChange]="menuItem.skipLocationChange"
[attr.target]="menuItem.target"
[attr.title]="menuItem.title"
[class.active]="menuItem.selected"
(mouseenter)="onHoverItem(menuItem)"
(click)="onItemClick(menuItem);">
<!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
<i class="{{menuItem.icon}}"></i>
<span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="menuItem.url && !menuItem.children && !menuItem.link && !menuItem.group"
[attr.href]="menuItem.url"
[attr.target]="menuItem.target"
[attr.title]="menuItem.title"
[class.active]="menuItem.selected"
(mouseenter)="onHoverItem(menuItem)"
(click)="onSelectItem(menuItem)">
<!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
<i class="{{menuItem.icon}}"></i>
<span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="!menuItem.children && !menuItem.link && !menuItem.url && !menuItem.group"
[attr.target]="menuItem.target"
[attr.title]="menuItem.title"
[class.active]="menuItem.selected"
(mouseenter)="onHoverItem(menuItem)"
(click)="$event.preventDefault(); onItemClick(menuItem);">
<!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
<i class="{{menuItem.icon}}"></i>
<span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="menuItem.children"
(click)="$event.preventDefault(); onToggleSubMenu(menuItem);"
[attr.target]="menuItem.target"
[attr.title]="menuItem.title"
[class.active]="menuItem.selected"
(mouseenter)="onHoverItem(menuItem)"
href="#">
<!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
<i class="{{menuItem.icon}}"></i>
<span class="menu-title">{{ menuItem.title }}</span>
<nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>
<ul *ngIf="menuItem.children"
[class.collapsed]="!(menuItem.children && menuItem.expanded)"
[class.expanded]="menuItem.expanded"
[#toggle]="toggleState"
class="menu-items">
<ng-container *ngFor="let item of menuItem.children">
<li nbMenuItem *ngIf="!item.hidden"
[menuItem]="item"
[class.menu-group]="item.group"
(hoverItem)="onHoverItem($event)"
(toggleSubMenu)="onToggleSubMenu($event)"
(selectItem)="onSelectItem($event)"
(itemClick)="onItemClick($event)"
class="menu-item">
</li>
</ng-container>
</ul>
i have commented "nb-icon" and changed it with "i" tag to render fontawesome icon.
fontawesome free css is imported into angular.json and fontawesome icons are working properly in project. not sure what to do. anything would be helpful, thank you.
try adding font awesome to libraries using NbIconLibraries service like
constructor {
...
private icons: NbIconLibraries,
...
} {
this.icons.registerFontPack(...)
// or
this.icons.registerSvgPack(...)
}
you can install awesome fonts in your project and add the below code to your parent module which is PagesModule in below example
export class PagesModule {
constructor(iconsLibrary: NbIconLibraries){
iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa'
});
}
}
Related
hey guys, I know this question is already been asked but I did not get an appropriate answer. I got this error on using next/link . whenever I replace the anchor tag with the "Link" tag I got this error.I will be very thankful if somebody can help
code
import {APP_NAME} from '../config';
import Link from 'next/link';
const Navbar=()=>{
return(
<>
<nav className='navbar bg-success'>
<h1>
<Link href="/dashboard" ><i className="fas fa-code"></i><a>{App_name}</a></Link>
</h1>
<ul>
<li><Link href="#"><a>Jobseeker</a></Link>
</li>
<li>Community</li>
<li>Employer</li>
</ul>
<h3><i className =""></i>Account
</h3>
</nav>
<div className="bottom-nav ">
<div className="bottom-item">
<i className="fas fa-columns text-primary "></i>
<p className=" text-primary">Dashboard</p>
</div>
<div className="bottom-item">
<i className="fas fa-user text-primary "></i>
<p className=" text-primary">jobseeker</p>
</div>
<div className="bottom-item">
<i className="fas fa-users text-primary "></i>
<p className=" text-primary">community</p>
</div>
<div className="bottom-item">
<i className="fas fa-user text-primary "></i>
<p className=" text-primary">Profile</p>
</div>
</div>
</>
)
}
export default Navbar;
Try that:
<Link href="/dashboard" ><a><i className="fas fa-code"/><span>{App_name}</span></a></Link>
It's like the error stated, <Link> was only expecting a single chid, while you have <li> and <a>. Wrap the <a> under <li>, you should be able to fix the problem.
i have issue with active class in tablist/listgroup of angular. when i click any items it becomes active,but active class is not being removed from old tab. Please help me out
<div class="list-group" id="list-tab" role="tablist">
<span *ngFor="let itm of serviceitms;let i = index">
<a *ngIf="i == 0" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list"
href="#list-home" role="tab" aria-controls="itm.name">{{itm.name}}</a>
<a *ngIf="i != 0" class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list"
href="#list-home" role="tab" aria-controls="itm.name">{{itm.name}}</a>
</span>
</div>
Seems like you are using angular with bootstrap directly. Use ng-bootstrap or ngx-bootstrap angular should not be directly used with bootstrap. That is a very bad practice.
ng-bootstrap option:
https://ng-bootstrap.github.io/#/components/nav/overview
ngx-bootstrap option (combine groups with accordion):
https://valor-software.com/ngx-bootstrap/#/buttons
https://valor-software.com/ngx-bootstrap/#/accordion
i think you should change the id and href for every item.
also you should do this for tab content divs.
<div class="list-group" id="list-tab" role="tablist">
<span *ngFor="let itm of serviceitms;let i = index">
<a [class.active]="i == 0" class="list-group-item list-group-item-action" id="list-home-list{{ i }}" data-toggle="list"
href="#list-home{{ i }}" role="tab" aria-controls="itm.name">{{itm.name}}</a>
</span>
</div>
I want to change the font across my whole website (effectively changing the font globally), so I've overwritten the Bootstrap font by updating my styles.scss file as below:
$theme-colors:(
"primary": #84329b,
);
#import '../node_modules/bootstrap/scss/bootstrap';
html, body { height: 100%; }
body { margin: 0; font-family: 'MuseoModerno', cursive !important; }
This works successfully, however, the font in my header does not change in-line with this (see the below image).
How can I ensure the font changes for the header?
For completeness, I've included the html code for my header below. As you can see, I've attempted to update the font specifically on the header, as it wasn't working after updating the styles.scss file. Unfortunately, this doesn't seem to work either.
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap" rel="stylesheet">
<mat-sidenav-container class="sidenav-container">
<!---links to appear in the sidenav if the device is a mobile-->
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/catalogue" (click)="drawer.close()"
>Catalogue</a
>
<a mat-list-item routerLink="/notepads" (click)="drawer.close()"
>Explore Pads</a
>
<hr class="divider-line">
<a mat-list-item routerLink="/login" (click)="drawer.close()">Login</a>
<a mat-list-item routerLink="/sign-up" (click)="drawer.close()"
>Sign Up</a
>
</mat-nav-list>
<hr class="divider-line">
</mat-sidenav>
<!---content below is for everything contained along the header, mobile or not-->
<mat-sidenav-content>
<mat-toolbar>
<!---this is the menu icon to appear on mobile-->
<button
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async"
>
<mat-icon>menu</mat-icon>
</button>
<!---spacer between the mobile menu button and Padder logo-->
<span class="left-spacer" *ngIf="isHandset$ | async"></span>
<!---Padder logo for desktop-->
<span *ngIf="!(isHandset$ | async)" class="logo" routerLink="/"
><img
class="logo-image"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!--links for the header when the device is not a handset-->
<div class="nav-links" *ngIf="!(isHandset$ | async)">
<a mat-button routerLink="/catalogue">Catalogue</a>
<a mat-button routerLink="/notepads">Explore Pads</a>
</div>
<div class="search-container" *ngIf="!(isHandset$ | async)">
<mat-form-field class="header-search">
<input matInput placeholder="Search for products or pads.." />
</mat-form-field>
</div>
<!---Padder logo for mobile-->
<span *ngIf="isHandset$ | async" class="logo" routerLink="/"
><img
class="logo-image-mobile"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!---spacer between Padder logo and login button-->
<span class="right-spacer" *ngIf="isHandset$ | async"></span>
<!--login / sign-up button to be shown when user not logged in, desktop-->
<div class="login-links">
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Login</a
>
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Sign Up</a
>
</div>
<!---search icon to be shown when the user is on mobile-->
<div>
<button mat-icon-button *ngIf="isHandset$ | async">
<mat-icon>search</mat-icon>
</button>
</div>
<!---dropdown to be down when the user is logged into the website-->
<!---
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<a mat-menu-item routerLink="/profile">
<span>Profile</span>
</a>
<a mat-menu-item href="">
<button mat-stroked-button>Logout</button>
</a>
</mat-menu>
</div>--->
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
In you styles.scss, do the following:
#import "https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap";
* {
font: 500 20px/32px Roboto, 'MuseoModerno', sans-serif !important
}
This will definitely work
I have added bulma.css in my Next.js project and all runs well, but navbar toggle doesn't work because need add some pure javascript code and React doesn't provide pure DOM events
Just add React Lifecycle event and put your code.
ORIGINAL example:
import React from "react";
class NavBar extends React.Component {
componentDidMount() {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
}
render() {
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
role="button"
className="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<a className="navbar-item">Home</a>
<a className="navbar-item">Documentation</a>
<div className="navbar-item has-dropdown is-hoverable">
<a className="navbar-link">More</a>
<div className="navbar-dropdown">
<a className="navbar-item">About</a>
<a className="navbar-item">Jobs</a>
<a className="navbar-item">Contact</a>
<hr className="navbar-divider" />
<a className="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="buttons">
<a className="button is-primary">
<strong>Sign up</strong>
</a>
<a className="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
);
}
}
export default NavBar;
I had the same issue and in my case I can resolve it adding in the _app component this line
import 'bulma/css/bulma.css
I have a play template where I loop through a list of objects that have nested lists, and I'm displaying the items iteratively using nested for loops.
-skillList is a List[Skill]
-Skill is an object defined in a model
-skillObject.getChildrenList() return a list[Skill]
What I would like to do is be able to display this but using some type of recursion so that if the level of nesting of mylist changes I don't have to change the whole template. So is there any way to do this in a recursive way ?
<div class="custom-dd dd dd-nodrag" id="nestable_list_1">
<ol class="dd-list">
#for(skill <- skillList) {
<li class="dd-item">
<div class="dd-handle dd-nodrag row">
<span class="dd-nodrag" id="content_#skill.getCleanUri()"> #skill.getLabel() </span>
</div>
<ol class="dd-list">
#for((child, indexChild) <- skill.getChildrenList().zipWithIndex) {
<li class="dd-item" data-id="#indexChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#child.getCleanUri()"> #child.getLabel() </span>
</div>
<ol class="dd-list">
#for((grandChild, indexGrandChild) <- child.getChildrenList().zipWithIndex) {
<li class="dd-item" data-id="#indexGrandChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#grandChild.getCleanUri()"> #grandChild.getLabel() </span>
</div>
</li>
}
<div class="text-left addNew" id="meta-#index">
<span>
<button class="btn btn-icon w-xs plusBtn
btn-primary waves-effect waves-light toggleButton" data-toggle="modal"
data-target="#custom-width-modal"> <i class="fa fa-plus" aria-hidden="true"></i>
</button>
</span>
</div>
#(index = index + 1)
</ol>
</li>
}
</ol>
</li>
}
</ol>
Thanks in advance for any answer.
You can create a separate template that takes List[Skill] as argument and renders SkillObjects in provided list and children of these SkillObjects. Then use that template at first nested level in your main page template. Like following -
SkillTemplate.scala.html
#(skills: List[Skill])()
<ol class="dd-list">
#for((child, indexChild) <- skills.zipWithIndex) {
<li class="dd-item" data-id="#indexChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#child.getCleanUri()"> #child.getLabel() </span>
</div>
#SkillTemplate(child.getChildrenList())
<div class="text-left addNew" id="meta-#index">
<span>
<button class="btn btn-icon w-xs plusBtn
btn-primary waves-effect waves-light toggleButton" data-toggle="modal"
data-target="#custom-width-modal"> <i class="fa fa-plus" aria-hidden="true"></i>
</button>
</span>
</div>
#(index = index + 1)
</li>
}
</ol>
I have not been able to test it