TWebResponsiveGridPanel
Description
Below is a list of the most important properties methods and events for TWebResponsiveGridPanel
. TWebResponsiveGridPanel
is grid panel with responsive behavior. This means that the layout of the grid panel can adapt to the form factor of the web page where it is used. This layout is controlled by the Layout collection. Like a regular grid panel, controls can be dropped on the TWebResponsiveGridPanel
and these controls are organized in a grid like structure and represented and accessible via the TWebResponsiveGridPanel.ControlCollection
.
 |
 |
Designtime |
Runtime |
HTML template tag
The HTML tag the component can be associated with in an HTML template. Assign the ID
attribute with a unique value and set the identical value to the ElementID
property. Detailed
information can be found in the Use of HTML templates topic.
HTML tag |
<DIV ID=”UniqueID”></DIV> |
ElementID |
UniqueID |
Properties for TWebResponsiveGridPanel
Property |
Description |
ControlCollection |
Collection of child controls of the TWebResponsiveGridPanel |
ElementClassName |
Optionally sets the CSS classname for the label when styling via CSS is used |
ElementID |
Optionally sets the HTML element ID for a HTML element in the form HTML file the label needs to be connected with. When connected, no new label is created but the Delphi class is connected with the existing HTML element in the form HTML file |
Layout |
Collection of layout settings for various form factors. When a TWebResponsiveGridPanel is dropped on the form 4 layouts are automatically added for 4 different form factors: Smartphone with one column (screen width <= 575pixels), Tablet with two columns (screen width <= 768pixels), Desktop with three columns (screen width <= 991pixels), Large Desktop with four columns (screen width <= 1199pixels). |
Methods for TWebResponsiveGridPanel
Property |
Description |
AddControl |
Adds a new control to the TWebResponsiveGridPanel . |
RemoveControl |
Removes a new control from the TWebResponsiveGridPanel . |
Events for TWebResponsiveGridPanel
Property |
Description |
OnLayoutChange |
Event triggered when the form size changes and causes a new layout to be selected |
TResponsiveLayoutItem
is the class used in the Layout
collection of the TWebResponsiveGridPanel
to manage different desired layout settings per screen width.
Properties for TResponsiveLayoutItem
Property |
Description |
ColumnGap |
Gets or sets the column gap in pixels (px) or percentage (%) for the layout. The column gap is the gap between two successive columns. |
Description |
Text property that can be used to describe the layout. The Description property is not used at runtime in the control. |
Margins |
Sets the margins of the responsive grid cells in the selected layout. |
RowGap |
Gets or sets the column gap in pixels (px) or percentage (%) for the layout. The row gap is the gap between two successive rows. |
Style |
Sets the grid cell style. This is a space delimited string that sets for each row (or column) the specifier for each column in the row. The specifier per column (or row) can be based on fractions (fr), pixels (px) or percentage (%). For example, for a grid with 3 equally divided column widths, the style could be set to '1fr 1fr 1fr'. For a combination of a fixed column width in pixels of 200 pixels and two columns where the 2nd column has the double width of the third, the style could be set to '200px 2fr 1fr'. |
StyleType |
Sets the grid cells responsive style to be based on columns (gTemplateColumns ) or rows (gTemplateRows ). |
Tag |
Integer property. |
Width |
Sets the control width in pixels under which the layout is chosen. |