Skip to main content

Container Types

Accordion​

An Accordion is a layout component that displays content in stacked sections, where only one section is expanded at a time and the others remain collapsed. This helps conserve screen space while keeping related information organized.

In WaveMaker, the Accordion widget consists of multiple accordion panes. Each pane can contain widgets or include partial pages, allowing you to structure and group content in a clear and manageable way.

Markup:

<wm-accordion type="static" statehandler="URL" name="accordion1" class="app-accordion panel panel-default" variant="default:default">
    <wm-accordionpane name="accordionpane1" class="panel panel-default" variant="default:default">
    </wm-accordionpane>
    <wm-accordionpane name="accordionpane2" class="panel panel-default" variant="default:default">
    </wm-accordionpane>
    <wm-accordionpane name="accordionpane3" class="panel panel-default" variant="default:default">
    </wm-accordionpane>
</wm-accordion>
  • <wm-accordion> is the main container that holds multiple accordion panes.
  • <wm-accordionpane> represents an individual section within the accordion.
  • Each pane can contain components or partial pages.
  • Only one pane is visible (expanded) at a time, while the others remain collapsed.

Learn more: Open in Storybook

Tabs​

Tabs are used when you need to display multiple containers within a single page. In WaveMaker, Tabs act as a navigational widget and can contain widgets or partial pages, making them useful for grouping related content.

This interface style is commonly seen in web applications, browsers, and settings screens, where content needs to be accessible while staying within the same context.

Markup:

<wm-tabs type="static" statehandler="URL" name="tabs1">
    <wm-tabpane title="Tab title" name="tabpane1"></wm-tabpane>
    <wm-tabpane title="Tab title" name="tabpane2"></wm-tabpane>
    <wm-tabpane title="Tab title" name="tabpane3"></wm-tabpane>
</wm-tabs>
  • <wm-tabs> is the main container that groups multiple tab panes within a single page.
  • It allows content to be organized into separate sections, where only one tab pane is visible at a time.
  • <wm-tabpane> represents an individual tab within the Tabs container.
  • The title attribute defines the label displayed on the tab header.
  • Each tab pane can contain components or partial pages.

Learn more: Open in Storybook

Wizard​

A Wizard layout is used for tasks that need to be completed through multiple, independent steps. It guides users through each step in a structured and sequential manner, making complex processes easier to understand and complete.

In WaveMaker, a Wizard provides a clear UI with step indicators and navigation controls such as Previous and Next buttons, allowing users to review and confirm their inputs at each stage. Users can also cancel the process at any point if needed.

At the final step, the Wizard displays a Done or Finish button to indicate that all steps have been completed. Wizards are commonly used for multi-step forms, setup flows, and onboarding processes where guided interaction is essential.

Markup:

<wm-wizard type="static" stepstyle="justified" class="number app-wizard" name="wizard1" variant="number">
    <wm-wizardstep name="wizardstep1"></wm-wizardstep>
    <wm-wizardstep name="wizardstep2"></wm-wizardstep>
    <wm-wizardstep name="wizardstep3"></wm-wizardstep>
    <wm-wizardaction name="wizardaction1">
        <wm-anchor class="app-wizard-skip" caption="Skip »" show="bind:skippable()" on-click="skip()" name="anchor1"></wm-anchor>
        <wm-container class="app-wizard-actions-right app-container-default" name="container1" variant="default">
            <wm-button class="btn-filled btn-default" type="button" caption="bind:cancelbtnlabel()" show="bind:cancelable()" on-click="cancel()" name="button1" variant="filled:default"></wm-button>
            <wm-button class="btn-filled btn-default" type="button" iconclass="wi wi-chevron-left" caption="bind:previousbtnlabel()" show="bind:hasPreviousStep()" on-click="previous()" disabled="bind:disablePrevious()" name="button2" variant="filled:default"></wm-button>
            <wm-button class="btn-filled btn-default" type="button" iconclass="wi wi-chevron-right" iconposition="right" caption="bind:nextbtnlabel()" show="bind:hasNextStep()" on-click="next()" disabled="bind:disableNext()" name="button3" variant="filled:default"> </wm-button>
            <wm-button class="btn-filled btn-default" type="button" iconclass="wi wi-check" caption="bind:donebtnlabel()" show="bind:hasNoNextStep()" on-click="done()" disabled="bind:disableDone()" name="button4" variant="filled:default"></wm-button>
        </wm-container>
    </wm-wizardaction>
</wm-wizard>
  • <wm-wizard> is the main container that defines a step-based workflow.
  • It guides users through a sequence of steps, ensuring tasks are completed in a structured and logical order.
  • <wm-wizardstep> represents an individual step in the wizard.
  • Each step can contain widgets such as forms, inputs, or informational content.

Learn more: Open in Storybook

Panel​

A Panel is used to group a set of related components together within a page. It acts as a container that helps organize content into clearly defined sections.

In WaveMaker, the Panel component is a versatile UI container that can include a title, content area, and optional footer with actions such as buttons or forms. Panels are commonly used to present grouped information in sections like cards, summaries, or overlays, making the interface more structured and easier to understand.

Panels serve as a customizable wrapper for components such as text, forms, and navigation elements, helping manage layout and user interaction within the application.

Markup:

<wm-panel subheading="subheading" iconclass="wi wi-account-circle" autoclose="outsideClick" title="Title" name="panel1" class="panel panel-default" variant="default:default">
    <wm-panel-footer name="panel_footer1">
        <wm-label padding="unset 0.5em" class="text-muted p" caption="Addition Info" name="label1" variant="default:p"></wm-label>
    </wm-panel-footer>
</wm-panel>
  • <wm-panel> acts as a structured container that groups related content into a single visual block.
  • <wm-panel-footer> defines the footer section of the panel.

Learn more: Open in Storybook

Tile​

A Tile is a container widget used to present a set of objects or summary information in a compact and visually appealing way. It is commonly used in dashboards to display key metrics, status information, or quick insights.

In WaveMaker, the Tile widget allows you to directly add content such as images, text, icons, videos, or web code. While it functions similarly to a Container, a Tile comes with default styling that makes it more suitable for dashboard-style layouts. This built-in styling helps create a consistent look and feel without additional configuration.

Unlike containers, Tiles do not support partial pages, making them ideal for simple, self-contained content blocks rather than reusable UI sections.

Markup:

<wm-tile class="bg-default" name="tile1" variant="default:default">
    <wm-container height="100%" direction="row" width="fill" alignment="top-left" padding="8" name="container1" class="app-container-default" variant="default">
        <wm-container direction="row" alignment="top-center" padding="8px" width="25%" height="fill" name="container2" class="app-container-default" variant="default">
            <wm-icon name="tileIcon" iconclass="wi wi-bar-chart fa-3x" class="fa-xs" variant="default:xs"></wm-icon>
        </wm-container>
        <wm-container direction="column" alignment="top-center" padding="8px" width="75%" height="fill" name="container3" class="app-container-default" variant="default">
            <wm-label name="tileTitle" caption="title" class="p" fontunit="em" variant="default:p"></wm-label>
            <wm-label name="tileStatLabel" caption="00" fontunit="em" class="h1 p" variant="default:p"></wm-label>
        </wm-container>
    </wm-container>
</wm-tile>
  • <wm-tile> acts as the outer wrapper and provides default tile styling.
  • Inside the tile, containers are used to structure the content layout.
  • One container holds an icon, typically used for visual representation.
  • Another container holds labels, often used to display titles and values.
  • This structure makes Tiles ideal for displaying KPI values, statistics, or dashboard summaries.

Learn more: Open in Storybook