Tab

Tabs are components that can switch view areas.

Note

Click on a tab to switch between tabbed areas on the editor. As in normal operation, components are placed by drag-and-drop directly onto the tab area.

Dialog Property

Item	Input value	Option	Default value
ID	string		automatic
Width	string		550
Height	string		350
X	string
Y	string
Color	string color picker
Background Color	string color picker
Header Color	string color picker
Inactive Color	string color picker
Centered	boolean	• on • off	off
Active	combo box	Tab ID list in Details 1	item1
Value	table details1		details 1

Action Property

Item	Properties	Data Type	Options	Default value
ID	id	string		automatic
Width	width	string		550
Height	height	string		350
X	x	string
Y	y	string
Color	color	string
Background Color	backgroundColor	string
Header Color	string
Inactive Color	string
Centered	centered	boolean	• true • false	false
Active	active	string
Value	value	array of object		details 1

Note

• The "id" property cannot be set by an action.
• The [active] property must specify the initially active tab ID. If not specified, the first tab will be active if an invalid tab ID is specified.
• The following can be entered for the "Width" and "Height" property values.
  If you want to display in px, specify only numerical values; if you want to display in %, specify % as the unit.
  Operation will not be supported if you enter anything other than the following.
  • number
  • number%
  • calc() function
• The following can be entered for the [X] and [Y] property values. If you want to display in px, specify only numerical values.
  Operation will not be supported if you enter anything other than the following.
  • number
  • calc() function
• The calc() function is a CSS function that enables calculations. (e.g. calc(100% - 30px))
  The units that can be used with the calc() function are "%" and "px". Other units (e.g., em, rem, etc.) are not supported.
• When the calc() function is used to specify the size, the appearance in the editor may differ from the appearance in the application.
  Please confirm using the preview.

[Details 1] Value (value)

Set up the tabs. The default status is registered as follows. Click the "ADD" button to register. To delete, select the check box and click the "DELETE" button.

Option	ID	Icon	Label	Deactivated
Checkbox	Item1		ITEM 1
Checkbox	Item2		ITEM 2
Checkbox	Item3		ITEM 3

value is in the form of an array of objects.
[{"id":"Item1","icon":"","label":"ITEM 1","disabled":false}, {"id":"Item2","icon":"","label":"ITEM 2","disabled":false}, {"id":"Item3","icon":"","label":"ITEM 3","disabled":false}]

Note

Scroll buttons are automatically assigned when the number of tabs increases.

Event

None