1 module uim.bootstrap.bs5.demos.components.popovers; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/popovers", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Popovers - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 auto linkExample = demoBs5Example("link", "Link", 19 H5Div( 20 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 21 H5H3(["text-muted"], "Link")), 22 H5A(["href":"#", "data-bs-toggle":"popover", "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover for link") 23 ), ``, ``); 24 25 auto buttonExample = demoBs5Example("button", "Button", 26 H5Div( 27 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 28 H5H3(["text-muted"], "Button"), 29 H5Div( 30 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], 31 "Popover for button"))) 32 ), ``, ``); 33 34 auto link2Example = demoBs5Example("link2", "Link 2nd", 35 H5Div( 36 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 37 H5H3(["text-muted"], "Link 2nd")), 38 H5A(["href":"#", "data-bs-toggle":"popover", "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover for link") 39 ), ``, ``); 40 41 auto titleExample = demoBs5Example("title", "Title", 42 H5Div( 43 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 44 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 45 H5H3(["text-muted"], "Title"), 46 H5Div( 47 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "title":"Popover title", 48 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover with title"))) 49 ), 50 `H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 51 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 52 H5H3(["text-muted"], "Title"), 53 H5Div( 54 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "title":"Popover title", 55 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover with title")))`, 56 ``); 57 58 auto customExample = demoBs5Example("custom", "Custom HTML", 59 H5Div( 60 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 61 H5H3(["text-muted"], "Custom HTML"), 62 H5Div( 63 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-html":"true", 64 "title":"<span class='badge bg-primary'>Popover title</span>)", "data-bs-content":`<strong>Popover</strong> <small>with</small> <em>custom HTML</em>`], "Popover with custom HTML"))) 65 ), ``, ``); 66 67 auto positionExample = demoBs5Example("position", "Position", 68 H5Div( 69 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 70 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 71 H5H3(["text-muted"], "Position"), 72 H5Div( 73 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-placement":"top", "title":"Popover title", 74 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover on top"), 75 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-placement":"right", "title":"Popover title", 76 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover on right"), 77 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-placement":"bottom", "title":"Popover title", 78 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover on bottom"), 79 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-placement":"left", "title":"Popover title", 80 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover on left"))) 81 ), ``, ``); 82 83 auto animationExample = demoBs5Example("animation", "Animation", 84 H5Div( 85 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 86 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 87 H5H3(["text-muted"], "Animation"), 88 H5Div( 89 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-animation":"false", "title":"Popover title", 90 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover without animation"))) 91 ), ``, ``); 92 93 auto hidingExample = demoBs5Example("hiding", "Showing and Hiding", 94 H5Div( 95 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 96 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 97 H5H3(["text-muted"], "Delay"), 98 H5P("Popover with delay in ms for showing and hiding"), 99 H5Div( 100 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-delay":"500", "title":"Popover title", 101 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Popover with delay"))) 102 ), ``, ``); 103 104 auto triggerExample = demoBs5Example("trigger", "Trigger", 105 H5Div( 106 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 107 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 108 H5H3(["text-muted"], "Trigger type"), 109 H5P("Popover triggered by click and hover"), 110 H5Div( 111 BS5Button(["btn-secondary"], ["data-bs-toggle":"popover", "data-bs-trigger":"click hover", "title":"Popover title", 112 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Trigger by click and hover"))) 113 ), ``, ``); 114 115 auto dismissibleExample = demoBs5Example("dismissible", "Dismissible", 116 H5Div( 117 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 118 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 119 H5H3(["text-muted"], "Dismissible"), 120 H5P("Dismiss on next click outside of element"), 121 H5Div( 122 H5A(["btn", "btn-secondary"], ["href":"#!", "tabindex":"0", "role":"button", "data-bs-toggle":"popover", 123 "data-bs-trigger":"focus", "title":"Popover title", 124 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], "Dismiss on next click"))) 125 ), ``, ``); 126 127 auto disabledExample = demoBs5Example("disabled", "Disabled elements", 128 H5Div( 129 H5Div(["mb-5"], ["data-css":"a, button { 	margin-top: 200px; }", 130 "data-js":"var popoverTriggerElements = document.querySelectorAll('[data-bs-toggle="popover"]'); for (var i = 0; i < popoverTriggerElements.length; i++) { 	new bootstrap.Popover(popoverTriggerElements[i]) }"], 131 H5H3(["text-muted"], "Disabled elements"), 132 H5Div( 133 H5Span(["d-inline-block"], ["data-bs-toggle":"popover", "title":"Popover title", 134 "data-bs-content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."], 135 BS5Button(["btn-secondary"], ["disabled style":"pointer-events: none;"], "Popover for disabled element")))) 136 ), ``, ``); 137 138 return 139 H5Main(["style":"margin-top:70px;"], 140 H5Div(["container-fluid", "mt-3", "bg-light"], 141 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 142 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Popovers")), 143 144 BS5Container(["mt-3"]).row( 145 H5Div(["col-12", "col-lg-2"], 146 listLevels("basic"), 147 listAreas("basic", "components"), 148 listSections("basic", "components", "popovers")), 149 H5Div(["col-12", "col-lg-8"], 150 dateInfo(this), 151 H5H2(["display-4"], "Popovers"), 152 H5Hr, 153 154 linkExample, 155 buttonExample, 156 link2Example, 157 titleExample, 158 customExample, 159 positionExample, 160 animationExample, 161 hidingExample, 162 triggerExample, 163 dismissibleExample, 164 disabledExample 165 166 ), 167 H5Div(["col-12", "col-lg-2"]))).toString; 168 } 169 }); 170 }