muCSS/examples/pagination.html at main · Digicreon/muCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>µCSS — Pagination</title>
	<link rel="stylesheet" href="../dist/mu.css">
</head>
<body>
	<main class="container">
		<hgroup>
			<h1>Pagination</h1>
			<p>Page navigation with alignment, sizes, and responsive variants.</p>
		</hgroup>

		<p><a href="index.html">&larr; Back to examples</a></p>
		<p><button class="btn btn-sm btn-secondary" onclick="document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'">Toggle dark mode</button></p>

		<section>
			<h2>Basic</h2>
			<nav aria-label="Pagination">
				<ul class="pagination">
					<li class="pagination-prev"><a href="#">&laquo; Prev</a></li>
					<li><a href="#">1</a></li>
					<li class="active"><a href="#" aria-current="page">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li class="pagination-next"><a href="#">Next &raquo;</a></li>
				</ul>
			</nav>
		</section>

		<section>
			<h2>With ellipsis and disabled</h2>
			<nav aria-label="Pagination">
				<ul class="pagination">
					<li class="pagination-prev disabled"><a href="#">&laquo; Prev</a></li>
					<li class="active"><a href="#" aria-current="page">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li class="pagination-ellipsis"><span>&hellip;</span></li>
					<li><a href="#">20</a></li>
					<li class="pagination-next"><a href="#">Next &raquo;</a></li>
				</ul>
			</nav>
		</section>

		<section>
			<h2>Centered</h2>
			<nav aria-label="Pagination">
				<ul class="pagination pagination-centered">
					<li class="pagination-prev"><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li class="active"><a href="#" aria-current="page">2</a></li>
					<li><a href="#">3</a></li>
					<li class="pagination-next"><a href="#">&raquo;</a></li>
				</ul>
			</nav>
		</section>

		<section>
			<h2>End-aligned</h2>
			<nav aria-label="Pagination">
				<ul class="pagination pagination-end">
					<li class="pagination-prev"><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li class="active"><a href="#" aria-current="page">2</a></li>
					<li><a href="#">3</a></li>
					<li class="pagination-next"><a href="#">&raquo;</a></li>
				</ul>
			</nav>
		</section>

		<section>
			<h2>Small</h2>
			<nav aria-label="Pagination">
				<ul class="pagination pagination-sm">
					<li class="pagination-prev"><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li class="active"><a href="#" aria-current="page">2</a></li>
					<li><a href="#">3</a></li>
					<li class="pagination-next"><a href="#">&raquo;</a></li>
				</ul>
			</nav>
		</section>

		<section>
			<h2>Large</h2>
			<nav aria-label="Pagination">
				<ul class="pagination pagination-lg">
					<li class="pagination-prev"><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li class="active"><a href="#" aria-current="page">2</a></li>
					<li><a href="#">3</a></li>
					<li class="pagination-next"><a href="#">&raquo;</a></li>
				</ul>
			</nav>
		</section>

		<section>
			<h2>Borderless</h2>
			<nav aria-label="Pagination">
				<ul class="pagination pagination-borderless">
					<li class="pagination-prev"><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li class="active"><a href="#" aria-current="page">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li class="pagination-next"><a href="#">&raquo;</a></li>
				</ul>
			</nav>
		</section>

		<section>
			<h2>Responsive</h2>
			<p>On mobile (&lt;640px), only the active page and prev/next are shown.</p>
			<nav aria-label="Pagination">
				<ul class="pagination pagination-responsive">
					<li class="pagination-prev"><a href="#">&laquo; Prev</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li class="active"><a href="#" aria-current="page">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li class="pagination-next"><a href="#">Next &raquo;</a></li>
				</ul>
			</nav>
		</section>
	</main>
</body>
</html>