Tabs-IoT Studio(IoT Studio)-阿里云帮助中心

Step 1: Add the component

Create a mobile application. For details, see Create a mobile application.
In the mobile application editor, click the Components icon on the far left.
(Optional) Add a column component to set up the page layout. For details, see Horizontal and vertical columns.
Above the component list on the left side of the canvas, enter tab to find the component. Then, drag it to the center of the canvas or into a column.

Note
Each tab corresponds to a column. You can configure the data it displays in the corresponding column.

For more information about adding components, see Add a component.

After you add the component, it includes three tabs by default: Tab 1, Tab 2, and Tab 3. In the properties panel on the right, you can manage the tabs (add, edit, delete, and reorder them) and configure the tab style, including the background color, text color, and the thickness and color of the selection indicator.

On the right, in the Style > Default Tab Settings section, click Add to add a tab.

You can also delete tabs or drag the icon to change the tab order.
Click the edit icon for each tab to set its title.
Click each tab and add and configure components in the corresponding container. The following figure shows an example.

Note
To add multiple components, add a column component first.

The tab component contains three tabs: Device 1, Device 2, and Device 3. In each tab's container, you can add components such as a data card or a line chart. In the Style panel on the right, you can set properties such as Default Tab (selected using a radio button), Background Color (for example, #5584FF), font weight, Text and Icon Color (for example, #FFFFFF), and Bottom Border Color. You can also click the + Add button to add more tabs.
Select the container for each tab to configure its style. For details, see Configure column styles in a horizontal column.

Configure the component's style on the page.

Parameter	Description
Default tab settings	Select the tab to display by default at runtime.
Tab style	Sets the style for tabs in their default and selected states.
Container style	Sets the style for the tab content container.

Adjust the width, height, and position of the component on the page. For details, see General styles.

Select the component's Interaction tab and configure events and interaction actions. For details, see Interaction configuration.

This component supports the On Tab Change, On Click, and On Double-click events. For example, you can configure the On Click event to refresh the data for components in the column.
Preview and debug the component's data display and style. For more information, see Preview and debug.