c# - 使用 Mud Blazor，我如何在页面底部获得一个持久抽屉？

Question

查看此文档:https://mudblazor.com/components/drawer

我可以在页面底部获得一个临时抽屉，这不符合我的需求，因为我希望它在用户浏览我网站的其余部分时保持打开状态。我也不希望屏幕的其余部分变暗。

我可以在页面的左侧或右侧设置一个永久性抽屉，但这也不符合我的需求，因为它必须位于底部。

我尝试过的 Anchor.Bottom 和 DrawerVariant.Persistent 的任何组合都无法编译。

完成这项工作的正确方法是什么？

Answer 1

以 Mud blazor 为例:

<MudDrawer @bind-Open="@open" Elevation="1" Variant="@DrawerVariant.Persistent" Color="Color.Primary" Anchor="@anchor" DisableOverlay="true" Style="left: 0; top:auto; bottom: 0; width: 100%; height: auto">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">Test</MudText>
        </MudDrawerHeader>
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All">test 1</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">test 2</MudNavLink>
            <MudNavLink Match="NavLinkMatch.All">test 3</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
    <div class="d-flex justify-center align-center mud-height-full">
        <MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Bottom))">Bottom</MudButton>
    </div>
@code {

bool open = false;
Anchor anchor;

void OpenDrawer(Anchor anchor)
{
    
    open = true;
    this.anchor = anchor;
}

问题出在 mudblazor 内部(如果您愿意，也可以在 git 上报告问题)。我已经测试过了，这很有效。我所做的是检查并查看临时抽屉和持久抽屉之间的区别，只有临时抽屉允许您修改 anchor 。因此，如果您将这些样式添加到抽屉中，它应该可以正常工作。

暗屏也是 Overlay，当您调用该组件时，您可以使用 DisableOverlay="true"

禁用它