Theming and Layouts

Layout is how the components on your website are organized. Theming is the process of creating multiple layouts and changing the selected layout. By combining layout and theming, you are able to create awesome features like: Compact and Comfortable view mode of Google Mail; Dark mode and light mode of most websites.

There are several ways to set the layout.

• Set the layout using RouteView.
• Set the layout for the folder using _Imports.razor.
• Set the layout on file using @layout directive.
• Set the layout using LayoutView.

You can explore each of these approaches in the next guides.

You can download the example code used in this topic on GitHub.

Overriding priority

Each approach has its own overriding priority, the former will be overrided by the latter. The following image shows the overriding chain in Blazor WebAssembly.

As the picture shows, RouteView has the least priority meaning it will be overrided by everything else. On the other hand, LayoutView has highest priority meaning it will not be overridided by anything.

Purposes

Each approach has its own purpose.

• RouteView: Set the default layout for the whole website.
• _Imports.razor: Set the layout for all the components in a folder.
• @layout directive: Set the layout for the component.
• LayoutView: Set the layout for the content inside.

Creating a layout

To create a new layout, you need to create a new Razor Component and use @inherits directive to inherit LayoutComponentBase. You are also required to place the Body as the content of the layout. The following code is a basic layout that wraps the content inside a <div>.

@inherits LayoutComponentBase

<div class="container-fluid">
    @Body
</div>

Assuming you have the following component:

@layout BlankLayout

<h3>ComponentUsingBlankLayout</h3>

Then use the above layout with the component, the generated HTML will look like:

<div class="container-fluid">
    <h3>ComponentUsingBlankLayout</h3>
</div>