pagination init

src/_includes/pagination.html

@@ -1,13 +1,21 @@
-<ul class="pagination">
-	<li class="page-item disabled">
-		<a class="page-link" href="#" tabindex="-1">Previous</a>
+{% assign count = include.count | default: 5 %}
+{% assign active-item = include.active-item | default: 2 %}
+<ul class="pagination {{ include.class }}">
+	<li class="page-item disabled{% if include.pager %} mr-auto{% endif %}">
+		<a class="page-link" href="#" tabindex="-1">
+			{% if include.left-icon %}<i class="{{ include.left-icon }}"></i>{% else %}Prev{% endif %}
+		</a>
 	</li>
-	<li class="page-item"><a class="page-link" href="#">1</a></li>
-	<li class="page-item active">
-		<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
-	</li>
-	<li class="page-item"><a class="page-link" href="#">3</a></li>
-	<li class="page-item">
-		<a class="page-link" href="#">Next</a>
+
+	{% unless include.pager %}
+	{% for i in (1..count) %}
+	<li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li>
+	{% endfor %}
+	{% endunless %}
+
+	<li class="page-item{% if include.pager %} ml-auto{% endif %}">
+		<a class="page-link" href="#">
+			{% if include.right-icon %}<i class="{{ include.right-icon }}"></i>{% else %}Next{% endif %}
+		</a>
 	</li>
 </ul>

src/assets/scss/_variables.scss

@@ -301,4 +301,8 @@ $flag-icons: ('ad', 'ae', 'af', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as',
 $hr-border-color: $border-color;
 
 // Thumbnails
-$thumbnail-bg: #fff
+$thumbnail-bg: #fff;
+
+// Pagination
+$pagination-color: $body-color;
+$pagination-disabled-color: $gray-400;

src/assets/scss/dashboard/_pagination.scss

@@ -0,0 +1,13 @@
+.pagination-simple {
+	.page-item {
+		.page-link {
+			background: none;
+			border: none;
+		}
+
+		&.active .page-link {
+			color: $pagination-color;
+			font-weight: 700;
+		}
+	}
+}

src/assets/scss/dashboard/dashboard.scss

@@ -21,6 +21,7 @@
 @import 'badge';
 @import 'tables';
 @import 'breadcrumb';
+@import 'pagination';
 @import 'cards';
 @import 'popover';
 @import 'dropdown';

src/pagination.html

@@ -0,0 +1,29 @@
+---
+title: Pagination
+layout: default
+---
+
+<div class="container">
+	<div>
+		{% include pagination.html %}
+	</div>
+	<div>
+		{% include pagination.html count=8 %}
+	</div>
+	<div>
+		{% include pagination.html pager=true %}
+	</div>
+	<div>
+		{% include pagination.html left-icon="fe fe-chevron-left" right-icon="fe fe-chevron-right" %}
+	</div>
+	<div>
+		{% include pagination.html class="justify-content-center" %}
+	</div>
+	<div>
+		{% include pagination.html class="justify-content-end" %}
+	</div>
+
+	<div>
+		{% include pagination.html class="pagination-simple" %}
+	</div>
+</div>