1 module uim.bootstrap.bs5.demos.components.scrollspies;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/components/scrollspies", 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": "Scrollspies - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto exampleExample = demoBs5Example("example", "Example",
20   H5Div(
21     BS5Nav("navScrollspy", ["nav-pills", "fixed-top"], 
22       BS5NavItem(
23         BS5NavLink(["href":"#sectionFirst"], "First section")),
24       BS5NavItem(
25         BS5NavLink(["href":"#sectionSecond"], "Second section")),
26       BS5NavItem(
27         BS5NavLink(["href":"#sectionThird"], "Third section"))),
28           H5Div("sectionFirst", 
29             H5H2("First section"),
30             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit pharetra elit, aliquet aliquet erat mollis eu. Praesent eu condimentum erat. In hac habitasse platea dictumst. Aenean maximus rhoncus nunc. Nullam lacus lacus, ullamcorper nec orci vel, mattis egestas mauris. Aliquam dignissim bibendum orci ac aliquam. Pellentesque porta tortor eu sodales volutpat. Etiam fermentum commodo nulla non euismod. In in elementum eros. Etiam odio felis, maximus rutrum sapien id, malesuada dignissim massa. In non sagittis enim. Pellentesque molestie tempus leo vitae blandit. Nunc et libero vitae nunc tempor cursus. Duis ex ipsum, pretium egestas metus eget, porttitor ultrices enim. Integer pulvinar a nisl id auctor. Suspendisse faucibus nisi at dictum faucibus."),
31             H5P("Vivamus ultricies magna vel risus rhoncus blandit. Ut faucibus suscipit vehicula. Nunc maximus mollis cursus. In pulvinar ornare tellus, sed ullamcorper turpis lobortis vitae. Praesent interdum faucibus nibh, nec gravida est finibus et. Quisque ac volutpat enim, at fermentum quam. Nam eu sodales magna, ut congue risus. Maecenas sit amet justo id massa mollis fringilla quis et eros. Duis ultricies vestibulum cursus. Curabitur aliquet mauris tortor, ac malesuada velit lobortis eu. Etiam eget condimentum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempor aliquam ornare. Duis a suscipit ante."),
32             H5P("In venenatis ornare massa vel aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sodales erat vel laoreet auctor. Sed vulputate facilisis efficitur. Nunc et congue purus. Maecenas tempus felis sit amet convallis interdum. Integer sollicitudin justo vitae sollicitudin blandit. Donec felis libero, imperdiet semper commodo in, porta sed erat. Morbi condimentum et dolor at hendrerit. Aenean pellentesque pellentesque turpis vitae congue. Sed sed ultricies nisi. Ut ut pellentesque massa. Vivamus at convallis mi, sit amet ornare arcu. Curabitur libero purus, finibus eu laoreet in, blandit in velit. Donec gravida quam nec urna tincidunt, vel tempus ante placerat. Vestibulum dignissim congue gravida."),
33             H5P("Morbi sit amet ultricies felis, et molestie ex. Aenean justo odio, auctor sed auctor in, tristique eu justo. Vivamus eget aliquet dui. Praesent tristique eros a pellentesque luctus. Praesent ac metus non ex imperdiet egestas at nec nisi. Sed elementum nulla risus, in egestas massa pharetra id. Pellentesque iaculis vestibulum imperdiet."),
34             H5P("Nam in gravida quam. Praesent eget massa a diam laoreet posuere sed vel magna. Etiam semper leo dolor, ut molestie turpis lacinia sit amet. In quis luctus orci, id iaculis lectus. In vitae dignissim metus, a facilisis leo. Suspendisse hendrerit tempus diam, at mattis nibh. Cras bibendum, neque sed efficitur gravida, nunc neque viverra nibh, eu varius risus nisi ac mauris. Suspendisse elementum sodales fermentum. Proin varius nulla at nulla condimentum sollicitudin vehicula eget justo. Etiam ultrices neque sed tortor luctus, eu ultrices purus auctor. Nulla eget nisl mi.")),
35           H5Div("sectionSecond",
36             H5H2("Second section"),
37             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit pharetra elit, aliquet aliquet erat mollis eu. Praesent eu condimentum erat. In hac habitasse platea dictumst. Aenean maximus rhoncus nunc. Nullam lacus lacus, ullamcorper nec orci vel, mattis egestas mauris. Aliquam dignissim bibendum orci ac aliquam. Pellentesque porta tortor eu sodales volutpat. Etiam fermentum commodo nulla non euismod. In in elementum eros. Etiam odio felis, maximus rutrum sapien id, malesuada dignissim massa. In non sagittis enim. Pellentesque molestie tempus leo vitae blandit. Nunc et libero vitae nunc tempor cursus. Duis ex ipsum, pretium egestas metus eget, porttitor ultrices enim. Integer pulvinar a nisl id auctor. Suspendisse faucibus nisi at dictum faucibus."),
38             H5P("Vivamus ultricies magna vel risus rhoncus blandit. Ut faucibus suscipit vehicula. Nunc maximus mollis cursus. In pulvinar ornare tellus, sed ullamcorper turpis lobortis vitae. Praesent interdum faucibus nibh, nec gravida est finibus et. Quisque ac volutpat enim, at fermentum quam. Nam eu sodales magna, ut congue risus. Maecenas sit amet justo id massa mollis fringilla quis et eros. Duis ultricies vestibulum cursus. Curabitur aliquet mauris tortor, ac malesuada velit lobortis eu. Etiam eget condimentum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempor aliquam ornare. Duis a suscipit ante."),
39             H5P("In venenatis ornare massa vel aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sodales erat vel laoreet auctor. Sed vulputate facilisis efficitur. Nunc et congue purus. Maecenas tempus felis sit amet convallis interdum. Integer sollicitudin justo vitae sollicitudin blandit. Donec felis libero, imperdiet semper commodo in, porta sed erat. Morbi condimentum et dolor at hendrerit. Aenean pellentesque pellentesque turpis vitae congue. Sed sed ultricies nisi. Ut ut pellentesque massa. Vivamus at convallis mi, sit amet ornare arcu. Curabitur libero purus, finibus eu laoreet in, blandit in velit. Donec gravida quam nec urna tincidunt, vel tempus ante placerat. Vestibulum dignissim congue gravida."),
40             H5P("Morbi sit amet ultricies felis, et molestie ex. Aenean justo odio, auctor sed auctor in, tristique eu justo. Vivamus eget aliquet dui. Praesent tristique eros a pellentesque luctus. Praesent ac metus non ex imperdiet egestas at nec nisi. Sed elementum nulla risus, in egestas massa pharetra id. Pellentesque iaculis vestibulum imperdiet."),
41             H5P("Nam in gravida quam. Praesent eget massa a diam laoreet posuere sed vel magna. Etiam semper leo dolor, ut molestie turpis lacinia sit amet. In quis luctus orci, id iaculis lectus. In vitae dignissim metus, a facilisis leo. Suspendisse hendrerit tempus diam, at mattis nibh. Cras bibendum, neque sed efficitur gravida, nunc neque viverra nibh, eu varius risus nisi ac mauris. Suspendisse elementum sodales fermentum. Proin varius nulla at nulla condimentum sollicitudin vehicula eget justo. Etiam ultrices neque sed tortor luctus, eu ultrices purus auctor. Nulla eget nisl mi.")),
42           H5Div("sectionThird",
43             H5H2("Third section"),
44             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit pharetra elit, aliquet aliquet erat mollis eu. Praesent eu condimentum erat. In hac habitasse platea dictumst. Aenean maximus rhoncus nunc. Nullam lacus lacus, ullamcorper nec orci vel, mattis egestas mauris. Aliquam dignissim bibendum orci ac aliquam. Pellentesque porta tortor eu sodales volutpat. Etiam fermentum commodo nulla non euismod. In in elementum eros. Etiam odio felis, maximus rutrum sapien id, malesuada dignissim massa. In non sagittis enim. Pellentesque molestie tempus leo vitae blandit. Nunc et libero vitae nunc tempor cursus. Duis ex ipsum, pretium egestas metus eget, porttitor ultrices enim. Integer pulvinar a nisl id auctor. Suspendisse faucibus nisi at dictum faucibus."),
45             H5P("Vivamus ultricies magna vel risus rhoncus blandit. Ut faucibus suscipit vehicula. Nunc maximus mollis cursus. In pulvinar ornare tellus, sed ullamcorper turpis lobortis vitae. Praesent interdum faucibus nibh, nec gravida est finibus et. Quisque ac volutpat enim, at fermentum quam. Nam eu sodales magna, ut congue risus. Maecenas sit amet justo id massa mollis fringilla quis et eros. Duis ultricies vestibulum cursus. Curabitur aliquet mauris tortor, ac malesuada velit lobortis eu. Etiam eget condimentum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempor aliquam ornare. Duis a suscipit ante."),
46             H5P("In venenatis ornare massa vel aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sodales erat vel laoreet auctor. Sed vulputate facilisis efficitur. Nunc et congue purus. Maecenas tempus felis sit amet convallis interdum. Integer sollicitudin justo vitae sollicitudin blandit. Donec felis libero, imperdiet semper commodo in, porta sed erat. Morbi condimentum et dolor at hendrerit. Aenean pellentesque pellentesque turpis vitae congue. Sed sed ultricies nisi. Ut ut pellentesque massa. Vivamus at convallis mi, sit amet ornare arcu. Curabitur libero purus, finibus eu laoreet in, blandit in velit. Donec gravida quam nec urna tincidunt, vel tempus ante placerat. Vestibulum dignissim congue gravida."),
47             H5P("Morbi sit amet ultricies felis, et molestie ex. Aenean justo odio, auctor sed auctor in, tristique eu justo. Vivamus eget aliquet dui. Praesent tristique eros a pellentesque luctus. Praesent ac metus non ex imperdiet egestas at nec nisi. Sed elementum nulla risus, in egestas massa pharetra id. Pellentesque iaculis vestibulum imperdiet."),
48             H5P("Nam in gravida quam. Praesent eget massa a diam laoreet posuere sed vel magna. Etiam semper leo dolor, ut molestie turpis lacinia sit amet. In quis luctus orci, id iaculis lectus. In vitae dignissim metus, a facilisis leo. Suspendisse hendrerit tempus diam, at mattis nibh. Cras bibendum, neque sed efficitur gravida, nunc neque viverra nibh, eu varius risus nisi ac mauris. Suspendisse elementum sodales fermentum. Proin varius nulla at nulla condimentum sollicitudin vehicula eget justo. Etiam ultrices neque sed tortor luctus, eu ultrices purus auctor. Nulla eget nisl mi."),
49             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit pharetra elit, aliquet aliquet erat mollis eu. Praesent eu condimentum erat. In hac habitasse platea dictumst. Aenean maximus rhoncus nunc. Nullam lacus lacus, ullamcorper nec orci vel, mattis egestas mauris. Aliquam dignissim bibendum orci ac aliquam. Pellentesque porta tortor eu sodales volutpat. Etiam fermentum commodo nulla non euismod. In in elementum eros. Etiam odio felis, maximus rutrum sapien id, malesuada dignissim massa. In non sagittis enim. Pellentesque molestie tempus leo vitae blandit. Nunc et libero vitae nunc tempor cursus. Duis ex ipsum, pretium egestas metus eget, porttitor ultrices enim. Integer pulvinar a nisl id auctor. Suspendisse faucibus nisi at dictum faucibus."),
50             H5P("Vivamus ultricies magna vel risus rhoncus blandit. Ut faucibus suscipit vehicula. Nunc maximus mollis cursus. In pulvinar ornare tellus, sed ullamcorper turpis lobortis vitae. Praesent interdum faucibus nibh, nec gravida est finibus et. Quisque ac volutpat enim, at fermentum quam. Nam eu sodales magna, ut congue risus. Maecenas sit amet justo id massa mollis fringilla quis et eros. Duis ultricies vestibulum cursus. Curabitur aliquet mauris tortor, ac malesuada velit lobortis eu. Etiam eget condimentum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempor aliquam ornare. Duis a suscipit ante."),
51             H5P("In venenatis ornare massa vel aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sodales erat vel laoreet auctor. Sed vulputate facilisis efficitur. Nunc et congue purus. Maecenas tempus felis sit amet convallis interdum. Integer sollicitudin justo vitae sollicitudin blandit. Donec felis libero, imperdiet semper commodo in, porta sed erat. Morbi condimentum et dolor at hendrerit. Aenean pellentesque pellentesque turpis vitae congue. Sed sed ultricies nisi. Ut ut pellentesque massa. Vivamus at convallis mi, sit amet ornare arcu. Curabitur libero purus, finibus eu laoreet in, blandit in velit. Donec gravida quam nec urna tincidunt, vel tempus ante placerat. Vestibulum dignissim congue gravida."),
52             H5P("Morbi sit amet ultricies felis, et molestie ex. Aenean justo odio, auctor sed auctor in, tristique eu justo. Vivamus eget aliquet dui. Praesent tristique eros a pellentesque luctus. Praesent ac metus non ex imperdiet egestas at nec nisi. Sed elementum nulla risus, in egestas massa pharetra id. Pellentesque iaculis vestibulum imperdiet."),
53             H5P("Nam in gravida quam. Praesent eget massa a diam laoreet posuere sed vel magna. Etiam semper leo dolor, ut molestie turpis lacinia sit amet. In quis luctus orci, id iaculis lectus. In vitae dignissim metus, a facilisis leo. Suspendisse hendrerit tempus diam, at mattis nibh. Cras bibendum, neque sed efficitur gravida, nunc neque viverra nibh, eu varius risus nisi ac mauris. Suspendisse elementum sodales fermentum. Proin varius nulla at nulla condimentum sollicitudin vehicula eget justo. Etiam ultrices neque sed tortor luctus, eu ultrices purus auctor. Nulla eget nisl mi."))
54             ), ``, ``);
55 
56       return 
57 H5Main(["style":"margin-top:70px;"], 
58   H5Div(["container-fluid", "mt-3", "bg-light"],
59     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 
60     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Scrollspies")),
61 
62   BS5Container(["mt-3"]).row(
63     H5Div(["col-12", "col-lg-2"], 
64       listLevels("basic"),
65       listAreas("basic", "components"),
66       listSections("basic", "components", "scrollspies")),
67     H5Div(["col-12", "col-lg-8"], 
68       dateInfo(this),
69       H5H2(["display-4"], "Scrollspies"),
70       H5Hr,
71       
72       exampleExample
73 
74      ),
75     H5Div(["col-12", "col-lg-2"]))).toString;
76     }
77   });
78 }