0
# Layout Components
1

2
Container components for organizing and structuring Panel applications. Layout components provide flexible ways to arrange other Panel components, from basic row/column layouts to advanced grid systems, tabbed interfaces, and modal dialogs.
3

4
## Capabilities
5

6
### Basic Layouts
7

8
Fundamental container components for organizing content vertically or horizontally.
9

10
```python { .api }
11
class Column:
12
    """
13
    Vertical layout container that arranges components in a column.
14
    
15
    Parameters:
16
    - *objects: Components to include in the column
17
    - width: Width of the column
18
    - height: Height of the column
19
    - sizing_mode: How component should size itself
20
    - margin: Margin around the component
21
    - **params: Additional parameters
22
    """
23

24
class Row:
25
    """
26
    Horizontal layout container that arranges components in a row.
27
    
28
    Parameters:
29
    - *objects: Components to include in the row
30
    - width: Width of the row
31
    - height: Height of the row
32
    - sizing_mode: How component should size itself
33
    - margin: Margin around the component
34
    - **params: Additional parameters
35
    """
36
```
37

38
### Spacer Components
39

40
Components for creating fixed or flexible spacing between other components.
41

42
```python { .api }
43
class Spacer:
44
    """
45
    Fixed spacer component for creating space between components.
46
    
47
    Parameters:
48
    - width: Width of the spacer
49
    - height: Height of the spacer
50
    - sizing_mode: How spacer should size itself
51
    """
52

53
class HSpacer:
54
    """Horizontal spacer that expands to fill available horizontal space"""
55

56
class VSpacer:
57
    """Vertical spacer that expands to fill available vertical space"""
58

59
class Divider:
60
    """Visual divider line component for separating content sections"""
61
```
62

63
### Tabbed Interfaces
64

65
Organize content in tabbed interfaces for space-efficient layouts.
66

67
```python { .api }
68
class Tabs:
69
    """
70
    Tabbed interface layout for organizing content in tabs.
71
    
72
    Parameters:
73
    - *objects: Tuple pairs of (title, component) for each tab
74
    - tabs_location: Location of tabs ('above', 'below', 'left', 'right')
75
    - closable: Whether tabs can be closed
76
    - **params: Additional parameters
77
    """
78
```
79

80
### Card Layouts
81

82
Card-style containers with headers and bodies for structured content presentation.
83

84
```python { .api }
85
class Card:
86
    """
87
    Card-style container with header and body sections.
88
    
89
    Parameters:
90
    - *objects: Components to include in card body
91
    - header: Component or text for card header
92
    - title: Title text for the card
93
    - header_background: Background color for header
94
    - header_color: Text color for header
95
    - collapsible: Whether card can be collapsed
96
    - collapsed: Initial collapsed state
97
    - **params: Additional parameters
98
    """
99
```
100

101
### Accordion Layouts
102

103
Collapsible accordion-style layouts for organizing content sections.
104

105
```python { .api }
106
class Accordion:
107
    """
108
    Collapsible accordion layout with multiple sections.
109
    
110
    Parameters:
111
    - *objects: Tuple pairs of (title, component) for each section
112
    - active: List of initially active sections
113
    - multiple: Whether multiple sections can be open
114
    - toggle: Whether sections can be toggled closed
115
    - **params: Additional parameters
116
    """
117
```
118

119
### Grid Layouts
120

121
Advanced grid-based layouts for precise component positioning.
122

123
```python { .api }
124
class GridSpec:
125
    """
126
    Matplotlib-style grid specification for precise layout control.
127
    
128
    Parameters:
129
    - ncols: Number of columns in grid
130
    - nrows: Number of rows in grid
131
    - **params: Additional parameters
132
    """
133

134
class GridBox:
135
    """
136
    CSS Grid-based layout container.
137
    
138
    Parameters:
139
    - *objects: Components to include in grid
140
    - ncols: Number of columns
141
    - nrows: Number of rows
142
    - **params: Additional parameters
143
    """
144

145
class GridStack:
146
    """
147
    Interactive grid stack layout with drag-and-drop support.
148
    
149
    Parameters:
150
    - *objects: Components to include in grid stack
151
    - mode: Interaction mode ('warn', 'append', 'error')
152
    - allow_resize: Whether items can be resized
153
    - allow_drag: Whether items can be dragged
154
    - **params: Additional parameters
155
    """
156
```
157

158
### Flexible Layouts
159

160
CSS Flexbox-based layouts for responsive design.
161

162
```python { .api }
163
class FlexBox:
164
    """
165
    CSS Flexbox layout container for responsive layouts.
166
    
167
    Parameters:
168
    - *objects: Components to include in flexbox
169
    - flex_direction: Direction of flex ('row', 'column', 'row-reverse', 'column-reverse')
170
    - flex_wrap: How items wrap ('nowrap', 'wrap', 'wrap-reverse')
171
    - justify_content: Main axis alignment
172
    - align_items: Cross axis alignment
173
    - align_content: Wrapped lines alignment
174
    - **params: Additional parameters
175
    """
176
```
177

178
### Specialized Layouts
179

180
Advanced layout components for specific use cases.
181

182
```python { .api }
183
class Feed:
184
    """
185
    Social media feed-style layout for streaming content.
186
    
187
    Parameters:
188
    - *objects: Components to include in feed
189
    - load_buffer: Number of objects to load ahead
190
    - scroll_button_threshold: Threshold for showing scroll button
191
    - auto_scroll_limit: Limit for auto-scrolling
192
    - **params: Additional parameters
193
    """
194

195
class FloatPanel:
196
    """
197
    Floating overlay panel that can be positioned anywhere.
198
    
199
    Parameters:
200
    - *objects: Components to include in panel
201
    - position: Position of panel ('top-left', 'top-right', etc.)
202
    - offsetx: Horizontal offset from position
203
    - offsety: Vertical offset from position
204
    - contained: Whether panel is contained within parent
205
    - **params: Additional parameters
206
    """
207

208
class Modal:
209
    """
210
    Modal dialog box for overlaying content.
211
    
212
    Parameters:
213
    - *objects: Components to include in modal
214
    - width: Width of modal
215
    - height: Height of modal
216
    - **params: Additional parameters
217
    """
218

219
class Swipe:
220
    """
221
    Swipeable layout for mobile interfaces.
222
    
223
    Parameters:
224
    - *objects: Components to swipe between
225
    - **params: Additional parameters
226
    """
227
```
228

229
### Legacy Components
230

231
Deprecated layout components maintained for backwards compatibility.
232

233
```python { .api }
234
class WidgetBox:
235
    """
236
    Legacy widget container (deprecated, use Column instead).
237
    
238
    Parameters:
239
    - *objects: Components to include
240
    - **params: Additional parameters
241
    """
242
```
243

244
## Usage Examples
245

246
### Basic Layout Example
247

248
```python
249
import panel as pn
250

251
# Create components
252
title = pn.pane.Markdown("# My Dashboard")
253
sidebar = pn.Column(
254
    pn.widgets.Select(options=['A', 'B', 'C']),
255
    pn.widgets.IntSlider(),
256
    width=300
257
)
258
main_content = pn.pane.HTML("<p>Main content area</p>")
259

260
# Arrange in layout
261
layout = pn.Row(
262
    sidebar,
263
    pn.Column(title, main_content, sizing_mode='stretch_width'),
264
    sizing_mode='stretch_width'
265
)
266
```
267

268
### Tabbed Interface Example
269

270
```python
271
# Create tabbed interface
272
tabs = pn.Tabs(
273
    ("Data", pn.pane.DataFrame(df)),
274
    ("Visualization", plot_pane),
275
    ("Settings", settings_panel),
276
    tabs_location='above'
277
)
278
```
279

280
### Grid Layout Example
281

282
```python
283
# Create grid layout
284
gspec = pn.GridSpec(sizing_mode='stretch_both', height=600)
285
gspec[0, :2] = pn.pane.Markdown("# Header")
286
gspec[1:3, 0] = sidebar
287
gspec[1:3, 1] = main_plot
288
gspec[3, :2] = pn.pane.Markdown("Footer")
289
```