I've developed Menu for my dashboard where I use metisMenu for my elements. The menu is getting displayed, but when i click button of menu for diplay submenu, the SubMenu is not displayed !
How to fix this problem and thank's.
file .html:
<ul class="side-menu metismenu" *ngFor="let application of applications">
<li routerlinkactive="active">
<a href="javascript:;">
<i class="sidebar-item-icon fa fa-bookmark"></i>
<span class="nav-label">{{application.Menu}}</span><i class="fa fa-angle-left arrow"></i>
</a>
<ul class="nav-2-level collapse" routerlinkactive="in" *ngFor="let accessrole of accessroles">
<li *ngIf="accessrole.ApplicationId == application.ApplicationId">
<a routerlink="/ui/icons" routerlinkactive="active">
<span class="nav-label" style="padding-left: 23px; margin-top: -19px;">{{accessrole.SubMenu}}</span>
</a>
</li>
</ul>
</li>
</ul>
import React from 'react';
import ReactDOM from 'react-dom';
import MetisMenu from 'react-metismenu';
const content=[
{
icon: 'icon-class-name',
label: 'Label of Item',
to: '#a-link',
},
{
icon: 'icon-class-name',
label: 'Second Item',
content: [
{
icon: 'icon-class-name',
label: 'Sub Menu of Second Item',
to: '#another-link',
},
],
},
];
ReactDOM.render(
<MetisMenu content={content} activeLinkFromLocation />,
document.getElementById('root')
);
If you are using react can you try the above?. Also please refer to more clarification on metis menu from https://www.npmjs.com/package/react-metismenu
Related
I have the following code, I am trying to get an id in the SPAN and it is not accepting values in any type of tag that is located inside ....
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="text: nombre,style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
If I understand you correctly your problem is that any tag placed in <a> tag is to being rendered. The reason for that to happen is that your <a> tag is using text: nombre binding which is replacing anything you have put inside it.
I removed that binding and <span> started to appear in it with working attr binding.
var viewModel = function() {
this.loterias = ko.observableArray([
{
nombre: 'test',
color: 'red',
id: 'test-id',
nombreCorto: 1,
namerjarClickLoteria: function(){
}
},
{
nombre: 'test',
color: 'green',
id: 'test-id',
nombreCorto: 2,
namerjarClickLoteria: function(){
}
}
]);
return this;
}
ko.applyBindings(viewModel(), $('#contenedorListaTarea')[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
I have this part of my code in sidebar.component.html :
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a class="nav-link" [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
<ng-container *ngIf="menuItem.children && menuItem.children.length > 0">
<ul class="nav">
<li routerLinkActive="active" *ngFor="let childmenu of menuItem.children"
class="{{menuItem.class}}">
<a class="nav-link" [routerLink]="[childmenu.path]">
<p>{{childmenu.title}}</p>
</a>
</li>
</ul>
</ng-container>
</li>
</ul>
and this is my code in sidebar.component.css :
export const ROUTES: RouteInfo[] = [
{ path: '/dashboard', title: 'dashbord', icon: 'dashboard', class: '', children: '' },
{
path: '/user-List', title: 'Parent', icon: 'apps', class: '', children: [
{ path: '#', title: 'Child Menu 1', icon: 'dashboard', class: '' },
{ path: '#', title: 'Child Menu 2', icon: 'add_shopping_cart', class: '' },
{ path: '#', title: 'Child Menu 3', icon: 'sports_soccer', class: '' },
]
}
];
can you help me please to show/hide submenu by click ?
In your parent component ts file create a property to store the submenu state:
showSubMenu: boolean = false;
In you parent template give your sub-menu an *ngIf and a button to toggle it:
<button (click)="showSubMenu = !showSubMenu">Toggle Sub Menu</button>
<sub-menu *ngIf="showSubMenu"></sub-menu>
I've used list rendering to create a menu with items from an array. I'm now trying to create a new data property which holds the index of the array item when the item of the menu is mouse-overed but I'm not sure of how to do it. Here's what I've tried:
HTML:
<header>
<nav class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="item in topmenu" class="pure-menu-item">
<a v-bind:href="item.url" v-on:mouseover="mouseOver" class="pure-menu-link">{{ item.title }}</a></li>
<li v-for="item in topmenu.submenus" class="pure-menu-item">
<a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a></li>
</ul>
<div class="pure-menu">
<ul id="submenu" class="pure-menu-list">
</ul>
</div>
</nav>
</header>
JS:
var vueinst = new Vue({
el: '#vuemain',
data: {
topmenuitem : 0,
topmenuhover : false,
topmenu: [
{ title:'Home', url:'/', submenus: [] },
{ title:'About', url:'/about',
submenus: [
{ title:'Who we are', url:'/about#us' },
{ title:'What we do', url:'/about#store' },
{ title:'Our range', url:'/about#range' }
]
},
{ title:'Contact Us', url:'/contact',
submenus: [
{ title:'Information', url:'/contact#info' },
{ title:'Returns', url:'/contact#return' },
{ title:'Locate Us', url:'/contact#locate' }
]
}
]
},
methods: {
mouseOver: function(){
this.topmenuitem = this.topmenu.index;
}
}
});
I'm pretty new to web developing, please help me with this. Thank you!
In your html pass the index of the current item to the mouseOver function like the following:
<header>
<nav class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="item in topmenu" :key="item.index" class="pure-menu-item">
<a v-bind:href="item.url" v-on:mouseover="mouseOver(item.index)" class="pure-menu-link">{{ item.title }}</a></li>
<li v-for="item in topmenu.submenus" class="pure-menu-item">
<a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a></li>
</ul>
<div class="pure-menu">
<ul id="submenu" class="pure-menu-list">
</ul>
</div>
</nav>
</header>
And you should bind key in the v-for like :key="item.index". And then in your mouseOver function accept the index of the item as a parameter and push the element on that index into your new array ass follows.
mouseOver: function(index){
this.topmenuitem.push(index);
}
This way you could get the index of all items hovered on.
I'm trying to make my menu load according to the click on the "Cadastros" action but I believe the problem is the "workspaceSelected" property that is not visible to all components.
I believe the correct location for this case would be the property "workspaceSelected" being in the component sidenav, but I do not know how to handle this type of situation.
I would like to click on the action "Cadastros" and she make the switch to load the correct html component.
principal component class:
export class PrincipalComponent implements OnInit {
workspaceSelecionada: string;
constructor() { }
ngOnInit() {
}
}
Principal component:
<header>
<app-navbar></app-navbar>
<app-sidenav></app-sidenav>
</header>
<div class="container" [ngSwitch]="workspaceSelecionada">
<app-cadastros *ngSwitchCase="'cadastros'"></app-cadastros>
<app-movimentacoes *ngSwitchCase="'movimentacoes'"></app-movimentacoes>
<app-administracao *ngSwitchCase="'administracao'"></app-administracao>
<app-relatorios *ngSwitchCase="'relatorios'"></app-relatorios>
<app-configuracoes *ngSwitchCase="'configuracoes'"></app-configuracoes>
<app-dashboard *ngSwitchDefault></app-dashboard>
</div>
app-sidenav:
<!--SideNav-->
<ul id="slide-out" class="side-nav grey darken-2">
<li>
<div class="userView">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div>
</li>
<li>
<a (click)="workspaceSelecionada = 'cadastros'" class="btn-large waves-effect waves-light indigo darken-3">CADASTROS</a>
</li>
<li>
<a class="btn-large waves-effect waves-light purple darken-3">MOVIMENTAÇÕES</a>
</li>
<li>
<a class="btn-large waves-effect waves-light orange darken-3">ADMINISTRAÇÃO</a>
</li>
<li>
<a class="btn-large waves-effect waves-light yellow darken-3">RELATÓRIOS</a>
</li>
<li>
<a class="btn-large waves-effect waves-light light-green darken-3">CONFIGURAÇÕES</a>
</li>
</ul>
<a data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
As suggested above in the comment, define a routing module for the application:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {CadastrosComponent} from './...component';
....
const appRoutes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'cadastros', component: CadastrosComponent}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Then import the routing module in your app module:
imports: [AppRoutingModule]
Then instead of switch case statement in your principal component, define the router outlet as below:
<router-outlet></router-outlet>
Then in the anchor tag in your side nav component template, define the router link as below:
<a routerLink="/cadastros">CADASTROS</a>
Hope this helps! Do let me know if you face any challenges implementing it.
I've tried using setTimout ( 10 sec ) in getChildRoutes to simulate low latency network. let say www.example.com/user, I got server side rendering on "/user" path. when I access /user, I got blank page instead of the page from server side rendering, then after 10 sec, I get my page rendering.
var routes = [{
path: '/',
component: App,
indexRoute: { component: DashBoardPage },
getChildRoutes(location, cb) {
if (typeof window !== 'undefined') {
console.log("set sleep");
setTimeout(function () {
var test = [{path: 'about', component: DashBoardPage},
{path: 'feed', component: FeedChannelPage},
{path: 'host', component: HostPage},
{path: 'user', component: UserPage}];
console.log("location is " + location);
cb(null, test);
}, 10000);
}else{
var test = [{path: 'about', component: DashBoardPage},
{path: 'feed', component: FeedChannelPage},
{path: 'host', component: HostPage},
{path: 'user', component: UserPage}];
console.log("location is " + location);
cb(null, test);
}
}
}]
export default routes;
This my App.jsx
class App extends React.Component {
render () {
return (
<div id="wrapper">
<nav className="navbar navbar-default navbar-static-top" role="navigation" style={{marginBottom: 0}}>
<div className="navbar-header">
<a className="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<div className="navbar-default sidebar" role="navigation">
<div className="sidebar-nav navbar-collapse">
<ul className="nav" id="side-menu">
<li className="sidebar-search">
<div className="input-group custom-search-form">
</div>
</li>
<li>
<Link to="/about"><i className="fa fa-dashboard fa-fw"></i> Dashboard</Link>
</li>
<li>
<Link to="/host"><i className="fa fa-dashboard fa-fw"></i> Host</Link>
</li>
<li>
<Link to="/user"><i className="fa fa-dashboard fa-fw"></i> User</Link>
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper" style={{'minHeight':'400px'}}>
{this.props.children}
</div>
</div>
)
}
}