Layout

Required Bundles: templatelayout, [theme-*], [template-*]

The layout of an app consists of two parts:

  • Template

  • Theme

The theme defines colors and the appearance of the components but not their positioning in the app. This is defined by the template. Themes and templates are provided as single bundles.

To choose a layout, both a layout-template bundle and a color-theme bundle need to be added to the app.

The following bundles are available by default:

Templates

Bundle name Template name Description

template-seasons

seasons

Responsive (Modes: Desktop, Tablet (portrait/landscape), Mobile (portrait/landscape))

Themes

Bundle name Theme name Description

theme-everlasting

everlasting

Monochrome background, bright fonts

theme-winter

winter

Blue background, dark fonts

theme-spring

spring

Green background, dark fonts

theme-summer

summer

Red background, dark fonts

theme-autumn

autumn

Blue background, dark fonts

Change between different themes

To allow the user to switch between different themes, activate the ThemeSelector with the following configuration:

{
    "themes": {
        "ThemeModel": {
            "_selectedTheme": "everlasting"
        },
        "ThemeSelector": {
            "componentEnabled": true
        }
    },
}