Conditions and Items
Responsive list layout starts with conditions. Each condition defines the client size range where it applies and the row, column, or fixed item size to use in that range. Items then provide the content that is rendered inside those calculated cells.
Width-Based Conditions
Use narrow ranges for compact one-column layouts and wider ranges for multi-column layouts. Keep ItemWidth at -1 when the item width should stretch proportionally with the control.
procedure TForm1.ConfigureResponsiveList;
var
Condition: TResponsiveCondition;
Item: TResponsiveListItem;
begin
TMSFNCResponsiveList1.Conditions.Clear;
Condition := TMSFNCResponsiveList1.Conditions.Add;
Condition.WidthFrom := 0;
Condition.WidthTo := 320;
Condition.Columns := 1;
Condition.ItemHeight := 140;
Condition := TMSFNCResponsiveList1.Conditions.Add;
Condition.WidthFrom := 321;
Condition.WidthTo := -1;
Condition.Columns := 3;
Condition.ItemHeight := 140;
TMSFNCResponsiveList1.Items.Clear;
Item := TMSFNCResponsiveList1.Items.Add;
Item.HeaderText := 'Support';
Item.Content := '<b>Open tickets</b><br>12 items need review';
Item.FooterText := 'Updated today';
Item := TMSFNCResponsiveList1.Items.Add;
Item.HeaderText := 'Sales';
Item.Content := '<b>Pipeline</b><br>4 opportunities closing';
Item.FooterText := 'This week';
end;
Item Content
Items can combine Content, HeaderText, FooterText, and Values. Use headers and footers for stable labels, and use values when templates need to swap the amount of text shown at different sizes.
Use the item appearance colors for hover and selected states when users need clear feedback while moving through a dense responsive layout.