Home

Guides

Editor

Components

Actions

Conditions

Components

Basic

Container

Text

Image

Icon

Button

Forms

Local State

Text Input

Date Picker

Logic

Conditional Logic

Conditional Switch Logic

Modal

Sheet

Pager

Tabbed Pager

Data

Data Loader

Repeating Item

Countdown Timer

Data Transformer

Date Elements

Paging Data Loader

Contentful

Rich Text

Tabbed Pager Component Documentation

Overview

The Tabbed Pager Component provides a user-friendly interface that allows users to navigate between different content sections organised as tabs. This component enhances user experience by enabling quick access to related content without overwhelming the interface, making it ideal for presenting categorised information.


Key Features

  • Multiple Tabs

  • Active Tab Highlighting

  • Customisable Tab Labels


Component Fields

1. Tab Height

2. Indicator Color

Click the field to select from the available color options for your indicator. These are pre-set in Colorsand can be edited in this section to match your app's theme.

3. Background Color

Click the field to select from the available color options for your background. These are pre-set in Colorsand can be edited in this section to match your app's theme.

4. Style

Options include:

  • Fixed

  • Scrolling

5. Pages


Best Practices for Using the Tabbed Pager Component

  • Limit the Number of Tabs:Keep the number of tabs manageable (typically 3-5) to avoid clutter and confusion. Too many tabs can overwhelm users.

  • Use Descriptive Labels: Choose clear and descriptive names for each tab to help users understand the content at a glance.

  • Test Responsiveness: Ensure the tabbed pager functions well on mobile devices, with appropriate sizing and touch targets for easy navigation.