Momen Docs
Go to Momen
  • Get Started
    • Introduction
    • Quick Start
    • Software Development Process
    • Editor Overview
  • Changelog
    • Latest Product Update
  • Build UI
    • Pages
    • Components
    • Canvas
    • Layout
    • Component - Display
    • Component - Input
    • Component - View
    • Component - List
    • Component - Tab View
    • Component - Select View
    • Component - Conditional View
    • Component - Others
    • Component - Map
    • Custom Component
  • Data
    • Overview
    • Data Model and Database
    • API
    • Variable
    • Parameter
    • Formula and Conditions
  • Actions
    • Overview
    • Request
    • Navigation
    • Actionflow
      • Custom Code
      • Database Trigger
    • AI
      • AI Data Model
      • AI Point
      • Vector Data Storage and Sorting
    • User Actions
    • Component Management
    • App and Page Management
    • Toast Notifications & Modal
    • Payment
    • SSO
    • Share
    • Location
    • File Management
    • QR Code
    • Clipboard
    • Conditional
    • Loop
  • Release and Growth
    • Publish Application
    • Upgrade Project
    • Multiple Clients
    • Permission
    • Log Service
    • SEO
    • Hosting Files
  • My Account and Community
    • My Wallet
    • Promoting Momen
    • Code Component
    • Collaboration
  • Debugging
    • How to Debug in Momen
    • Request Error Reference
  • Tutorial
    • How to Build an AI Needs Analysis Project?
    • How to Set Up Payment with Stripe Plugin?
    • How to Embed an Iframe Component into Your Momen Project?
    • How to Build Your Login Page?
    • How to Convert Momen App to Native Mobile App?
    • How to Build a CMS (MVP Version) in Hours?
    • How to Set a Countdown Timer When Sending a Verification Code
  • Template
    • AI Mental Health Assistant
    • Angry Dietitian
    • AI Help Center
    • AI Knowledge Base
    • SaaS Corporate Site
    • Blog
    • AI Feedback Tool
    • Feedback Tool, a Nod to Canny
    • Portfolio
    • Online Courses, a Nod to Udemy
    • Mobile Auto Repair AI Scheduler
Powered by GitBook
On this page
  • Usage Scenario
  • Configuration Instructions
  • Design
  • Data
  • Common Issues
  1. Build UI

Component - Tab View

Tab View: Generally used for splitting page content by type, allowing for horizontal swiping or clicking on subheadings to switch between content.

The Tab View is generally used to split the page content according to type. You can swipe left/right or click on the sub-title to switch the content, providing a smoother interaction experience.

Usage Scenario

Pages with multiple status displays, such as the full list of orders in a mall (Pending Payment, Pending Shipment, Pending Receipt, Completed, Post-Sale) or invoice reimbursement-related statuses (Pending Perfection, In Progress, Dismissed, Approved).

Configuration Instructions

Design

There is a default style for the Tab View, as shown in the image below. The blue text with a white background and underline represents the selected style, while the black text with a white background and no underline represents the unselected style.

Custom Style

Users can also choose a custom style to edit the selected/unselected style of the corresponding Tab View (similar to the Select View). For example: unchecked is gray text color + 12 font size, checked is orange text color + 14 font size with a selected underline.

Sub-Tab Design

Double-click to enter the sub-tab view. You can individually configure the background color and other style content for a sub-tab view, drag and drop other components to display the content, and so on.

Data

Default Tab View Index

Default Tab View Index: When entering the page, the developer expects the user to see a specific tab first. Index: Unlike the traditional way of counting from 1, the computer's serial number order starts from 0. If you expect to see the first tab, then this should be set to 0, and so on (0, 1, 2, 3).

Add/Modify Tabs

Click the "+" sign next to "Tabs" to add new tabs, and hover over the content of a tab to modify/delete/jump to that tab.

Common Issues

PreviousComponent - ListNextComponent - Select View

Last updated 1 day ago

Q: My Tab View is arranged vertically, and the Tab View cannot meet my needs. A: You can choose to use the Select View + Conditional View method to achieve this. Refer to combined with .

Select View
Conditional View