1 module source.uim.bootstrap.bs5.demos.utilities.verticalalign; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/utilities/verticalalign", 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": "Vertical Align - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto inlineExample = demoBs5Example("inline", "Inline and inline-block", 20 H5Div( 21 /* H5H1("BaselineH5Img(["src":"/img/20x20.png" ["align-baseline"]) 22 H5H1("Text-topH5Img(["src":"/img/20x20.png" ["align-text-top"]) 23 H5H1("Text-bottomH5Img(["src":"/img/20x20.png" ["align-text-bottom"]) 24 H5H1("TopH5Img(["src":"/img/20x20.png" ["align-top"]) 25 H5H1("MiddleH5Img(["src":"/img/20x20.png" ["align-middle"]) 26 H5H1("BottomH5Img(["src":"/img/20x20.png" ["align-bottom"]) */ 27 ), ``, ``); 28 29 auto cellExample = demoBs5Example("cell", "Table cell", 30 H5Div( 31 H5P("Text-top and text-bottom not applicable on table cells"), 32 H5Table(["table"], ["style":"height: 200px;"], 33 H5Tbody( 34 H5Tr( 35 H5Td(["align-baseline"], "Baseline"), 36 H5Td(["align-top"], "Top"), 37 H5Td(["align-middle"], "Middle"), 38 H5Td(["align-bottom"], "Bottom") 39 ) 40 ) 41 ) 42 ), ``, ``); 43 44 return 45 H5Main(["style":"margin-top:70px;"], 46 H5Div(["container-fluid", "mt-3", "bg-light"], 47 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 48 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Vertical Align")), 49 BS5Container(["mt-3"]).row( 50 H5Div(["col-12", "col-lg-2"], 51 listLevels("basic"), 52 listAreas("basic", "utilities"), 53 listSections("basic", "utilities", "verticalalign")), 54 H5Div(["col-12", "col-lg-8"], 55 dateInfo(this), 56 H5H2(["display-4"], "Vertical Align"), 57 H5Hr, 58 59 inlineExample, 60 cellExample 61 ), 62 H5Div(["col-12", "col-lg-2"]))).toString; 63 } 64 }); 65 }