1 module uim.bootstrap.bs5.demos.components.paginations; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/paginations", 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": "Paginations - 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/components"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Paginations")), 23 BS5Container(["mt-3"]).row( 24 H5Div(["col-12", "col-lg-2"], 25 listLevels("basic"), 26 listAreas("basic", "components"), 27 listSections("basic", "components", "paginations")), 28 H5Div(["col-12", "col-lg-8"], 29 dateInfo(this), 30 H5H2(["display-4"], "Paginations"), 31 H5Hr, 32 33 demoBs5Example("numberstext", "Numbers and text", 34 H5Div( 35 BS5Nav(["aria-label":"Search results pages"], 36 BS5Pagination( 37 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 38 BS5PageItem(BS5PageLink(["href":"#"], "1")), 39 BS5PageItem(BS5PageLink(["href":"#"], "2")), 40 BS5PageItem(BS5PageLink(["href":"#"], "3")), 41 BS5PageItem(BS5PageLink(["href":"#"], "Next")))) 42 ), `BS5Pagination( 43 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 44 BS5PageItem(BS5PageLink(["href":"#"], "1")), 45 BS5PageItem(BS5PageLink(["href":"#"], "2")), 46 BS5PageItem(BS5PageLink(["href":"#"], "3")), 47 BS5PageItem(BS5PageLink(["href":"#"], "Next"))))`, ``), 48 49 demoBs5Example("numbersicons", "Numbers and icons", 50 H5Div( 51 BS5Nav(["aria-label":"Search results pages"], 52 BS5Pagination( 53 BS5PageItem( 54 BS5PageLink(["href":"#", "aria-label":"Previous"], H5Span(["aria-hidden":"true"], "«")))), 55 BS5PageItem(BS5PageLink(["href":"#"], "1")), 56 BS5PageItem(BS5PageLink(["href":"#"], "2")), 57 BS5PageItem(BS5PageLink(["href":"#"], "3")), 58 BS5PageItem( 59 BS5PageLink(["href":"#", "aria-label":"Next"], H5Span(["aria-hidden":"true"], "»")))) 60 ), `BS5Nav(["aria-label":"Search results pages"], 61 BS5Pagination( 62 BS5PageItem( 63 BS5PageLink(["href":"#", "aria-label":"Previous"], H5Span(["aria-hidden":"true"], "«")))), 64 BS5PageItem(BS5PageLink(["href":"#"], "1")), 65 BS5PageItem(BS5PageLink(["href":"#"], "2")), 66 BS5PageItem(BS5PageLink(["href":"#"], "3")), 67 BS5PageItem( 68 BS5PageLink(["href":"#", "aria-label":"Next"], H5Span(["aria-hidden":"true"], "»"))))`, ``), 69 70 demoBs5Example("activedisabled", "Active and disabled items", 71 H5Div( 72 BS5Nav(["aria-label":"Search results pages"], 73 BS5Pagination( 74 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 75 BS5PageItem(BS5PageLink(["href":"#"], "1")), 76 BS5PageItem(BS5PageLink(["href":"#"], "2")), 77 BS5PageItem(BS5PageLink(["href":"#"], "3")), 78 BS5PageItem(["active"], ["aria-current":"page"], 79 BS5PageLink(["href":"#"], H5Span(["visually-hidden"], "(current)"))), 80 BS5PageItem(["disabled"], 81 BS5PageLink(["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Next")))) 82 ), `BS5Nav(["aria-label":"Search results pages"], 83 BS5Pagination( 84 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 85 BS5PageItem(BS5PageLink(["href":"#"], "1")), 86 BS5PageItem(BS5PageLink(["href":"#"], "2")), 87 BS5PageItem(BS5PageLink(["href":"#"], "3")), 88 BS5PageItem(["active"], ["aria-current":"page"], 89 BS5PageLink(["href":"#"], H5Span(["visually-hidden"], "(current)"))), 90 BS5PageItem(["disabled"], 91 BS5PageLink(["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Next"))))`, ``), 92 93 demoBs5Example("activedisabledanchors", "Active and disabled items without anchors", 94 H5Div( 95 H5P("<code><span></code> elements for active and disabled page links:"), 96 BS5Nav(["aria-label":"Search results pages"], 97 BS5Pagination( 98 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 99 BS5PageItem(BS5PageLink(["href":"#"], "1")), 100 BS5PageItem(BS5PageLink(["href":"#"], "2")), 101 BS5PageItem(["active"], ["aria-current":"page"], 102 H5Span(["page-link"], H5String(" 3 "), 103 H5Span(["visually-hidden"], "(current)"))), 104 BS5PageItem(["disabled"], 105 H5Span(["page-link"], "Next"))))), ``, ``), 106 107 demoBs5Example("sizing", "Sizing", 108 H5Div( 109 BS5Nav(["aria-label":"Search results pages"], 110 BS5Pagination(["pagination-sm"], 111 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 112 BS5PageItem(BS5PageLink(["href":"#"], "1")), 113 BS5PageItem(BS5PageLink(["href":"#"], "2")), 114 BS5PageItem(BS5PageLink(["href":"#"], "3")), 115 BS5PageItem(BS5PageLink(["href":"#"], "Next")))), 116 BS5Nav(["aria-label":"Search results pages"], 117 BS5Pagination( 118 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 119 BS5PageItem(BS5PageLink(["href":"#"], "1")), 120 BS5PageItem(BS5PageLink(["href":"#"], "2")), 121 BS5PageItem(BS5PageLink(["href":"#"], "3")), 122 BS5PageItem(BS5PageLink(["href":"#"], "Next")))), 123 BS5Nav(["aria-label":"Search results pages"], 124 BS5Pagination(["pagination-lg"], 125 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 126 BS5PageItem(BS5PageLink(["href":"#"], "1")), 127 BS5PageItem(BS5PageLink(["href":"#"], "2")), 128 BS5PageItem(BS5PageLink(["href":"#"], "3")), 129 BS5PageItem(BS5PageLink(["href":"#"], "Next"))))), ``, ``), 130 131 demoBs5Example("alignment", "Alignment", 132 H5Div( 133 BS5Nav(["aria-label":"Search results pages"], 134 BS5Pagination(["justify-content-center"], 135 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 136 BS5PageItem(BS5PageLink(["href":"#"], "1")), 137 BS5PageItem(BS5PageLink(["href":"#"], "2")), 138 BS5PageItem(BS5PageLink(["href":"#"], "3")), 139 BS5PageItem(BS5PageLink(["href":"#"], "Next")))), 140 BS5Nav(["aria-label":"Search results pages"], 141 BS5Pagination(["justify-content-end"], 142 BS5PageItem(BS5PageLink(["href":"#"], "Previous")), 143 BS5PageItem(BS5PageLink(["href":"#"], "1")), 144 BS5PageItem(BS5PageLink(["href":"#"], "2")), 145 BS5PageItem(BS5PageLink(["href":"#"], "3")), 146 BS5PageItem(BS5PageLink(["href":"#"], "Next"))))), ``, ``) 147 148 ), 149 H5Div(["col-12", "col-lg-2"]))).toString; 150 } 151 }); 152 }