Basic Layout
MudBlazor comes with many components, some of them are built to control the layout of your application or provide key functions to other layout based components and function together in a specific way.
First we have three providers MudThemeProvider
, MudDialogProvider
and MudSnackbarProvider
these should be in your file already if you followed the installation page.
MudThemeProvider
this component provides your app with all your theme settings like colors, fonts, shadows and some layout properties. It provides the default MudBlazor theme by default and you should only have one MudThemeProvider
.
Then we have the two main layout components MudLayout
and MudMainContent
where MudLayout
will be the root of your application where main layout components exists. Directly inside MudLayout
we will place MudMainContent
this is where your page body normally is.
To better illustrate this, let's open our MainLayout.razor
and create a basic MudBlazor layout.
@inherits LayoutComponentBase <MudThemeProvider/> <MudDialogProvider/> <MudSnackbarProvider/> <MudLayout> <MudMainContent> @Body </MudMainContent> </MudLayout>
Appbar & Drawer
Before MudMainContent
we can add MudAppBar
and MudDrawer
so its apart of all pages using this layout.
@inherits LayoutComponentBase <MudThemeProvider/> <MudDialogProvider/> <MudSnackbarProvider/> <MudLayout> <MudAppBar> My Application </MudAppBar> <MudDrawer Open="true"> </MudDrawer> <MudMainContent> @Body </MudMainContent> </MudLayout>
Functionality
Because we added the components directly inside MudLayout
, MudMainContent
takes the height of our MudAppBar
and uses that as top padding and if MudDrawer
is open the main content gets the correct left or right margin.
Now lets add some basic functionality. MudIconButton
to open and close the drawer and we will add our NavMenu
for basic navigation.
@inherits LayoutComponentBase <MudThemeProvider /> <MudDialogProvider /> <MudSnackbarProvider /> <MudLayout> <MudAppBar> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /> My Application </MudAppBar> <MudDrawer @bind-Open="@_drawerOpen"> <MyNavMenu/> </MudDrawer> <MudMainContent> @Body </MudMainContent> </MudLayout>
@code { bool _drawerOpen = true; void DrawerToggle() { _drawerOpen = !_drawerOpen; } }
<MudNavMenu> <MudNavLink Href="/" Match="NavLinkMatch.All">Dashboard</MudNavLink> <MudNavLink Href="/servers" Match="NavLinkMatch.Prefix">Servers</MudNavLink> <MudNavGroup Title="Settings" Expanded="true"> <MudNavLink Href="/users" Match="NavLinkMatch.Prefix">Users</MudNavLink> <MudNavLink Href="/security" Match="NavLinkMatch.Prefix">Security</MudNavLink> </MudNavGroup> <MudNavLink Href="/about" Match="NavLinkMatch.Prefix">About</MudNavLink> </MudNavMenu>
Content & Containers
Before you go on and add content to your pages depending on what you are building you might want to use MudContainer
to center some content and add some gutters to your page. This can be done either directly in your MainLayout.razor
or do it per page.
@inherits LayoutComponentBase <MudMainContent> <MudContainer MaxWidth="MaxWidth.Medium"> @Body </MudContainer> </MudMainContent>
Ready for More?
Installation
Getting Started
Wireframes
Copy, paste layouts