Using Mud Blazor, how do I get a persistent drawer on the bottom of my page?

user_18224693 0
Viewed 676

Looking at this documentation: https://mudblazor.com/components/drawer

I can get a temporary drawer on the bottom of the page, this doesn't meet my needs as I want it to remain open while the user navigates the rest of my website. I also don't want the rest of the screen to go dark.

I can get a persistent drawer on the left or right of my page, but that doesn't meet my needs either as it must be on the bottom.

Any combination of Anchor.Bottom and DrawerVariant.Persistent that I have tried does not compile.

What is the correct way to make this work?

mudblazor blazor-server-side blazor .net c#
1 Answers

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"

user_143224980
Related