Layout Components in Telerik UI for Blazor
Environment
| Product |
UI for Blazor, Form for Blazor, GridLayout for Blazor, MediaQuery for Blazor, Splitter for Blazor, StackLayout for Blazor, TileLayout for Blazor |
Description
This KB article answers the following questions:
- Which Telerik UI for Blazor components to use to create layouts?
- How to build page layouts with Telerik Blazor components and without using third-party tools like Bootstrap?
- What are the Bootstrap framework alternatives in Telerik UI for Blazor?
Solution
If you want to build layouts only with Telerik UI for Blazor, there are several components that can serve this purpose. Here are some pointers to help you compare and choose:
- The Form supports built-in horizontal and vertical orientation of the labels and editors. You can also split form items in groups or organize the form layout in columns. Finally, the Form can generate input components for your model automatically.
- The GridLayout displays items in rows and columns, similar to the CSS grid layout.
- The MediaQuery can help you reach to viewport size changes and render different layout depending on the screen size (even replace entire rendering and components, not just hide elements with CSS).
- The Splitter is useful for organizing the whole page in areas, for example - header, left content, right content, footer. Splitter panes can be collapsed and resized.
- The StackLayout displays cards in a single row or column with some spacing options.
- The TileLayout displays tiles that are resizable and reorderable.
Other components that may be relevant to application layouts are:
- The Card lets you display items and sets of information through predefined building blocks.
- Various popup components let you conserve real estate on the screen.
- Many other components help with navigation and layouts, review the list of available components in our demos.