0
# User Interface Components
1
2
Comprehensive set of UI functions for building layouts, input controls, output containers, and interactive elements. Shiny's UI system provides both high-level layout components and low-level HTML building blocks.
3
4
## Capabilities
5
6
### Page Layouts
7
8
High-level page layout functions that define the overall structure of your application.
9
10
```python { .api }
11
def ui.page_fluid(*args: TagChild, **kwargs: TagAttr) -> Tag:
12
"""
13
Create a fluid container page layout.
14
15
Args:
16
*args: UI elements to include in the page.
17
**kwargs: Additional HTML attributes.
18
19
Returns:
20
Page container with fluid width.
21
"""
22
23
def ui.page_fixed(*args: TagChild, **kwargs: TagAttr) -> Tag:
24
"""
25
Create a fixed-width container page layout.
26
27
Args:
28
*args: UI elements to include in the page.
29
**kwargs: Additional HTML attributes.
30
31
Returns:
32
Page container with fixed width.
33
"""
34
35
def ui.page_fillable(*args: TagChild, **kwargs: TagAttr) -> Tag:
36
"""
37
Create a fillable page layout that expands to viewport.
38
39
Args:
40
*args: UI elements to include in the page.
41
**kwargs: Additional HTML attributes.
42
43
Returns:
44
Page container that fills viewport.
45
"""
46
47
def ui.page_sidebar(
48
sidebar: Sidebar,
49
*args: TagChild,
50
title: str | Tag | TagList | None = None,
51
fillable: bool = True,
52
**kwargs: TagAttr
53
) -> Tag:
54
"""
55
Create a page layout with sidebar.
56
57
Args:
58
sidebar: Sidebar configuration.
59
*args: Main content elements.
60
title: Page title.
61
fillable: Whether page should fill viewport.
62
**kwargs: Additional HTML attributes.
63
64
Returns:
65
Page with sidebar layout.
66
"""
67
68
def ui.page_navbar(
69
*args: TagChild,
70
title: str | Tag | TagList = "Shiny",
71
id: str | None = None,
72
**kwargs: TagAttr
73
) -> Tag:
74
"""
75
Create a page layout with navigation bar.
76
77
Args:
78
*args: Navigation panels and content.
79
title: Application title in navbar.
80
id: Unique identifier for navbar.
81
**kwargs: Additional HTML attributes.
82
83
Returns:
84
Page with navigation bar layout.
85
"""
86
```
87
88
#### Usage Examples
89
90
```python
91
# Fluid page layout
92
app_ui = ui.page_fluid(
93
ui.h1("My Shiny App"),
94
ui.layout_columns(
95
ui.input_slider("n", "Number:", 1, 100, 50),
96
ui.output_plot("plot")
97
)
98
)
99
100
# Page with sidebar
101
app_ui = ui.page_sidebar(
102
sidebar=ui.sidebar(
103
ui.input_select("dataset", "Dataset:", choices=["mtcars", "iris"]),
104
ui.input_numeric("obs", "Observations:", 10, 1, 100)
105
),
106
ui.h2("Analysis Results"),
107
ui.output_data_frame("data"),
108
ui.output_plot("plot")
109
)
110
111
# Navbar page layout
112
app_ui = ui.page_navbar(
113
ui.nav_panel("Data",
114
ui.h2("Data Input"),
115
ui.input_file("file", "Choose CSV File")
116
),
117
ui.nav_panel("Analysis",
118
ui.h2("Data Analysis"),
119
ui.output_plot("analysis_plot")
120
),
121
title="Data Analysis App"
122
)
123
```
124
125
### Layout Components
126
127
Components for organizing content within pages.
128
129
```python { .api }
130
def ui.layout_columns(
131
*args: TagChild,
132
col_widths: int | Sequence[int] | None = None,
133
row_heights: str | Sequence[str] | None = None,
134
fill: bool = True,
135
**kwargs: TagAttr
136
) -> Tag:
137
"""
138
Create a column-based layout.
139
140
Args:
141
*args: Elements to arrange in columns.
142
col_widths: Column width specifications.
143
row_heights: Row height specifications.
144
fill: Whether to fill available space.
145
**kwargs: Additional HTML attributes.
146
147
Returns:
148
Column layout container.
149
"""
150
151
def ui.layout_column_wrap(
152
*args: TagChild,
153
width: str | float = 200,
154
heights_equal: Literal["all", "row"] | None = None,
155
fill: bool = True,
156
**kwargs: TagAttr
157
) -> Tag:
158
"""
159
Create a wrapping column layout.
160
161
Args:
162
*args: Elements to arrange with wrapping.
163
width: Minimum column width.
164
heights_equal: Height equalization strategy.
165
fill: Whether to fill available space.
166
**kwargs: Additional HTML attributes.
167
168
Returns:
169
Wrapping column layout.
170
"""
171
172
def ui.layout_sidebar(
173
sidebar: Sidebar,
174
*args: TagChild,
175
**kwargs: TagAttr
176
) -> Tag:
177
"""
178
Create a sidebar layout container.
179
180
Args:
181
sidebar: Sidebar configuration.
182
*args: Main content elements.
183
**kwargs: Additional HTML attributes.
184
185
Returns:
186
Sidebar layout container.
187
"""
188
```
189
190
### Sidebar Components
191
192
Sidebar creation and management functions.
193
194
```python { .api }
195
def ui.sidebar(
196
*args: TagChild,
197
width: int = 250,
198
position: Literal["left", "right"] = "left",
199
open: bool | Literal["desktop", "always"] = "desktop",
200
id: str | None = None,
201
**kwargs: TagAttr
202
) -> Sidebar:
203
"""
204
Create a sidebar configuration.
205
206
Args:
207
*args: Sidebar content elements.
208
width: Sidebar width in pixels.
209
position: Sidebar position (left or right).
210
open: Initial open state or open behavior.
211
id: Unique identifier for programmatic control.
212
**kwargs: Additional HTML attributes.
213
214
Returns:
215
Sidebar configuration object.
216
"""
217
218
def ui.update_sidebar(
219
id: str,
220
*,
221
show: bool | None = None,
222
session: Session | None = None
223
) -> None:
224
"""
225
Update sidebar visibility.
226
227
Args:
228
id: Sidebar identifier.
229
show: Whether to show or hide sidebar.
230
session: Session to update (current session if None).
231
"""
232
233
class Sidebar:
234
"""
235
Sidebar configuration class.
236
"""
237
def __init__(
238
self,
239
*args: TagChild,
240
width: int = 250,
241
position: Literal["left", "right"] = "left",
242
open: bool | Literal["desktop", "always"] = "desktop",
243
**kwargs: TagAttr
244
): ...
245
```
246
247
### Card Components
248
249
Card-based layout components for grouping related content.
250
251
```python { .api }
252
def ui.card(
253
*args: TagChild,
254
full_screen: bool = False,
255
height: str | float | None = None,
256
max_height: str | float | None = None,
257
min_height: str | float | None = None,
258
fill: bool = True,
259
**kwargs: TagAttr
260
) -> Tag:
261
"""
262
Create a card container.
263
264
Args:
265
*args: Card content elements.
266
full_screen: Enable full-screen toggle.
267
height: Card height.
268
max_height: Maximum card height.
269
min_height: Minimum card height.
270
fill: Whether card should fill available space.
271
**kwargs: Additional HTML attributes.
272
273
Returns:
274
Card container element.
275
"""
276
277
def ui.card_header(*args: TagChild, **kwargs: TagAttr) -> Tag:
278
"""
279
Create card header content.
280
281
Args:
282
*args: Header content elements.
283
**kwargs: Additional HTML attributes.
284
285
Returns:
286
Card header element.
287
"""
288
289
def ui.card_body(*args: TagChild, **kwargs: TagAttr) -> Tag:
290
"""
291
Create card body content.
292
293
Args:
294
*args: Body content elements.
295
**kwargs: Additional HTML attributes.
296
297
Returns:
298
Card body element.
299
"""
300
301
def ui.card_footer(*args: TagChild, **kwargs: TagAttr) -> Tag:
302
"""
303
Create card footer content.
304
305
Args:
306
*args: Footer content elements.
307
**kwargs: Additional HTML attributes.
308
309
Returns:
310
Card footer element.
311
"""
312
```
313
314
#### Usage Examples
315
316
```python
317
# Basic card
318
ui.card(
319
ui.card_header("Analysis Results"),
320
ui.card_body(
321
ui.output_plot("main_plot"),
322
ui.output_text("summary")
323
),
324
ui.card_footer("Last updated: 2024-01-15")
325
)
326
327
# Card with full-screen capability
328
ui.card(
329
ui.h3("Interactive Visualization"),
330
ui.output_plot("complex_plot"),
331
full_screen=True,
332
height="400px"
333
)
334
335
# Multiple cards in layout
336
ui.layout_columns(
337
ui.card(
338
ui.card_header("Input Parameters"),
339
ui.input_slider("alpha", "Alpha:", 0, 1, 0.5),
340
ui.input_select("method", "Method:", ["A", "B", "C"])
341
),
342
ui.card(
343
ui.card_header("Results"),
344
ui.output_table("results")
345
)
346
)
347
```
348
349
### Input Controls
350
351
User input components for collecting data and user interactions.
352
353
#### Text Input Controls
354
355
```python { .api }
356
def ui.input_text(
357
id: str,
358
label: str,
359
value: str = "",
360
*,
361
width: str | None = None,
362
placeholder: str | None = None,
363
**kwargs: TagAttr
364
) -> Tag:
365
"""
366
Create a text input.
367
368
Args:
369
id: Input identifier.
370
label: Input label.
371
value: Initial value.
372
width: Input width.
373
placeholder: Placeholder text.
374
**kwargs: Additional HTML attributes.
375
376
Returns:
377
Text input element.
378
"""
379
380
def ui.input_text_area(
381
id: str,
382
label: str,
383
value: str = "",
384
*,
385
width: str | None = None,
386
height: str | None = None,
387
rows: int | None = None,
388
cols: int | None = None,
389
placeholder: str | None = None,
390
resize: Literal["none", "both", "horizontal", "vertical"] | None = None,
391
**kwargs: TagAttr
392
) -> Tag:
393
"""
394
Create a multi-line text input.
395
396
Args:
397
id: Input identifier.
398
label: Input label.
399
value: Initial value.
400
width: Input width.
401
height: Input height.
402
rows: Number of rows.
403
cols: Number of columns.
404
placeholder: Placeholder text.
405
resize: Resize behavior.
406
**kwargs: Additional HTML attributes.
407
408
Returns:
409
Text area element.
410
"""
411
412
def ui.input_password(
413
id: str,
414
label: str,
415
value: str = "",
416
**kwargs: TagAttr
417
) -> Tag:
418
"""
419
Create a password input.
420
421
Args:
422
id: Input identifier.
423
label: Input label.
424
value: Initial value.
425
**kwargs: Additional HTML attributes.
426
427
Returns:
428
Password input element.
429
"""
430
431
def ui.input_numeric(
432
id: str,
433
label: str,
434
value: float | int | None,
435
*,
436
min: float | int | None = None,
437
max: float | int | None = None,
438
step: float | int | None = None,
439
**kwargs: TagAttr
440
) -> Tag:
441
"""
442
Create a numeric input.
443
444
Args:
445
id: Input identifier.
446
label: Input label.
447
value: Initial numeric value.
448
min: Minimum allowed value.
449
max: Maximum allowed value.
450
step: Step size for increment/decrement.
451
**kwargs: Additional HTML attributes.
452
453
Returns:
454
Numeric input element.
455
"""
456
```
457
458
#### Selection Controls
459
460
```python { .api }
461
def ui.input_select(
462
id: str,
463
label: str,
464
choices: list[str] | dict[str, str],
465
*,
466
selected: str | None = None,
467
multiple: bool = False,
468
selectize: bool = False,
469
**kwargs: TagAttr
470
) -> Tag:
471
"""
472
Create a select dropdown.
473
474
Args:
475
id: Input identifier.
476
label: Input label.
477
choices: Available choices as list or dict.
478
selected: Initially selected value(s).
479
multiple: Allow multiple selections.
480
selectize: Use selectize.js for enhanced interface.
481
**kwargs: Additional HTML attributes.
482
483
Returns:
484
Select input element.
485
"""
486
487
def ui.input_selectize(
488
id: str,
489
label: str,
490
choices: list[str] | dict[str, str],
491
*,
492
selected: str | list[str] | None = None,
493
multiple: bool = False,
494
**kwargs: TagAttr
495
) -> Tag:
496
"""
497
Create a selectize dropdown with enhanced features.
498
499
Args:
500
id: Input identifier.
501
label: Input label.
502
choices: Available choices.
503
selected: Initially selected value(s).
504
multiple: Allow multiple selections.
505
**kwargs: Additional HTML attributes.
506
507
Returns:
508
Selectize input element.
509
"""
510
511
def ui.input_checkbox(
512
id: str,
513
label: str,
514
value: bool = False,
515
**kwargs: TagAttr
516
) -> Tag:
517
"""
518
Create a checkbox input.
519
520
Args:
521
id: Input identifier.
522
label: Checkbox label.
523
value: Initial checked state.
524
**kwargs: Additional HTML attributes.
525
526
Returns:
527
Checkbox input element.
528
"""
529
530
def ui.input_checkbox_group(
531
id: str,
532
label: str,
533
choices: list[str] | dict[str, str],
534
*,
535
selected: list[str] | None = None,
536
inline: bool = False,
537
**kwargs: TagAttr
538
) -> Tag:
539
"""
540
Create a group of checkboxes.
541
542
Args:
543
id: Input identifier.
544
label: Group label.
545
choices: Available checkbox options.
546
selected: Initially selected values.
547
inline: Display checkboxes inline.
548
**kwargs: Additional HTML attributes.
549
550
Returns:
551
Checkbox group element.
552
"""
553
554
def ui.input_radio_buttons(
555
id: str,
556
label: str,
557
choices: list[str] | dict[str, str],
558
*,
559
selected: str | None = None,
560
inline: bool = False,
561
**kwargs: TagAttr
562
) -> Tag:
563
"""
564
Create a group of radio buttons.
565
566
Args:
567
id: Input identifier.
568
label: Group label.
569
choices: Available radio options.
570
selected: Initially selected value.
571
inline: Display radio buttons inline.
572
**kwargs: Additional HTML attributes.
573
574
Returns:
575
Radio button group element.
576
"""
577
578
def ui.input_switch(
579
id: str,
580
label: str,
581
value: bool = False,
582
**kwargs: TagAttr
583
) -> Tag:
584
"""
585
Create a toggle switch input.
586
587
Args:
588
id: Input identifier.
589
label: Switch label.
590
value: Initial switch state.
591
**kwargs: Additional HTML attributes.
592
593
Returns:
594
Switch input element.
595
"""
596
```
597
598
#### Slider Controls
599
600
```python { .api }
601
def ui.input_slider(
602
id: str,
603
label: str,
604
min: float,
605
max: float,
606
value: float | list[float],
607
*,
608
step: float | None = None,
609
ticks: bool = True,
610
animate: bool | AnimationOptions = False,
611
**kwargs: TagAttr
612
) -> Tag:
613
"""
614
Create a slider input.
615
616
Args:
617
id: Input identifier.
618
label: Slider label.
619
min: Minimum value.
620
max: Maximum value.
621
value: Initial value or range.
622
step: Step size.
623
ticks: Show tick marks.
624
animate: Enable animation controls.
625
**kwargs: Additional HTML attributes.
626
627
Returns:
628
Slider input element.
629
"""
630
631
class AnimationOptions:
632
"""
633
Animation options for sliders.
634
"""
635
def __init__(
636
self,
637
interval: int = 1000,
638
loop: bool = False,
639
play_button: str | None = None,
640
pause_button: str | None = None
641
): ...
642
```
643
644
#### Action Controls
645
646
```python { .api }
647
def ui.input_action_button(
648
id: str,
649
label: str,
650
*,
651
icon: Tag | str | None = None,
652
**kwargs: TagAttr
653
) -> Tag:
654
"""
655
Create an action button.
656
657
Args:
658
id: Input identifier.
659
label: Button text.
660
icon: Button icon.
661
**kwargs: Additional HTML attributes.
662
663
Returns:
664
Action button element.
665
"""
666
667
def ui.input_action_link(
668
id: str,
669
label: str,
670
*,
671
icon: Tag | str | None = None,
672
**kwargs: TagAttr
673
) -> Tag:
674
"""
675
Create an action link.
676
677
Args:
678
id: Input identifier.
679
label: Link text.
680
icon: Link icon.
681
**kwargs: Additional HTML attributes.
682
683
Returns:
684
Action link element.
685
"""
686
687
def ui.input_task_button(
688
id: str,
689
label: str,
690
*,
691
icon: Tag | str | None = None,
692
label_busy: str = "Processing...",
693
icon_busy: Tag | str | None = None,
694
**kwargs: TagAttr
695
) -> Tag:
696
"""
697
Create a task button for extended operations.
698
699
Args:
700
id: Input identifier.
701
label: Button text.
702
icon: Button icon.
703
label_busy: Text shown during processing.
704
icon_busy: Icon shown during processing.
705
**kwargs: Additional HTML attributes.
706
707
Returns:
708
Task button element.
709
"""
710
```
711
712
#### Date and File Controls
713
714
```python { .api }
715
def ui.input_date(
716
id: str,
717
label: str,
718
value: str | date | None = None,
719
*,
720
min: str | date | None = None,
721
max: str | date | None = None,
722
format: str = "yyyy-mm-dd",
723
**kwargs: TagAttr
724
) -> Tag:
725
"""
726
Create a date input.
727
728
Args:
729
id: Input identifier.
730
label: Input label.
731
value: Initial date.
732
min: Minimum allowed date.
733
max: Maximum allowed date.
734
format: Date display format.
735
**kwargs: Additional HTML attributes.
736
737
Returns:
738
Date input element.
739
"""
740
741
def ui.input_date_range(
742
id: str,
743
label: str,
744
start: str | date | None = None,
745
end: str | date | None = None,
746
**kwargs: TagAttr
747
) -> Tag:
748
"""
749
Create a date range input.
750
751
Args:
752
id: Input identifier.
753
label: Input label.
754
start: Initial start date.
755
end: Initial end date.
756
**kwargs: Additional HTML attributes.
757
758
Returns:
759
Date range input element.
760
"""
761
762
def ui.input_file(
763
id: str,
764
label: str,
765
*,
766
multiple: bool = False,
767
accept: str | list[str] | None = None,
768
**kwargs: TagAttr
769
) -> Tag:
770
"""
771
Create a file upload input.
772
773
Args:
774
id: Input identifier.
775
label: Input label.
776
multiple: Allow multiple file selection.
777
accept: Accepted file types.
778
**kwargs: Additional HTML attributes.
779
780
Returns:
781
File input element.
782
"""
783
```
784
785
### Output Containers
786
787
Containers for displaying rendered output content.
788
789
```python { .api }
790
def ui.output_text(
791
id: str,
792
inline: bool = False,
793
**kwargs: TagAttr
794
) -> Tag:
795
"""
796
Create a text output container.
797
798
Args:
799
id: Output identifier.
800
inline: Display as inline element.
801
**kwargs: Additional HTML attributes.
802
803
Returns:
804
Text output container.
805
"""
806
807
def ui.output_text_verbatim(
808
id: str,
809
placeholder: bool = False,
810
**kwargs: TagAttr
811
) -> Tag:
812
"""
813
Create a verbatim text output container.
814
815
Args:
816
id: Output identifier.
817
placeholder: Show placeholder when empty.
818
**kwargs: Additional HTML attributes.
819
820
Returns:
821
Verbatim text output container.
822
"""
823
824
def ui.output_code(
825
id: str,
826
placeholder: bool = False,
827
**kwargs: TagAttr
828
) -> Tag:
829
"""
830
Create a code output container.
831
832
Args:
833
id: Output identifier.
834
placeholder: Show placeholder when empty.
835
**kwargs: Additional HTML attributes.
836
837
Returns:
838
Code output container.
839
"""
840
841
def ui.output_plot(
842
id: str,
843
width: str = "100%",
844
height: str = "400px",
845
*,
846
click: bool | ClickOpts = False,
847
dblclick: bool | DblClickOpts = False,
848
hover: bool | HoverOpts = False,
849
brush: bool | BrushOpts = False,
850
**kwargs: TagAttr
851
) -> Tag:
852
"""
853
Create a plot output container.
854
855
Args:
856
id: Output identifier.
857
width: Plot width.
858
height: Plot height.
859
click: Enable click events.
860
dblclick: Enable double-click events.
861
hover: Enable hover events.
862
brush: Enable brush selection.
863
**kwargs: Additional HTML attributes.
864
865
Returns:
866
Plot output container.
867
"""
868
869
def ui.output_image(
870
id: str,
871
width: str = "auto",
872
height: str = "auto",
873
**kwargs: TagAttr
874
) -> Tag:
875
"""
876
Create an image output container.
877
878
Args:
879
id: Output identifier.
880
width: Image width.
881
height: Image height.
882
**kwargs: Additional HTML attributes.
883
884
Returns:
885
Image output container.
886
"""
887
888
def ui.output_table(
889
id: str,
890
**kwargs: TagAttr
891
) -> Tag:
892
"""
893
Create a table output container.
894
895
Args:
896
id: Output identifier.
897
**kwargs: Additional HTML attributes.
898
899
Returns:
900
Table output container.
901
"""
902
903
def ui.output_data_frame(
904
id: str,
905
**kwargs: TagAttr
906
) -> Tag:
907
"""
908
Create a data frame output container.
909
910
Args:
911
id: Output identifier.
912
**kwargs: Additional HTML attributes.
913
914
Returns:
915
Data frame output container.
916
"""
917
918
def ui.output_ui(
919
id: str,
920
inline: bool = False,
921
**kwargs: TagAttr
922
) -> Tag:
923
"""
924
Create a dynamic UI output container.
925
926
Args:
927
id: Output identifier.
928
inline: Display as inline element.
929
**kwargs: Additional HTML attributes.
930
931
Returns:
932
UI output container.
933
"""
934
```
935
936
### Navigation Components
937
938
Components for creating navigation interfaces.
939
940
```python { .api }
941
def ui.nav_panel(
942
title: str,
943
*args: TagChild,
944
value: str | None = None,
945
icon: Tag | str | None = None
946
) -> NavPanel:
947
"""
948
Create a navigation panel.
949
950
Args:
951
title: Panel title.
952
*args: Panel content.
953
value: Panel value (defaults to title).
954
icon: Panel icon.
955
956
Returns:
957
Navigation panel object.
958
"""
959
960
def ui.nav_menu(
961
title: str,
962
*args: NavPanel | NavMenu,
963
value: str | None = None,
964
icon: Tag | str | None = None
965
) -> NavMenu:
966
"""
967
Create a navigation menu.
968
969
Args:
970
title: Menu title.
971
*args: Menu items.
972
value: Menu value.
973
icon: Menu icon.
974
975
Returns:
976
Navigation menu object.
977
"""
978
979
def ui.navset_tab(
980
*args: NavPanel | NavMenu,
981
id: str | None = None,
982
selected: str | None = None,
983
**kwargs: TagAttr
984
) -> Tag:
985
"""
986
Create a tabbed navigation set.
987
988
Args:
989
*args: Navigation items.
990
id: Unique identifier.
991
selected: Initially selected tab.
992
**kwargs: Additional HTML attributes.
993
994
Returns:
995
Tabbed navigation element.
996
"""
997
998
def ui.navset_pill(
999
*args: NavPanel | NavMenu,
1000
id: str | None = None,
1001
selected: str | None = None,
1002
**kwargs: TagAttr
1003
) -> Tag:
1004
"""
1005
Create a pill-style navigation set.
1006
1007
Args:
1008
*args: Navigation items.
1009
id: Unique identifier.
1010
selected: Initially selected item.
1011
**kwargs: Additional HTML attributes.
1012
1013
Returns:
1014
Pill navigation element.
1015
"""
1016
```
1017
1018
### Interactive Elements
1019
1020
Components for user interaction and feedback.
1021
1022
```python { .api }
1023
def ui.tooltip(
1024
trigger: Tag,
1025
content: str | Tag | TagList,
1026
*,
1027
id: str | None = None,
1028
placement: Literal["auto", "top", "right", "bottom", "left"] = "auto",
1029
**kwargs: TagAttr
1030
) -> Tag:
1031
"""
1032
Add a tooltip to an element.
1033
1034
Args:
1035
trigger: Element that triggers the tooltip.
1036
content: Tooltip content.
1037
id: Unique identifier.
1038
placement: Tooltip placement.
1039
**kwargs: Additional HTML attributes.
1040
1041
Returns:
1042
Element with tooltip.
1043
"""
1044
1045
def ui.popover(
1046
trigger: Tag,
1047
content: str | Tag | TagList,
1048
*,
1049
title: str | None = None,
1050
id: str | None = None,
1051
placement: Literal["auto", "top", "right", "bottom", "left"] = "auto",
1052
**kwargs: TagAttr
1053
) -> Tag:
1054
"""
1055
Add a popover to an element.
1056
1057
Args:
1058
trigger: Element that triggers the popover.
1059
content: Popover content.
1060
title: Popover title.
1061
id: Unique identifier.
1062
placement: Popover placement.
1063
**kwargs: Additional HTML attributes.
1064
1065
Returns:
1066
Element with popover.
1067
"""
1068
1069
def ui.modal(
1070
*args: TagChild,
1071
title: str | Tag | TagList | None = None,
1072
footer: Tag | TagList | None = None,
1073
size: Literal["s", "m", "l", "xl"] = "m",
1074
easy_close: bool = True,
1075
**kwargs: TagAttr
1076
) -> Tag:
1077
"""
1078
Create a modal dialog.
1079
1080
Args:
1081
*args: Modal body content.
1082
title: Modal title.
1083
footer: Modal footer content.
1084
size: Modal size.
1085
easy_close: Allow closing by clicking outside.
1086
**kwargs: Additional HTML attributes.
1087
1088
Returns:
1089
Modal dialog element.
1090
"""
1091
1092
def ui.modal_show(modal: Tag, session: Session | None = None) -> None:
1093
"""
1094
Show a modal dialog.
1095
1096
Args:
1097
modal: Modal element to show.
1098
session: Session to use.
1099
"""
1100
1101
def ui.modal_remove(session: Session | None = None) -> None:
1102
"""
1103
Remove/hide the current modal.
1104
1105
Args:
1106
session: Session to use.
1107
"""
1108
```
1109
1110
#### Usage Examples
1111
1112
```python
1113
# Complete UI example combining multiple components
1114
app_ui = ui.page_sidebar(
1115
sidebar=ui.sidebar(
1116
ui.h4("Controls"),
1117
ui.input_select(
1118
"dataset",
1119
"Choose dataset:",
1120
choices=["mtcars", "iris", "diamonds"]
1121
),
1122
ui.input_checkbox_group(
1123
"variables",
1124
"Select variables:",
1125
choices=["var1", "var2", "var3"],
1126
selected=["var1"]
1127
),
1128
ui.input_slider(
1129
"sample_size",
1130
"Sample size:",
1131
min=10, max=1000, value=100
1132
),
1133
ui.input_action_button(
1134
"update",
1135
"Update Analysis",
1136
class_="btn-primary"
1137
)
1138
),
1139
1140
# Main content area
1141
ui.h1("Data Analysis Dashboard"),
1142
1143
ui.layout_columns(
1144
# Left column - data display
1145
ui.card(
1146
ui.card_header(
1147
ui.tooltip(
1148
ui.h4("Dataset Preview"),
1149
"Shows first few rows of selected dataset"
1150
)
1151
),
1152
ui.output_data_frame("data_preview"),
1153
full_screen=True
1154
),
1155
1156
# Right column - visualization
1157
ui.card(
1158
ui.card_header("Visualization"),
1159
ui.output_plot(
1160
"main_plot",
1161
click=True,
1162
brush=True,
1163
height="400px"
1164
)
1165
)
1166
),
1167
1168
# Bottom section - detailed analysis
1169
ui.navset_tab(
1170
ui.nav_panel(
1171
"Summary Statistics",
1172
ui.output_table("summary_stats")
1173
),
1174
ui.nav_panel(
1175
"Correlation Analysis",
1176
ui.output_plot("correlation_plot")
1177
),
1178
ui.nav_panel(
1179
"Export",
1180
ui.h4("Export Options"),
1181
ui.download_button("download_data", "Download Data"),
1182
ui.download_button("download_report", "Download Report")
1183
),
1184
id="analysis_tabs"
1185
),
1186
1187
title="Advanced Analytics"
1188
)
1189
```