Tab List

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.