使用泥式衬衫，如何在页面底部获得持久的抽屉？

发布于 2025-01-21 03:00:14 字数 334 浏览 1 评论 0原文

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

我可以得到一个临时抽屉在页面底部，这不满足我的需求，因为我希望它在用户导航我的网站的其余部分时保持打开状态。我也不希望其余的屏幕变黑。

我可以在页面的左侧或右侧获得一个持久的抽屉，但这也不满足我的需求，因为它必须在底部。

锚点和绘画的任何组合。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很糊涂小朋友 2025-01-28 03:00:14

遵循泥打饼干的例子：

<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上报告的问题）。我已经对其进行了测试，这起作用了。我所做的是检查并查看临时抽屉和持久性的差异，只有临时抽屉才能修改锚。因此，如果您将这些样式添加到抽屉中，则应该有效。

另外，暗屏覆盖，当您调用组件时，可以使用 disableOverlay =“ true” 将其禁用

Following the Mud blazor example:

<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;
}

}

The problem it's internally into mudblazor (also if you want could be an issue to report on git). I already test it and this works. What i did it's inspect and see the difference between Temporary drawer and Persistent one, and only the temporary allows you to modify the Anchor. So if you add those styles to the drawer it should work.

Also the dark screen its the Overlay, when you call the component you can disable it with DisableOverlay="true"

回复收藏 0 原文

~没有更多了~