1 module source.uim.bootstrap.bs5.demos.utilities.text; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/utilities/text", 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": "Text - 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"], "Text")), 23 BS5Container(["mt-3"]).row( 24 H5Div(["col-12", "col-lg-2"], 25 listLevels("basic"), 26 listAreas("basic", "utilities"), 27 listSections("basic", "utilities", "text")), 28 H5Div(["col-12", "col-lg-8"], 29 dateInfo(this), 30 H5H2(["display-4"], "Text"), 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"]Text</h2> 43 <hr> 44 45 H5Div(["mb-5"] 46 <h3 ["text-muted"]Alignment", 47 H5Div( 48 H5H5(["text-muted", "mt-3"], "All breakpoints") 49 H5P(["text-start"]Left-aligned text.") 50 H5P(["text-center"]Center-aligned text.") 51 H5P(["text-end"]Right-aligned text.") 52 H5H5(["text-muted", "mt-3"], "Responsive") 53 H5P(["text-sm-end"]Right-aligned text for breakpoint sm and up.") 54 H5P(["text-md-end"]Right-aligned text for breakpoint md and up.") 55 H5P(["text-lg-end"]Right-aligned text for breakpoint lg and up.") 56 H5P(["text-xl-end"]Right-aligned text for breakpoint xl and up.") 57 H5P(["text-xxl-end"]Right-aligned text for breakpoint xxl and up.") 58 H5P(["text-sm-center"]Center-aligned text for breakpoint sm and up.") 59 H5P(["text-md-center"]Center-aligned text for breakpoint md and up.") 60 H5P(["text-lg-center"]Center-aligned text for breakpoint lg and up.") 61 H5P(["text-xl-center"]Center-aligned text for breakpoint xl and up.") 62 H5P(["text-xxl-center"]Center-aligned text for breakpoint xxl and up.") 63 H5P(["text-end text-sm-start"]Right-aligned text as default. Left-aligned text for breakpoint sm and up.") 64 H5P(["text-end text-md-start"]Right-aligned text as default. Left-aligned text for breakpoint md and up.") 65 H5P(["text-end text-lg-start"]Right-aligned text as default. Left-aligned text for breakpoint lg and up.") 66 H5P(["text-end text-xl-start"]Right-aligned text as default. Left-aligned text for breakpoint xl and up.") 67 H5P(["text-end text-xxl-start"]Right-aligned text as default. Left-aligned text for breakpoint xxl and up.") 68 ) 69 ) 70 71 H5Div(["mb-5"] 72 <h3 ["text-muted"]Wrapping", 73 H5Div( 74 H5Div(["badge", "bg-secondary", "text-wrap" "style":"width: 10rem;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.) 75 H5P(["text-nowrap"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.") 76 ) 77 ) 78 79 H5Div(["mb-5"] 80 <h3 ["text-muted"]Word break", 81 H5Div( 82 H5P(["text-break"]abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789") 83 ) 84 ) 85 86 H5Div(["mb-5"] 87 <h3 ["text-muted"]Transform", 88 H5Div( 89 H5P(["text-lowercase"]Lowercased text") 90 H5P(["text-uppercase"]Uppercased text") 91 H5P(["text-capitalize"]Capitalized text") 92 ) 93 ) 94 95 H5Div(["mb-5"] 96 <h3 ["text-muted"]Font size", 97 H5Div( 98 H5P(["fs-1"]Font size 1") 99 H5P(["fs-2"]Font size 2") 100 H5P(["fs-3"]Font size 3") 101 H5P(["fs-4"]Font size 4") 102 H5P(["fs-5"]Font size 5") 103 H5P(["fs-6"]Font size 6") 104 ) 105 ) 106 107 H5Div(["mb-5"] 108 <h3 ["text-muted"]Font weight and italics", 109 H5Div( 110 H5P(["fw-bold"]Bold text") 111 H5P(["fw-bolder"]Bolder text") 112 <p><strong ["fw-normal"]Normal weight text</strong>") 113 H5P(["fw-light"]Light text") 114 H5P(["fw-lighter"]Lighter text") 115 H5P(["fst-italic"]Italic text") 116 <p><em ["fst-normal"]Normal text</em>") 117 ) 118 ) 119 120 H5Div(["mb-5"] 121 <h3 ["text-muted"]Line height", 122 H5Div( 123 H5H5(["text-muted", "mt-3"], "1") 124 H5P(["lh-1"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.") 125 H5H5(["text-muted", "mt-3"], "Small") 126 H5P(["lh-sm"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.") 127 H5H5(["text-muted", "mt-3"], "Base") 128 H5P(["lh-base"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.") 129 H5H5(["text-muted", "mt-3"], "Large") 130 H5P(["lh-lg"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien mi, eleifend at arcu ac, ullamcorper ultricies tortor. Aliquam sit amet pellentesque dui. Nam ultrices rhoncus sodales. Maecenas a ante turpis. Suspendisse at mauris ex. Cras quis lacus sit amet lacus iaculis vulputate ac id nibh. Vestibulum consectetur porta ante vitae iaculis. Sed pretium euismod arcu, ut aliquet ipsum rutrum venenatis.") 131 ) 132 ) 133 134 H5Div(["mb-5"] 135 <h3 ["text-muted"]Monospace", 136 H5Div( 137 H5P(["font-monospace"]Monospace text") 138 ) 139 ) 140 141 H5Div(["mb-5"] 142 <h3 ["text-muted"]Reset color", 143 H5Div( 144 <p>Reset <a href="#" ["text-reset"]link), color") 145 ) 146 ) 147 148 H5Div(["mb-5"] 149 <h3 ["text-muted"]Text decoration", 150 H5Div( 151 H5P(["text-decoration-underline"]Text with text line underneath it") 152 H5P(["text-decoration-line-through"]Text with text line going through it") 153 <a href="#" ["text-decoration-none"]Link without text decoration), 154 ) 155 ) 156 157 ) 158 ) 159 ) 160 </main> 161 `; 162 } 163 }); 164 }*/