3 <html lang=
"en" class=
"no-js">
7 <meta name=
"viewport" content=
"width=device-width,initial-scale=1">
12 <link rel=
"icon" href=
"../../assets/default.favicon.ico">
13 <meta name=
"generator" content=
"mkdocs-1.1.2, mkdocs-material-7.1.0">
17 <title>User Interface - WoltLab Suite Documentation
</title>
21 <link rel=
"stylesheet" href=
"../../assets/stylesheets/main.33e2939f.min.css">
24 <link rel=
"stylesheet" href=
"../../assets/stylesheets/palette.ef6f36e2.min.css">
28 <meta name=
"theme-color" content=
"#009485">
38 <link rel=
"stylesheet" href=
"../../stylesheets/extra.css">
52 <body dir=
"ltr" data-md-color-scheme=
"" data-md-color-primary=
"teal" data-md-color-accent=
"">
55 <script>function __prefix(e){return new URL(
"../..",location).pathname+
"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}
</script>
57 <input class=
"md-toggle" data-md-toggle=
"drawer" type=
"checkbox" id=
"__drawer" autocomplete=
"off">
58 <input class=
"md-toggle" data-md-toggle=
"search" type=
"checkbox" id=
"__search" autocomplete=
"off">
59 <label class=
"md-overlay" for=
"__drawer"></label>
60 <div data-md-component=
"skip">
63 <a href=
"#user-interface-javascript-api" class=
"md-skip">
68 <div data-md-component=
"announce">
70 <aside class=
"md-announce">
71 <div class=
"md-announce__inner md-grid md-typeset">
73 <a href=
"https://www.woltlab.com">Back to
<strong>woltlab.com
</strong></a>
80 <header class=
"md-header" data-md-component=
"header">
81 <nav class=
"md-header__inner md-grid" aria-label=
"Header">
82 <a href=
"../.." title=
"WoltLab Suite Documentation" class=
"md-header__button md-logo" aria-label=
"WoltLab Suite Documentation" data-md-component=
"logo">
84 <img src=
"../../assets/logo.png" alt=
"logo">
87 <label class=
"md-header__button md-icon" for=
"__drawer">
88 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
90 <div class=
"md-header__title" data-md-component=
"header-title">
91 <div class=
"md-header__ellipsis">
92 <div class=
"md-header__topic">
93 <span class=
"md-ellipsis">
94 WoltLab Suite Documentation
97 <div class=
"md-header__topic" data-md-component=
"header-topic">
98 <span class=
"md-ellipsis">
109 <label class=
"md-header__button md-icon" for=
"__search">
110 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
113 <div class=
"md-search" data-md-component=
"search" role=
"dialog">
114 <label class=
"md-search__overlay" for=
"__search"></label>
115 <div class=
"md-search__inner" role=
"search">
116 <form class=
"md-search__form" name=
"search">
117 <input type=
"text" class=
"md-search__input" name=
"query" aria-label=
"Search" placeholder=
"Search" autocapitalize=
"off" autocorrect=
"off" autocomplete=
"off" spellcheck=
"false" data-md-component=
"search-query" data-md-state=
"active" required
>
118 <label class=
"md-search__icon md-icon" for=
"__search">
119 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
120 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
122 <button type=
"reset" class=
"md-search__icon md-icon" aria-label=
"Clear" tabindex=
"-1">
123 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
126 <div class=
"md-search__output">
127 <div class=
"md-search__scrollwrap" data-md-scrollfix
>
128 <div class=
"md-search-result" data-md-component=
"search-result">
129 <div class=
"md-search-result__meta">
132 <ol class=
"md-search-result__list"></ol>
140 <div class=
"md-header__source">
142 <a href=
"https://github.com/WoltLab/docs.woltlab.com/" title=
"Go to repository" class=
"md-source" data-md-component=
"source">
143 <div class=
"md-source__icon md-icon">
145 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 448 512"><path d=
"M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
147 <div class=
"md-source__repository">
156 <div class=
"md-container" data-md-component=
"container">
161 <main class=
"md-main" data-md-component=
"main">
162 <div class=
"md-main__inner md-grid">
166 <div class=
"md-sidebar md-sidebar--primary" data-md-component=
"sidebar" data-md-type=
"navigation" >
167 <div class=
"md-sidebar__scrollwrap">
168 <div class=
"md-sidebar__inner">
172 <nav class=
"md-nav md-nav--primary" aria-label=
"Navigation" data-md-level=
"0">
173 <label class=
"md-nav__title" for=
"__drawer">
174 <a href=
"../.." title=
"WoltLab Suite Documentation" class=
"md-nav__button md-logo" aria-label=
"WoltLab Suite Documentation" data-md-component=
"logo">
176 <img src=
"../../assets/logo.png" alt=
"logo">
179 WoltLab Suite Documentation
182 <div class=
"md-nav__source">
184 <a href=
"https://github.com/WoltLab/docs.woltlab.com/" title=
"Go to repository" class=
"md-source" data-md-component=
"source">
185 <div class=
"md-source__icon md-icon">
187 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 448 512"><path d=
"M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
189 <div class=
"md-source__repository">
195 <ul class=
"md-nav__list" data-md-scrollfix
>
204 <li class=
"md-nav__item">
205 <a href=
"../../getting-started/" class=
"md-nav__link">
220 <li class=
"md-nav__item md-nav__item--nested">
223 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_2" type=
"checkbox" id=
"__nav_2" >
225 <label class=
"md-nav__link" for=
"__nav_2">
227 <span class=
"md-nav__icon md-icon"></span>
229 <nav class=
"md-nav" aria-label=
"PHP API" data-md-level=
"1">
230 <label class=
"md-nav__title" for=
"__nav_2">
231 <span class=
"md-nav__icon md-icon"></span>
234 <ul class=
"md-nav__list" data-md-scrollfix
>
240 <li class=
"md-nav__item">
241 <a href=
"../../php/pages/" class=
"md-nav__link">
252 <li class=
"md-nav__item">
253 <a href=
"../../php/database-objects/" class=
"md-nav__link">
264 <li class=
"md-nav__item">
265 <a href=
"../../php/database-access/" class=
"md-nav__link">
276 <li class=
"md-nav__item">
277 <a href=
"../../php/exceptions/" class=
"md-nav__link">
289 <li class=
"md-nav__item md-nav__item--nested">
292 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_2_5" type=
"checkbox" id=
"__nav_2_5" >
294 <label class=
"md-nav__link" for=
"__nav_2_5">
296 <span class=
"md-nav__icon md-icon"></span>
298 <nav class=
"md-nav" aria-label=
"API" data-md-level=
"2">
299 <label class=
"md-nav__title" for=
"__nav_2_5">
300 <span class=
"md-nav__icon md-icon"></span>
303 <ul class=
"md-nav__list" data-md-scrollfix
>
309 <li class=
"md-nav__item">
310 <a href=
"../../php/api/caches/" class=
"md-nav__link">
321 <li class=
"md-nav__item">
322 <a href=
"../../php/api/comments/" class=
"md-nav__link">
333 <li class=
"md-nav__item">
334 <a href=
"../../php/api/cronjobs/" class=
"md-nav__link">
345 <li class=
"md-nav__item">
346 <a href=
"../../php/api/events/" class=
"md-nav__link">
358 <li class=
"md-nav__item md-nav__item--nested">
361 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_2_5_5" type=
"checkbox" id=
"__nav_2_5_5" >
363 <label class=
"md-nav__link" for=
"__nav_2_5_5">
365 <span class=
"md-nav__icon md-icon"></span>
367 <nav class=
"md-nav" aria-label=
"Form Builder" data-md-level=
"3">
368 <label class=
"md-nav__title" for=
"__nav_2_5_5">
369 <span class=
"md-nav__icon md-icon"></span>
372 <ul class=
"md-nav__list" data-md-scrollfix
>
378 <li class=
"md-nav__item">
379 <a href=
"../../php/api/form_builder/overview/" class=
"md-nav__link">
390 <li class=
"md-nav__item">
391 <a href=
"../../php/api/form_builder/structure/" class=
"md-nav__link">
402 <li class=
"md-nav__item">
403 <a href=
"../../php/api/form_builder/form_fields/" class=
"md-nav__link">
414 <li class=
"md-nav__item">
415 <a href=
"../../php/api/form_builder/validation_data/" class=
"md-nav__link">
426 <li class=
"md-nav__item">
427 <a href=
"../../php/api/form_builder/dependencies/" class=
"md-nav__link">
444 <li class=
"md-nav__item">
445 <a href=
"../../php/api/package_installation_plugins/" class=
"md-nav__link">
446 Package Installation Plugins
456 <li class=
"md-nav__item">
457 <a href=
"../../php/api/user_activity_points/" class=
"md-nav__link">
468 <li class=
"md-nav__item">
469 <a href=
"../../php/api/user_notifications/" class=
"md-nav__link">
480 <li class=
"md-nav__item">
481 <a href=
"../../php/api/sitemaps/" class=
"md-nav__link">
498 <li class=
"md-nav__item">
499 <a href=
"../../php/code-style/" class=
"md-nav__link">
510 <li class=
"md-nav__item">
511 <a href=
"../../php/apps/" class=
"md-nav__link">
522 <li class=
"md-nav__item">
523 <a href=
"../../php/gdpr/" class=
"md-nav__link">
544 <li class=
"md-nav__item md-nav__item--nested">
547 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_3" type=
"checkbox" id=
"__nav_3" >
549 <label class=
"md-nav__link" for=
"__nav_3">
550 Languages, Templates & CSS
551 <span class=
"md-nav__icon md-icon"></span>
553 <nav class=
"md-nav" aria-label=
"Languages, Templates & CSS" data-md-level=
"1">
554 <label class=
"md-nav__title" for=
"__nav_3">
555 <span class=
"md-nav__icon md-icon"></span>
556 Languages, Templates & CSS
558 <ul class=
"md-nav__list" data-md-scrollfix
>
564 <li class=
"md-nav__item">
565 <a href=
"../../view/languages/" class=
"md-nav__link">
576 <li class=
"md-nav__item">
577 <a href=
"../../view/templates/" class=
"md-nav__link">
588 <li class=
"md-nav__item">
589 <a href=
"../../view/css/" class=
"md-nav__link">
612 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
615 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_4" type=
"checkbox" id=
"__nav_4" checked
>
617 <label class=
"md-nav__link" for=
"__nav_4">
619 <span class=
"md-nav__icon md-icon"></span>
621 <nav class=
"md-nav" aria-label=
"JavaScript API" data-md-level=
"1">
622 <label class=
"md-nav__title" for=
"__nav_4">
623 <span class=
"md-nav__icon md-icon"></span>
626 <ul class=
"md-nav__list" data-md-scrollfix
>
632 <li class=
"md-nav__item">
633 <a href=
"../general-usage/" class=
"md-nav__link">
647 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
650 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_4_2" type=
"checkbox" id=
"__nav_4_2" checked
>
652 <label class=
"md-nav__link" for=
"__nav_4_2">
654 <span class=
"md-nav__icon md-icon"></span>
656 <nav class=
"md-nav" aria-label=
"New API" data-md-level=
"2">
657 <label class=
"md-nav__title" for=
"__nav_4_2">
658 <span class=
"md-nav__icon md-icon"></span>
661 <ul class=
"md-nav__list" data-md-scrollfix
>
667 <li class=
"md-nav__item">
668 <a href=
"../new-api_writing-a-module/" class=
"md-nav__link">
679 <li class=
"md-nav__item">
680 <a href=
"../new-api_data-structures/" class=
"md-nav__link">
691 <li class=
"md-nav__item">
692 <a href=
"../new-api_core/" class=
"md-nav__link">
703 <li class=
"md-nav__item">
704 <a href=
"../new-api_dom/" class=
"md-nav__link">
715 <li class=
"md-nav__item">
716 <a href=
"../new-api_events/" class=
"md-nav__link">
727 <li class=
"md-nav__item">
728 <a href=
"../new-api_ajax/" class=
"md-nav__link">
739 <li class=
"md-nav__item">
740 <a href=
"../new-api_dialogs/" class=
"md-nav__link">
751 <li class=
"md-nav__item">
752 <a href=
"../new-api_browser/" class=
"md-nav__link">
753 Browser and Screen Sizes
765 <li class=
"md-nav__item md-nav__item--active">
767 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"toc" type=
"checkbox" id=
"__toc">
772 <label class=
"md-nav__link md-nav__link--active" for=
"__toc">
774 <span class=
"md-nav__icon md-icon"></span>
777 <a href=
"./" class=
"md-nav__link md-nav__link--active">
782 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
788 <label class=
"md-nav__title" for=
"__toc">
789 <span class=
"md-nav__icon md-icon"></span>
792 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
794 <li class=
"md-nav__item">
795 <a href=
"#uialignment" class=
"md-nav__link">
799 <nav class=
"md-nav" aria-label=
"Ui/Alignment">
800 <ul class=
"md-nav__list">
802 <li class=
"md-nav__item">
803 <a href=
"#setelement-element-referenceelement-element-options-object" class=
"md-nav__link">
804 set(element: Element, referenceElement: Element, options: Object)
807 <nav class=
"md-nav" aria-label=
"set(element: Element, referenceElement: Element, options: Object)">
808 <ul class=
"md-nav__list">
810 <li class=
"md-nav__item">
811 <a href=
"#verticaloffset-number" class=
"md-nav__link">
812 verticalOffset: number
817 <li class=
"md-nav__item">
818 <a href=
"#pointer-boolean" class=
"md-nav__link">
824 <li class=
"md-nav__item">
825 <a href=
"#pointeroffset-number" class=
"md-nav__link">
826 pointerOffset: number
831 <li class=
"md-nav__item">
832 <a href=
"#pointerclassnames-string" class=
"md-nav__link">
833 pointerClassNames: string[]
838 <li class=
"md-nav__item">
839 <a href=
"#refdimensionselement-element" class=
"md-nav__link">
840 refDimensionsElement: Element
845 <li class=
"md-nav__item">
846 <a href=
"#horizontal-string" class=
"md-nav__link">
852 <li class=
"md-nav__item">
853 <a href=
"#vertical-string" class=
"md-nav__link">
859 <li class=
"md-nav__item">
860 <a href=
"#allowflip-string" class=
"md-nav__link">
876 <li class=
"md-nav__item">
877 <a href=
"#uicloseoverlay" class=
"md-nav__link">
881 <nav class=
"md-nav" aria-label=
"Ui/CloseOverlay">
882 <ul class=
"md-nav__list">
884 <li class=
"md-nav__item">
885 <a href=
"#addidentifier-string-callback-void" class=
"md-nav__link">
886 add(identifier: string, callback: () =
> void)
896 <li class=
"md-nav__item">
897 <a href=
"#uiconfirmation" class=
"md-nav__link">
901 <nav class=
"md-nav" aria-label=
"Ui/Confirmation">
902 <ul class=
"md-nav__list">
904 <li class=
"md-nav__item">
905 <a href=
"#showoptions-object" class=
"md-nav__link">
906 show(options: Object)
909 <nav class=
"md-nav" aria-label=
"show(options: Object)">
910 <ul class=
"md-nav__list">
912 <li class=
"md-nav__item">
913 <a href=
"#cancel-parameters-object-void" class=
"md-nav__link">
914 cancel: (parameters: Object) =
> void
919 <li class=
"md-nav__item">
920 <a href=
"#confirm-parameters-object-void" class=
"md-nav__link">
921 confirm: (parameters: Object) =
> void
926 <li class=
"md-nav__item">
927 <a href=
"#message-string" class=
"md-nav__link">
933 <li class=
"md-nav__item">
934 <a href=
"#messageishtml" class=
"md-nav__link">
940 <li class=
"md-nav__item">
941 <a href=
"#parameters-object" class=
"md-nav__link">
947 <li class=
"md-nav__item">
948 <a href=
"#template-string" class=
"md-nav__link">
964 <li class=
"md-nav__item">
965 <a href=
"#uinotification" class=
"md-nav__link">
969 <nav class=
"md-nav" aria-label=
"Ui/Notification">
970 <ul class=
"md-nav__list">
972 <li class=
"md-nav__item">
973 <a href=
"#showmessage-string-callback-void-cssclassname-string" class=
"md-nav__link">
974 show(message: string, callback?: () =
> void, cssClassName?: string)
1002 <li class=
"md-nav__item">
1003 <a href=
"../legacy-api/" class=
"md-nav__link">
1014 <li class=
"md-nav__item">
1015 <a href=
"../helper-functions/" class=
"md-nav__link">
1026 <li class=
"md-nav__item">
1027 <a href=
"../code-snippets/" class=
"md-nav__link">
1048 <li class=
"md-nav__item md-nav__item--nested">
1051 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_5" type=
"checkbox" id=
"__nav_5" >
1053 <label class=
"md-nav__link" for=
"__nav_5">
1055 <span class=
"md-nav__icon md-icon"></span>
1057 <nav class=
"md-nav" aria-label=
"Package Components" data-md-level=
"1">
1058 <label class=
"md-nav__title" for=
"__nav_5">
1059 <span class=
"md-nav__icon md-icon"></span>
1062 <ul class=
"md-nav__list" data-md-scrollfix
>
1068 <li class=
"md-nav__item">
1069 <a href=
"../../package/package-xml/" class=
"md-nav__link">
1081 <li class=
"md-nav__item md-nav__item--nested">
1084 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_5_2" type=
"checkbox" id=
"__nav_5_2" >
1086 <label class=
"md-nav__link" for=
"__nav_5_2">
1088 <span class=
"md-nav__icon md-icon"></span>
1090 <nav class=
"md-nav" aria-label=
"PIPs" data-md-level=
"2">
1091 <label class=
"md-nav__title" for=
"__nav_5_2">
1092 <span class=
"md-nav__icon md-icon"></span>
1095 <ul class=
"md-nav__list" data-md-scrollfix
>
1101 <li class=
"md-nav__item">
1102 <a href=
"../../package/pip/" class=
"md-nav__link">
1113 <li class=
"md-nav__item">
1114 <a href=
"../../package/pip/acl-option/" class=
"md-nav__link">
1125 <li class=
"md-nav__item">
1126 <a href=
"../../package/pip/acp-menu/" class=
"md-nav__link">
1137 <li class=
"md-nav__item">
1138 <a href=
"../../package/pip/acp-search-provider/" class=
"md-nav__link">
1149 <li class=
"md-nav__item">
1150 <a href=
"../../package/pip/acp-template/" class=
"md-nav__link">
1161 <li class=
"md-nav__item">
1162 <a href=
"../../package/pip/bbcode/" class=
"md-nav__link">
1173 <li class=
"md-nav__item">
1174 <a href=
"../../package/pip/box/" class=
"md-nav__link">
1185 <li class=
"md-nav__item">
1186 <a href=
"../../package/pip/clipboard-action/" class=
"md-nav__link">
1197 <li class=
"md-nav__item">
1198 <a href=
"../../package/pip/core-object/" class=
"md-nav__link">
1209 <li class=
"md-nav__item">
1210 <a href=
"../../package/pip/cronjob/" class=
"md-nav__link">
1221 <li class=
"md-nav__item">
1222 <a href=
"../../package/pip/event-listener/" class=
"md-nav__link">
1233 <li class=
"md-nav__item">
1234 <a href=
"../../package/pip/file/" class=
"md-nav__link">
1245 <li class=
"md-nav__item">
1246 <a href=
"../../package/pip/language/" class=
"md-nav__link">
1257 <li class=
"md-nav__item">
1258 <a href=
"../../package/pip/media-provider/" class=
"md-nav__link">
1269 <li class=
"md-nav__item">
1270 <a href=
"../../package/pip/menu/" class=
"md-nav__link">
1281 <li class=
"md-nav__item">
1282 <a href=
"../../package/pip/menu-item/" class=
"md-nav__link">
1293 <li class=
"md-nav__item">
1294 <a href=
"../../package/pip/object-type/" class=
"md-nav__link">
1305 <li class=
"md-nav__item">
1306 <a href=
"../../package/pip/object-type-definition/" class=
"md-nav__link">
1307 objectTypeDefinition
1317 <li class=
"md-nav__item">
1318 <a href=
"../../package/pip/option/" class=
"md-nav__link">
1329 <li class=
"md-nav__item">
1330 <a href=
"../../package/pip/page/" class=
"md-nav__link">
1341 <li class=
"md-nav__item">
1342 <a href=
"../../package/pip/pip/" class=
"md-nav__link">
1353 <li class=
"md-nav__item">
1354 <a href=
"../../package/pip/script/" class=
"md-nav__link">
1365 <li class=
"md-nav__item">
1366 <a href=
"../../package/pip/smiley/" class=
"md-nav__link">
1377 <li class=
"md-nav__item">
1378 <a href=
"../../package/pip/sql/" class=
"md-nav__link">
1389 <li class=
"md-nav__item">
1390 <a href=
"../../package/pip/style/" class=
"md-nav__link">
1401 <li class=
"md-nav__item">
1402 <a href=
"../../package/pip/template/" class=
"md-nav__link">
1413 <li class=
"md-nav__item">
1414 <a href=
"../../package/pip/template-listener/" class=
"md-nav__link">
1425 <li class=
"md-nav__item">
1426 <a href=
"../../package/pip/user-group-option/" class=
"md-nav__link">
1437 <li class=
"md-nav__item">
1438 <a href=
"../../package/pip/user-menu/" class=
"md-nav__link">
1449 <li class=
"md-nav__item">
1450 <a href=
"../../package/pip/user-notification-event/" class=
"md-nav__link">
1451 userNotificationEvent
1461 <li class=
"md-nav__item">
1462 <a href=
"../../package/pip/user-option/" class=
"md-nav__link">
1473 <li class=
"md-nav__item">
1474 <a href=
"../../package/pip/user-profile-menu/" class=
"md-nav__link">
1491 <li class=
"md-nav__item">
1492 <a href=
"../../package/database-php-api/" class=
"md-nav__link">
1513 <li class=
"md-nav__item md-nav__item--nested">
1516 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6" type=
"checkbox" id=
"__nav_6" >
1518 <label class=
"md-nav__link" for=
"__nav_6">
1520 <span class=
"md-nav__icon md-icon"></span>
1522 <nav class=
"md-nav" aria-label=
"Migration" data-md-level=
"1">
1523 <label class=
"md-nav__title" for=
"__nav_6">
1524 <span class=
"md-nav__icon md-icon"></span>
1527 <ul class=
"md-nav__list" data-md-scrollfix
>
1534 <li class=
"md-nav__item md-nav__item--nested">
1537 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_1" type=
"checkbox" id=
"__nav_6_1" >
1539 <label class=
"md-nav__link" for=
"__nav_6_1">
1540 Migrating from WSC
5.3
1541 <span class=
"md-nav__icon md-icon"></span>
1543 <nav class=
"md-nav" aria-label=
"Migrating from WSC 5.3" data-md-level=
"2">
1544 <label class=
"md-nav__title" for=
"__nav_6_1">
1545 <span class=
"md-nav__icon md-icon"></span>
1546 Migrating from WSC
5.3
1548 <ul class=
"md-nav__list" data-md-scrollfix
>
1554 <li class=
"md-nav__item">
1555 <a href=
"../../migration/wsc53/php/" class=
"md-nav__link">
1566 <li class=
"md-nav__item">
1567 <a href=
"../../migration/wsc53/session/" class=
"md-nav__link">
1568 Session Handling and Authentication
1578 <li class=
"md-nav__item">
1579 <a href=
"../../migration/wsc53/javascript/" class=
"md-nav__link">
1590 <li class=
"md-nav__item">
1591 <a href=
"../../migration/wsc53/templates/" class=
"md-nav__link">
1602 <li class=
"md-nav__item">
1603 <a href=
"../../migration/wsc53/libraries/" class=
"md-nav__link">
1604 Third Party Libraries
1621 <li class=
"md-nav__item md-nav__item--nested">
1624 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_2" type=
"checkbox" id=
"__nav_6_2" >
1626 <label class=
"md-nav__link" for=
"__nav_6_2">
1627 Migrating from WSC
5.2
1628 <span class=
"md-nav__icon md-icon"></span>
1630 <nav class=
"md-nav" aria-label=
"Migrating from WSC 5.2" data-md-level=
"2">
1631 <label class=
"md-nav__title" for=
"__nav_6_2">
1632 <span class=
"md-nav__icon md-icon"></span>
1633 Migrating from WSC
5.2
1635 <ul class=
"md-nav__list" data-md-scrollfix
>
1641 <li class=
"md-nav__item">
1642 <a href=
"../../migration/wsc52/php/" class=
"md-nav__link">
1653 <li class=
"md-nav__item">
1654 <a href=
"../../migration/wsc52/templates/" class=
"md-nav__link">
1655 Templates and Languages
1665 <li class=
"md-nav__item">
1666 <a href=
"../../migration/wsc52/libraries/" class=
"md-nav__link">
1667 Third Party Libraries
1684 <li class=
"md-nav__item md-nav__item--nested">
1687 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_3" type=
"checkbox" id=
"__nav_6_3" >
1689 <label class=
"md-nav__link" for=
"__nav_6_3">
1690 Migrating from WSC
3.1
1691 <span class=
"md-nav__icon md-icon"></span>
1693 <nav class=
"md-nav" aria-label=
"Migrating from WSC 3.1" data-md-level=
"2">
1694 <label class=
"md-nav__title" for=
"__nav_6_3">
1695 <span class=
"md-nav__icon md-icon"></span>
1696 Migrating from WSC
3.1
1698 <ul class=
"md-nav__list" data-md-scrollfix
>
1704 <li class=
"md-nav__item">
1705 <a href=
"../../migration/wsc31/php/" class=
"md-nav__link">
1723 <li class=
"md-nav__item md-nav__item--nested">
1726 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_4" type=
"checkbox" id=
"__nav_6_4" >
1728 <label class=
"md-nav__link" for=
"__nav_6_4">
1729 Migrating from WSC
3.0
1730 <span class=
"md-nav__icon md-icon"></span>
1732 <nav class=
"md-nav" aria-label=
"Migrating from WSC 3.0" data-md-level=
"2">
1733 <label class=
"md-nav__title" for=
"__nav_6_4">
1734 <span class=
"md-nav__icon md-icon"></span>
1735 Migrating from WSC
3.0
1737 <ul class=
"md-nav__list" data-md-scrollfix
>
1743 <li class=
"md-nav__item">
1744 <a href=
"../../migration/wsc30/php/" class=
"md-nav__link">
1755 <li class=
"md-nav__item">
1756 <a href=
"../../migration/wsc30/javascript/" class=
"md-nav__link">
1767 <li class=
"md-nav__item">
1768 <a href=
"../../migration/wsc30/templates/" class=
"md-nav__link">
1779 <li class=
"md-nav__item">
1780 <a href=
"../../migration/wsc30/css/" class=
"md-nav__link">
1791 <li class=
"md-nav__item">
1792 <a href=
"../../migration/wsc30/package/" class=
"md-nav__link">
1810 <li class=
"md-nav__item md-nav__item--nested">
1813 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_6_5" type=
"checkbox" id=
"__nav_6_5" >
1815 <label class=
"md-nav__link" for=
"__nav_6_5">
1816 Migrating from WCF
2.1
1817 <span class=
"md-nav__icon md-icon"></span>
1819 <nav class=
"md-nav" aria-label=
"Migrating from WCF 2.1" data-md-level=
"2">
1820 <label class=
"md-nav__title" for=
"__nav_6_5">
1821 <span class=
"md-nav__icon md-icon"></span>
1822 Migrating from WCF
2.1
1824 <ul class=
"md-nav__list" data-md-scrollfix
>
1830 <li class=
"md-nav__item">
1831 <a href=
"../../migration/wcf21/php/" class=
"md-nav__link">
1842 <li class=
"md-nav__item">
1843 <a href=
"../../migration/wcf21/templates/" class=
"md-nav__link">
1854 <li class=
"md-nav__item">
1855 <a href=
"../../migration/wcf21/css/" class=
"md-nav__link">
1866 <li class=
"md-nav__item">
1867 <a href=
"../../migration/wcf21/package/" class=
"md-nav__link">
1894 <li class=
"md-nav__item md-nav__item--nested">
1897 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_7" type=
"checkbox" id=
"__nav_7" >
1899 <label class=
"md-nav__link" for=
"__nav_7">
1901 <span class=
"md-nav__icon md-icon"></span>
1903 <nav class=
"md-nav" aria-label=
"Tutorials" data-md-level=
"1">
1904 <label class=
"md-nav__title" for=
"__nav_7">
1905 <span class=
"md-nav__icon md-icon"></span>
1908 <ul class=
"md-nav__list" data-md-scrollfix
>
1915 <li class=
"md-nav__item md-nav__item--nested">
1918 <input class=
"md-nav__toggle md-toggle" data-md-toggle=
"__nav_7_1" type=
"checkbox" id=
"__nav_7_1" >
1920 <label class=
"md-nav__link" for=
"__nav_7_1">
1922 <span class=
"md-nav__icon md-icon"></span>
1924 <nav class=
"md-nav" aria-label=
"Tutorial Series" data-md-level=
"2">
1925 <label class=
"md-nav__title" for=
"__nav_7_1">
1926 <span class=
"md-nav__icon md-icon"></span>
1929 <ul class=
"md-nav__list" data-md-scrollfix
>
1935 <li class=
"md-nav__item">
1936 <a href=
"../../tutorial/series/overview/" class=
"md-nav__link">
1947 <li class=
"md-nav__item">
1948 <a href=
"../../tutorial/series/part_1/" class=
"md-nav__link">
1959 <li class=
"md-nav__item">
1960 <a href=
"../../tutorial/series/part_2/" class=
"md-nav__link">
1971 <li class=
"md-nav__item">
1972 <a href=
"../../tutorial/series/part_3/" class=
"md-nav__link">
1999 <div class=
"md-sidebar md-sidebar--secondary" data-md-component=
"sidebar" data-md-type=
"toc" >
2000 <div class=
"md-sidebar__scrollwrap">
2001 <div class=
"md-sidebar__inner">
2003 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
2009 <label class=
"md-nav__title" for=
"__toc">
2010 <span class=
"md-nav__icon md-icon"></span>
2013 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
2015 <li class=
"md-nav__item">
2016 <a href=
"#uialignment" class=
"md-nav__link">
2020 <nav class=
"md-nav" aria-label=
"Ui/Alignment">
2021 <ul class=
"md-nav__list">
2023 <li class=
"md-nav__item">
2024 <a href=
"#setelement-element-referenceelement-element-options-object" class=
"md-nav__link">
2025 set(element: Element, referenceElement: Element, options: Object)
2028 <nav class=
"md-nav" aria-label=
"set(element: Element, referenceElement: Element, options: Object)">
2029 <ul class=
"md-nav__list">
2031 <li class=
"md-nav__item">
2032 <a href=
"#verticaloffset-number" class=
"md-nav__link">
2033 verticalOffset: number
2038 <li class=
"md-nav__item">
2039 <a href=
"#pointer-boolean" class=
"md-nav__link">
2045 <li class=
"md-nav__item">
2046 <a href=
"#pointeroffset-number" class=
"md-nav__link">
2047 pointerOffset: number
2052 <li class=
"md-nav__item">
2053 <a href=
"#pointerclassnames-string" class=
"md-nav__link">
2054 pointerClassNames: string[]
2059 <li class=
"md-nav__item">
2060 <a href=
"#refdimensionselement-element" class=
"md-nav__link">
2061 refDimensionsElement: Element
2066 <li class=
"md-nav__item">
2067 <a href=
"#horizontal-string" class=
"md-nav__link">
2073 <li class=
"md-nav__item">
2074 <a href=
"#vertical-string" class=
"md-nav__link">
2080 <li class=
"md-nav__item">
2081 <a href=
"#allowflip-string" class=
"md-nav__link">
2097 <li class=
"md-nav__item">
2098 <a href=
"#uicloseoverlay" class=
"md-nav__link">
2102 <nav class=
"md-nav" aria-label=
"Ui/CloseOverlay">
2103 <ul class=
"md-nav__list">
2105 <li class=
"md-nav__item">
2106 <a href=
"#addidentifier-string-callback-void" class=
"md-nav__link">
2107 add(identifier: string, callback: () =
> void)
2117 <li class=
"md-nav__item">
2118 <a href=
"#uiconfirmation" class=
"md-nav__link">
2122 <nav class=
"md-nav" aria-label=
"Ui/Confirmation">
2123 <ul class=
"md-nav__list">
2125 <li class=
"md-nav__item">
2126 <a href=
"#showoptions-object" class=
"md-nav__link">
2127 show(options: Object)
2130 <nav class=
"md-nav" aria-label=
"show(options: Object)">
2131 <ul class=
"md-nav__list">
2133 <li class=
"md-nav__item">
2134 <a href=
"#cancel-parameters-object-void" class=
"md-nav__link">
2135 cancel: (parameters: Object) =
> void
2140 <li class=
"md-nav__item">
2141 <a href=
"#confirm-parameters-object-void" class=
"md-nav__link">
2142 confirm: (parameters: Object) =
> void
2147 <li class=
"md-nav__item">
2148 <a href=
"#message-string" class=
"md-nav__link">
2154 <li class=
"md-nav__item">
2155 <a href=
"#messageishtml" class=
"md-nav__link">
2161 <li class=
"md-nav__item">
2162 <a href=
"#parameters-object" class=
"md-nav__link">
2168 <li class=
"md-nav__item">
2169 <a href=
"#template-string" class=
"md-nav__link">
2185 <li class=
"md-nav__item">
2186 <a href=
"#uinotification" class=
"md-nav__link">
2190 <nav class=
"md-nav" aria-label=
"Ui/Notification">
2191 <ul class=
"md-nav__list">
2193 <li class=
"md-nav__item">
2194 <a href=
"#showmessage-string-callback-void-cssclassname-string" class=
"md-nav__link">
2195 show(message: string, callback?: () =
> void, cssClassName?: string)
2213 <div class=
"md-content" data-md-component=
"content">
2214 <article class=
"md-content__inner md-typeset">
2217 <a href=
"https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/new-api_ui.md" title=
"Edit this page" class=
"md-content__button md-icon">
2218 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2222 <h1 id=
"user-interface-javascript-api">User Interface - JavaScript API
<a class=
"headerlink" href=
"#user-interface-javascript-api" title=
"Permanent link">#
</a></h1>
2223 <h2 id=
"uialignment"><code>Ui/Alignment
</code><a class=
"headerlink" href=
"#uialignment" title=
"Permanent link">#
</a></h2>
2224 <p>Calculates the alignment of one element relative to another element, with support
2225 for boundary constraints, alignment restrictions and additional pointer elements.
</p>
2226 <h3 id=
"setelement-element-referenceelement-element-options-object"><code>set(element: Element, referenceElement: Element, options: Object)
</code><a class=
"headerlink" href=
"#setelement-element-referenceelement-element-options-object" title=
"Permanent link">#
</a></h3>
2227 <p>Calculates and sets the alignment of the element
<code>element
</code>.
</p>
2228 <h4 id=
"verticaloffset-number"><code>verticalOffset: number
</code><a class=
"headerlink" href=
"#verticaloffset-number" title=
"Permanent link">#
</a></h4>
2229 <p><em>Defaults to
<code>0</code>.
</em></p>
2230 <p>Creates a gap between the element and the reference element, in pixels.
</p>
2231 <h4 id=
"pointer-boolean"><code>pointer: boolean
</code><a class=
"headerlink" href=
"#pointer-boolean" title=
"Permanent link">#
</a></h4>
2232 <p><em>Defaults to
<code>false
</code>.
</em></p>
2233 <p>Sets the position of the pointer element, requires an existing child of the
2234 element with the CSS class
<code>.elementPointer
</code>.
</p>
2235 <h4 id=
"pointeroffset-number"><code>pointerOffset: number
</code><a class=
"headerlink" href=
"#pointeroffset-number" title=
"Permanent link">#
</a></h4>
2236 <p><em>Defaults to
<code>4</code>.
</em></p>
2237 <p>The margin from the left/right edge of the element and is used to avoid the
2238 arrow from being placed right at the edge.
</p>
2239 <p>Does not apply when aligning the element to the reference elemnent's center.
</p>
2240 <h4 id=
"pointerclassnames-string"><code>pointerClassNames: string[]
</code><a class=
"headerlink" href=
"#pointerclassnames-string" title=
"Permanent link">#
</a></h4>
2241 <p><em>Defaults to
<code>[]
</code>.
</em></p>
2242 <p>If your element uses CSS-only pointers, such as using the
<code>::before
</code> or
<code>::after
</code>
2243 pseudo selectors, you can specifiy two separate CSS class names that control the
2246 <li><code>pointerClassNames[
0]
</code> is applied to the element when the pointer is displayed
2248 <li><code>pointerClassNames[
1]
</code> is used to align the pointer to the right side of the
2251 <h4 id=
"refdimensionselement-element"><code>refDimensionsElement: Element
</code><a class=
"headerlink" href=
"#refdimensionselement-element" title=
"Permanent link">#
</a></h4>
2252 <p><em>Defaults to
<code>null
</code>.
</em></p>
2253 <p>An alternative element that will be used to determine the position and dimensions
2254 of the reference element. This can be useful if you reference element is contained
2255 in a wrapper element with alternating dimensions.
</p>
2256 <h4 id=
"horizontal-string"><code>horizontal: string
</code><a class=
"headerlink" href=
"#horizontal-string" title=
"Permanent link">#
</a></h4>
2257 <div class=
"admonition info">
2258 <p class=
"admonition-title">This value is automatically flipped for RTL (right-to-left) languages,
<code>left
</code> is changed into
<code>right
</code> and vice versa.
</p>
2260 <p><em>Defaults to
<code>"left"</code>.
</em></p>
2261 <p>Sets the prefered alignment, accepts either
<code>left
</code> or
<code>right
</code>. The value
<code>left
</code>
2262 instructs the module to align the element with the left boundary of the reference
2264 <p>The
<code>horizontal
</code> alignment is used as the default and a flip only occurs, if there
2265 is not enough space in the desired direction. If the element exceeds the boundaries
2266 in both directions, the value of
<code>horizontal
</code> is used.
</p>
2267 <h4 id=
"vertical-string"><code>vertical: string
</code><a class=
"headerlink" href=
"#vertical-string" title=
"Permanent link">#
</a></h4>
2268 <p><em>Defaults to
<code>"bottom"</code>.
</em></p>
2269 <p>Sets the prefered alignment, accepts either
<code>bottom
</code> or
<code>top
</code>. The value
<code>bottom
</code>
2270 instructs the module to align the element below the reference element.
</p>
2271 <p>The
<code>vertical
</code> alignment is used as the default and a flip only occurs, if there
2272 is not enough space in the desired direction. If the element exceeds the boundaries
2273 in both directions, the value of
<code>vertical
</code> is used.
</p>
2274 <h4 id=
"allowflip-string"><code>allowFlip: string
</code><a class=
"headerlink" href=
"#allowflip-string" title=
"Permanent link">#
</a></h4>
2275 <div class=
"admonition info">
2276 <p class=
"admonition-title">The value for
<code>horizontal
</code> is automatically flipped for RTL (right-to-left) languages,
<code>left
</code> is changed into
<code>right
</code> and vice versa. This setting only controls the behavior when violating space constraints, therefore the aforementioned transformation is always applied.
</p>
2278 <p><em>Defaults to
<code>"both"</code>.
</em></p>
2279 <p>Restricts the automatic alignment flipping if the element exceeds the window
2280 boundaries in the instructed direction.
</p>
2282 <li><code>both
</code> - No restrictions.
</li>
2283 <li><code>horizontal
</code> - Element can be aligned with the left
<em>or
</em> the right boundary of
2284 the reference element, but the vertical position is fixed.
</li>
2285 <li><code>vertical
</code> - Element can be aligned below
<em>or
</em> above the reference element,
2286 but the vertical position is fixed.
</li>
2287 <li><code>none
</code> - No flipping can occur, the element will be aligned regardless of
2288 any space constraints.
</li>
2290 <h2 id=
"uicloseoverlay"><code>Ui/CloseOverlay
</code><a class=
"headerlink" href=
"#uicloseoverlay" title=
"Permanent link">#
</a></h2>
2291 <p>Register elements that should be closed when the user clicks anywhere else, such
2292 as drop-down menus or tooltips.
</p>
2293 <div class=
"highlight"><pre><span></span><code><span class=
"nx">require
</span><span class=
"p">([
</span><span class=
"s2">"Ui/CloseOverlay
"</span><span class=
"p">],
</span> <span class=
"kd">function
</span><span class=
"p">(
</span><span class=
"nx">UiCloseOverlay
</span><span class=
"p">)
</span> <span class=
"p">{
</span>
2294 <span class=
"nx">UiCloseOverlay
</span><span class=
"p">.
</span><span class=
"nx">add
</span><span class=
"p">(
</span><span class=
"s2">"App/Foo
"</span><span class=
"p">,
</span> <span class=
"kd">function
</span><span class=
"p">()
</span> <span class=
"p">{
</span>
2295 <span class=
"c1">// invoked, close something
</span>
2296 <span class=
"p">});
</span>
2297 <span class=
"p">});
</span>
2299 <h3 id=
"addidentifier-string-callback-void"><code>add(identifier: string, callback: () =
> void)
</code><a class=
"headerlink" href=
"#addidentifier-string-callback-void" title=
"Permanent link">#
</a></h3>
2300 <p>Adds a callback that will be invoked when the user clicks anywhere else.
</p>
2301 <h2 id=
"uiconfirmation"><code>Ui/Confirmation
</code><a class=
"headerlink" href=
"#uiconfirmation" title=
"Permanent link">#
</a></h2>
2302 <p>Prompt the user to make a decision before carrying out an action, such as a safety
2303 warning before permanently deleting content.
</p>
2304 <div class=
"highlight"><pre><span></span><code><span class=
"nx">require
</span><span class=
"p">([
</span><span class=
"s2">"Ui/Confirmation
"</span><span class=
"p">],
</span> <span class=
"kd">function
</span><span class=
"p">(
</span><span class=
"nx">UiConfirmation
</span><span class=
"p">)
</span> <span class=
"p">{
</span>
2305 <span class=
"nx">UiConfirmation
</span><span class=
"p">.
</span><span class=
"nx">show
</span><span class=
"p">({
</span>
2306 <span class=
"nx">confirm
</span><span class=
"o">:
</span> <span class=
"kd">function
</span><span class=
"p">()
</span> <span class=
"p">{
</span>
2307 <span class=
"c1">// the user has confirmed the dialog
</span>
2308 <span class=
"p">},
</span>
2309 <span class=
"nx">message
</span><span class=
"o">:
</span> <span class=
"s2">"Do you really want to continue?
"</span>
2310 <span class=
"p">});
</span>
2311 <span class=
"p">});
</span>
2313 <h3 id=
"showoptions-object"><code>show(options: Object)
</code><a class=
"headerlink" href=
"#showoptions-object" title=
"Permanent link">#
</a></h3>
2314 <p>Displays a dialog overlay with actions buttons to confirm or reject the dialog.
</p>
2315 <h4 id=
"cancel-parameters-object-void"><code>cancel: (parameters: Object) =
> void
</code><a class=
"headerlink" href=
"#cancel-parameters-object-void" title=
"Permanent link">#
</a></h4>
2316 <p><em>Defaults to
<code>null
</code>.
</em></p>
2317 <p>Callback that is invoked when the dialog was rejected.
</p>
2318 <h4 id=
"confirm-parameters-object-void"><code>confirm: (parameters: Object) =
> void
</code><a class=
"headerlink" href=
"#confirm-parameters-object-void" title=
"Permanent link">#
</a></h4>
2319 <p><em>Defaults to
<code>null
</code>.
</em></p>
2320 <p>Callback that is invoked when the user has confirmed the dialog.
</p>
2321 <h4 id=
"message-string"><code>message: string
</code><a class=
"headerlink" href=
"#message-string" title=
"Permanent link">#
</a></h4>
2322 <p><em>Defaults to '
""'.
</em></p>
2323 <p>Text that is displayed in the content area of the dialog, optionally this can
2324 be HTML, but this requires
<code>messageIsHtml
</code> to be enabled.
</p>
2325 <h4 id=
"messageishtml"><code>messageIsHtml
</code><a class=
"headerlink" href=
"#messageishtml" title=
"Permanent link">#
</a></h4>
2326 <p><em>Defaults to
<code>false
</code>.
</em></p>
2327 <p>The
<code>message
</code> option is interpreted as text-only, setting this option to
<code>true
</code>
2328 will cause the
<code>message
</code> to be evaluated as HTML.
</p>
2329 <h4 id=
"parameters-object"><code>parameters: Object
</code><a class=
"headerlink" href=
"#parameters-object" title=
"Permanent link">#
</a></h4>
2330 <p>Optional list of parameter options that will be passed to the
<code>cancel()
</code> and
2331 <code>confirm()
</code> callbacks.
</p>
2332 <h4 id=
"template-string"><code>template: string
</code><a class=
"headerlink" href=
"#template-string" title=
"Permanent link">#
</a></h4>
2333 <p>An optional HTML template that will be inserted into the dialog content area,
2334 but after the
<code>message
</code> section.
</p>
2335 <h2 id=
"uinotification"><code>Ui/Notification
</code><a class=
"headerlink" href=
"#uinotification" title=
"Permanent link">#
</a></h2>
2336 <p>Displays a simple notification at the very top of the window, such as a success
2337 message for Ajax based actions.
</p>
2338 <div class=
"highlight"><pre><span></span><code><span class=
"nx">require
</span><span class=
"p">([
</span><span class=
"s2">"Ui/Notification
"</span><span class=
"p">],
</span> <span class=
"kd">function
</span><span class=
"p">(
</span><span class=
"nx">UiNotification
</span><span class=
"p">)
</span> <span class=
"p">{
</span>
2339 <span class=
"nx">UiNotification
</span><span class=
"p">.
</span><span class=
"nx">show
</span><span class=
"p">(
</span>
2340 <span class=
"s2">"Your changes have been saved.
"</span><span class=
"p">,
</span>
2341 <span class=
"kd">function
</span><span class=
"p">()
</span> <span class=
"p">{
</span>
2342 <span class=
"c1">// this callback will be invoked after
2 seconds
</span>
2343 <span class=
"p">},
</span>
2344 <span class=
"s2">"success
"</span>
2345 <span class=
"p">);
</span>
2346 <span class=
"p">});
</span>
2348 <h3 id=
"showmessage-string-callback-void-cssclassname-string"><code>show(message: string, callback?: () =
> void, cssClassName?: string)
</code><a class=
"headerlink" href=
"#showmessage-string-callback-void-cssclassname-string" title=
"Permanent link">#
</a></h3>
2349 <p>Shows the notification and executes the callback after
2 seconds.
</p>
2355 <div class=
"md-source-date">
2358 Last update:
2021-
01-
08
2377 <footer class=
"md-footer">
2379 <nav class=
"md-footer__inner md-grid" aria-label=
"Footer">
2381 <a href=
"../new-api_browser/" class=
"md-footer__link md-footer__link--prev" rel=
"prev">
2382 <div class=
"md-footer__button md-icon">
2383 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2385 <div class=
"md-footer__title">
2386 <div class=
"md-ellipsis">
2387 <span class=
"md-footer__direction">
2390 Browser and Screen Sizes
2396 <a href=
"../legacy-api/" class=
"md-footer__link md-footer__link--next" rel=
"next">
2397 <div class=
"md-footer__title">
2398 <div class=
"md-ellipsis">
2399 <span class=
"md-footer__direction">
2405 <div class=
"md-footer__button md-icon">
2406 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2412 <div class=
"md-footer-meta md-typeset">
2413 <div class=
"md-footer-meta__inner md-grid">
2414 <div class=
"md-footer-copyright">
2416 <div class=
"md-footer-copyright__highlight">
2417 Copyright ©
2020 WoltLab GmbH
2421 <a href=
"https://squidfunk.github.io/mkdocs-material/" target=
"_blank" rel=
"noopener">
2426 <div class=
"md-footer-copyright">
2427 <a href=
"https://www.woltlab.com/legal-notice/">Legal Notice
</a>
2428 <a href=
"https://www.woltlab.com/privacy-policy/">Privacy Policy
</a>
2435 <div class=
"md-dialog" data-md-component=
"dialog">
2436 <div class=
"md-dialog__inner md-typeset"></div>
2438 <script id=
"__config" type=
"application/json">{
"base":
"../..",
"features": [],
"translations": {
"clipboard.copy":
"Copy to clipboard",
"clipboard.copied":
"Copied to clipboard",
"search.config.lang":
"en",
"search.config.pipeline":
"trimmer, stopWordFilter",
"search.config.separator":
"[\\s\\-]+",
"search.placeholder":
"Search",
"search.result.placeholder":
"Type to start searching",
"search.result.none":
"No matching documents",
"search.result.one":
"1 matching document",
"search.result.other":
"# matching documents",
"search.result.more.one":
"1 more on this page",
"search.result.more.other":
"# more on this page",
"search.result.term.missing":
"Missing"},
"search":
"../../assets/javascripts/workers/search.fe42c31b.min.js",
"version": {
"provider":
"mike"}}
</script>
2441 <script src=
"../../assets/javascripts/bundle.d892486b.min.js"></script>