Updated on 2022-02-22 GMT+08:00

Tab List

This section describes parameters of a timeline component.

Pattern

  • Size/Position
    • Size: width and height of the component. Unit: pixel.
    • Position: position where the component is located in the canvas. Unit: pixel.
    Figure 1 Tab List
  • Global Style
    • Font: font type of the component text.
    • Rows: to set the number of rows to be displayed by entering a value or clicking .
    • Columns: to set the number of columns to be displayed by entering a value or clicking .
    • Selection Type: to set a selection type from the drop-down list. The value can be Select one or Select more.
    • Initial Value: to enter an initial value. The initial value is the same as the ID on the Data tab.
      • If Selection Type is set to Select one and Initial Value is set to 1, the Tab1 column is highlighted.
      • If Selection Type is set to Select more and Initial Value is set to 1;2, the Tab1 and Tab2 columns are both highlighted.
  • Tab Configuration
    • Font Size: font size of the component text.
    • Font Color: font color of the component text.
    • Font Width: font width of the component text.
    • Background Color: to set background color of the tab list by clicking the color editor.
    • Fillet Radius: to set the fillet radius of the tab list by entering a value or dragging .
    • Hover Background Color: to set the hover background color by clicking the color editor.
    • Color of Selected Text: to set the color of the selected text in the tab list by clicking the color editor.
    • Background Color of Selected Tab: to set the background color when the tab is highlighted by clicking the color editor.
  • Radio Carousel: to play the option on the screen based on the carousel interval.

Data

The example data in the preceding figure is as follows:

[
  {
    "id": "1",
    "label": "Tab1"
  },
  {
    "id": "2",
    "label": "Tab2"
  },
  {
    "id": "3",
    "label": "Tab3"
  }
]
  • id: ID of a tab. Initial Value requires this parameter value to define a tab.
  • label: label text displayed on the tab.

Interaction

For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.