ABP Framework version: v8.3.4
- UI Type: Blazor Server
- Database System: EF Core (SQL Server)
- Tiered (for MVC) or Auth Server Separated (for Angular): yes/no
- Exception message and full stack trace:
- Steps to reproduce the issue:
Hi
My project is using the LeptonX theme (commercial) with a side menu. I am wanting to add a button to the toolbar that toggles a context menu/pane, in a similar way to how the User and Settings buttons work. This will be for Notifications, and will pretty much look and operate like the Notification icon in the LeptonX theme demo (see screenshot).
I can add a link to the toolbar easily enough. Then, digging into the theme code, I can see that the User and Settings links are implemented with a custom attribute called 'data-lpx-ctx-toggle', and the context menu has 'data-lpx-context-menu'. JavaScript selects on these attributes, and registers event handlers so that clicking on the link shows the pop-up. I have done the same sort of thing, but no event handler gets registered for it. I am therefore assuming the 'user-context-menu' and 'settings-context-menu' are coded into the JavaScript? If this is the case, is there an accepted way to add a custom context menu like this? Or, if not the case and the JavaScript is generic in adding using these attributes, is there a way to get this to work just using these attributes?
Prototype code:
<ul class="lpx-nav-menu">
<li class="outer-menu-item" id="notificationItem">
<a href="#" class="lpx-menu-item-link active-menu-item" data-lpx-ctx-toggle="notification-context-menu">
<span class="lpx-menu-item-icon">
@* <small class="menu-item-badge">2</small> *@
<i class="lpx-icon action-icon bi bi-bell-fill" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
<div class="lpx-context-menu" data-lpx-context-menu="notification-context-menu">
<ul class="lpx-nav-menu-notification">
<li class="outer-menu-item">
<a class="lpx-menu-item-link lpx-menu-item">
<span class="lpx-menu-item-icon">
<i class="lpx-icon outer-icon bi bi-bell-fill" aria-hidden="true"></i>
</span>
<span class="lpx-menu-item-text">Notifications
@* <span class="lpx-badge">2 NEW</span> *@
</span>
<span data-lpx-close="settings-context-menu">
<i class="lpx-icon bi bi-x outer-icon dd-icon" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
<div class="lpx-button-container">
<button class="lpx-button">See All Notifications</button>
</div>
</div>
LeptonX Demo Example:
2 Answer(s)
-
0
Hello, can you add scripts below to your layout after leptonx bundle js
(function () { leptonx.init.push(() => { leptonx.createContextMenuWithin(document.querySelector('#notification-bar'), 'notification-bar'); }); })();leptonx object have an method named
createContextMenuWithin. You need to provide element id by notification-bar and context-menu-name -
0
If you use new Blazor hosting logic, your template should have
wwwroot/global-scripts.jsfile, you can add this code to there.If your template is previously created with old templates, you can go to
Pages/_Host.cshtmlfile and add this script to the end of the body section in that file
