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>
Related
Sorry I'm really new to all this.
I'm trying display a submenu during a menu item mouse-over. I've been given hints on recording the index of menu items, and recording the boolean value of whether the user currently has their mouse over the top menu's nav container. However I do not know how to proceed on using these to create conditional renderings for the submenu. Here's what I've tried:
HTML:
<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" 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">
<li v-if= "topmenuhover == true" class="pure-menu-item">
<a v-bind:href="topmenu[topmenuitem].submenus.url" class="pure-menu-link">{{ topmenu[topmenuitem].submenus.title }}</a></li>
</ul>
</div>
</nav>
</div>
JS:
var vueinst = new Vue({
el: '#vuemain',
data: {
topmenuitem : -1,
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(index){
this.topmenuitem=index;
},
mouseOverNav: function(){
this.topmenuhover = true;
},
mouseLeaveNav: function(){
this.topmenuhover = false;
}
}
});
Can anyone help me with this? Thank you!
The Javascript part should do the trick, you just need to tweak the template a bit to actually render the submenu. Here's how you could do it:
var vueinst = new Vue({
el: "#vuemain",
data: {
topmenuitem: -1,
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 (index) {
this.topmenuitem = index;
},
mouseOverNav: function () {
this.topmenuhover = true;
},
mouseLeaveNav: function () {
this.topmenuhover = false;
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
<a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
</li>
</ul>
<div class="pure-menu">
<ul v-if="topmenuhover" id="submenu" class="pure-menu-list">
<li v-for="subitem in topmenu[topmenuitem].submenus" class="pure-menu-item">
<a v-bind:href="subitem.url" class="pure-menu-link">{{ subitem.title }}</a></li>
</ul>
</div>
</nav>
</div>
How do you apply a bootstrap class like nav-link active to a onlick(). I've been having hard time implementing this. I thought it would have just been as simple as.
<a
onClick={() => this.props.onUpdateSelectedProbe(probe)}
className="dropdown-item nav-link active"
>
But this however just makes all list items/anchor tags active.
return (
<div style={{ alignSelf: "center" }}>
<ul className="nav nav-pills">
<li className="nav-item dropdown ">
<div
className="dropdown-menu show"
x-placement="bottom-start"
style={{
position: "relative",
willChange: "transform",
top: "5px",
overflowY: "scroll",
maxHeight: "200px"
}}
>
{this.props.searchState.isActive === false
? probes.map(probe => (
<a
onClick={() => this.props.onUpdateSelectedProbe(probe)}
className="dropdown-item"
>
<div
className="dropdown-divider"
style={{ backgroundColor: "black" }}
></div>
{probe.companyPN}: {probe.description}
</a>
))
: filteredProbes.map(filterprobe => (
<a
onClick={() =>
this.props.onUpdateSelectedProbe(filterprobe)
}
className="dropdown-item"
>
<div className="dropdown-divider"></div>
{filterprobe.companyPN}: {filterprobe.description}
</a>
))}
</div>
</li>
</ul>
</div>
);
This is a basic example of adding items to a list and conditionally showing a "selected" class
.selected {
background: red;
}
function App() {
const [people] = useState([
{ id: 0, name: "Mario" },
{ id: 1, name: "Luigi" },
{ id: 2, name: "Peach" }
]);
const [selected, setSelected] = useState({});
return (
<div>
{people.map(({ id, name }) => (
<div
className={selected[id] ? "selected" : ""}
key={id}
onClick={() => setSelected({ ...selected, [id]: true })}
>
{name}
</div>
))}
</div>
);
}
https://codesandbox.io/s/funny-nobel-e6x6e
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
The following webpage is a container with three different tabs: Uploaded Datasets, Bought Datasets and Integrated Datasets:
1st Tab
each tab content is a UI-Grid that I call through an angular directive as follows:
<div class="form-top">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-uploaded" role="tab" aria-controls="nav-uploaded" aria-selected="true">
Uploaded Datasets
</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-bought" role="tab" aria-controls="nav-bought" aria-selected="false" >
Bought Datasets
</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-integrated" role="tab" aria-controls="nav-integrated" aria-selected="false">
Integrated Datasets
</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-uploaded" role="tabpanel">
<uploaded-grid></uploaded-grid>
<!-- <div id="grid1" ui-grid="uploadedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div> -->
</div>
<div class="tab-pane fade" id="nav-bought" role="tabpanel">
<bought-grid></bought-grid>
</div>
<div class="tab-pane fade" id="nav-integrated" role="tabpanel">
<integrated-grid></integrated-grid>
</div>
</div>
</div>
and each directive contains the following Html code:
<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
and linked with a specific controller:
var app = angular.module("integratedGridCtrl",[]);
app.controller('integratedGridCtrl', ['$http','$scope','$uibModal', function($http, $scope,$uibModal){
var data = [
{
id: "Cox",
title: "Carney",
creationDate: "22/22/2019",
description: "description"
},
{
id: "Lorraine",
title: "Wise",
creationDate: "22/22/2019",
description: "description"
},
{
id: "Nancy",
title: "Waters",
creationDate: "22/22/2019",
description: "description"
}
];
$scope.integratedGridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true,
columnDefs: [
{ field: 'id', width: '*', minWidth: 60},
{ name: 'title', field: 'title', width: '*', minWidth: 60, displayName: 'title' },
{ field: 'creationDate', width: '*',displayName: 'creation Date', minWidth: 60, cellFilter: 'date' },
{ field: 'description', width: '*', minWidth: 60 },
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
},
rowTemplate: '<div ng-click=\"grid.appScope.detailPopup(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ui-grid-cell style="cursor: pointer"></div>',
enableGridMenu: true,
enableSelectAll: true,
exporterCsvFilename: 'myFile.csv',
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
exporterPdfFooter: function ( currentPage, pageCount ) {
return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
},
exporterPdfCustomFormatter: function ( docDefinition ) {
docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
return docDefinition;
},
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'LETTER',
exporterPdfMaxGridWidth: 500,
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
exporterExcelFilename: 'myFile.xlsx',
exporterExcelSheetName: 'Sheet1'
}
$scope.integratedGridOptions.data = data;
}]);
The first two tabs are well displayed, but the 3rd tab doesn't show the columns from the first click until I refresh again.
3rd Tab
Try ui-grid-auto-resize directive for the grid as follows:
<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-auto-resize
ui-grid-exporter class="grid"></div>
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>
)
}
}