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

Properties	Description
Link to a container	link the Tabs component to a specific container, enabling seamless navigation between tabs and the associated content.
Event handler	detecting and responding to specific user actions or events, such as clicks, keypresses, or value change.
Disabled	disable specific tabs, preventing users from interacting with them
Tooltip	additional information or context about each tab
Layout	offers different layout options, allowing you to arrange the tabs horizontally or vertically based on your design preferences or the available space.
Align	align the Tabs component to different positions within its parent container, such as left, center, or right alignment
Hidden	hide specific tabs programmatically.
Text Colors	customizable 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 name	Description
align	alignment of the tabs within the component, such as left, center, or right alignment
colorScheme	defines the color of the text in the component
currentIndex	represents the index of the currently selected tab within the tab list
currentKey	unique identifier or key of the currently selected tab
displayName	represents the name or label assigned to the component
hidden	boolean value that determines whether the tabs component is visible or hidden
linkWidgetDisplayName	display name or label of the link widget associated with a particular tab
navigateContainer	container or destination where the tab content should be displayed or navigated to
tabList	list of tabs, including their display names, keys, and other relevant information
tabPosition	position of the tab strip, such as top, bottom, left, or right position
tooltipText	text displayed as a tooltip when the user hovers over a specific tab
viewList	views 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.

• 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.

• 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".

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.

Step 2 Test