Exactly — splash pages act as a brief introduction when the app launches. They typically display a logo, animation, or welcome message while the app initializes, creating a polished first impression and reinforcing branding before the user reaches the main interface.
This configuration defines a page’s core behavior: it sets type, name, color, and cover, controls navigation with routes, next page, and timeout, marks if it’s the final step, manages display options like fullscreen, landscape, and screenshots, and specifies layout and text direction.
| Field | Type | Default Value | Description |
|---|---|---|---|
| @Type | PageType | "Splash" | Specifies the page type as a splash page |
| Name | PageName | {name} | Name or title of the page |
| Color | Color | {color} | Background color of the page |
| Cover | URL | {cover} | Optional cover image for the page |
| Routes | Array |
[] | List of route scripts or actions associated with the page |
| NextPage | Page | 0 | ID of the next page to navigate to |
| Timeout | Number | 0 | Duration in seconds before automatic navigation |
| Finish | Boolean | false | Indicates if this page marks the end of a sequence |
| FullScreen | Boolean | false | Determines if the page should be displayed in full screen mode |
| CanLandScape | Boolean | false | Allows landscape orientation if true |
| CanScreenShot | Boolean | false | Allows users to take screenshots if true |
| Dir | Direction | {dir} | Layout direction (e.g., "ltr" or "rtl") |
| Dir.Text | TextDirection | {dir} | Text direction for content on the page |
Coding:
{
"@Type": "Splash",
"Name": "{name}",
"Color": "{color}",
"Cover": "{cover}",
"Routes": [],
"NextPage": 0,
"Timeout": 0,
"Finish": false,
"FullScreen": false,
"CanLandScape": false,
"CanScreenShot": false,
"Dir": "{dir}",
"Dir.Text": "{dir}"
}
This configuration defines the splash screen: it sets the text (with customizable size, color, and style), displays an optional logo/image with adjustable size, and controls whether a progress indicator is shown during loading.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Splash.Text | String | {text} | Text displayed on the splash screen. |
| Splash.Text.Size | Number | 16 | Sets the font size of the splash text. |
| Splash.Text.Color | String | {textColor} | Sets the color of the splash text. |
| Splash.Text.Style | String | {textStyle} | Defines the style of the splash text (e.g., bold/italic). |
| Splash.Logo | URL | {logo} | URL or path for the splash logo/image. |
| Splash.Logo.Size | Number | 128 | Size of the logo/image on the splash screen. |
| Splash.Progress.Show | Boolean | true | Shows or hides a progress indicator on the splash screen. |
Coding:
{
"@Type": "Splash",
"Splash.Text": "{text}",
"Splash.Text.Size": 16,
"Splash.Text.Color": "{textColor}",
"Splash.Text.Style": "{textStyle}",
"Splash.Logo": "{logo}",
"Splash.Logo.Size": 128,
"Splash.Progress.Show": true
}
To see how to create this page in Applin Studio (no-code mode), visit:
Design the Splash Page in Applin Studio