我有一个 Blazor .Net 8 webb 应用程序,它使用 Bootstrap 5.3 Offcanvas 组件作为可以从中选择的项目菜单。当用户选择菜单项时,我希望 Offcanvas 组件自动关闭。
我这样做的方法是创建一个像这样调用 JavaScript 的
ButtonClicked
事件
`await JS.InvokeVoidAsync("closeOffcanvas");`
这在 OnFilterSelected EventCallback 之前调用
data-bs
属性。我广泛寻找解决方案但无济于事。我想出的 JavaScript 可以在下面看到closeOffcanvas.js
)。我充其量只是一个新手java脚本程序员
下面是相关代码,有关工作示例,请参阅此 GitHub 存储库
任何帮助将不胜感激。
closeOffcanvas.js
window.closeOffcanvas = function () {
var offcanvasElement = document.getElementById("offcanvasid");
var offcanvas = new bootstrap.Offcanvas(offcanvasElement);
offcanvas.hide();
};
Filter.razor
<button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#offcanvasid">
Contents
<i class="fas fa-bars"></i>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasid">
<div class="offcanvas-header">
<span class=""></span>
<button type="button" class="btn-close"
data-bs-dismiss="offcanvas" aria-label="Close">
</button>
</div>
<div class="offcanvas-body">
<ul class="list-group">
@foreach (var item in Enums.MenuItem.List.OrderBy(o => o.Value))
{
<li class="list-group-item @ActiveFilter(item)">
<a @onclick="@(e => ButtonClicked(item))"
type="button"
id="@item.ButtonId">
@item.Value <small>@item.Title</small>
</a>
</li>
}
</ul>
</div>
</div>
@code
[Parameter, EditorRequired] public required Enums.MenuItem? CurrentFilter { get; set; }
[Parameter] public EventCallback<Enums.MenuItem> OnFilterSelected { get; set; }
protected Enums.MenuItem currentMenuItem = Enums.MenuItem.HebrewPassOverOrCrossOver;
private async Task ButtonClicked(Enums.MenuItem filter)
{
currentMenuItem = filter;
// calling this doesn't close the component
// It also disables the close button
await JS.InvokeVoidAsync("closeOffcanvas");
await OnFilterSelected.InvokeAsync(filter);
}
// other code
Index.razor
这是调用Filter.razor组件的razor页面
@page "/"
<h1>Home</h1>
<div class="d-flex justify-content-end mx-1">
<Filter CurrentFilter=@CurrentFilter OnFilterSelected="@ReturnedFilter" />
</div>
<!-- Do something with the chosen filter -->
@code
public MenuItem CurrentFilter { get; set; } = MenuItem.HebrewPassOverOrCrossOver; // default item
private void ReturnedFilter(MenuItem filter)
{
CurrentFilter = filter;
StateHasChanged();
}
这是一个演示页面,使用 Bootstrap 演示页面中的代码示例,展示了如何直接在 C# 中显示和隐藏画布外内容。
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<div class="m-2">
<button class="btn btn-primary" @onclick="ToggleCanvas">
Show Off Canvas
</button>
</div>
<div class="offcanvas offcanvas-start @_offCanvasCss" tabindex="-1" style="@_offCanvasStyle" role="dialog">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas</h5>
<button type="button" class="btn-close text-reset" @onclick="ToggleCanvas"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
@if (!_hideCanvas)
{
@* Had to set the z-index as the bootstrap version seemed to have it wrong - check yours *@
<div class="modal-backdrop fade @_offCanvasCss" style="z-index:1040" @onclick="ToggleCanvas"></div>
}
@code{
public bool _hideCanvas = true;
public string _offCanvasStyle => _hideCanvas ? "visibility:hidden;" : "visibility:visible;";
public string _offCanvasCss => _hideCanvas ? "hide" : "show";
private Task ToggleCanvas()
{
_hideCanvas = !_hideCanvas;
return Task.CompletedTask;
}
}