Basic Layout
MudBlazor comes with many components of varying functions and behaviours. Some are built to control the layout of your application, and others may be used to provide other key functions, behaviours and operations for these components.
Notably, the three most important providers are MudThemeProvider, MudDialogProvider and MudSnackbarProvider. If you have followed the installation guide, these will already be in your MainLayout page.
MudThemeProvider is the component which provides your app with theme settings such as colors, fonts, shadows and other layout properties. It provides the MudBlazor theme by default. There should only exist one instance of the MudThemeProvider in your project.
Another two notable layout components are MudLayout and MudMainContent. MudLayout should be placed in the root of your application within the MainLayout page. Directly inside MudLayout you can place MudMainContent - this is where your page body will reside.
To better illustrate this, let's open the MainLayout.razor page 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 components so they are included in 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. If MudDrawer is open, the main content has the correct left or right margin applied.
Now to add some basic functionality. Adding a MudIconButton will open and close the drawer, whilst adding a NavMenu will provide some 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; } }