I have the following panelbar:
<kendo-panelbar *ngIf="mainMenu"
[expandMode]="expandMode">
<kendo-panelbar-item [title]="menuItem.title" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
[routerLink]="menuItem.link" routerLinkActive="active">
<kendo-panelbar-item [title]="menuItemSub.title" *ngFor="let menuItemSub of menuItem.sub"
[routerLink]="menuItemSub.link" routerLinkActive="active">
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
An example of the generated item is like this:
<kendo-panelbar-item routerlinkactive="active" tabindex="0" ng-reflect-router-link="/dashboard-edge"
ng-reflect-router-link-active="active" ng-reflect-title="Dashboard Edge"
ng-reflect-icon-class="fa fa-lg fa-window-maximize" role="treeitem"
class="k-item k-state-default " id="k-panelbar-item-default-1" aria-selected="false">
<span class="k-link k-header">
<!--bindings={"ng-reflect-ng-if": "fa fa-lg fa-window-maximize"}-->
<span class="k-icon fa fa-lg fa-window-maximize" ng-reflect-klass="k-icon"
ng-reflect-ng-class="[object Object]">
</span>
<!--bindings={"ng-reflect-ng-if": ""}-->
Dashboard Edge
<!--bindings={}-->
<!--bindings={"ng-reflect-ng-if": "false"}-->
</span>
<!--bindings={"ng-reflect-ng-if": "false"}-->
</kendo-panelbar-item>
How can I customize the content of the item (with HTML) so that I can get more control of how the information is displayed? For instance, I would like to have the title wrapped in a <span> tag with some specific class.
I'm able to customize the content using templates, but not the header itself.
Telerik support helped me with this.
Basically, you only need to:
Pass null to [title] binding
And create the ng-template with the kendoPanelBarItemTitle directive
Here is an example:
<kendo-panelbar *ngIf="mainMenu"
[expandMode]="expandMode">
<kendo-panelbar-item [title]="null" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
[routerLink]="menuItem.link" routerLinkActive="active" [attr.name]="menuItem.name">
<ng-template kendoPanelBarItemTitle>
<span class="item-title">{{menuItem.title}}</span>
</ng-template>
<kendo-panelbar-item [title]="null" *ngFor="let menuItemSub of menuItem.sub"
[routerLink]="menuItemSub.link" routerLinkActive="active" [attr.name]="menuItemSub.name">
<ng-template kendoPanelBarItemTitle>
<span class="sub item-title">{{menuItemSub.title}}</span>
</ng-template>
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
Example provided by Telerik guys: example
Related
I am trying everything in the Tailwind docs, but I can't seem to change how wide my first li element is.
<section class="overflow-hidden">
<ul class="bg-gray-200 flex flex-row items-center overflow-scroll w-full">
<li class="bg-white px-4 text-left w-96">Why won't this thing change width?</li>
<li class="px-4">Google</li>
<li class="px-4">Microsoft</li>
<li class="px-4">Netflix</li>
<li class="px-4">Facebook</li>
<li class="px-4">Marvel</li>
<li class="px-4">Disney</li>
</ul>
</section>
I have tried adding these tags to the first li element in the list
w-full
w-screen
w-96
basis-1/2
basis-full
basis-80
Elements inside a flex div will try to fit in the available space. It's a natural behavior and that's why your div is not able to grow.
To change this behavior, you'll need to add a flex-shrink: 0, or, in a tailwind way, add a shrink-0 class.
Here is an example:
<section class="overflow-hidden">
<ul class="bg-gray-200 flex flex-row items-center overflow-scroll w-full">
<li class="bg-white px-4 text-left w-96 shrink-0">Why won't this thing change width?</li>
<li class="px-4">Google</li>
<li class="px-4">Microsoft</li>
<li class="px-4">Netflix</li>
<li class="px-4">Facebook</li>
<li class="px-4">Marvel</li>
<li class="px-4">Disney</li>
</ul>
</section>
I want to Click on href "add_record.php" by VBA Excel Selenium.
Inspect of Targeted site:
<li class="active">
<i class="fa fa-dashboard"></i><span>Dashboard</span></li>
<li class=""><i class="fa fa-link"></i> <span>Add New Record</span></li>
<li class=""><i class="fa fa-link"></i> <span>Add Record from SRF Portal</span></li>
<li class=""><i class="fa fa-link"></i> <span>List/Edit/Followup</span></li>
<a href="#">
Just to click this element use css selector. * means finding any text as specified after =.
driver.findElementByCssSelector("a[href*=add_record]").Click
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="bags" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More <i class="fas fa-angle-down ml-3"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
here is the code for dropdown
.dropdown-toggle::after {
display: none;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
this is the css for displaying dropdown on hover
clicking on the link doesnt navigate to the page...
i am using express as the backend n typing the link in the navbar works but not clicking the link..
i tried adding data-target but also doesnt seems to work..
i treid setting pointer-event to auto but tat also doesnt deems to work..
Try using data-hover="dropdown" aria-haspopup="true" aria-expanded="false"
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="services.html">SERVICES</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
This link might be a help.
Bootstrap Dropdown Hover
Wrap the dropdown's trigger and the dropdown menu within .dropdown as it is important. Add data-hover="dropdown" to the main action button or link to activate hover event.
Keypoint is to add data-hover="dropdown"
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
...
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
I am new to Front-End and angular part. I need to load tabs dynamically from what it returned from Backend...
Consider i am getting an array as like below :
*["tab1","tab2","tab3"].*
I have show tabs in a page with tab1, tab2, tab3.
What i have tried is hardcoded , its working,
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" >
<li class="active"><b>tab1</b></li>
<li><b>tab2</b></li>
<li><b>tab3</b></li>
<li><b>tab4</b></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab_1"> </div>
<div class="tab-pane active" id="tab_2"> </div>
<div class="tab-pane active" id="tab_3"> </div>
<div class="tab-pane active" id="tab_4"> </div>
</div>
Also i have to make sure that on click of the tab it should call a method with clicked name. All should be dynamic. Please suggest your ideas.Thanks.
you have to change href="#id" to data-target="#id"
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" >
<li class="active"><a data-target="#tab_1" data-toggle="tab" (click)="loadData('abc')"><b>tab1</b></a></li>
<li><a data-target="#tab_2" data-toggle="tab" (click)="loadData('xxx')"><b>tab2</b></a></li>
<li><a data-target="#tab_3" data-toggle="tab" (click)="loadData('xyz')"><b>tab3</b></a></li>
<li><a data-target="#tab_4" data-toggle="tab" (click)="loadData('fgfgfg')"><b>tab4</b></a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab_1"> </div>
<div class="tab-pane active" id="tab_2"> </div>
<div class="tab-pane active" id="tab_3"> </div>
<div class="tab-pane active" id="tab_4"> </div>
</div>
I achieved such functionality using ngx-Bootstrap
Array of tabs:
tabs: any[] = [{
title: 'Dynamic Title 1',
content: 'Dynamic content 1'
},
{
title: 'Dynamic Title 2',
content: 'Dynamic content 2'
},
{
title: 'Dynamic Title 3',
content: 'Dynamic content 3',
removable: true
}
];
Display tabs:
<tabset>
<tab heading="Static title">Static content</tab>
<tab *ngFor="let tabz of tabs"
[heading]="tabz.title"
[active]="tabz.active"
(select)="tabz.active = true"
[disabled]="tabz.disabled"
[removable]="tabz.removable"
(removed)="removeTabHandler(tabz)"
[customClass]="tabz.customClass">
{{tabz?.content}}
</tab>
</tabset>
Check full usage here.
So, there are different ways of implementing it. One way as suggested by #Comann will definitely work. The other way of doing the same thing would be installing bootstrap dependency - try doing
npm install --save bootstrap
Import this in your styles.css file
#import '~bootstrap/dist/css/bootstrap.css';
You can also import it in your angular.json file assuming you might have generated the project using angular-cli. I prefer it to be in styles.css.
Create a separate navbar component and in the template
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/route1">Route1<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/route2">Route 2</a>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
Instead of having the two router links hard coded you will loop around with *ngFor on the array of tabs and populate it. Hope this helps.
I would like ta dd buttons in a kendo-panelbar-item.
Is that possible?
<kendo-panelbar>
<kendo-panelbar-item title="Heroes" >
<kendo-panelbar-item *ngFor="let hero of heroes" title={{hero.name}} >
//add buttons here
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
I cannot see a problem with adding buttons inside the PanelBar item.
<kendo-panelbar>
<kendo-panelbar-item title="My Teammates" expanded="true">
<template kendoPanelBarContent>
<button kendoButton>Button</button>
</template>
</kendo-panelbar-item>
</kendo-panelbar>
See this plunkr
It's not template but ng-template
<ng-template kendoPanelBarContent>
<button kendoButton>Button</button>
</ng-template>