0
# Layout Components
1

2
Structural components for organizing content including panels, accordions, tabs, splitters, and responsive containers. These components provide the foundation for building well-structured user interfaces with collapsible sections, tabbed content, and flexible layouts.
3

4
## Capabilities
5

6
### Container Components
7

8
#### Panel
9
Collapsible content container with header actions and customizable content areas.
10

11
```typescript { .api }
12
/**
13
 * Collapsible content container with header and actions
14
 */
15
import Panel from "primevue/panel";
16

17
interface PanelProps extends BaseComponentProps {
18
  header?: string;
19
  toggleable?: boolean;
20
  collapsed?: boolean;
21
  toggleButtonProps?: object;
22
}
23
```
24

25
#### Card
26
Content grouping container with header, body, and footer sections.
27

28
```typescript { .api }
29
/**
30
 * Content container with header, body, and footer sections
31
 */
32
import Card from "primevue/card";
33

34
interface CardProps extends BaseComponentProps {
35
  // Card is primarily template-based with slots for header, title, subtitle, content, footer
36
}
37
```
38

39
#### Fieldset
40
Form field grouping with legend and collapsible functionality.
41

42
```typescript { .api }
43
/**
44
 * Form field grouping container with legend
45
 */
46
import Fieldset from "primevue/fieldset";
47

48
interface FieldsetProps extends BaseComponentProps {
49
  legend?: string;
50
  toggleable?: boolean;
51
  collapsed?: boolean;
52
  toggleButtonProps?: object;
53
}
54
```
55

56
### Accordion Components
57

58
#### Accordion
59
Container for collapsible content panels with single or multiple expansion modes.
60

61
```typescript { .api }
62
/**
63
 * Container for accordion panels with expansion control
64
 */
65
import Accordion from "primevue/accordion";
66

67
interface AccordionProps extends BaseComponentProps {
68
  multiple?: boolean;
69
  activeIndex?: number | number[];
70
  lazy?: boolean;
71
  expandIcon?: string;
72
  collapseIcon?: string;
73
  tabindex?: number;
74
  selectOnFocus?: boolean;
75
}
76
```
77

78
#### AccordionPanel
79
Individual panel within an accordion container.
80

81
```typescript { .api }
82
/**
83
 * Individual accordion panel component
84
 */
85
import AccordionPanel from "primevue/accordionpanel";
86

87
interface AccordionPanelProps extends BaseComponentProps {
88
  value?: string | number;
89
  disabled?: boolean;
90
  readonly?: boolean;
91
}
92
```
93

94
#### AccordionHeader
95
Header component for accordion panels with customizable content.
96

97
```typescript { .api }
98
/**
99
 * Header component for accordion panels
100
 */
101
import AccordionHeader from "primevue/accordionheader";
102

103
interface AccordionHeaderProps extends BaseComponentProps {
104
  // Primarily template-based for header content
105
}
106
```
107

108
#### AccordionContent
109
Content area component for accordion panels.
110

111
```typescript { .api }
112
/**
113
 * Content area for accordion panels
114
 */
115
import AccordionContent from "primevue/accordioncontent";
116

117
interface AccordionContentProps extends BaseComponentProps {
118
  // Template-based content container
119
}
120
```
121

122
**Usage Example:**
123

124
```vue
125
<template>
126
  <Accordion :activeIndex="0">
127
    <AccordionPanel value="0">
128
      <AccordionHeader>Header I</AccordionHeader>
129
      <AccordionContent>
130
        <p>Lorem ipsum dolor sit amet...</p>
131
      </AccordionContent>
132
    </AccordionPanel>
133
    <AccordionPanel value="1">
134
      <AccordionHeader>Header II</AccordionHeader>
135
      <AccordionContent>
136
        <p>Sed ut perspiciatis unde omnis...</p>
137
      </AccordionContent>
138
    </AccordionPanel>
139
  </Accordion>
140
</template>
141
```
142

143
### Tab Components
144

145
#### Tabs
146
Modern tabbed interface container with flexible tab positioning.
147

148
```typescript { .api }
149
/**
150
 * Modern tabbed interface container
151
 */
152
import Tabs from "primevue/tabs";
153

154
interface TabsProps extends BaseComponentProps {
155
  value?: string | number;
156
  lazy?: boolean;
157
  scrollable?: boolean;
158
  showNavigators?: boolean;
159
  tabindex?: number;
160
  selectOnFocus?: boolean;
161
}
162
```
163

164
#### Tab
165
Individual tab component within tabs container.
166

167
```typescript { .api }
168
/**
169
 * Individual tab component
170
 */
171
import Tab from "primevue/tab";
172

173
interface TabProps extends BaseComponentProps {
174
  value?: string | number;
175
  disabled?: boolean;
176
  readonly?: boolean;
177
}
178
```
179

180
#### TabList
181
Container for tab headers with navigation controls.
182

183
```typescript { .api }
184
/**
185
 * Container for tab headers
186
 */
187
import TabList from "primevue/tablist";
188

189
interface TabListProps extends BaseComponentProps {
190
  // Container for tab headers
191
}
192
```
193

194
#### TabPanels
195
Container for tab content panels.
196

197
```typescript { .api }
198
/**
199
 * Container for tab content panels
200
 */
201
import TabPanels from "primevue/tabpanels";
202

203
interface TabPanelsProps extends BaseComponentProps {
204
  // Container for tab content
205
}
206
```
207

208
#### TabPanel
209
Individual content panel for tabs.
210

211
```typescript { .api }
212
/**
213
 * Individual tab content panel
214
 */
215
import TabPanel from "primevue/tabpanel";
216

217
interface TabPanelProps extends BaseComponentProps {
218
  value?: string | number;
219
  disabled?: boolean;
220
  readonly?: boolean;
221
}
222
```
223

224
**Usage Example:**
225

226
```vue
227
<template>
228
  <Tabs value="0">
229
    <TabList>
230
      <Tab value="0">Header I</Tab>
231
      <Tab value="1">Header II</Tab>
232
      <Tab value="2">Header III</Tab>
233
    </TabList>
234
    <TabPanels>
235
      <TabPanel value="0">
236
        <p>Lorem ipsum dolor sit amet...</p>
237
      </TabPanel>
238
      <TabPanel value="1">
239
        <p>Sed ut perspiciatis unde omnis...</p>
240
      </TabPanel>
241
      <TabPanel value="2">
242
        <p>At vero eos et accusamus...</p>
243
      </TabPanel>
244
    </TabPanels>
245
  </Tabs>
246
</template>
247
```
248

249
### Splitter Components
250

251
#### Splitter
252
Resizable layout panels container with horizontal or vertical orientation.
253

254
```typescript { .api }
255
/**
256
 * Resizable layout panels container
257
 */
258
import Splitter from "primevue/splitter";
259

260
interface SplitterProps extends BaseComponentProps {
261
  layout?: "horizontal" | "vertical";
262
  gutterSize?: number;
263
  stateKey?: string;
264
  stateStorage?: "session" | "local";
265
}
266
```
267

268
#### SplitterPanel
269
Individual resizable panel within splitter.
270

271
```typescript { .api }
272
/**
273
 * Individual panel within splitter
274
 */
275
import SplitterPanel from "primevue/splitterpanel";
276

277
interface SplitterPanelProps extends BaseComponentProps {
278
  size?: number;
279
  minSize?: number;
280
}
281
```
282

283
**Usage Example:**
284

285
```vue
286
<template>
287
  <Splitter style="height: 300px" class="mb-5">
288
    <SplitterPanel class="flex align-items-center justify-content-center">
289
      Panel 1
290
    </SplitterPanel>
291
    <SplitterPanel class="flex align-items-center justify-content-center">
292
      Panel 2
293
    </SplitterPanel>
294
  </Splitter>
295
</template>
296
```
297

298
### Stepper Components
299

300
#### Stepper
301
Step-by-step process navigation container with linear and non-linear modes.
302

303
```typescript { .api }
304
/**
305
 * Step-by-step process navigation container
306
 */
307
import Stepper from "primevue/stepper";
308

309
interface StepperProps extends BaseComponentProps {
310
  value?: string | number;
311
  linear?: boolean;
312
  orientation?: "horizontal" | "vertical";
313
}
314
```
315

316
#### Step
317
Individual step component with header and content areas.
318

319
```typescript { .api }
320
/**
321
 * Individual step in stepper
322
 */
323
import Step from "primevue/step";
324

325
interface StepProps extends BaseComponentProps {
326
  value?: string | number;
327
  disabled?: boolean;
328
  readonly?: boolean;
329
}
330
```
331

332
#### StepList
333
Container for step headers in stepper navigation.
334

335
```typescript { .api }
336
/**
337
 * Container for step headers
338
 */
339
import StepList from "primevue/steplist";
340

341
interface StepListProps extends BaseComponentProps {
342
  // Container for step navigation
343
}
344
```
345

346
#### StepPanels
347
Container for step content panels.
348

349
```typescript { .api }
350
/**
351
 * Container for step content panels
352
 */
353
import StepPanels from "primevue/steppanels";
354

355
interface StepPanelsProps extends BaseComponentProps {
356
  // Container for step content
357
}
358
```
359

360
#### StepPanel
361
Individual content panel for each step.
362

363
```typescript { .api }
364
/**
365
 * Individual step content panel
366
 */
367
import StepPanel from "primevue/steppanel";
368

369
interface StepPanelProps extends BaseComponentProps {
370
  value?: string | number;
371
}
372
```
373

374
### Utility Layout Components
375

376
#### Divider
377
Visual content separator with optional text or icon.
378

379
```typescript { .api }
380
/**
381
 * Visual content separator
382
 */
383
import Divider from "primevue/divider";
384

385
interface DividerProps extends BaseComponentProps {
386
  align?: "left" | "center" | "right" | "top" | "center" | "bottom";
387
  layout?: "horizontal" | "vertical";
388
  type?: "solid" | "dashed" | "dotted";
389
}
390
```
391

392
#### ScrollPanel
393
Custom scrollable area with styled scrollbars.
394

395
```typescript { .api }
396
/**
397
 * Custom scrollable container
398
 */
399
import ScrollPanel from "primevue/scrollpanel";
400

401
interface ScrollPanelProps extends BaseComponentProps {
402
  step?: number;
403
}
404
```
405

406
#### Toolbar
407
Container for action buttons and tool groupings.
408

409
```typescript { .api }
410
/**
411
 * Toolbar container for actions and tools
412
 */
413
import Toolbar from "primevue/toolbar";
414

415
interface ToolbarProps extends BaseComponentProps {
416
  // Template-based with start, center, end slots
417
}
418
```
419

420
**Usage Example:**
421

422
```vue
423
<template>
424
  <Toolbar class="mb-4">
425
    <template #start>
426
      <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" />
427
      <Button label="Upload" icon="pi pi-upload" severity="info" />
428
    </template>
429
    
430
    <template #center>
431
      <IconField iconPosition="left">
432
        <InputIcon>
433
          <i class="pi pi-search" />
434
        </InputIcon>
435
        <InputText placeholder="Search..." />
436
      </IconField>
437
    </template>
438
    
439
    <template #end>
440
      <SplitButton label="Save" icon="pi pi-check" :model="items" />
441
    </template>
442
  </Toolbar>
443
</template>
444
```
445

446
### Legacy Components
447

448
#### TabView
449
Legacy tabbed interface (use Tabs for new projects).
450

451
```typescript { .api }
452
/**
453
 * Legacy tabbed interface (use Tabs instead)
454
 */
455
import TabView from "primevue/tabview";
456

457
interface TabViewProps extends BaseComponentProps {
458
  activeIndex?: number;
459
  lazy?: boolean;
460
  scrollable?: boolean;
461
  tabindex?: number;
462
  selectOnFocus?: boolean;
463
  previousIcon?: string;
464
  nextIcon?: string;
465
  prevButtonProps?: object;
466
  nextButtonProps?: object;
467
}
468
```
469

470
#### AccordionTab
471
Legacy accordion tab component (use AccordionPanel instead).
472

473
```typescript { .api }
474
/**
475
 * Legacy accordion tab (use AccordionPanel instead)
476
 */
477
import AccordionTab from "primevue/accordiontab";
478

479
interface AccordionTabProps extends BaseComponentProps {
480
  header?: string;
481
  headerStyle?: any;
482
  headerClass?: string;
483
  headerProps?: object;
484
  headerActionProps?: object;
485
  contentStyle?: any;
486
  contentClass?: string;
487
  disabled?: boolean;
488
}
489
```
490

491
## Types
492

493
Layout-specific type definitions:
494

495
```typescript { .api }
496
// Tab change events
497
interface TabChangeEvent {
498
  originalEvent: Event;
499
  index: number;
500
}
501

502
// Accordion events
503
interface AccordionTabOpenEvent {
504
  originalEvent: Event;
505
  index: number;
506
}
507

508
interface AccordionTabCloseEvent {
509
  originalEvent: Event;
510
  index: number;
511
}
512

513
// Splitter events
514
interface SplitterResizeEndEvent {
515
  originalEvent: Event;
516
  sizes: number[];
517
}
518
```