Blazor StackLayout - Overview
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
The StackLayout component is part of Telerik UI for Blazor, a professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI for Blazor StackLayout arranges its inner elements horizontally or vertically in a stack. Nesting stack layouts helps you accommodate more complex information structures into easy to navigate layouts.
The name StackLayout derives from the way this type of layout is used in mobile or WPF applications, and the component aims at making it simple to create such a layout type that you are familiar with from mobile experiences.
You can tailor the Blazor StackLayout component to perfectly align with you project by customizing its width and height, changing the styling, adding spacing between inner elements or changing the orientation from vertical to horizontal and vice versa. The orientation options provide the opportunity to align inner items to the left, right, center or to stretch them.
While the naming and code usage are similar to native applications, the StackLayout is a purely web component that utilizes HTML and modern CSS rules to achieve this layout in a web browser.
While typically used for aligning several elements in the same pattern (in a row or column), you can also use the StackLayout to define more complex layouts by nesting more than one component instance with the appropriate settings. Thus, with a few lines of code, you could create common layouts such as header, footer and content rows, and split the content into several columns, all without the need to use HTML and CSS directly.