App

The App component is the root container that defines your application's overall structure and layout. It provides a complete UI framework with built-in navigation, header, footer, and content areas that work together seamlessly.

Essential features:

Layout templates: Choose from 7 predefined layouts (horizontal, vertical, condensed, etc.) with sticky navigation options
Routing: Built-in page routing via the Pages component

Properties

`defaultTheme` (default: "xmlui")

This property sets the app's default theme.

`defaultTone` (default: "light")

This property sets the app's default tone ("light" or "dark").

Available values: light (default), dark

`layout`

This property sets the layout template of the app. This setting determines the position and size of the app parts (such as header, navigation bar, footer, etc.) and the app's scroll behavior.

Available values:

Value	Description
`vertical`	This layout puts the navigation bar on the left side and displays its items vertically. The main content is aligned to the right (including the header and the footer), and its content is a single scroll container; every part of it moves as you scroll the page. This layout does not display the logo in the app header.
`vertical-sticky`	Similar to `vertical`, the header and the navigation bar dock to the top of the main content's viewport, while the footer sticks to the bottom. This layout does not display the logo in the app header.
`vertical-full-header`	Similar to `vertical-sticky`. However, the header and the navigation bar dock to the top of the app's window, while the footer sticks to the bottom.
`condensed`	Similar to `horizontal`. However, the header and the navigation bar are in a single header block. (default)
`condensed-sticky`	However, the header and the navigation bar are in a single header block.
`horizontal`	This layout stacks the layout sections in a single column in this order: header, navigation bar, main content, and footer. The application is a single scroll container; every part moves as you scroll the page.
`horizontal-sticky`	Similar to `horizontal`, the header and the navigation bar dock to the top of the viewport, while the footer sticks to the bottom.

Here are a few samples demonstrating the usage of the layout property. All samples use this markup, except the value of App's layout and a few marked code snippets:

<App layout="(specific layout value)">
  <!-- AppHeader omitted for "vertical" and "vertical-sticky" -->
  <AppHeader>
    <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Page 1" to="/page1"/>
    <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <List data="https://api.spacexdata.com/v3/history">
        <property name="itemTemplate">
          <Card title="{$item.title}" subtitle="{$item.details}"/>
        </property>
      </List>
    </Page>
    <Page url="/page1">
      <Text value="Page 1" />
    </Page>
    <Page url="/page2">
      <Text value="Page 2" />
    </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>

`horizontal`

Example: 'horizontal' layout

`horizontal-sticky`

Example: 'horizontal-sticky' layout

`condensed`

Example: 'condensed' layout

`condensed-sticky`

Example: 'condensed-sticky' layout

`vertical`

Example: 'vertical' layout

`vertical-sticky`

Example: 'vertical-sticky' layout

`vertical-full-header`

Example: 'vertical-full-header' layout

`loggedInUser`

Stores information about the currently logged-in user. By not defining this property, you can indicate that no user is logged in.

Stores information about the currently logged in user. Currently, there is no restriction on what the user data must look like.

<App loggedInUser="{{ name: 'Joe', token: '1234' }}">
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text value="User name: {loggedInUser.name}" />
      <Text value="User token: {loggedInUser.token}" />
    </Page>
  </Pages>
</App>

Example: loggedInUser

<App loggedInUser="{{ name: 'Joe', token: '1234' }}">
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text value="User name: {loggedInUser.name}" />
      <Text value="User token: {loggedInUser.token}" />
    </Page>
  </Pages>
</App>

`logo`

Optional logo path

`logo-dark`

Optional logo path in dark tone

`logo-light`

Optional logo path in light tone

`logoTemplate`

Optional template of the app logo

`name`

Optional application name (visible in the browser tab). When you do not define this property, the tab name falls back to the one defined in the app's configuration. If the name is not configured, "XMLUI App" is displayed in the tab.

`noScrollbarGutters` (default: false)

This boolean property specifies whether the scrollbar gutters should be hidden.

`scrollWholePage` (default: true)

This boolean property specifies whether the whole page should scroll (true) or just the content area (false). The default value is true.

This boolean property specifies whether the whole page should scroll (true) or just the content area (false). The default value is true.

<App scrollWholePage="false">
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Text>
    </Page>
  </Pages>
</App>

Example: scrollWholePage

<App scrollWholePage="false">
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/">
    <Page url="/">
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </Text>
    </Page>
  </Pages>
</App>

Events

`ready`

This event fires when the App component finishes rendering on the page.

This event fires when the App component finishes rendering on the page. Use it as onReady when inlining it on the component.

  <App onReady="isAppReady = true">
    <variable name="isAppReady" value="{false}"/>
    <Text value="{isAppReady ? 'App is ready' : 'Sadly, App is not ready'}" />
  </App>

Example: ready

  <App onReady="isAppReady = true">
    <variable name="isAppReady" value="{false}"/>
    <Text value="{isAppReady ? 'App is ready' : 'Sadly, App is not ready'}" />
  </App>

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-AppHeader	none	none
backgroundColor-content-App	$backgroundColor	$backgroundColor
backgroundColor-navPanel-App	$backgroundColor	$backgroundColor
borderBottom-AppHeader	none	none
borderLeft-content-App	none	none
boxShadow-header-App	none	none
boxShadow-navPanel-App	$boxShadow-spread	$boxShadow-spread
maxWidth-App	none	none
maxWidth-content-App	$maxWidth-content	$maxWidth-content
width-navPanel-App	$space-64	$space-64

Variable Explanations

Theme Variable	Description
`maxWidth-content-App`	This theme variable defines the maximum width of the main content. If the main content is broader, the engine adds margins to keep the expected maximum size.
`boxShadow‑header‑App`	This theme variable sets the shadow of the app's header section.
`boxShadow‑navPanel‑App`	This theme variable sets the shadow of the app's navigation panel section (visible only in vertical layouts).
`width‑navPanel‑App`	This theme variable sets the width of the navigation panel when the app is displayed with one of the vertical layouts.

App

Properties

defaultTheme (default: "xmlui")

defaultTone (default: "light")

layout

horizontal

horizontal-sticky

condensed

condensed-sticky

vertical

vertical-sticky

vertical-full-header

loggedInUser

logo

logo-dark

logo-light

logoTemplate

name

noScrollbarGutters (default: false)

scrollWholePage (default: true)