Types of pages
WaveMaker mobile apps use pages for routable screens and partials for reusable UI fragments you embed inside a page or layout region. You design each one in Studio using Markup, Script, and Style views with WML tags such as wm-page and wm-partial.
Page
A page is a full screen the app can navigate to. Each page maps to a route in the generated React Native app when you connect it to a Navigation action or tab bar item.
Typical uses:
- Login, dashboard, or settings screens
- List and detail flows opened from navigation actions
- Any view that should appear as its own destination in the app stack
See Page elements for the default mobile layout (mobile navbar, content, left panel, mobile tabbar).
Partial
A partial is a reusable fragment. You do not navigate to a partial on its own. You reference it from a page or from a layout widget (for example wm-left-panel with content="leftnav").
Partials keep shared UI in one place so every page stays consistent. Common mobile partials include:
| Partial role | Mobile layout | Typical content |
|---|---|---|
| Left navigation | wm-left-panel drawer (type="left-panel") | wm-nav links, section menus, profile shortcuts |
| Embedded section | Inside wm-page-content, tabs, accordion, or wizard | Filters, shared form headers, repeated cards |
| Popover overlay | wm-popover on a page (content="partialName") | Menus, drill-down detail, contextual actions in a dropdown or action sheet |
A partial can also supply content for the wm-popover widget. Set content to the partial name so the overlay opens on the current page without navigation.
The mobile navbar and mobile tabbar are usually defined on each page markup. The left navigation drawer is the partial teams reuse most often.
Example left-panel partial reference on a page:
<wm-page name="mainpage">
<wm-mobile-navbar name="mobile_navbar1" title="Title"></wm-mobile-navbar>
<wm-content name="content1">
<wm-left-panel content="leftnav" name="left_panel1"></wm-left-panel>
<wm-page-content columnwidth="12" name="page_content1"></wm-page-content>
</wm-content>
<wm-mobile-tabbar name="mobile_tabbar1"></wm-mobile-tabbar>
</wm-page>
The leftnav partial holds the drawer menu markup and logic.