1 module source.uim.bootstrap.bs5.demos.forms.formcontrol; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/forms/formcontrol", 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": "Form Control - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto inputExample = demoBs5Example("input", "Text input", 20 H5Div( 21 BS5FormLabel(["for":"inputText"], "Text input label"), 22 BS5InputText("inputText", ["placeholder":"Text input placeholder"]) 23 ), `BS5FormLabel(["for":"inputText"], "Text input label"), 24 BS5InputText("inputText", ["placeholder":"Text input placeholder"])`, ``); 25 26 auto textareaExample = demoBs5Example("textarea", "Textarea", 27 H5Div( 28 BS5FormLabel(["for":"textarea"], "Textarea"), 29 H5Textarea("textarea", ["form-control"], ["rows":"5", "placeholder":"Write your message here."]) 30 ), `BS5FormLabel(["for":"textarea"], "Textarea"), 31 H5Textarea("textarea", ["form-control"], ["rows":"5", "placeholder":"Write your message here."])`, ``); 32 33 auto sizingExample = demoBs5Example("sizing", "Sizing", 34 H5Div( 35 H5H5(["text-muted", "mt-3"], "Small"), 36 BS5FormLabel(["for":"inputTextSmall"], "Text input label"), 37 BS5InputText("inputTextSmall", ["form-control-sm"], ["placeholder":"Text input placeholder"]), 38 H5H5(["text-muted", "mt-3"], "Large"), 39 BS5FormLabel(["for":"inputTextLarge" ], "Text input label"), 40 BS5InputText("inputTextLarge", ["form-control-lg"], ["placeholder":"Text input placeholder"]) 41 ), `BS5FormLabel(["for":"inputTextSmall"], "Text input label") 42 BS5InputText("inputTextSmall", ["form-control-sm"], ["placeholder":"Text input placeholder"]) 43 BS5FormLabel(["for":"inputTextLarge" ], "Text input label") 44 BS5InputText("inputTextLarge", ["form-control-lg"], ["placeholder":"Text input placeholder"])`, ``); 45 46 auto readonlyExample = demoBs5Example("readonly", "Readonly", 47 H5Div( 48 BS5FormLabel(["for":"inputTextReadonly"], "Text input label"), 49 BS5InputText("inputTextReadonly", ["placeholder":"Text input placeholder", "readonly":"readonly"]) 50 ), `BS5FormLabel(["for":"inputTextReadonly"], "Text input label") 51 BS5InputText("inputTextReadonly", ["placeholder":"Text input placeholder", "readonly":"readonly"])`, ``); 52 53 auto plainExample = demoBs5Example("plain", "Readonly plain text", 54 H5Div( 55 BS5FormLabel(["for":"inputTextReadonlyPlaintext"], "Text input label"), 56 BS5InputPlaintext("inputTextReadonlyPlaintext", ["placeholder":"Text input placeholder", "readonly":"readonly"]) 57 ), `BS5FormLabel(["for":"inputTextReadonlyPlaintext"], "Text input label"), 58 BS5InputPlaintext("inputTextReadonlyPlaintext", ["placeholder":"Text input placeholder", "readonly":"readonly"])`, ``); 59 60 auto fileExample = demoBs5Example("file", "Working with files", 61 H5Div( 62 H5H5(["text-muted", "mt-3"], "Default"), 63 BS5FormLabel(["for":"inputFile"], "Default file input label"), 64 BS5InputFile("inputFile", [""]), 65 H5H5(["text-muted", "mt-3"], "Multiple"), 66 BS5FormLabel(["for":"inputFileMultiple"], "Input for multiple files"), 67 BS5InputFile("inputFileMultiple", ["multiple":"multiple"]), 68 H5H5(["text-muted", "mt-3"], "Disabled"), 69 BS5FormLabel(["for":"inputFileDisabled"], "Disabled file input label"), 70 BS5InputFile("inputFileDisabled", ["disabled":"disabled"]), 71 H5H5(["text-muted", "mt-3"], "Small"), 72 BS5FormLabel(["for":"inputFileSmall"], "Small file input label"), 73 BS5InputFile("inputFileSmall", ["form-control-sm"]), 74 H5H5(["text-muted", "mt-3"], "Large"), 75 BS5FormLabel(["for":"inputFileLarge"], "Large file input label"), 76 BS5InputFile("inputFileLarge", ["form-control-lg"]) 77 ), `BS5FormLabel(["for":"inputFile"], "Default file input label") 78 BS5InputFile("inputFile", [""]) 79 BS5FormLabel(["for":"inputFileMultiple"], "Multiple file input label") 80 BS5InputFile("inputFileMultiple", ["multiple":"multiple"]) 81 BS5FormLabel(["for":"inputFileDisabled"], "Disabled file input label") 82 BS5InputFile("inputFileDisabled", ["disabled":"disabled"]) 83 BS5FormLabel(["for":"inputFileSmall"], "Small file input label") 84 BS5InputFile("inputFileSmall", ["form-control-sm"]) 85 BS5FormLabel(["for":"inputFileLarge"], "Large file input label") 86 BS5InputFile("inputFileLarge", ["form-control-lg"])`, 87 `<label class="form-label" for="inputFile">Default file input label</label> 88 <input id="inputFile" class="form-control" type="file"> 89 <label class="form-label" for="inputFileMultiple">Multiple file input label</label> 90 <input id="inputFileMultiple" class="form-control" multiple="" type="file"> 91 <label class="form-label" for="inputFileDisabled">Disabled file input label</label> 92 <input id="inputFileDisabled" class="form-control" disabled="" type="file"> 93 <label class="form-label" for="inputFileSmall">Small file input label</label> 94 <input id="inputFileSmall" class="form-control form-control-sm" type="file"> 95 <label class="form-label" for="inputFileLarge">Large file input label</label> 96 <input id="inputFileLarge" class="form-control form-control-lg" type="file">`); 97 98 auto colorExample = demoBs5Example("color", "Color picker", 99 H5Div( 100 BS5FormLabel(["for":"inputColor"], "Color input label"), 101 BS5InputColor("inputColor", ["value":"#7952b3", "title":"Choose color"]) 102 ), `BS5FormLabel(["for":"inputColor"], "Color input label"), 103 BS5InputColor("inputColor", ["value":"#7952b3", "title":"Choose color"])`, ``); 104 105 auto datalistExample = demoBs5Example("datalist", "Datalist", 106 H5Div( 107 BS5FormLabel(["for":"datalist"], "Datalist label"), 108 H5Input("datalist", ["form-control"], ["list":"datalistOptions", "placeholder":"Type to search..."]), 109 H5Datalist("datalistOptions", [""], 110 H5Option(["value":"Bootstrap"]), 111 H5Option(["value":"Foundation"]), 112 H5Option(["value":"Semantic UI"]), 113 H5Option(["value":"Bulma"]), 114 H5Option(["value":"Materialize"]) 115 ) 116 ), `BS5FormLabel(["for":"datalist"], "Datalist label"), 117 H5Input("datalist", ["form-control"], ["list":"datalistOptions", "placeholder":"Type to search..."]), 118 H5Datalist("datalistOptions", [""], 119 H5Option(["value":"Bootstrap"]), 120 H5Option(["value":"Foundation"]), 121 H5Option(["value":"Semantic UI"]), 122 H5Option(["value":"Bulma"]), 123 H5Option(["value":"Materialize"]))`, ``); 124 125 return 126 H5Main(["style":"margin-top:70px;"], 127 H5Div(["container-fluid", "mt-3", "bg-light"], 128 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/forms"], 129 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Forms"], "Form Control")), 130 131 BS5Container(["mt-3"]).row( 132 H5Div(["col-12", "col-lg-2"], 133 listLevels("basic"), 134 listAreas("basic", "forms"), 135 listSections("basic", "forms", "formcontrol")), 136 H5Div(["col-12", "col-lg-8"], 137 dateInfo(this), 138 H5H2(["display-4"], "Form Control"), 139 H5Hr, 140 141 inputExample, 142 textareaExample, 143 sizingExample, 144 readonlyExample, 145 plainExample, 146 fileExample, 147 colorExample, 148 datalistExample 149 150 ), 151 H5Div(["col-12", "col-lg-2"]))).toString; 152 } 153 }); 154 } 155 156 /* 157 158 159 160 161 */