我在我的blazor应用程序中有一个MudDrawer,我希望MudDrawer占用整个高度页的。以下是我尝试过的:
<MudDrawerContainer Class="mud-height-full">
<MudDrawer @bind-Open="@open" Width="300px" Height="900px" Fixed="true" Elevation="24" Variant="@DrawerVariant.Temporary" DisableOverlay="true" Style="background-color:aliceblue" Anchor="Anchor.End">
<MudDrawerHeader>
<MudText Typo="Typo.h6">My App</MudText>
</MudDrawerHeader>
<MudNavMenu>
<MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink>
<MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LocalLibrary">Library</MudNavLink>
<MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Forum">Community</MudNavLink>
</MudNavMenu>
</MudDrawer>
</MudDrawerContainer>
<div class="d-flex justify-center align-center mud-height-full">
<MudButton Color="Color.Inherit" OnClick="@ToggleDrawer"
StartIcon="@Icons.Material.Filled.West" Class="mx-2">Toggle drawer</MudButton>
</div>
@code {
bool open = false;
void ToggleDrawer()
{
open = !open;
}
}
正如你所看到的,我已经将高度设置为900px,但我想成为页面的高度,我尝试了100%,但我没有得到我想要的结果。下面是演示
如果你想让它保持在原来的位置并占据整个窗口/容器的高度,那么你可以添加positon:fixed;
你可以使用位置css来移动它,比如顶部/底部等。我在示例中添加top:40px
只是为了显示这一点。
<MudDrawer @bind-Open="@open" Width="300px" Fixed="true" Elevation="24"
Variant="@DrawerVariant.Temporary" DisableOverlay="true"
Style="background-color:aliceblue;position:fixed;top:40px;" Anchor="Anchor.End">
//..
</MudDrawer>