Go To Github

COMPONENT

c-pagination

Demo Section

Each variation will be presented in the following sections.

Pagination (Simple)

Technical Details

README

Bower versionGitter Chat

Pagination

Description

Simple pagination component.

Requirements

Sass

Veams-Sass >= v2.0.0 - Basic Sass library.

Installation

Installation with Veams

veams install vc pagination

Installation with Bower

bower install veams-component-pagination --save

Fields

c-pagination.hbs

Settings

  • settings.pagContextClass {String} [default] - Context class of component.
  • settings.pagClasses {String} - Modifier classes for component.

Content

  • content.pagButtons {Object} - Object with multiple elements.
  • content.pagButtons.pagDescription {String} - Description for buttons.
  • content.pagButtons.previous {String} - Description for previous button.
  • content.pagButtons.next {String} - Description for next button.
  • content.pagCurrent {String} - Description for current element.
  • content.pagMax {Number} - Last number in pagination.
Data File
{
	"variations": {
		"simple": {
			"docs": {
				"variationName": "Pagination (Simple)",
				"sectionCenter": true
			},
			"settings": {
				"pagContextClass": "default",
				"pagClasses": false
			},
			"content": {
				"pagButtons": {
					"description": "One Page",
					"previous": "Back",
					"next": "Forward"
				},
				"pagMax": 12
			}
		}
	}
}
Templates

c-pagination

<div class="c-pagination{{#if settings.pagContextClass}}--{{settings.pagContextClass}}{{else}}--default{{/if}}{{#if
		settings.pagClasses}} {{settings.pagClasses}}{{/if}}" data-css="c-pagination">
	<ul class="pagination__list">
		{{#if content.pagButtons}}
			<li class="pagination__list-item is-disabled">
				<strong class="pagination__list-element is-previous"><span
						class="is-hidden">{{content.pagButtons.description}}</span>{{content.pagButtons.previous}}
				</strong>
			</li>
		{{/if}}

		<li class="pagination__list-item is-active">
			<span class="is-hidden">{{content.pagCurrent}}</span> <strong class="pagination__list-element">1</strong>
		</li>
		<li class="pagination__list-item">
			<a class="pagination__list-element" href="#">2</a>
		</li>
		<li class="pagination__list-item">
			<a class="pagination__list-element" href="#">3</a>
		</li>
		<li class="pagination__list-item is-more">
			<a class="pagination__list-element" href="#">...</a>
		</li>
		<li class="pagination__list-item">
			<a class="pagination__list-element" href="#">{{content.pagMax}}</a>
		</li>
		{{#if content.pagButtons}}
			<li class="pagination__list-item">
				<a class="pagination__list-element is-next" href="#" title="One Page Forward">
					<span class="is-hidden">{{content.pagButtons.description}}</span>{{content.pagButtons.next}}
				</a>
			</li>
		{{/if}}
	</ul>
</div>
Styles
/* ===================================================
COMPONENT: PAGINATION
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
$pagination-primary-color: #333 !default;
$pagination-secondary-color: #ccc !default;
$pagination-bg-color: #fff !default;
$pagination-ease-method: ease !default;

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-pagination"] {
	
	.pagination__list {
		list-style: none;
	}
	
	.pagination__list-item {
	}
	
	.pagination__list-element {
	}

	/*
	Modifiers
	----------------------- */
	.is-previous {
	}
	
	.is-next {
	}
	
	.is-hidden {
	}
	
	.is-active {
	}
	
	.is-disabled {
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-pagination--default {

	.is-hidden {
		display: none;
	}

	.pagination__list {
		width: auto;
	}

	.pagination__list-item {
		position: relative;
		float: left;
		margin-right: 5px;
		width: 50px;
		background-color: $pagination-bg-color;
		text-align: center;
		border: 1px solid rgba($pagination-primary-color, 0.3);

		&:hover {
			border-color: $pagination-secondary-color;
		}

		&.is-active {
			border: 1px solid $pagination-secondary-color;
			box-shadow: inset 0 0 0 4px $pagination-secondary-color;
		}

		.is-hidden {
			@extend %hidden-text;

			display: block;
		}
	}

	.pagination__list-element {
		color: $pagination-primary-color;
		display: block;
		font-size: 1.9rem;
		font-weight: 400;
		line-height: 2;
		padding: 14px 0;
		text-decoration: none;
		transition: color 0.2s $pagination-ease-method;

		&.is-active {
			color: $pagination-secondary-color;
			transition: color 0.2s $pagination-ease-method;
		}

		&.is-previous,
		&.is-next {
			@include hidden-text;

			height: 66px;

			&::after {
				@include centering(hv, relative);
				@extend %pseudo;

				color: $pagination-primary-color;
				font-size: 1.8rem;
				opacity: 1;
			}
		}

		&.is-previous {
			
			&::after {
				content: '<'
			}
		}

		&.is-next {
			
			&::after {
				content: '>'
			}
		}
	}
}
HTML Output

Pagination (Simple)

<div class="c-pagination--default" data-css="c-pagination">
	<ul class="pagination__list">
		<li class="pagination__list-item is-disabled">
			<strong class="pagination__list-element is-previous"><span
						class="is-hidden">One Page</span>Back
				</strong>
		</li>
		<li class="pagination__list-item is-active">
			<span class="is-hidden"></span> <strong class="pagination__list-element">1</strong>
		</li>
		<li class="pagination__list-item">
			<a class="pagination__list-element" href="#">2</a>
		</li>
		<li class="pagination__list-item">
			<a class="pagination__list-element" href="#">3</a>
		</li>
		<li class="pagination__list-item is-more">
			<a class="pagination__list-element" href="#">...</a>
		</li>
		<li class="pagination__list-item">
			<a class="pagination__list-element" href="#">12</a>
		</li>
		<li class="pagination__list-item">
			<a class="pagination__list-element is-next" href="#" title="One Page Forward">
					<span class="is-hidden">One Page</span>Forward
				</a>
		</li>
	</ul>
</div>