1 module source.uim.bootstrap.bs5.demos.utilities.positionutilities; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/utilities/positionutilities", 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": "Position Utilities - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 return 19 H5Main(["style":"margin-top:70px;"], 20 H5Div(["container-fluid", "mt-3", "bg-light"], 21 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Position Utilities")), 23 BS5Container(["mt-3"]).row( 24 H5Div(["col-12", "col-lg-2"], 25 listLevels("basic"), 26 listAreas("basic", "utilities"), 27 listSections("basic", "utilities", "positionutilities")), 28 H5Div(["col-12", "col-lg-8"], 29 dateInfo(this), 30 H5H2(["display-4"], "Position Utilities"), 31 H5Hr, 32 ), 33 H5Div(["col-12", "col-lg-2"]))).toString; 34 } 35 }); 36 } 37 /* H5Div(["container mt-3"] 38 H5Div(["row"] 39 H5Div(["col-12 col-lg-2"] 40 ) 41 H5Div(["col-12 col-lg-8"] 42 <h2 ["component display-4"]Position Utilities</h2> 43 <hr> 44 45 H5Div(["mb-5"] 46 <h3 ["text-muted"]Position values", 47 H5Div( 48 H5H5(["text-muted", "mt-3"], "Static") 49 H5Div(["position-static"]Position static) 50 H5H5(["text-muted", "mt-3"], "Relative") 51 H5Div(["position-relative"]Position relative) 52 H5H5(["text-muted", "mt-3"], "Absolute") 53 H5Div(["position-absolute"]Position absolute) 54 H5H5(["text-muted", "mt-3"], "Fixed") 55 H5Div(["position-fixed"]Position fixed) 56 H5H5(["text-muted", "mt-3"], "Sticky") 57 H5Div(["position-sticky"]Position sticky) 58 ) 59 ) 60 61 H5Div(["mb-5"] 62 <h3 ["text-muted"]Arrange elements", 63 H5Div( 64 H5Div(["position-relative border m-5 w-50" "style":"height: 300px;"] 65 H5Div(["p-2 text-white bg-dark position-absolute top-0 left-0"]Top left) 66 H5Div(["p-2 text-white bg-dark position-absolute top-0 right-0"]Top right) 67 H5Div(["p-2 text-white bg-dark position-absolute top-50 left-50"]Center (top left)) 68 H5Div(["p-2 text-white bg-dark position-absolute bottom-50 right-50"]Center (bottom right)) 69 H5Div(["p-2 text-white bg-dark position-absolute bottom-0 left-0"]Bottom left) 70 H5Div(["p-2 text-white bg-dark position-absolute bottom-0 right-0"]Bottom right) 71 ) 72 ) 73 ) 74 75 H5Div(["mb-5"] 76 <h3 ["text-muted"]Center elements", 77 H5Div( 78 H5Div(["position-relative border m-5 w-50" "style":"height: 300px;"] 79 H5Div(["p-2 text-white bg-dark position-absolute top-0 left-0 translate-middle"]Top left) 80 H5Div(["p-2 text-white bg-dark position-absolute top-0 left-50 translate-middle"]Top center) 81 H5Div(["p-2 text-white bg-dark position-absolute top-0 left-100 translate-middle"]Top right) 82 H5Div(["p-2 text-white bg-dark position-absolute top-50 left-0 translate-middle"]Middle left) 83 H5Div(["p-2 text-white bg-dark position-absolute top-50 left-50 translate-middle"]Middle center) 84 H5Div(["p-2 text-white bg-dark position-absolute top-50 left-100 translate-middle"]Middle right) 85 H5Div(["p-2 text-white bg-dark position-absolute top-100 left-0 translate-middle"]Bottom left) 86 H5Div(["p-2 text-white bg-dark position-absolute top-100 left-50 translate-middle"]Bottom center) 87 H5Div(["p-2 text-white bg-dark position-absolute top-100 left-100 translate-middle"]Bottom right) 88 ) 89 ) 90 ) 91 92 H5Div(["mb-5"] 93 <h3 ["text-muted"]Examples", 94 H5Div( 95 H5H5(["text-muted", "mt-3"], "Notification number") 96 H5Button(["type":"button" ["btn btn-primary position-relative"] 97 Messages H5Span(["position-absolute top-0 left-100 translate-middle badge rounded-pill bg-secondary"]3 H5Span(["visually-hidden"]unread messages")") 98 ") 99 H5H5(["text-muted", "mt-3"], "Notification circle") 100 H5Button(["type":"button" ["btn btn-primary position-relative"] 101 Messages H5Span(["position-absolute top-0 left-100 translate-middle badge border border-light rounded-circle bg-danger p-2"]H5Span(["visually-hidden"]unread messages")") 102 ") 103 H5H5(["text-muted", "mt-3"], "Progress with steps") 104 H5Div(["position-relative m-4"] 105 H5Div(["progress" "style":"height: 1px;"] 106 H5Div(["progress-bar" role="progressbar" "style":"width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"]) 107 ) 108 H5Div(["position-absolute top-0 left-0 translate-middle badge bg-primary rounded-pill d-flex justify-content-center align-items-center" "style":"width: 2rem; height: 2rem;"]1) 109 H5Div(["position-absolute top-0 left-50 translate-middle badge bg-primary rounded-pill d-flex justify-content-center align-items-center" "style":"width: 2rem; height: 2rem;"]2) 110 H5Div(["position-absolute top-0 left-100 translate-middle badge", "bg-secondary", "rounded-pill d-flex justify-content-center align-items-center" "style":"width: 2rem; height: 2rem;"]3) 111 ) 112 ) 113 ) 114 115 ) 116 ) 117 ) 118 </main> 119 `; 120 } 121 }); 122 }*/