Blocks
Blocks include components such as column, row, tab bar, tab panel, etc. These components work as placeholders for the other components to be placed.
To add a block component, simply drag and drop under the desired level. The block component will not show up in the template/page itself but creates a canvas for adding other components. The properties for each block component varies.
In the sections below, the Template Designer is used as example, all values of “Id” field has the prefix tm-.
Column
A Column component acts as a placeholder that allows you to add other components in a vertical layout in the template/page.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Column that will be displayed in the tree structure. | “tm-columnX” |
| CSS Classes | Defines the CSS classes. | None |
| Minimum Width | Minimum width of the column. | “none” |
| Maximum Width | Maximum width of the column. If not defined, the width of the device is used. |
“none” |
| Heading | Defines the name of the column, font and alignment with three sub-fields. - Text (via text editor) - Font (see Common Properties) - Text Align (select from drop-down list, default value “left”) - Image (see Others->Image) |
Vary |
| Description | Defines the description of the column, font and alignment with three sub-fields. - Text (via text editor) - Font (see Common Properties) - Text Align (select from drop-down list, default value “left”) |
Vary |
| Common properties | Common properties. - Colour - Border - Padding - Margin See Common Properties for more details. |
Vary |
HSpacer
The HSpacer component adds horizontal space in the template/page. It is particularly useful when you need to separate different groups of information in the template/page.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the HSpacer that will be displayed in the tree structure. | “tm-h-spacerX” |
| CSS Classes | Defines the CSS classes. | None |
| Width | Width of the space to be created. | “1rem” |
Row
The Row component acts as a placeholder that allows you to add components in a horizontal layout.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Row that will be displayed in the tree structure. | “tm-rowX” |
| CSS Classes | Defines the CSS classes. | None |
| Minimum Height | Minimum height of the row. | “none” |
| Maximum Height | Maximum height of the row. If not defined, the height of the device is used. |
“none” |
| Justify Content | Defines how the content is justified. Available options: - center - end - flex-start - flex-end - left - right - start |
“flex-start” |
| Align Items | Defines how the content is aligned. Available options: - baseline - center - flex-start - flex-end - stretch |
“stretch” |
| Common Properties | Common properties. - Colour - Border - Padding - Margin See Common Properties for more details. |
Vary |
Scoller
The Scoller components allows you to add a scolling bar.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Scoller that will be displayed in the tree structure. | “tm-scollerX” |
| CSS Classes | Defines the CSS classes. | None |
| Scroll | Defines whether the scroller is in auto or scroll mode. | “auto” |
| Common Properties | Common properties. - Colour - Border - Padding - Margin See Common Properties for more details. |
Vary |
Tab Bar
The Tab Bar component along with the Tab Panels, allows you to create template/page with multiple tabs. It puts a placeholder in the template/page to display the names of the Tab Panel components that were added into the template/page under it.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Tab Bar that will be displayed in the tree structure. | “tm-tab-barX” |
| CSS Classes | Defines the CSS classes. | None |
| Anchor Id | When defined, the anchor Id will appear in the URL. This Id should be unique and small. |
Blank |
| Common Properties | Common properties. - Colour - Border - Padding - Margin See Common Properties for more details. |
Vary |
If no Tab Panel components are added onto the template/page under the Tab Bar component, the Tab Bar component will not be visible in the template/page. Once Tab Panel components are added under the Tab Bar component, the labels of the Tab Panel components will appear in the Tab Bar component.
Tab Panel
The Tab Panel component along with the Tab Bar component, allows you to create template/page with multiple tabs. The Tab Panel components are to be added under the Tab Bar component.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Tab Panel that will be displayed in the tree structure. | “tm-tab-panelX” |
| CSS Classes | Defines the CSS classes. | None |
| Label | Name of the Tab Panel that will be displayed in the template/page. | “Tab” |
| Common Properties | Common properties. - Colour - Border - Padding - Margin See Common Properties for more details. |
Vary |
Template Content
The template Content component acts as a placeholder for users to fill in the required content when creating pages with this template.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Template Content that will be displayed in the tree structure. | “tm-template-contentX” |
| CSS Classes | Defines the CSS classes. | None |
Text Block
The Text Block component acts as a placeholder to add text related components.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Text Block that will be displayed in the tree structure. | “tm-text-blockX” |
| CSS Classes | Defines the CSS classes. | None |
| Text Align | Alignment of the text in the template/page. Available options: - left - right - center - justify |
“left” |
| Common Properties | Common properties. - Font - Colour See Common Properties for more details. |
Vary |
Toggle Panel
The Toggle Panel component acts as a placeholder to add components that are shown or hidden (such as “Show More” component). The header allows an image and label to set depending on the shown or hidden state.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the Toggle Panel that will be displayed in the tree structure. | “tm-toggle-panelX” |
| CSS Classes | Defines the CSS classes. | None |
| Text1 | The text to be shown when selected. | “Show More” in text editor |
| Text2 | The text to be shown when selected. | “Show Less” in text editor |
| Text Align | Alignment of the text in the template/page. Available options: - left - right - center - justify |
“left” |
| Image1 / 2 | ||
| Tooltip | Message to be display when hover over the image. | Blank |
| Store | Selects which binary store to select the image from the drop-down list. | None |
| Category | Selects which category to select the image from the drop-down list. | None |
| Name | Select the image to be displayed from the drop-down list. | None |
| Width | Width of the image. | “auto” |
| Height | Height of the image. | “auto” |
| Image Align | Alignment of the images. Available options: - left - right |
“left” |
| Vertical Align | Vertical alignment of the text. Available options: - baseline - center - flex-start - flex-end - stretch |
“baseline” |
| Common Properties | Common properties. - Font - Colour - Border - Padding - Margin See Common Properties for more details. |
Vary |
Vertical Spacer
The VSpacer component adds vertical space in the template/page. It is particularly useful when you need to separate different groups of information in the template/page.
It has the following properties.
| Field | Description | Default |
|---|---|---|
| Id | Name of the VSpacer that will be displayed in the tree structure. | “tm-v-spacerX” |
| CSS Classes | Defines the CSS classes. | None |
| Height | Height of the component. | “1rem” |