Using Blazor layout components
Most web pages usually contain fixed parts, such as a header, footer, or menu. We can design a page using a layout together with the page content to reduce the redundant code. The page itself contains the content that we want to show the users and the layout helps to build the styles and provide navigation methods.
Blazor layout components are a class derived from LayoutComponentBase
. Anything we can do with a regular Razor component we can do to the layout components as well.
In Listing 8.1, we can see that MainLayout
is used as the default layout of the pages. It is defined in Listing 8.2 here:
Listing 8.2: MainLayout.razor (https://epa.ms/MainLayout8-2)
@inherits LayoutComponentBase ❶ <div class="page"> <div class="sidebar"...