0
# Extension Components
1
2
Advanced components including rich text editor, code highlighting, carousel, notifications, and progress indicators for enhanced user experiences.
3
4
## Capabilities
5
6
### Rich Text Editing
7
8
WYSIWYG text editor with comprehensive formatting capabilities.
9
10
```python { .api }
11
def RichTextEditor(
12
id=None,
13
value="", # HTML content
14
placeholder="", # Placeholder text
15
labels=None, # UI labels configuration
16
**kwargs
17
):
18
"""
19
Rich text WYSIWYG editor component.
20
21
Parameters:
22
- id: Component ID for callbacks
23
- value: HTML content string
24
- placeholder: Placeholder text when empty
25
- labels: Custom labels for editor UI elements
26
"""
27
```
28
29
### Code Highlighting
30
31
Syntax highlighting components for displaying and editing code.
32
33
```python { .api }
34
def CodeHighlight(
35
code="", # Source code string
36
language="javascript", # Programming language
37
withCopyButton=True, # Show copy button
38
copyLabel="Copy code", # Copy button label
39
copiedLabel="Copied!", # Copied confirmation label
40
**kwargs
41
):
42
"""
43
Syntax highlighted code block display.
44
45
Parameters:
46
- code: Source code to highlight
47
- language: Programming language for syntax highlighting
48
- withCopyButton: Show copy to clipboard button
49
- copyLabel: Text for copy button
50
- copiedLabel: Text shown after copying
51
"""
52
53
def InlineCodeHighlight(
54
code="", # Inline code string
55
language="javascript", # Programming language
56
**kwargs
57
):
58
"""
59
Inline syntax highlighted code.
60
61
Parameters:
62
- code: Inline code snippet
63
- language: Programming language for highlighting
64
"""
65
66
def CodeHighlightTabs(
67
children=None, # Tab content
68
**kwargs
69
):
70
"""
71
Tabbed interface for multiple code examples.
72
73
Parameters:
74
- children: Code highlighting components in tabs
75
"""
76
```
77
78
### Carousel
79
80
Image and content carousel with navigation controls.
81
82
```python { .api }
83
def Carousel(
84
children=None, # Carousel slides
85
withIndicators=True, # Show dot indicators
86
withControls=True, # Show prev/next buttons
87
slidesToScroll=1, # Slides to scroll at once
88
slideSize="100%", # Individual slide size
89
slideGap="md", # Gap between slides
90
align="center", # Slide alignment
91
orientation="horizontal", # "horizontal" | "vertical"
92
height="auto", # Carousel height
93
loop=False, # Enable infinite loop
94
dragFree=False, # Free drag without snap
95
speed=10, # Transition speed
96
**kwargs
97
):
98
"""
99
Carousel container for image/content slides.
100
101
Parameters:
102
- children: CarouselSlide components
103
- withIndicators: Show position indicator dots
104
- withControls: Show navigation arrows
105
- slidesToScroll: Number of slides to move
106
- slideSize: Size of each slide
107
- slideGap: Spacing between slides
108
- align: Slide alignment in container
109
- orientation: Scroll direction
110
- height: Carousel container height
111
- loop: Enable infinite scrolling
112
- dragFree: Allow free dragging
113
- speed: Animation speed
114
"""
115
116
def CarouselSlide(
117
children=None, # Slide content
118
**kwargs
119
):
120
"""
121
Individual carousel slide.
122
123
Parameters:
124
- children: Content for this slide
125
"""
126
```
127
128
### Notification System
129
130
Toast notifications and notification management.
131
132
```python { .api }
133
def Notification(
134
children=None, # Notification content
135
title="", # Notification title
136
color="blue", # Notification color
137
radius="sm", # Border radius
138
icon=None, # Notification icon
139
withCloseButton=True, # Show close button
140
loading=False, # Show loading indicator
141
withBorder=False, # Add border
142
**kwargs
143
):
144
"""
145
Individual notification component.
146
147
Parameters:
148
- children: Notification message content
149
- title: Notification title text
150
- color: Color theme for notification
151
- radius: Border radius
152
- icon: Icon element for notification
153
- withCloseButton: Show dismiss button
154
- loading: Show loading spinner
155
- withBorder: Add notification border
156
"""
157
158
def NotificationProvider(
159
children=None, # App content
160
position="top-right", # Notification position
161
autoClose=4000, # Auto-close delay (ms)
162
transitionDuration=250, # Animation duration
163
containerWidth=440, # Notification container width
164
notificationMaxHeight=200, # Max notification height
165
limit=5, # Maximum notifications shown
166
**kwargs
167
):
168
"""
169
Provider for notification system management.
170
171
Parameters:
172
- children: Application content
173
- position: Where notifications appear
174
- autoClose: Auto-dismiss delay in milliseconds
175
- transitionDuration: Animation duration
176
- containerWidth: Notification container width
177
- notificationMaxHeight: Maximum height per notification
178
- limit: Maximum concurrent notifications
179
"""
180
```
181
182
### Navigation Progress
183
184
Progress indicators for navigation and page loading.
185
186
```python { .api }
187
def NavigationProgress(
188
progress=0, # Progress value (0-100)
189
**kwargs
190
):
191
"""
192
Navigation progress bar component.
193
194
Parameters:
195
- progress: Progress percentage (0-100)
196
"""
197
198
def NavigationProgressProvider(
199
children=None, # App content
200
**kwargs
201
):
202
"""
203
Provider for navigation progress management.
204
205
Parameters:
206
- children: Application content with navigation
207
"""
208
```
209
210
### Interactive Components
211
212
Additional interactive elements for enhanced user experiences.
213
214
```python { .api }
215
def Collapse(
216
children=None, # Collapsible content
217
in_=False, # Expanded state
218
transitionDuration=200, # Animation duration
219
transitionTimingFunction="ease", # Transition timing
220
**kwargs
221
):
222
"""
223
Collapsible content container.
224
225
Parameters:
226
- children: Content to show/hide
227
- in_: Whether content is expanded
228
- transitionDuration: Animation duration in ms
229
- transitionTimingFunction: CSS timing function
230
"""
231
232
def Overlay(
233
color="dark", # Overlay color
234
opacity=0.6, # Overlay opacity
235
blur=None, # Background blur amount
236
center=False, # Center overlay content
237
**kwargs
238
):
239
"""
240
Overlay background component.
241
242
Parameters:
243
- color: Overlay background color
244
- opacity: Overlay transparency (0-1)
245
- blur: Background blur intensity
246
- center: Center overlay content
247
"""
248
249
def Modal(
250
children=None, # Modal content
251
opened=False, # Modal open state
252
onClose=None, # Close callback
253
title="", # Modal title
254
size="md", # Modal size
255
centered=False, # Center modal vertically
256
withCloseButton=True, # Show close button
257
closeOnClickOutside=True, # Close on backdrop click
258
closeOnEscape=True, # Close on escape key
259
trapFocus=True, # Trap focus in modal
260
lockScroll=True, # Prevent body scroll
261
**kwargs
262
):
263
"""
264
Modal dialog component.
265
266
Parameters:
267
- children: Modal content
268
- opened: Whether modal is visible
269
- onClose: Function called when modal closes
270
- title: Modal title text
271
- size: Modal size preset or custom width
272
- centered: Center modal vertically
273
- withCloseButton: Show X close button
274
- closeOnClickOutside: Close when clicking backdrop
275
- closeOnEscape: Close with escape key
276
- trapFocus: Keep focus within modal
277
- lockScroll: Prevent background scrolling
278
"""
279
280
def Drawer(
281
children=None, # Drawer content
282
opened=False, # Drawer open state
283
onClose=None, # Close callback
284
title="", # Drawer title
285
position="left", # "left" | "right" | "top" | "bottom"
286
size="md", # Drawer size
287
withCloseButton=True, # Show close button
288
closeOnClickOutside=True, # Close on backdrop click
289
closeOnEscape=True, # Close on escape key
290
trapFocus=True, # Trap focus in drawer
291
lockScroll=True, # Prevent body scroll
292
**kwargs
293
):
294
"""
295
Slide-out drawer component.
296
297
Parameters:
298
- children: Drawer content
299
- opened: Whether drawer is visible
300
- onClose: Function called when drawer closes
301
- title: Drawer title text
302
- position: Which side drawer slides from
303
- size: Drawer size
304
- withCloseButton: Show close button
305
- closeOnClickOutside: Close when clicking outside
306
- closeOnEscape: Close with escape key
307
- trapFocus: Keep focus within drawer
308
- lockScroll: Prevent background scrolling
309
"""
310
311
def Affix(
312
children=None, # Fixed content
313
position={"bottom": 20, "right": 20}, # Position object
314
zIndex=1000, # Z-index value
315
**kwargs
316
):
317
"""
318
Fixed position element (floating button, etc.).
319
320
Parameters:
321
- children: Content to fix in position
322
- position: Position object with top/bottom/left/right
323
- zIndex: CSS z-index value
324
"""
325
326
def Spoiler(
327
children=None, # Content to hide/show
328
maxHeight=100, # Height before hiding
329
showLabel="Show more", # Expand button text
330
hideLabel="Hide", # Collapse button text
331
**kwargs
332
):
333
"""
334
Content spoiler with show/hide toggle.
335
336
Parameters:
337
- children: Content that may be hidden
338
- maxHeight: Height threshold for hiding
339
- showLabel: Text for expand button
340
- hideLabel: Text for collapse button
341
"""
342
```
343
344
## Usage Examples
345
346
### Rich Text Editor
347
348
```python
349
import dash_mantine_components as dmc
350
351
editor = dmc.RichTextEditor(
352
id="content-editor",
353
placeholder="Start writing your content...",
354
value="<p>Initial content with <strong>formatting</strong></p>"
355
)
356
```
357
358
### Code Display
359
360
```python
361
code_examples = dmc.Stack([
362
dmc.Text("Python Code Example", weight=500),
363
dmc.CodeHighlight(
364
code='''
365
def fibonacci(n):
366
if n <= 1:
367
return n
368
return fibonacci(n-1) + fibonacci(n-2)
369
370
# Generate first 10 Fibonacci numbers
371
for i in range(10):
372
print(f"F({i}) = {fibonacci(i)}")
373
'''.strip(),
374
language="python",
375
withCopyButton=True
376
),
377
378
dmc.Text("Inline code: ", span=True),
379
dmc.InlineCodeHighlight(code="print('Hello World')", language="python")
380
])
381
```
382
383
### Image Carousel
384
385
```python
386
carousel = dmc.Carousel([
387
dmc.CarouselSlide([
388
dmc.Image(
389
src="https://example.com/image1.jpg",
390
alt="Image 1",
391
height=400
392
)
393
]),
394
dmc.CarouselSlide([
395
dmc.Image(
396
src="https://example.com/image2.jpg",
397
alt="Image 2",
398
height=400
399
)
400
]),
401
dmc.CarouselSlide([
402
dmc.Image(
403
src="https://example.com/image3.jpg",
404
alt="Image 3",
405
height=400
406
)
407
])
408
], withIndicators=True, withControls=True, loop=True)
409
```
410
411
### Modal Dialog
412
413
```python
414
modal_demo = dmc.Stack([
415
dmc.Button("Open Modal", id="modal-button"),
416
417
dmc.Modal([
418
dmc.Stack([
419
dmc.Text("This is modal content"),
420
dmc.Text("You can put any components here."),
421
dmc.Group([
422
dmc.Button("Cancel", variant="outline", id="modal-cancel"),
423
dmc.Button("Confirm", id="modal-confirm")
424
], position="right")
425
])
426
], title="Confirmation", id="demo-modal", centered=True)
427
])
428
```
429
430
### Notification System
431
432
```python
433
app_with_notifications = dmc.NotificationProvider([
434
dmc.Container([
435
dmc.Button("Show Success", id="success-btn", color="green"),
436
dmc.Button("Show Error", id="error-btn", color="red", ml="sm"),
437
dmc.Button("Show Info", id="info-btn", color="blue", ml="sm"),
438
439
# Your app content here
440
dmc.Text("Application content with notifications")
441
])
442
], position="top-right", autoClose=5000)
443
444
# Callback to show notifications
445
@callback(
446
Output("notifications-container", "children"),
447
Input("success-btn", "n_clicks"),
448
Input("error-btn", "n_clicks"),
449
Input("info-btn", "n_clicks"),
450
prevent_initial_call=True
451
)
452
def show_notifications(success, error, info):
453
ctx = callback_context
454
if not ctx.triggered:
455
return []
456
457
button_id = ctx.triggered[0]["prop_id"].split(".")[0]
458
459
if button_id == "success-btn":
460
return dmc.Notification(
461
"Operation completed successfully!",
462
title="Success",
463
color="green",
464
icon="✓"
465
)
466
elif button_id == "error-btn":
467
return dmc.Notification(
468
"An error occurred while processing.",
469
title="Error",
470
color="red",
471
icon="✗"
472
)
473
elif button_id == "info-btn":
474
return dmc.Notification(
475
"Here's some useful information.",
476
title="Information",
477
color="blue",
478
icon="ℹ"
479
)
480
```
481
482
### Collapsible Content
483
484
```python
485
collapsible_demo = dmc.Stack([
486
dmc.Button("Toggle Content", id="collapse-btn", variant="outline"),
487
488
dmc.Collapse([
489
dmc.Paper([
490
dmc.Text("This content can be hidden and shown"),
491
dmc.Text("It animates smoothly when toggling"),
492
dmc.Image(src="https://example.com/image.jpg", height=200)
493
], p="md", shadow="sm")
494
], id="collapse-content")
495
])
496
497
@callback(
498
Output("collapse-content", "in_"),
499
Input("collapse-btn", "n_clicks"),
500
prevent_initial_call=True
501
)
502
def toggle_collapse(n_clicks):
503
return n_clicks % 2 == 1
504
```