在Mobile上将MudDrawer Width设置为100%

Question

我有一个Blazor应用程序，它有一个MudDrawer(来自MudBrazor(，我将它用作屏幕右侧的模式对话框。

然而，在移动视图中，我希望它有100%的宽度(而不仅仅是大约(。

我知道我可以用自定义条件CSS来做到这一点，但我正在寻找最好的解决方案希望能找到比这更好的东西。

这是我的代码：

<MudDrawer @bind-Open="@open" Width="375px" Anchor="Anchor.Right" Variant="DrawerVariant.Temporary">
<MudDrawerHeader>
<MudText Typo="Typo.h6">Header</MudText>
</MudDrawerHeader>
Here is some text
</MudDrawer>

我知道我可以在Width中放入一个方法名称，然后检查当前大小并设置所需的宽度。然后，如果屏幕大小发生变化，我将不得不检测并重新计算。这不是一个好的解决方案。

那么我如何确保我的MudDrawer的宽度为375px；xs"(移动视图(它有100%的宽度

提前感谢您的帮助。

Answer 1

我喜欢使用容器进行这种CSS操作，因为您使用的组件的CSS是不打开的。你能试试类似的东西吗：

<div class="drawer-container">
<MudDrawer @bind-Open="@open" Width="100%" Anchor="Anchor.Right" Variant="DrawerVariant.Temporary">
<MudDrawerHeader>
<MudText Typo="Typo.h6">Header</MudText>
</MudDrawerHeader>
Here is some text
</MudDrawer>
</div>

<style>
.drawer-container {
width: 375px;
}
@media (max-width: 20em) { /* Change for the good breakpoint here */
.drawer-container {
width: 100%;
}
}
</style>

Answer 2

以下是使其发挥作用的配方。

1. 设置一个变量以控制抽屉的宽度：

<MudDrawer @bind-Open="@Open" Width="@drawerWidth" Elevation="4" Anchor="Anchor.End" Variant="DrawerVariant.Temporary">

2. 默认情况下宽度设置为375px

string drawerWidth = "375px";

3. 我需要一些代码来在设置新断点时做出反应，例如，如果用户调整浏览器的大小：

Breakpoint currentBreakpoint;
public Breakpoint CurrentBreakpoint
{
get { return currentBreakpoint; }
set
{
currentBreakpoint = value;
if (Open)
{
// Only fiddle with sizes if the panel is currently open
SetSize();
}
}
}

4. 为了确保调用上述属性，必须订阅断点侦听器：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var breakpointResult = await BreakpointListener.Subscribe(breakpoint =>
{
CurrentBreakpoint = breakpoint;
}, new ResizeOptions
{
ReportRate = 250,
NotifyOnBreakpointOnly = true,
});
CurrentBreakpoint = breakpointResult.Breakpoint;
}
await base.OnAfterRenderAsync(firstRender);
}

5. 最后，SetSize函数只需将抽屉设置为所需的大小

public void SetSize()
{
if (currentBreakpoint == Breakpoint.Xs)
{
drawerWidth = "100%";
}
else
{
drawerWidth = "375px";
}
StateHasChanged();
}

(附带说明：由于某种原因，stackoverflow代码格式化程序不适用于此代码，所以这就是为什么我不得不以引号的形式输入(