0
# Core Tab Interface
1

2
The main Tabs component provides comprehensive tabbed interface functionality with full accessibility support, keyboard navigation, and responsive design.
3

4
## Capabilities
5

6
### Tabs Component
7

8
Main React component for creating tabbed interfaces with extensive configuration options.
9

10
```typescript { .api }
11
/**
12
 * Main tabs component with forwardRef support
13
 * @param props - Configuration props for the tabs component
14
 * @param ref - React ref forwarded to the root div element
15
 * @returns JSX element containing the complete tabs interface
16
 */
17
const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => JSX.Element);
18

19
interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
20
  /** CSS class prefix for styling customization (default: 'rc-tabs') */
21
  prefixCls?: string;
22
  /** Additional CSS class names */
23
  className?: string;
24
  /** Inline styles for the tabs container */
25
  style?: React.CSSProperties;
26
  /** HTML id attribute for the tabs container */
27
  id?: string;
28
  
29
  /** Array of tab configuration objects */
30
  items?: Tab[];
31
  
32
  /** Currently active tab key (controlled mode) */
33
  activeKey?: string;
34
  /** Default active tab key (uncontrolled mode) */
35
  defaultActiveKey?: string;
36
  
37
  /** Text direction for RTL support */
38
  direction?: 'ltr' | 'rtl';
39
  /** Animation configuration for transitions */
40
  animated?: boolean | AnimatedConfig;
41
  /** Position of the tab bar relative to content */
42
  tabPosition?: TabPosition;
43
  /** Whether to destroy inactive tab panes (memory optimization) */
44
  destroyInactiveTabPane?: boolean;
45
  
46
  /** Callback fired when active tab changes */
47
  onChange?: (activeKey: string) => void;
48
  /** Callback fired when a tab is clicked */
49
  onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
50
  /** Callback fired when tab bar is scrolled */
51
  onTabScroll?: OnTabScroll;
52
  
53
  /** Custom tab bar rendering function */
54
  renderTabBar?: RenderTabBar;
55
  /** Extra content to display in the tab bar */
56
  tabBarExtraContent?: TabBarExtraContent;
57
  /** Gap between individual tabs in pixels */
58
  tabBarGutter?: number;
59
  /** Styles for the tab bar container */
60
  tabBarStyle?: React.CSSProperties;
61
  
62
  /** Configuration for editable tabs functionality */
63
  editable?: EditableConfig;
64
  /** Function to get popup container for dropdowns */
65
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
66
  /** CSS class name for popup elements */
67
  popupClassName?: string;
68
  
69
  /** Internationalization configuration */
70
  locale?: TabsLocale;
71
  /** More dropdown configuration for overflow tabs */
72
  more?: MoreProps;
73
  /** Tab indicator configuration */
74
  indicator?: {
75
    size?: GetIndicatorSize;
76
    align?: 'start' | 'center' | 'end';
77
  };
78
}
79
```
80

81
**Usage Examples:**
82

83
```typescript
84
import Tabs from "rc-tabs";
85

86
// Basic tabs
87
function BasicTabs() {
88
  return (
89
    <Tabs
90
      items={[
91
        { key: '1', label: 'Home', children: <div>Home content</div> },
92
        { key: '2', label: 'About', children: <div>About content</div> },
93
      ]}
94
      defaultActiveKey="1"
95
    />
96
  );
97
}
98

99
// Controlled tabs with custom styling
100
function ControlledTabs() {
101
  const [activeKey, setActiveKey] = useState('1');
102
  
103
  return (
104
    <Tabs
105
      activeKey={activeKey}
106
      onChange={setActiveKey}
107
      className="custom-tabs"
108
      tabPosition="left"
109
      animated={{ inkBar: true, tabPane: true }}
110
      items={[
111
        { key: '1', label: 'Dashboard', children: <Dashboard /> },
112
        { key: '2', label: 'Settings', children: <Settings /> },
113
      ]}
114
    />
115
  );
116
}
117

118
// RTL support
119
function RTLTabs() {
120
  return (
121
    <Tabs
122
      direction="rtl"
123
      items={tabItems}
124
      locale={{
125
        dropdownAriaLabel: 'المزيد من علامات التبويب',
126
        removeAriaLabel: 'إزالة علامة التبويب',
127
        addAriaLabel: 'إضافة علامة تبويب جديدة',
128
      }}
129
    />
130
  );
131
}
132
```
133

134
### Event Handling
135

136
Comprehensive event system for handling user interactions with tabs.
137

138
```typescript { .api }
139
/**
140
 * Callback type for tab change events
141
 * @param activeKey - The key of the newly active tab
142
 */
143
type OnChange = (activeKey: string) => void;
144

145
/**
146
 * Callback type for tab click events
147
 * @param activeKey - The key of the clicked tab
148
 * @param e - The mouse or keyboard event that triggered the click
149
 */
150
type OnTabClick = (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
151

152
/**
153
 * Callback type for tab scroll events
154
 * @param info - Information about the scroll direction
155
 */
156
type OnTabScroll = (info: { direction: 'left' | 'right' | 'top' | 'bottom' }) => void;
157
```
158

159
### Accessibility Features
160

161
Built-in accessibility support with proper ARIA attributes and keyboard navigation.
162

163
```typescript { .api }
164
interface TabsLocale {
165
  /** ARIA label for dropdown menu containing overflow tabs */
166
  dropdownAriaLabel?: string;
167
  /** ARIA label for remove tab buttons */
168
  removeAriaLabel?: string;
169
  /** ARIA label for add tab button */
170
  addAriaLabel?: string;
171
}
172
```
173

174
**Keyboard Navigation:**
175
- **Arrow Keys**: Navigate between tabs (Left/Up for previous, Right/Down for next)
176
- **Enter/Space**: Activate the focused tab
177
- **Home**: Move to first tab
178
- **End**: Move to last tab
179

180
**Screen Reader Support:**
181
- Proper ARIA roles (`tablist`, `tab`, `tabpanel`)
182
- Dynamic ARIA attributes (`aria-selected`, `aria-labelledby`, `aria-hidden`)
183
- Meaningful labels and descriptions
184
- Live region announcements for tab changes
185

186
### Responsive Design
187

188
Automatic responsive behavior with mobile detection and touch support.
189

190
```typescript { .api }
191
/**
192
 * Mobile detection and responsive behavior
193
 * - Automatic touch gesture support
194
 * - Optimized tab sizing for mobile devices
195
 * - Swipe navigation on touch devices
196
 * - Responsive overflow handling
197
 */
198
```
199

200
The component automatically detects mobile devices and adjusts its behavior:
201
- Enables touch gestures for tab navigation
202
- Optimizes touch targets for better usability
203
- Provides swipe-based navigation where appropriate
204
- Handles overflow tabs with mobile-friendly dropdowns