Where can I find documentation for layout components?

Radzen.Blazor Components
1

Using Radzen I can see, from the generated razor files, the use of many layout related components, such as RadzenContent, ChildContent. However, I can't find these from Free Blazor Components | 70+ controls by Radzen and no documentation either.

2

You can't find it as it doesn't exist (yet) :wink:

The main purpose of RadzenLayout is to define the CSS grid "layout" of a Radzen application. It has a few sections - header (RadzenHeader), footer (RadzenFooter), side navigation (RadzenSidebar) and content (RadzenBody). A typical usage can be seen in MainLayout.razor.

Here is a minimal demo of all (should go in a layout):

<RadzenLayout>
    <RadzenHeader>
        <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
    </RadzenHeader>
    <RadzenBody @ref="@body0" Expanded="!sidebarExpanded">
         @Body
     </RadzenBody>
    <RadzenSidebar @bind-Expanded="sidebarExpanded">
    </RadzenSidebar>
</RadzenLayout>
@code {
    bool sidebarExpanded = true;
}

The important thing is that RadzenBody, RadzenHeader, RadzenFooter and RadzenSidebar only make sense when used with RadzenLayout.

3

IMHO, this makes it difficult to use in a more extensive and comprehensive way. Using individual components looks clearer. But a backend developer with little experience of frontend programming, like me, will have to rely on using Radzen IDE to visually design and initialize the basic layout/page, rather than manually building it up by inserting individual components, due to the lack of instructions of those layout components.

4

Not sure what you mean by this. Those layout components are in no way mandatory or needed by the rest of the Radzen.Blazor components. They are more or less specific to Radzen IDE applications - if you don't use the Radzen IDE you can simply ignore them if they seem complicated or unnecessary to you.

5

That's exactly what I meant. I have to rely on Radzen IDE and cannot manually build up the layout using Radzen.Blazor layout components, due to the lack of documentation. The alternative is to use native bootstrap to build the layout and then insert individual Radzen.Blazor components.

6

Hey @buaaytt,

The thread you’ve opened is for Radzen.Blazor components. To know how to work with Radzen layouts check this article:

7

We created a brand new demo with a few configurations showing the usage and configuration of RadzenLayout: Blazor Layout component