如何在 Blazor 中實現按鈕下拉組件

Question

我正在嘗試創建一個按鈕來打開一個可以顯示多個按鈕的菜單。 ( 示例) 我似乎不明白當事件被實現時，示例是如何在幕后實現的……更多細節可以在這里找到。 （ 如何文檔）

他們是如何實現這個模板的和/或是否有另一種方法可以在不使用同步融合庫的情況下在 Blazor 中實現一個干凈的下拉按鈕組件？

說清楚； 我不是在尋找實現同步融合庫的方法。

---

現在的進展：

下拉式菜單

<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包，否則在各個 razor 頁面中導入這些包。

@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>