Pages

Pages serves as the routing coordinator within an App, managing which Page displays based on the current URL.
Key features:
  • Route coordination: Automatically displays the correct Page based on current URL and navigation
  • Default route handling: Sets the initial page shown when the application loads
  • Client-side routing: Manages navigation without page refreshes or server requests

Using the Pages and Page components

The Page component has a property called url. This is the route associated with the Page's contents. You can provide a link to this route to display a particular Page. Currently, all navigation is done on the clientside. No page is fetched from the server, thus the application operates as a Single Page Application.
<App>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Account" to="/account" icon="user"/>
  </NavPanel>
  <Pages>
    <Page url="/">
      <Text>Hello App!</Text>
    </Page>
    <Page url="/account">
      <Text>This is the account page.</Text>
    </Page>
  </Pages>
</App>
Example: using Pages and Page
<App>
  <NavPanel>
    <NavLink label="Home" to="/" icon="home"/>
    <NavLink label="Account" to="/account" icon="user"/>
  </NavPanel>
  <Pages>
    <Page url="/">
      <Text>Hello App!</Text>
    </Page>
    <Page url="/account">
      <Text>This is the account page.</Text>
    </Page>
  </Pages>
</App>

Properties

fallbackPath (default: "/")

The fallback path when the current URL does not match any of the paths of the pages.
<App>
  <NavPanel>
    <NavLink label="Not Home" to="/not-home" icon="trash"/>
    <NavLink label="Home" to="/home" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/home">
    <Page url="/not-home">
      <Text>This is not home...</Text>
    </Page>
    <Page url="/home">
      <Text>Hello App!</Text>
    </Page>
  </Pages>
</App>
Example: fallbackPath
<App>
  <NavPanel>
    <NavLink label="Not Home" to="/not-home" icon="trash"/>
    <NavLink label="Home" to="/home" icon="home"/>
  </NavPanel>
  <Pages fallbackPath="/home">
    <Page url="/not-home">
      <Text>This is not home...</Text>
    </Page>
    <Page url="/home">
      <Text>Hello App!</Text>
    </Page>
  </Pages>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

VariableDefault Value (Light)Default Value (Dark)
gap-Pages$space-5$space-5
paddingHorizontal-Pages$space-4$space-4
paddingVertical-Pages$space-5$space-5