This guide will demonstrate how to use Radzen to design your pages.
After you create a Radzen page you will see the designer. It consists of several areas:
- Component Toolbox. You can drag and drop components from the toolbox onto the design canvas.
- Page List. Displays a list of all pages in the application. Clicking a page will load it in the design canvas. Allows you to add new pages, delete existing ones or change page properties - name, security etc.
- Design Canvas. Shows the components in the current page. Allows you to rearrange components, add or delete existing ones and change their properties.
- Property Grid. Displays the properties of a component and allows you to change them. A component should be selected first.
Working with components
Add a component
To add a component to a page simply drag and drop it from the toolbox on the design canvas.
Resize a component
You can drag and drop the resizing handles to customize the size of a component. This will set the component size in pixels.
If you need other units (percentages or something) use the property grid.
Defining page layout
Radzen uses the popular Bootstrap framework to create responsive page layouts.
Bootstrap uses a series of rows and columns to layout and align content.
- Rows are horizontal groups of columns that are alined.
- Content (components) should be placed within columns, and only columns may be immediate children of rows.
- Column classes indicate the number of columns you’d like to use out of the possible 12 per row.
- There are five responsive grid tiers, one for each responsive breakpoint:
- all breakpoints (extra small or XS) - device width is < 576px
- small (S) - device width is >= 576px
- medium (M) - device width is >= 768px
- large (L) - device width is >= 960px
- extra large (XL) - device width is >= 1200px
To use Bootstrap rows and columns in Radzen simply drag and drop them from the toolbox.
They are in their own ‘HTML’ category which is at the bottom of the toolbox.
- Drag and drop a row component.
- Drag and drop one or more column components.
- Set the column class property to specify the responsive width. Try switching the resolution in the design canvas to
see the changes.
- Drag and drop other components inside the columns.