I am attempting to use Metronic (9.x) with Blazor, and have started a project based on the official sample found here: https://github.com/keenthemes/metronic-tailwind-html-integration/tree/638f04486f737a6c5b86edf51666b8eb72469fb8/metronic-tailwind-blazor-server
Although I have to point out, this hardly qualifies as a “Blazor” sample since it is really just html, served up with Blazor. That is exactly the problem though, since I cannot figure out how to do something as simple as create a dropdown with clickable items that can be captured with @onchange or @onclick events.
For example, if I look at the official Metronic Tailwind CSS docs for Dropdown (https://keenthemes.com/metronic/tailwind/docs/components/dropdown) and Menu (https://keenthemes.com/metronic/tailwind/docs/components/menu/) then I was hoping to be able to do something like this:
@page "/stacks"
<PageTitle>MyPage</PageTitle>
<div class="dropdown" data-dropdown="true" data-dropdown-trigger="click">
<button class="dropdown-toggle btn btn-light">
Show Dropdown
</button>
<div class="dropdown-content w-full max-w-56 py-2">
<div class="menu menu-default flex flex-col w-full">
@foreach (var myItem in allItems)
{
<div class="menu-item">
<a class="menu-link" @onclick="HandleMyClickEvent">
<span class="menu-icon">
<i class="ki-outline ki-badge">
</i>
</span>
<span class="menu-title">
Menu item @myItem.Name
</span>
</a>
</div>
}
</div>
</div>
</div>
@code {
private List<MyClass> allItems = new();
public class MyClass
{
public Guid Id { get; set; }
public string Name { get; set; }
}
protected override async Task OnInitializedAsync()
{
allItems = new List<MyClass>()
{
new MyClass()
{
Id = Guid.NewGuid(),
Name = "foo",
},
new MyClass()
{
Id = Guid.NewGuid(),
Name = "bar",
}
};
}
private async Task HandleMyClickEvent(MouseEventArgs e)
{
Console.WriteLine("Event has been triggered!");
}
}
However, the @onclick
delegation does not trigger. In fact it doesn’t look like any of the built-in Blazor delegators (such as @onchange
etc.) can be triggered anywhere, so I assume that I am supposed to somehow tap into the built-in metronic events. (see https://keenthemes.com/metronic/tailwind/docs/components/menu#events).
How am I supposed to set this up?