I'm using Devextreame by React in a project which has its built-in side-navigation-menu. The menu is a Treeview component gives its sub-menus as an array by the items property.
<TreeView
ref={treeViewRef}
items={items}
keyExpr={'path'}
selectionMode={'single'}
focusStateEnabled={false}
expandEvent={'click'}
onItemClick={selectedItemChanged}
onContentReady={onMenuReady}
width={'100%'}
expandedExpr="false"
/>
So there is no accebility to the tags of items to change them to a <a> tag to have "Open link in new" option as a link.
Does any body know how to change each item of Treeview in Devextreame side-navigation-menu to a link tag <a> to have "Open link in new" tab option?
Related
So, what I want to achieve is that the wrapping link I have to be clickable on all places, instead when the button is clicked don't call the function or click the item
<a href="test.com">
<img />
<title />
<button>
Add to Cart
</button>
</a>
First of all, mixing a link and a button isn't a good idea Can I nest a <button> element inside an <a> using HTML5?
Second of all use event.preventDefault()
I have an Angular 13.1.0 project with PrimeNG 13.0.2
I'm trying to use the Tree component to paint a tree with parents and childs, my problem is with the "expandedIcon" and "collapsedIcon" property.
The component simply ignore this values, and always painting the parent expandable node with the default icon "pi-chevron-right". Apart from this, the icon is showing always as a blank square.
My problem with the square icon will be solved if the node shows a Fontawesome icon, that i define on the "expandedIcon" and "collapsedIcon" property, but prime faces always try to use the default icon.
This is my parent node:
{
"label": "Page Info",
"type": "PAGE_NODE",
"expandedIcon": "fas fa-chevron-up",
"collapsedIcon": "fas fa-chevron-down"
}
And PrimeNG draw it like this:
Update:
I have see the source code of PrimeNG, and the icon is on the code, without any option to change it:
https://github.com/primefaces/primeng/blob/13.0.4/src/app/components/tree/tree.ts
<button type="button" [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
<span class="p-tree-toggler-icon pi pi-fw" [ngClass]="{'pi-chevron-right':!node.expanded,'pi-chevron-down':node.expanded}"></span>
</button>
I'm trying to show navbar dropdown over the slick slider. it's only show when i style .slick-slider z-index negative value, but this is not right because i can't click inside slider.
You can use a className in your dropdown menu with attribute "z-index:1000".
For example..
<div className="dropdown-menu">...</div>
on your .css file
.dropdown-menu{
... //another attributes for your div and finally..
z-index:1000
}
I declare a nav button in index page and it shown all the page But I want remove from my home page. How can I remove that button in that specific pages
make $rootScope array of pages where you don't want to show the button. Then use ng-if in button tag to show n hide the button
<button ng-if="root.pageIgnore.indexOf($route.current.name) === -1">Shy Button</Button>
I have a contenteditable div that allows the users to tab over. the tab adds a margin-left inline style to the p tag like so
<p class="line" id="line-5" style="margin-left: 40px;">Text Here</p>
I allow the user to click a modal which open up the text inside a Quill editor. But the quill editor seems to remove the margin-left inline style so the tabs are not shown.
How can I get tabs to work in my contenteditable div so it translates over to quill editor?