如何在 Blazor 中实现 Button 下拉组件

Question

我正在尝试创建一个按钮，该按钮可以打开一个可以显示多个按钮的菜单。 (Sample) 当事件正在实施时，我似乎不明白示例是如何在幕后实施的……更多细节可以在这里找到。 (How to Documentation)

他们是如何实现这个模板的和/或是否有另一种方法可以在 Blazor 中实现一个干净的下拉按钮组件而不使用 syncfusion 库？

说清楚；我不是在寻找实现同步融合库的方法。

---

目前进展：

下拉菜单

<div class="more-options-menu-button">
<button @onclick="OnShowMenuClick" @onclick:stopPropagation="true">
    <svg height="24px" width="24px">
        <image href=@MoreOptionsIconUrl height="24px" width="24px"></image>
    </svg>
</button>
@if (Display)
{
    <section class="menu" @onclick:stopPropagation="true">
        @MenuOptions
    </section>
}
</div>
@code {
[Parameter]
public RenderFragment MenuOptions { get; set; }

private bool Display { get; set; }

private const string MoreOptionsIconUrl = "https://localhost:5001/svg/general/more_vert_24dp.svg";

public void Hide()
{
    this.Display = false;
}

public void OnShowMenuClick()
{
    this.Display = !this.Display;
}
}

菜单选项

<button id="Id" @onclick="OnClick">
@Title
</button>

@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public EventCallback OnClick { get; set; }
[Parameter]
public string Id { get; set; }
}

如何使用

 <OptionsMenuComponent>
            <MenuOptions>
                <MenuOptionComponent Id="remove" Title="Remove" OnClick="Remove" />
            </MenuOptions>
        </OptionsMenuComponent>

@code {
   private void Remove()
{
    Console.WriteLine("Removing...");
}
}

现在的问题是；当菜单打开时，单击菜单选项按钮时无法关闭它，当菜单打开时单击菜单外部时无法关闭它。

如何从组件外部关闭组件？

Answer 1

向应用程序添加组件包

打开/_Imports.razor 文件并导入Syncfusion.Blazor.SplitButtons 包，否则将这些包导入各个剃须刀页面。

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SplitButtons

将下拉菜单组件添加到应用程序

现在，在 Pages 文件夹的 razor 页面中添加 Syncfusion Blazor 下拉菜单组件。例如，在 ~/Pages/Index.razor 页面中添加了 Dropdown Menu 组件。

<SfDropDownButton Content="Edit">
<DropDownMenuItems>
    <DropDownMenuItem Text="Cut"></DropDownMenuItem>
    <DropDownMenuItem Text="Copy"></DropDownMenuItem>
    <DropDownMenuItem Text="Paste"></DropDownMenuItem>
</DropDownMenuItems>
</SfDropDownButton>

这就是它的样子

在这里查看完整的详细信息https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started/

Answer 2

您可以创建一个 blazor 组件，例如 MyDropdownButton

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    @Title
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    @ChildContent        
</div>

@code {
[Parameter]
public string Title { get; set; }

[Parameter]
public RenderFragment ChildContent { get; set; }    }

您可以为按钮标题传递参数。我正在为 boostrap Dropdowns 创建一个包装器。

@ChildContent 是渲染您将创建的其他组件的位置，例如 MyDropdownButtonItem，其中将是项目列表

<a class="dropdown-item" href="@Href">@ActionName</a>
 @code {
[Parameter]
public string Href { get; set; }

[Parameter]
public string ActionName { get; set; }    }

最后你会这样使用它

<MyDropdownButton Title="title">
<MyDropdownButtonItem Href="#" ActionName="actionName" />
MyDropdownButtonItem Href="#" ActionName="actionName2" />
</MyDropdownButton>