Introduction
QB Mobile allows components (Grid, List, Horizontal List, Hero) to be configured with a range of styling parameters.
Component Differences
Components can render cells differently. An example of this is the difference between the ‘Grid’ & ‘Horizontal List’ versus the ‘List’ component.
-
Grid: Cell’s within a grid should match the height of the deepest cell in that row. The illustration below shows what happens when you have varying text label line amounts in the same row as well as cell height changing on a row to row basis.
-
Horizontal Lists: Cell’s within horizontal lists should have the same height no matter how much data is included in the individual cells.
-
List: List components should render cells dynamically so that the cells only occupy as much space as they need. The illustration below shows varying heights of cells dependant on the amount of lines the text labels take up.

Insert a Component into a Screen
Select <Add Component>

Select your component such as Horizontal List QB or any of the other QB components

Style your component
All components take their default values from the Theme Plugin. Once you over-write a value in a cell configuration field that value will over-write the Theme default value.
See the relevant help page for details of each of the Grid and List components


The following parameters can be configured.
Category |
Item |
Values |
---|---|---|
Rules |
Item limit |
Set the max number of cells to be displayed within the component |
Data |
Type |
Select the DSP feed type for the list |
Source |
Select the DSP feed source for the list |
|
Target screen |
Connected |
Select if cells within the component are going to launch a connected screen rather than the player. This would be used for instance where a cell represents a show and selecting it launches a screen of episodes |
Styles |
See the relevant help page for details of each of the Grid and List components |
|
Cells Configuration |
Component Defaults

Rail or Horizontal List
Description |
Name |
Value |
---|---|---|
Component Margin |
component-margin-top |
0 (inherited from theme defaults) |
|
component-margin-bottom |
20 (inherited from theme defaults) |
Component Padding |
component-padding-left |
16 (inherited from theme defaults) |
|
component-padding-right |
16 (inherited from theme defaults) |
|
component-padding-top |
0 (inherited from theme defaults) |
|
component-padding-bottom |
0 (inherited from theme defaults) |
Component Gutter |
component-gutter-vertical |
N/A |
|
component-gutter-horizontal |
13 (inherited from theme defaults) |
Background Color |
component-background-color |
Transparent |
Snapping |
snapping-toggle |
On |
|
snapping-alignment |
Start |
Cell Width (when scaling set to false) |
cell-width |
200 |
Cell Scaling |
scaling-toggle |
true |
|
scaling-number-of-cells |
2 |
|
scaling-next-cell-offset |
20 |
List
Info here
Description |
Name |
Value |
---|---|---|
Component Margin |
component-margin-top |
0 (inherited from theme defaults) |
|
component-margin-bottom |
20 (inherited from theme defaults) |
Component Padding |
component-padding-left |
16 (inherited from theme defaults) |
|
component-padding-right |
16 (inherited from theme defaults) |
|
component-padding-top |
0 (inherited from theme defaults) |
|
component-padding-bottom |
0 (inherited from theme defaults) |
Component Gutter |
component-gutter-vertical |
16 (inherited from theme defaults) |
|
component-gutter-horizontal |
N/A |
Background Color |
component-background-color |
Transparent |
Grid
Info here
Description |
Name |
Value |
---|---|---|
Component Margin |
component-margin-top |
0 (inherited from theme defaults) |
|
component-margin-bottom |
20 (inherited from theme defaults) |
Component Padding |
component-padding-left |
16 (inherited from theme defaults) |
|
component-padding-right |
16 (inherited from theme defaults) |
|
component-padding-top |
0 (inherited from theme defaults) |
|
component-padding-bottom |
0 (inherited from theme defaults) |
Component Gutter |
component-gutter-vertical |
16 (inherited from theme defaults) |
|
component-gutter-horizontal |
13 (inherited from theme defaults) |
Number Of Columns |
component-columns |
2 |
Background Color |
component-background-color |
Transparent |
Comments
0 comments
Please sign in to leave a comment.