Layout for components that are not pages

[ZvonimirMatic]

I started doing a simple app using server-side Blazor. In that app I have multiple modal windows that should show additional information about certain parts of the application.

Every modal window should have completely free-form content, so a component with a title and content is not suitable (e.g. because the content might be some complex HTML). I found layout examples in the documentation and decided to give it a try, but as I was testing it out, I realized that @layout decorator applies only if there is also @page decorator, which would mean that every modal window would have it's own URL and I do not want that. The way I wanted the layout component to look like was something similar to this:

@inherits LayoutBaseComponent

<div class="modal">
    <div class="modal-close-icon"></div>
    <div class="modal-content container">
        @Body
    </div>
</div>

@functions {
    ...
}

I think it would be very useful that layouts should be applicable to components that are not pages too. For now I have a different component for every modal window and each of them inherits a base component with some logic for modal windows, but that means that I have a lot of copy-pasted HTML code shown above.

[conficient]

Layouts are intended to be used for page layout only.

For components with embedded 'child' content you use RenderFragment or templates. These are covered in the Blazor Docs here.

If you have more complex requirements you can also use Templated Components

Hope this helps

[SteveSandersonMS]

Thanks for answering @conficient.

Yes, the intended design is that you can do things like "wrap a templated component around your dialog" to reuse container markup or behavior. Templates components let you pass in arbitrary content (including interactive content) so it's not limiting you to a simple text-based title/contents structure.