0
# Core Layout Components
1
2
Essential building blocks for creating layouts including containers, grids, flexbox systems, and the comprehensive AppShell layout system for application structure.
3
4
## Capabilities
5
6
### Container and Layout Components
7
8
Basic layout containers for organizing content with responsive behavior and consistent spacing.
9
10
```python { .api }
11
def Container(
12
children=None,
13
size="md", # "xs" | "sm" | "md" | "lg" | "xl" | number
14
fluid=False, # Full width container
15
**kwargs
16
):
17
"""
18
Responsive container with max-width constraints.
19
20
Parameters:
21
- children: Child components
22
- size: Container size or custom width
23
- fluid: Whether container takes full width
24
"""
25
26
def Box(
27
children=None,
28
**kwargs
29
):
30
"""
31
Basic container component with styling props.
32
33
Parameters:
34
- children: Child components
35
- All style props (p, m, bg, etc.)
36
"""
37
38
def Center(
39
children=None,
40
inline=False,
41
**kwargs
42
):
43
"""
44
Centers content horizontally and vertically.
45
46
Parameters:
47
- children: Child components to center
48
- inline: Use inline-flex instead of flex
49
"""
50
51
def Paper(
52
children=None,
53
shadow="sm", # Shadow size
54
radius="sm", # Border radius
55
withBorder=False,
56
**kwargs
57
):
58
"""
59
Container with background and optional shadow/border.
60
61
Parameters:
62
- children: Child components
63
- shadow: Shadow intensity
64
- radius: Border radius
65
- withBorder: Add border
66
"""
67
```
68
69
### Flexbox Layout System
70
71
Flexible layout components using CSS flexbox for responsive designs.
72
73
```python { .api }
74
def Flex(
75
children=None,
76
direction="row", # "row" | "column" | "row-reverse" | "column-reverse"
77
wrap="nowrap", # "nowrap" | "wrap" | "wrap-reverse"
78
justify="flex-start", # Justify content
79
align="stretch", # Align items
80
gap="md", # Gap between items
81
**kwargs
82
):
83
"""
84
Flexbox container component.
85
86
Parameters:
87
- children: Child components
88
- direction: Flex direction
89
- wrap: Flex wrap behavior
90
- justify: Justify content alignment
91
- align: Align items
92
- gap: Gap between items
93
"""
94
95
def Stack(
96
children=None,
97
spacing="md", # Gap between items
98
align="stretch", # Align items
99
justify="flex-start", # Justify content
100
**kwargs
101
):
102
"""
103
Vertical stack layout (column flexbox).
104
105
Parameters:
106
- children: Child components
107
- spacing: Gap between items
108
- align: Horizontal alignment
109
- justify: Vertical alignment
110
"""
111
112
def Group(
113
children=None,
114
spacing="md", # Gap between items
115
position="left", # "left" | "center" | "right" | "apart"
116
noWrap=False, # Prevent wrapping
117
grow=False, # Allow items to grow
118
**kwargs
119
):
120
"""
121
Horizontal group layout (row flexbox).
122
123
Parameters:
124
- children: Child components
125
- spacing: Gap between items
126
- position: Group positioning
127
- noWrap: Prevent line wrapping
128
- grow: Allow items to grow
129
"""
130
```
131
132
### Grid System
133
134
CSS Grid and responsive grid layouts for complex layouts.
135
136
```python { .api }
137
def Grid(
138
children=None,
139
columns=12, # Number of columns
140
spacing="md", # Gap between items
141
align="stretch", # Align items
142
justify="flex-start", # Justify content
143
**kwargs
144
):
145
"""
146
CSS Grid container.
147
148
Parameters:
149
- children: GridCol components
150
- columns: Total columns in grid
151
- spacing: Gap between grid items
152
- align: Vertical alignment
153
- justify: Horizontal alignment
154
"""
155
156
def GridCol(
157
children=None,
158
span="auto", # Column span (1-12 or responsive object)
159
offset=0, # Column offset
160
order=0, # Visual order
161
**kwargs
162
):
163
"""
164
Grid column component.
165
166
Parameters:
167
- children: Child components
168
- span: Number of columns to span
169
- offset: Columns to offset
170
- order: Visual order
171
"""
172
173
def SimpleGrid(
174
children=None,
175
cols=1, # Number of columns
176
spacing="md", # Gap between items
177
verticalSpacing=None, # Vertical gap
178
breakpoints=None, # Responsive breakpoints
179
**kwargs
180
):
181
"""
182
Simple responsive grid layout.
183
184
Parameters:
185
- children: Child components
186
- cols: Number of columns
187
- spacing: Gap between items
188
- verticalSpacing: Vertical gap override
189
- breakpoints: Responsive column configuration
190
"""
191
```
192
193
### AppShell Layout System
194
195
Comprehensive application layout system for creating structured app interfaces.
196
197
```python { .api }
198
def AppShell(
199
children=None,
200
header=None, # Header configuration
201
navbar=None, # Navbar configuration
202
aside=None, # Aside configuration
203
footer=None, # Footer configuration
204
padding="md", # Main content padding
205
**kwargs
206
):
207
"""
208
Application shell container.
209
210
Parameters:
211
- children: Main content (AppShellMain)
212
- header: Header configuration object
213
- navbar: Navbar configuration object
214
- aside: Aside configuration object
215
- footer: Footer configuration object
216
- padding: Main content padding
217
"""
218
219
def AppShellHeader(
220
children=None,
221
height=60, # Header height
222
**kwargs
223
):
224
"""
225
Application header component.
226
227
Parameters:
228
- children: Header content
229
- height: Header height in pixels
230
"""
231
232
def AppShellNavbar(
233
children=None,
234
width=300, # Navbar width
235
**kwargs
236
):
237
"""
238
Application navbar/sidebar component.
239
240
Parameters:
241
- children: Navigation content
242
- width: Navbar width in pixels
243
"""
244
245
def AppShellAside(
246
children=None,
247
width=300, # Aside width
248
**kwargs
249
):
250
"""
251
Application aside/sidebar component.
252
253
Parameters:
254
- children: Aside content
255
- width: Aside width in pixels
256
"""
257
258
def AppShellMain(
259
children=None,
260
**kwargs
261
):
262
"""
263
Main content area component.
264
265
Parameters:
266
- children: Main page content
267
"""
268
269
def AppShellFooter(
270
children=None,
271
height=60, # Footer height
272
**kwargs
273
):
274
"""
275
Application footer component.
276
277
Parameters:
278
- children: Footer content
279
- height: Footer height in pixels
280
"""
281
282
def AppShellSection(
283
children=None,
284
grow=False, # Take available space
285
**kwargs
286
):
287
"""
288
Shell section wrapper for grouping content.
289
290
Parameters:
291
- children: Section content
292
- grow: Whether section should grow to fill space
293
"""
294
```
295
296
### Card System
297
298
Card containers for grouping related content with consistent styling.
299
300
```python { .api }
301
def Card(
302
children=None,
303
shadow="sm", # Shadow intensity
304
padding="md", # Internal padding
305
radius="sm", # Border radius
306
withBorder=False, # Add border
307
**kwargs
308
):
309
"""
310
Card container component.
311
312
Parameters:
313
- children: Card content and sections
314
- shadow: Shadow intensity
315
- padding: Internal padding
316
- radius: Border radius
317
- withBorder: Add border
318
"""
319
320
def CardSection(
321
children=None,
322
withBorder=False, # Add border
323
inheritPadding=False, # Inherit card padding
324
**kwargs
325
):
326
"""
327
Card section for organizing card content.
328
329
Parameters:
330
- children: Section content
331
- withBorder: Add section border
332
- inheritPadding: Use card's padding
333
"""
334
```
335
336
### Utility Components
337
338
Additional layout utilities for spacing, dividers, and visual organization.
339
340
```python { .api }
341
def Space(
342
w=0, # Width
343
h="md", # Height
344
**kwargs
345
):
346
"""
347
Spacing component for adding gaps.
348
349
Parameters:
350
- w: Width of space
351
- h: Height of space
352
"""
353
354
def Divider(
355
label=None, # Divider label
356
labelPosition="left", # "left" | "center" | "right"
357
orientation="horizontal", # "horizontal" | "vertical"
358
size="xs", # Line thickness
359
color="gray", # Line color
360
**kwargs
361
):
362
"""
363
Visual separator line.
364
365
Parameters:
366
- label: Optional label text
367
- labelPosition: Label position
368
- orientation: Line direction
369
- size: Line thickness
370
- color: Line color
371
"""
372
373
def AspectRatio(
374
children=None,
375
ratio=16/9, # Aspect ratio
376
**kwargs
377
):
378
"""
379
Maintain aspect ratio container.
380
381
Parameters:
382
- children: Child content
383
- ratio: Aspect ratio (width/height)
384
"""
385
```
386
387
## Usage Examples
388
389
### Basic Layout
390
391
```python
392
import dash_mantine_components as dmc
393
394
layout = dmc.MantineProvider([
395
dmc.AppShell([
396
dmc.AppShellHeader([
397
dmc.Container([
398
dmc.Group([
399
dmc.Text("My App", size="xl", weight=700),
400
dmc.Button("Login")
401
], position="apart")
402
])
403
], height=60),
404
405
dmc.AppShellMain([
406
dmc.Container([
407
dmc.Stack([
408
dmc.Title("Dashboard", order=1),
409
dmc.SimpleGrid([
410
dmc.Card([
411
dmc.Text("Card 1", weight=500),
412
dmc.Text("Content here")
413
]),
414
dmc.Card([
415
dmc.Text("Card 2", weight=500),
416
dmc.Text("More content")
417
])
418
], cols=2)
419
])
420
])
421
])
422
])
423
])
424
```
425
426
### Responsive Grid
427
428
```python
429
responsive_grid = dmc.Grid([
430
dmc.GridCol([
431
dmc.Paper("Sidebar", p="md")
432
], span={"base": 12, "md": 3}),
433
434
dmc.GridCol([
435
dmc.Stack([
436
dmc.Title("Main Content"),
437
dmc.Text("This is the main content area")
438
])
439
], span={"base": 12, "md": 9})
440
])
441
```