# Tab Panel

![Tab Panel](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2Fsync%2F5fb36bc07ac6ef545b3d9cdd6d2631baf4972437.png?generation=1600778694409227\&alt=media)

## 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