Mirando esta documentación: https://mudblazor.com/components/drawer
Puedo obtener un cajón temporal en la parte inferior de la página, esto no satisface mis necesidades, ya que quiero que permanezca abierto mientras el usuario navega por el resto de mi sitio web. Tampoco quiero que el resto de la pantalla se oscurezca.
Puedo obtener un cajón persistente a la izquierda o a la derecha de mi página, pero eso tampoco satisface mis necesidades, ya que debe estar en la parte inferior.
Cualquier combinación de Anchor.Bottom y DrawerVariant.Persistent que he probado no se compila.
¿Cuál es la forma correcta de hacer que esto funcione?
Solución del problema
Siguiendo el ejemplo de 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;
}
}
El problema está internamente en mudblazor (también, si lo desea, podría ser un problema para informar sobre git). Ya lo probé y esto funciona. Lo que hice fue inspeccionar y ver la diferencia entre el cajón Temporal y el Persistente, y solo el temporal te permite modificar el Ancla. Entonces, si agrega esos estilos al cajón, debería funcionar.
Además, la pantalla oscura es la Superposición, cuando llama al componente, puede deshabilitarlo con DisableOverlay="true"
No hay comentarios:
Publicar un comentario