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