JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris/1.13.0/iris.min.css">
<link rel="stylesheet" href="https://assets.orb.alkamitech.com/production/base/font/font-icons.css">
<div id="app" class="mar--lg">
  <Pagination
		:item-array="['a', 'b', 'c', 'd']"
		:init-page="2"
		:size="2"
	/>
</div>

<script type="text/x-template" id="pagination_template">
<nav id="pagination" class="iris-pagination iris-pagination-simple">
	<button class="iris-pagination__direction-button iris-pagination__direction-button--first" type="button" aria-label="Go to first page" @click="firstPageClickHandler" :disabled="currentPage === 1">
		<span class="font-icon-angle-left-double" data-icon-size="md"></span>
	</button>
	<button class="iris-pagination__direction-button iris-pagination__direction-button--previous" type="button" aria-label="Go to previous page" @click="previosPageClickHandler" :disabled="currentPage === 1">
		<span class="font-icon-angle-left" data-icon-size="md"></span>
	</button>
	<div class="iris-pagination__textfield">
		<input class="iris-textfield__input" min="1" :max="itemArray.length" aria-label="Current Page" v-model="currentPage" />
	</div>
	<span class="iris-pagination__total">of {{ itemArray.length }}</span>
	<button class="iris-pagination__direction-button iris-pagination__direction-button--next" type="button" aria-label="Go to next page" @click="nextPageClickHandler" :disabled="currentPage === itemArray.length">
		<span class="font-icon-angle-right" data-icon-size="md"></span>
	</button>
	<button class="iris-pagination__direction-button iris-pagination__direction-button--last" type="button" aria-label="Go to last page" @click="lastPageClickHandler" :disabled="currentPage === itemArray.length">
		<span class="font-icon-angle-right-double" data-icon-size="md"></span>
	</button>
</nav>
</script>

SCSS

html {
	font-size: 10px;
}

Vue

Vue.component('pagination', {
	template: '#pagination_template',
	props: {
		itemArray: Array,
		initPage: Number,
		size: Number
	},
	data: function () {
		return {
			currentPage: this.initPage
		}
	},
	methods: {
		firstPageClickHandler: function () {
			this.currentPage = 1;
		},
		previosPageClickHandler: function () {
			if (this.currentPage > 1) {
				this.currentPage -= 1;
			}
		},
		nextPageClickHandler: function () {
			if (this.currentPage < this.itemArray.length) {
				this.currentPage += 1;
			}
		},
		lastPageClickHandler: function () {
			this.currentPage = this.itemArray.length;
		}
	}
});

new Vue({
  el: "#app"
})