主页 / coding / 问题 / 79246501
Accepted
Jimmy
Asked: 2024-12-03 14:37:59 +0800 CST

当屏幕宽度变窄时，停止 MudBlazor 调整表格大小

  • 772

我有一张MudBlazor 表，在调整窗口大小时它会一直这样做：

从： 在此处输入图片描述

到：

在此处输入图片描述

我的代码：

<MudCard Elevation="0">
    <MudCardContent>
        <MudTable Style="background-color: #9d1213" Elevation="22" Class="py-8 px-10" Items="@rewards" Virtualize="true" Hover="true" SortLabel="Sort By">
            <HeaderContent>
                <MudTh Class="text-white"><MudTableSortLabel 
                    SortBy="new Func<Reward, object>(x=>x.Name)">Reward</MudTableSortLabel></MudTh>
                <MudTh Class="text-white"><MudTableSortLabel Enabled="@enabled" 
                    SortBy="new Func<Reward, object>(x=>x.HasBeenUsed)">Used ?</MudTableSortLabel></MudTh>
                <MudTh Class="text-white"><MudTableSortLabel InitialDirection="SortDirection.Ascending" 
                    SortBy="new Func<Reward, object>(x=>x.ExpiresOn)">Expires on</MudTableSortLabel></MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd Class="text-white" DataLabel="Name">@context.Name</MudTd>
                <MudTd Class="text-white" DataLabel="HasBeenUsed">@(context.HasBeenUsed == true ? "Yes" : "No")</MudTd>
                <MudTd Class="text-white" DataLabel="ExpiresOn">
                    @context.ExpiresOn.ToString("d", CultureInfo.CreateSpecificCulture("en-US"))
                </MudTd>
            </RowTemplate>
            <PagerContent>
                <MudTablePager Class="text-white" PageSizeOptions="new int[] { 10, 25, 50, 100 }" />
            </PagerContent>
        </MudTable>
    </MudCardContent>
</MudCard>

我对它了解不够多，不知道如何才能不让它这样做，而且我已经尝试了MudBlazor网站CSS上的很多东西来进行更改，但它什么也没做CSS

c#

1 个回答

  1. Best Answer

    MudBlazor 默认是响应式的，这意味着它默认切换到其组件的移动友好版本。您可以通过设置toBreakpoint上的属性来禁用表自动切换到移动版本。这在默认表文档中有引用。MudTableBreakpoint.None

    通过将断点设置为 Breakpoint.None，可以防止表格破坏移动布局

    如果您仍然希望在非常小的屏幕上使用移动布局，则可以将该Breakpoint属性设置为其他值之一，以控制 MudBlazor 何时切换到移动组件。

    这是一个交互式示例。

    • 1

相关问题