Unofficial Dub Package Documentation 
1 module source.uim.bootstrap.bs5.demos.utilities.borders;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/utilities/borders", 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": "Borders - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto additiveExample = demoBs5Example("additive", "Additive", 
20   H5Div(["mb-5"], ["data-css":`'div[class^="border"] {
	display: inline-block;
	margin: 1em;
	width: 5em;
	height: 5em;
	background-color: #f5f5f5;
}'`],
21     H5Div(
22       H5Div(["border"]),
23       H5Div(["border-top"]),
24       H5Div(["border-end"]),
25       H5Div(["border-bottom"]),
26       H5Div(["border-start"]),
27       H5Div(["border-top border-end"]),
28       H5Div(["border-bottom border-start"])
29     )
30   ), ``, ``);
31 
32 auto subtractiveExample = demoBs5Example("subtractive", "Subtractive", 
33   H5Div(["mb-5"], ["data-css":`'div[class^="border"] {
	display: inline-block;
	margin: 1em;
	width: 5em;
	height: 5em;
	background-color: #f5f5f5;
}
div[class$="-0"] {
	border: 1px solid #dee2e6;
}'`],
34     H5Div(
35       H5Div(["border-0"]),
36       H5Div(["border-top-0"]),
37       H5Div(["border-end-0"]),
38       H5Div(["border-bottom-0"]),
39       H5Div(["border-start-0"]),
40       H5Div(["border-top-0 border-end-0"]),
41       H5Div(["border-bottom-0 border-start-0"])
42     )
43   ), ``, ``);
44 
45 auto colorExample = demoBs5Example("color", "Color", 
46   H5Div(["mb-5"], ["data-css":`'div[class^="border"] {
	display: inline-block;
	margin: 1em;
	width: 5em;
	height: 5em;
	background-color: #f5f5f5;
}'`],
47     H5Div(
48       H5Div(["border", "border-primary"]),
49       H5Div(["border", "border-secondary"]),
50       H5Div(["border", "border-success"]),
51       H5Div(["border", "border-danger"]),
52       H5Div(["border", "border-warning"]),
53       H5Div(["border", "border-info"]),
54       H5Div(["border", "border-light"]),
55       H5Div(["border", "border-dark"]),
56       H5Div(["border", "border-white"])
57     )
58 ), ``, ``);
59 
60 auto widthExample = demoBs5Example("width", "Width", 
61   H5Div(["mb-5"], ["data-css":`'div[class^="border"] {
	display: inline-block;
	margin: 1em;
	width: 5em;
	height: 5em;
	background-color: #f5f5f5;
}'`],
62     H5Div(
63       H5Div(["border", "border-1"]),
64       H5Div(["border", "border-2"]),
65       H5Div(["border", "border-3"]),
66       H5Div(["border", "border-4"]),
67       H5Div(["border", "border-5"])
68     )
69   ), ``, ``);
70 
71 auto radiusExample = demoBs5Example("radius", "Radius", 
72   H5Div(["mb-5"], ["data-css":`'img {
	margin: 1em;
}
div[class^="rounded"] {
	display: inline-block;
	margin: 1em;
	width: 5em;
	height: 5em;
	background-color: #f5f5f5;
}'`],
73     H5Div(
74       H5Img(["rounded"], ["src":"/img/100x100.png", "alt":""]), 
75       H5Img(["rounded-top"], ["src":"/img/100x100.png", "alt":""]),
76       H5Img(["rounded-end"], ["src":"/img/100x100.png", "alt":""]), 
77       H5Img(["rounded-bottom"], ["src":"/img/100x100.png", "alt":""]), 
78       H5Img(["rounded-start"], ["src":"/img/100x100.png", "alt":""]), 
79       H5Img(["rounded-circle"], ["src":"/img/100x100.png", "alt":""]), 
80       H5Img(["rounded-pill"], ["src":"/img/200x100.png", "alt":""]) 
81     )
82   ), ``, ``);
83 
84 auto radiusSizeExample = demoBs5Example("radiussize", "Radius size", 
85   H5Div(["mb-5"], ["data-css":`'img {
	margin: 1em;
}
div[class^="rounded"] {
	display: inline-block;
	margin: 1em;
	width: 5em;
	height: 5em;
	background-color: #f5f5f5;
}'`],
86     H5Div(
87       H5Img(["rounded-0"], ["src":"/img/100x100.png", "alt":"",  "style":"border-radius: 10px;"]),
88       H5Img(["rounded-1"], ["src":"/img/100x100.png", "alt":""]),
89       H5Img(["rounded-2"], ["src":"/img/100x100.png", "alt":""]),
90       H5Img(["rounded-3"], ["src":"/img/100x100.png", "alt":""])
91     )
92   ), ``, ``);
93 
94       return 
95 H5Main(["style":"margin-top:70px;"], 
96   H5Div(["container-fluid", "mt-3", "bg-light"],
97     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 
98     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "borders")),
99   BS5Container(["mt-3"]).row(
100     H5Div(["col-12", "col-lg-2"], 
101       listLevels("basic"),
102       listAreas("basic", "utilities"),
103       listSections("basic", "utilities", "borders")),
104     H5Div(["col-12", "col-lg-8"], 
105       dateInfo(this),
106       H5H2(["display-4"], "Borders"),
107       H5Hr,
108 
109       additiveExample, 
110       subtractiveExample, 
111       colorExample, 
112       widthExample, 
113       radiusExample, 
114       radiusSizeExample
115 
116     ),
117     H5Div(["col-12", "col-lg-2"]))).toString;
118     }
119   });
120 }

Page generated by adrdox