Tab Panel

Tab Panel

Description:

Tab Panel

Tab Panel is a container which includes tabs in it. Tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at a time.

Allowed Parent Components:

1. Card Body

2. Col

3. Grid Child

4. Gridster Layout

5. Horizontal Section

6. Page

7. Tab Item

8. Vertical Section

Allowed Child Components:

1. Pulse

2. Tab Item

3. Tab Panel Control

4. Trigger Before Render

Properties

➤ Tab Panel Type

Panel type simple and Line triangle can be utilized as the top, left and right panels, but always fillup is used as a top panel.

Allowed Values:

1. Simple

2. Fillup

3. Line Triangle

➤ Tab Location

Choose an option to change the position of the tab panel in the container.

Allowed Values:

1. Top

2. Left

3. Right

➤ Icon Size

The size of the icon displayed on the tab headers

Allowed Values: Any number value

➤ Hide Header Bottom Border

Check this to hide header bottom border.

Allowed Values: Yes/No

➤ Hide Header

Check this to hide the header.

Allowed Values: Yes/No

➤ Background Color

Allowed Values: Color

➤ Class Name Expression

Allowed Values: An expression which should return string after evaluation

➤ Height

Provide numerical value to set height in pixels.

Allowed Values: Any number value

➤ Active Tab Id

Item ID of the TabItem to be shown by default

Allowed Values: Free text field

➤ Margin

Select a value to add margin on all four sides of the component. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

Allowed Values: Any number value

➤ Margin Bottom

Select a value to add margin on the bottom of the component.

Allowed Values: Any number value

➤ Margin Left

Select a value to add margin on the left of the component.

Allowed Values: Any number value

➤ Margin Right

Select a value to add margin on the right of the component.

Allowed Values: Any number value

➤ Margin Top

Select a value to add margin on the top of the component.

Allowed Values: Any number value

➤ Padding

Select a value to add padding on all four sides of the component. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

Allowed Values: Any number value

➤ Padding Bottom

Select a value to add padding in the bottom of the component.

Allowed Values: Any number value

➤ Padding Left

Select a value to add padding in the left of the component.

Allowed Values: Any number value

➤ Padding Right

Select a value to add padding in right of the component.

Allowed Values: Any number value

➤ Padding Top

Select a value to add padding in top of the component.

Allowed Values: Any number value