0
# Tab Configuration
1

2
Individual tab item configuration with support for content, styling, and interactive features. Each tab in the `items` array represents a single tab with its associated content and behavior.
3

4
## Capabilities
5

6
### Tab Interface
7

8
Configuration object for individual tabs with comprehensive customization options.
9

10
```typescript { .api }
11
/**
12
 * Configuration object for individual tab items
13
 * Extends TabPaneProps but excludes the 'tab' property
14
 */
15
interface Tab extends Omit<TabPaneProps, 'tab'> {
16
  /** Unique identifier for the tab (required) */
17
  key: string;
18
  /** Display content for the tab label (can be text, JSX, or any React node) */
19
  label: React.ReactNode;
20
  /** Content to display in the tab panel when this tab is active */
21
  children?: React.ReactNode;
22
  /** Whether the tab is disabled and cannot be activated */
23
  disabled?: boolean;
24
  /** Whether the tab can be closed (shows close button) */
25
  closable?: boolean;
26
  /** Custom icon to display before the tab label */
27
  icon?: React.ReactNode;
28
  /** Custom close icon (overrides default close button) */
29
  closeIcon?: React.ReactNode;
30
  /** CSS class name for this specific tab */
31
  className?: string;
32
  /** Inline styles for this specific tab */
33
  style?: React.CSSProperties;
34
  /** Force render the tab panel even when inactive */
35
  forceRender?: boolean;
36
}
37

38
/**
39
 * Extended properties for tab panes (internal use)
40
 */
41
interface TabPaneProps {
42
  tab?: React.ReactNode;
43
  className?: string;
44
  style?: React.CSSProperties;
45
  disabled?: boolean;
46
  children?: React.ReactNode;
47
  forceRender?: boolean;
48
  closable?: boolean;
49
  closeIcon?: React.ReactNode;
50
  icon?: React.ReactNode;
51
  
52
  // Internal properties set by TabPanelList
53
  prefixCls?: string;
54
  tabKey?: string;
55
  id?: string;
56
  animated?: boolean;
57
  active?: boolean;  
58
  destroyInactiveTabPane?: boolean;
59
}
60
```
61

62
**Usage Examples:**
63

64
```typescript
65
import Tabs from "rc-tabs";
66
import { HomeIcon, SettingsIcon, CloseIcon } from "./icons";
67

68
// Basic tab configuration
69
const basicTabs = [
70
  {
71
    key: '1',
72
    label: 'Home',
73
    children: <div>Welcome to the home page</div>,
74
  },
75
  {
76
    key: '2', 
77
    label: 'About',
78
    children: <div>Learn more about us</div>,
79
  },
80
];
81

82
// Advanced tab configuration with icons and styling
83
const advancedTabs = [
84
  {
85
    key: 'home',
86
    label: 'Home',
87
    icon: <HomeIcon />,
88
    children: <HomePage />,
89
    className: 'home-tab',
90
  },
91
  {
92
    key: 'settings',
93
    label: 'Settings',
94
    icon: <SettingsIcon />,
95
    children: <SettingsPage />,
96
    disabled: false,
97
  },
98
  {
99
    key: 'temp',
100
    label: 'Temporary Tab',
101
    children: <TempContent />,
102
    closable: true,
103
    closeIcon: <CloseIcon />,
104
  },
105
];
106

107
// Complex tab with JSX labels
108
const complexTabs = [
109
  {
110
    key: 'dashboard',
111
    label: (
112
      <span>
113
        <DashboardIcon style={{ marginRight: 8 }} />
114
        Dashboard
115
        <Badge count={5} style={{ marginLeft: 8 }} />
116
      </span>
117
    ),
118
    children: <DashboardContent />,
119
    forceRender: true, // Always keep rendered for performance
120
  },
121
];
122
```
123

124
### Tab Content Management
125

126
Configuration options for managing tab panel content rendering and lifecycle.
127

128
```typescript { .api }
129
/**
130
 * Content rendering options for tab panels
131
 */
132
interface ContentOptions {
133
  /** Force render the tab panel even when inactive (keeps DOM mounted) */
134
  forceRender?: boolean;
135
  /** Allow tab pane destruction when parent destroyInactiveTabPane is true */
136
  destroyInactiveTabPane?: boolean;
137
}
138
```
139

140
**Content Rendering Strategies:**
141

142
```typescript
143
// Lazy rendering (default) - content only rendered when tab becomes active
144
const lazyTabs = [
145
  {
146
    key: 'heavy',
147
    label: 'Heavy Content',
148
    children: <ExpensiveComponent />, // Only rendered when tab is active
149
  },
150
];
151

152
// Force render - content always rendered and kept in DOM
153
const forceRenderTabs = [
154
  {
155
    key: 'always-active',
156
    label: 'Always Rendered',
157
    children: <CriticalComponent />,
158
    forceRender: true, // Component stays mounted
159
  },
160
];
161

162
// Destroy inactive - content is destroyed when tab becomes inactive
163
function TabsWithDestruction() {
164
  return (
165
    <Tabs
166
      destroyInactiveTabPane={true} // Global setting
167
      items={[
168
        {
169
          key: 'temp',
170
          label: 'Temporary',
171
          children: <TempComponent />, // Destroyed when switching tabs
172
        },
173
      ]}
174
    />
175
  );
176
}
177
```
178

179
### Tab Styling and Appearance
180

181
Comprehensive styling options for individual tabs and their content.
182

183
```typescript { .api }
184
/**
185
 * Styling configuration for individual tabs
186
 */
187
interface TabStyling {
188
  /** CSS class name applied to the tab button */
189
  className?: string;
190
  /** Inline styles applied to the tab button */
191
  style?: React.CSSProperties;
192
  /** Icon displayed before the tab label */
193
  icon?: React.ReactNode;
194
  /** Custom close icon for closable tabs */
195
  closeIcon?: React.ReactNode;
196
}
197
```
198

199
**Styling Examples:**
200

201
```typescript
202
// Custom styled tabs
203
const styledTabs = [
204
  {
205
    key: 'primary',
206
    label: 'Primary Tab',
207
    className: 'primary-tab',
208
    style: { 
209
      color: '#1890ff',
210
      fontWeight: 'bold',
211
    },
212
    children: <PrimaryContent />,
213
  },
214
  {
215
    key: 'warning',
216
    label: 'Warning Tab',
217
    className: 'warning-tab',
218
    style: { 
219
      color: '#faad14',
220
    },
221
    icon: <WarningIcon />,
222
    children: <WarningContent />,
223
  },
224
];
225

226
// Tab with custom close icon
227
const closableTab = {
228
  key: 'closable',
229
  label: 'Closable Tab',
230
  closable: true,
231
  closeIcon: <CustomCloseIcon style={{ color: 'red' }} />,
232
  children: <ClosableContent />,
233
};
234
```
235

236
### Interactive Tab States
237

238
Configuration for tab interactivity and user interaction states.
239

240
```typescript { .api }
241
/**
242
 * Interactive state configuration for tabs
243
 */
244
interface TabInteractivity {
245
  /** Whether the tab is disabled and cannot be activated */
246
  disabled?: boolean;
247
  /** Whether the tab can be closed by the user */
248
  closable?: boolean;
249
}
250
```
251

252
**Interactive Examples:**
253

254
```typescript
255
// Disabled tab
256
const disabledTab = {
257
  key: 'disabled',
258
  label: 'Disabled Tab',
259
  children: <div>This content is not accessible</div>,
260
  disabled: true, // Tab cannot be clicked or activated
261
};
262

263
// Conditionally closable tabs
264
function DynamicTabs() {
265
  const [userRole, setUserRole] = useState('user');
266
  
267
  const tabs = [
268
    {
269
      key: 'public',
270
      label: 'Public',
271
      children: <PublicContent />,
272
      closable: false, // Always present
273
    },
274
    {
275
      key: 'admin',
276
      label: 'Admin Panel',
277
      children: <AdminContent />,
278
      closable: userRole === 'admin', // Only closable for admins
279
      disabled: userRole !== 'admin', // Only accessible to admins
280
    },
281
  ];
282
  
283
  return <Tabs items={tabs} />;
284
}
285
```