Layouts — Veto

Layouts

Three ready-made page frames, each assembled from the same shell pieces. Open one to see it running full-screen.

Shell

The frame the other three are assembled from: app bar, drawer, content and footer.

Open full screen Reference

Docs

Navigation drawer, a reading column and a contents rail. This site runs on this shape.

Open full screen Reference

Dock

Full-bleed content with a floating dock over it. Four edges, magnified or flat.

Open full screen Reference

Dashboard

App bar, navigation and a grid of tiles that reflows by breakpoint.

Open full screen Reference

They are all the same pieces

Each preset is a thin component over VetoLayout, VetoAppBar, VetoDrawer and VetoMainContent. If a preset does not do what you need, compose those directly - the preset is a shortcut, not the only way in.

razor

<!-- The preset -->
<VetoDashboardLayout Title="Operations" Items="Nav">
    <VetoDashboard Columns="1" ColumnsLarge="4">…</VetoDashboard>
</VetoDashboardLayout>

<!-- The same thing, composed by hand -->
<VetoLayout>
    <VetoAppBar>Operations<VetoSpacer /><VetoThemeToggle /></VetoAppBar>
    <VetoDrawer @bind-Open="_open"><VetoNavMenu Items="Nav" /></VetoDrawer>
    <VetoMainContent>
        <VetoDashboard Columns="1" ColumnsLarge="4">…</VetoDashboard>
    </VetoMainContent>
</VetoLayout>