LayoutView

LayoutView is the top of layout overriding chain. It cannot be overridden by any other methods. Using LayoutView will also help you component to change the layout on the fly.

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

Creating a layout

Before setting the layout for components, you need a layout first. Follow the steps described in Theming and Layouts guide to create a layout. In this example, we will use the following layout:

@inherits LayoutComponentBase

<div class="bg-dark text-light">
    @Body
</div>

as the DarkLayout and

@inherits LayoutComponentBase

<div class="bg-light">
    @Body
</div>

as the LightLayout.

Changing the layout

1. Create a new component and declare a Type property. This property will hold the value of the current layout.

...
@code {
    public Type LayoutType { get; set; } = typeof(DarkLayout);
}

2. Use LayoutView and pass the type of layout to the Layout parameter

<LayoutView Layout="LayoutType">
    <h3>DynamicLayout</h3>
    <button type="button" class="layout-selector" @onclick="() => LayoutType = typeof(DarkLayout)">Dark Layout</button>
    <button type="button" class="layout-selector" @onclick="() => LayoutType = typeof(LightLayout)">Light Layout</button>
</LayoutView>

When you click the button, it will change the LayoutType which is currently used by the LayoutView and make the UI display differently.