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.
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
.
... @code { public Type LayoutType { get; set; } = typeof(DarkLayout); }
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.