Tab Bar Module

The Tab Bar module in PAP allows you to add a navigation bar to your app, improving usability and accessibility. It helps users move between different sections or pages quickly while maintaining a consistent design. The tab bar is fully customisable, covering layout, icons, spacing, colours, and behaviour so that it can match the look and function of your app.

Written By Yasaman Shad

Last updated 5 months ago

Accessing the Tab Bar Module

  1. Open an app in PAP.

  2. Click the Add Items button in the top navigation bar or use the “+” signs on the canvas.

  3. In the left-side New Items pane, locate the Tab Bar module.

  4. Drag it onto your app canvas. Once placed, click it to open the Tab Bar Properties Pane.

Tab Bar Properties and Settings

The properties pane gives full control over both individual tab configuration and the overall tab bar.

1. Tab Bar Settings

Control the overall appearance and behaviour:

  • Style:

    • Style 1: Each tab has an editable background when active.

    • Style 2: Each tab shows a bottom border when active.

  • Position: Place the tab bar at the Top or Bottom of the app.

  • Type: Display Icon & Text, Icon Only, or Text Only.

  • Spacing & Alignment: Adjust spacing and position tabs Left, Centre, or Right.

  • Tabs: Define the number of tabs (minimum 2, maximum 99).

  • Height: Adjust the overall height of the tab bar.

  • Colours:

    • Color 1: Text/icon colour for the active tab.

    • Color 2: Text/icon colour for inactive tabs.

    • Color 3: Background colour of the active tab.

    • Color 4: Background colour of the tab bar container.

2. Tab Settings

Customise each tab individually:

  • Label: Set a name for the tab.

  • Content: Choose if the tab links to a Page or stays empty (None).

  • Fill: Define the background of the tab bar container.

  • Icon: Add an icon for visual navigation.

  • Mode:

    • Auto: Automatically adjusts size based on content.

    • Custom: Manually set Height, Icon Size, Text Size.

  • Layout:

    • Direction: Horizontal or Vertical.

    • Alignment: Left, Centre, Right (horizontal) or Top, Centre, Bottom (vertical).

    • Spacing: Adjust distribution (None, Even, Equal).

  • Scroll Options:

    • Main Direction: Enable/disable scrolling or hiding vertically.

    • Cross Direction: Enable/disable scrolling or hiding horizontally.

Use Cases

  • Add a functional and visually clear navigation bar to guide users across app pages.

  • Adjust tab styles (color, layout, spacing) to match overall app design.

  • Select from multiple display types (Icon, Text, Icon + Text) to fit the navigation needs.

  • Configure scrolling and visibility options to save screen space and enhance usability.