Tenho uma tabela MudBlazor e ela continua fazendo isso ao redimensionar a janela:
Para:
Meu código:
<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>
Não sei o suficiente sobre CSS
ou então como não fazer isso e tenho tentado muitas coisas, desde o site MudBlazor até CSS
mudanças, mas não faz nada
O MudBlazor é reativo por padrão, o que significa que ele alterna para versões amigáveis para dispositivos móveis de seus componentes por padrão. Você pode desabilitar a tabela alternando automaticamente para a versão para dispositivos móveis definindo a
Breakpoint
propriedade em seuMudTable
paraBreakpoint.None
. Isso é referenciado na documentação da tabela padrão .Se você ainda quiser layouts móveis em telas realmente pequenas, você pode definir a
Breakpoint
propriedade para um dos outros valores para controlar quando o MudBlazor alterna para componentes móveis.Aqui está um exemplo interativo.