• Documentation
  • Ask a Question
  • Zeroplat.io
  • Documentation
  • Ask a Question
  • Zeroplat.io
  • Introduction
    • Welcome to Zeroplat
    • Video Intro
  • Get Started
    • Requirements
    • Installation
  • Management
    • Resources
    • SaaS
      • Multi-tenancy
      • Editions
    • Permissions
    • Organization Units
    • Language
      • Languages
      • Language Texts
    • Roles
    • User
      • Users
      • Invite Users
    • Audit Logs
  • Visual Builder
    • Overview
    • Resources
      • Menu & Navigation
      • Pages
      • Dashboards
      • Components
      • Generate Pages from Datasource
    • Design
      • JS Query
      • Transformer
      • Variable
    • Event Designer
      • Tasks
        • Execute query
        • Start workflow
        • Show page
        • Close Page
        • Set variable
        • Show notification
        • Set components props
      • Switch
        • If
        • Confirm box
        • Confirm popover
    • Data
    • Preview & Publish
    • Components
      • Common Properties
        • Layout
        • Style
        • Actions
        • Validations
        • Tooltip
      • Inputs
        • Button
        • Input
        • InputNumeric
        • ComboBox
        • MulticolumnCombobox
        • Checkbox
        • CheckboxGroup
        • Switch
        • RadioGroup
        • ToggleButtonGroup
        • LocalizedInput
        • Slider
      • Business
        • OrganizationUnitBrowser
        • RoleBrowser
        • UserBrowser
      • Data display
        • DataGrid
      • Editors
        • QuillEditor
      • Feedback
        • Alert
        • Progress
      • File
        • Dropzone
        • FileButton
        • FileInput
      • Layout
        • SplitLayout
      • Navigation
        • TabBar
      • Pickers
        • DatePicker
        • DateTimePicker
        • DateRangePicker
        • DateCalendar
        • TimePicker
        • IconPicker
      • Surfaces
        • Card
      • Charts
        • AreaChart
  • Backend
    • Overview
  • Integrations
    • Overview
    • Environments
    • Database
      • MS SQL
      • SQL Lite
      • My SQL
      • PostgreSQL
    • API
      • Rest API
      • SMTP
      • Google Sheets
      • Twillio SMS
    • Javascript
      • Variable
      • Transformer
      • JS Query
    • Zeroplat Hosted
      • Zeroplat E-mail
  • Workflow (BPM)
    • Overview
    • Building and managing workflows
    • Inbox
    • Outbox
  • Marketplace
    • Overview
    • Management

TabBar

1 views 0

Written by Zeroplat
21 September 2025

The TabBar component provides a tab-based navigation system for switching between multiple views or content sections within an application. Each tab can contain its own content, icon, and behavior, making it suitable for organizing forms, dashboards, or grouped data.

1. Basic Properties

  • Name: Unique identifier for the component (e.g., TabBar1).
  • Tab panels: Define the individual tabs (e.g., Tab panels 1, Tab panels 2).
  • Default selected value: The tab that is selected when the component is first rendered.

States

  • Disabled: Disables interaction with the TabBar.
  • Hidden: Hides the TabBar from the UI while keeping it available in logic.
  • Centered: Aligns tabs in the center of the container.
  • Disable indicator tab: Hides the tab selection indicator.

2. Layout

Controls grid placement and spacing across responsive designs.

📘 See Common Properties → Layout.

3. Events

  • onChange: Triggered when a tab is selected or changed.

4. Orientation

  • Horizontal: Default layout for displaying tabs side by side.
  • Vertical: Stacks tabs vertically (useful for side navigation).

5. Variant

  • fullWidth: Tabs expand to fill the entire width.
  • scrollable: Allows horizontal scrolling when there are many tabs.
  • standard: Default tab layout with fixed width.

6. Colors

  • Indicator color: Sets the color of the active tab indicator (primary, secondary).
  • Text color: Controls the color of tab labels (primary, secondary, inherit).

7. Borders & Effects

  • Show tabs border left / top / right / bottom: Toggle border visibility around tabs.
  • Show tabs box shadow: Adds a shadow effect under the tabs for emphasis.

8. Tab Panel Properties

Each tab panel has its own configuration:

  • Label: The displayed text of the tab (e.g., Tab panels 1).
  • Value: The internal identifier used when referencing the tab (e.g., tabpanel1).
  • Disabled: Makes the tab inactive.
  • Wrapped: Allows long tab labels to wrap into multiple lines.
  • Icon: Assigns an icon to the tab.
  • Icon position: Places the icon relative to the label (top, start, end, bottom).
  • Disable focus ripple: Removes the ripple effect on focus.
  • Disable ripple: Removes the ripple effect on click.

9. Style

Custom styles can be applied for further visual adjustments.

📘 See Common Properties → Style.

✅ The TabBar component is ideal for creating clean, structured navigation between related sections of content, supporting both horizontal and vertical layouts with rich customization options.

Was this helpful?

Yes  No
Related Articles
  • DateCalendar
  • Progress
  • TimePicker
  • IconPicker
  • DateTimePicker
  • DateRangePicker

Didn't find your answer? Contact Us

Previously
Navigation
Up Next
Pickers
Copyright 2025 Zeroplat.io. All Rights Reserved