跳到主要内容

Tabs

What is Tabs?

The Tabs component in ILLA Cloud is a versatile feature that allows users to organize and present content in a tabbed layout. It enables the creation of multiple tabs within a single container, allowing users to switch between different sections of content with ease. The Tabs component provides a user-friendly interface for navigating through related information, improving the overall user experience. With customizable styling options and the ability to add various types of content, such as text, images, or embedded components, the Tabs component in ILLA Cloud offers flexibility and enhances the organization and presentation of data.

Properties

PropertiesDescription
Link to a containerlink the Tabs component to a specific container, enabling seamless navigation between tabs and the associated content.
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, or value change.
Disableddisable specific tabs, preventing users from interacting with them
Tooltipadditional information or context about each tab
Layoutoffers different layout options, allowing you to arrange the tabs horizontally or vertically based on your design preferences or the available space.
Alignalign the Tabs component to different positions within its parent container, such as left, center, or right alignment
Hiddenhide specific tabs programmatically.
Text Colorscustomizable text colors, allowing you to style the tab labels with different colors to match your application's design or branding.

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
alignalignment of the tabs within the component, such as left, center, or right alignment
colorSchemedefines the color of the text in the component
currentIndexrepresents the index of the currently selected tab within the tab list
currentKeyunique identifier or key of the currently selected tab
displayNamerepresents the name or label assigned to the component
hiddenboolean value that determines whether the tabs component is visible or hidden
linkWidgetDisplayNamedisplay name or label of the link widget associated with a particular tab
navigateContainercontainer or destination where the tab content should be displayed or navigated to
tabListlist of tabs, including their display names, keys, and other relevant information
tabPositionposition of the tab strip, such as top, bottom, left, or right position
tooltipTexttext displayed as a tooltip when the user hovers over a specific tab
viewListviews or content associated with each tab, enabling the rendering of different content based on the selected tab

Example: {{tabs1.displayName}}

Use case

We will demonstrate how to use tabs component combined with a container component to show the three views.

Step 1 Add and configure Components

Add a container component and a tabs component. In the inspect page of the tabs component, turn Link to a Container on and choose the container you want to link with for **Container**.

  • View 1:

This is the home page, thus we place a text component with "Home" on the upper left corner of the container.

Display a text component "Hi! Welcome to my personal website" in the middle and a button component labeled "Learn more about me" under it.

For the button component, we can configure it to go to the next view (view2) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view1

  • View 2:

This is the about page, thus we place a text component with "About me" on the upper left corner of the container.

Display the "name", "age", and "gender" information with text components and a profile picture of you or anyone you want to use with the **image** component.

Add a button component labeled "Make friends with me".

For the button component, we can configure it to go to the next view (view3) if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the container component that you want to update as the target of the event.
  3. Choose the showNextView method.

tab_view2

  • View 3

This is the form page, visitor can fill out the form with their information to send a friend request to the owner.

There is a form component in the middle of the container with input components labeled as "Your name", "Your age", and "Gender".

Change the text of the "submit" button in the bottom right corner to "Invite".

tab_view3

For the "Invite" button component, we can configure it to submit the information in the form if clicked.

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method.

For the form component, we can configure it to show notification if submit.

  1. Click the form component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select submit in Event, select Show notification in action, Put "Submit successfully" for Title, "Friend request sent" for Description, and select Success for Type. We want the notification to show for 2s so put {{2000}} for the duration.

tab_form_event

Step 2 Test

tab_test