Início / coding / Perguntas / 78573968
Accepted
CrazyEight
Asked: 2024-06-04 15:39:30 +0800 CST

MudBlazor - Layout de página

  • 772

Atualmente estou tentando criar um WebApp MudBlazor. Como sou muito novo no MudBlazor, tento descobrir como funciona o espaçamento e o layout da página.

Então peguei um layout bem básico do MudBlazor Wireframes com gaveta esquerda e barra de aplicativos superior.

Então meu MainLayout.razorfica assim:

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="2">
        <MudDrawerHeader>
            <MudText Typo="Typo.h5" Class="mt-1">@Configuration["ApplicationSettings:AppName"]</MudText>
        </MudDrawerHeader>
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

E o layout da minha página:

<MudGrid Justify="Justify.Center">
    <MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem>
    <MudItem xs="8" Style="background-color: red; height: 90vh;"></MudItem>
    <MudItem xs="2" Style="background-color: aqua; height: 90vh;"></MudItem>
    <MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem>
</MudGrid>

Então é isso que é renderizado: insira a descrição da imagem aqui

Agora, existem dois problemas principais que me incomodam

  1. Como você pode ver, há uma barra de rolagem vertical porque a área amarela flui para fora... Gostaria que a área amarela tivesse uma altura fixa e as áreas azul/água e vermelha ocupassem o espaço vertical restante. Algo parecido height: autoou algo parecido. Achei que 90vhsignificaria 90% da altura do contêiner pai, mas aparentemente algo deu errado aqui
  2. Há também uma barra de rolagem horizontal que não consigo explicar, pois estou apenas trabalhando com a MudGridqual nem consigo influenciar e 12representatake whole available space
css

1 respostas

  1. Best Answer

    Você precisa levar em conta o espaço que o AppBar usa.

    <MudGrid Justify="Justify.Center">
    <MudItem xs="2" Style="background-color: aqua; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="8" Style="background-color: red; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="2" Style="background-color: aqua; height: calc(90vh - var(--mud-appbar-height));"></MudItem>
    <MudItem xs="12" Style="background-color: yellow; height: 10vh;"></MudItem>
</MudGrid>

    Exemplo completo aqui

    • 2

relate perguntas