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 four most important providers are MudThemeProvider
, MudPopoverProvider
, 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/> <MudPopoverProvider/> <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/> <MudPopoverProvider/> <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 /> <MudPopoverProvider /> <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 may want to make use of the MudContainer
component to center some content and add some gutters to your page. This can be done either directly in your MainLayout.razor
page, or, alternatively, do this in each individual page.
@inherits LayoutComponentBase <MudMainContent> <MudContainer MaxWidth="MaxWidth.Medium"> @Body </MudContainer> </MudMainContent>