Пагинация [CSS + Sass]

Компонент пагинации, дружній до мобільних телефонів, який легко можна налаштувати за допомогою CSS і Sass.

Пагинация — простий спосіб переміщення користувача між вашим контентом на сайті. Інша альтернатива — нескінченна прокрутка, яка має як сильні так і слабкі сторони. Я знаю що фреймворки, такі як Bootstrap, дозволяють Вам створювати пагінацію в секундах, однак, 1) не всі використовують фреймворки або не можуть використовувати для кожного проекту і 2) я створив сніппет з попередньою установкою класів CSS, який трохи легше налаштувати, при цьому Ви економите свій час.


Створення структури
Структура HTML — однакова для кожного елемента пагинации: з <nav>, який обертає ненумерованний список (.cd-pagination). Елементи списку, які містять попередні і наступні посилання мають клас .button. Додаткові, готові до використання класи повинні бути застосовані до елементу <ul> (у прикладі — це клас .no-space).

<nav role="navigation">
<ul class="cd-pagination no-space">
<li class="button"><a href="#0">Тому</a></li>
<li><a href="#0">1</a></li>
<li><a href="#0">2</a></li>
<li><a class="current" href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><span>...</span></li>
<li><a href="#0">20</a></li>
<li class="button"><a href="#0">Вперед</a></li>
</ul>
</nav> <!-- cd-pagination-wrapper -->


Додавання стилів
Найпростіший спосіб змінити «тему» через Sass, де Ви можете скористатися змінними. Ось частина файлу _variables.scss:

// colors

$color-1: #2E4057; // Мариновані Bluewood
$color-2: #64a281; // Aqua Forest
$color-3: #ffffff; // White

// fonts

$primary-font: 'PT Sans', sans-serif;

// border-radius

$border-radius: .25em;


Змінюючи кольору змінних, Ви можете створити нескінченні варіації теми. Якщо ж Sass вам чужий, просто відкрийте свій style.css і оновіть кольору там.

Сниппет включає додаткові класи, які змінюють стиль пагинации. Всі ці класи застосовуються до <ul> елементам. Клас .cd-pagination є базовим класом, тому не може бути видалений.

Найпростіший спосіб перевірити як працюють ці класи, полягає в тому, щоб переглянути вихідний файл і демонстраційний приклад, який додається. Ось приклад з файлу style.css клас (.custom-icons).

/* --------------------------------

custom icons - customize the small arrow inside the next and prev buttons

-------------------------------- */

.cd-pagination.custom-icons .button a {
position: relative;
}
.cd-pagination.custom-icons .button:first-of-type a {
padding-left: 2.4 em;
}
.cd-pagination.custom-icons .button:last-of-type a {
padding-right: 2.4 em;
}
.cd-pagination.custom-icons .button:first-of-type a::before,
.cd-pagination.custom-icons .button:last-of-type a::after {
content: ";
position: absolute;
display: inline-block;
/* set size for custom icons */
width: 16px;
height: 16px;
top: 50%;
/* set margin-top = icon height/2 */
margin-top: -8px;
background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;
}
.cd-pagination.custom-icons .button:first-of-type a::before {
left: .8em;
}
.cd-pagination.custom-icons .button:last-of-type a::after {
right: .8em;
transform: rotate(180deg);
}


Деякі рекомендації

  • На маленьких пристроях ми видаляємо «номери» і показуємо тільки попередні і наступні посилання.
  • Клас .disabled може бути доданий до елементу <a>, щоб відключити його.
  • Клас .current використовується для виділення поточної сторінки (цифри).
  • Клас .animated-buttons працює лише в поєднанні з класом .custom-icons. Крім того, текст всередині елемента <a> повинні бути обгорнутий елементом <i>.


Як видалити простір між елементами inline-block


Ось зручний прийом! Коли Ви включаєте для елементів списку inline-block, щоб вирівняти їх по горизонталі, Ви відразу звертаєте увагу на значення margin. Найчастіше намагаєтеся встановити значення margin: 0;, але це не вирішує проблему.
Ваші варіанти:
  1. Виберіть від'ємне значення margin для елементів списку (не фанат цього рішення).
  2. Виберіть значення float (тобто float: left; застосовується до кожного елементу <li>); тільки не забудьте застосувати «Clearfix» хак для елемента <ul> або його батька.
  3. Видаліть закриваючий тег </li>. Можливо це грубо звучить, але це відмінний козир, який можна тримати в рукаві. Ви можете побачити це на прикладі цифри 4.


<nav role="navigation">
<ul class="cd-pagination no-space move-custom buttons-icons">
<li class="button"><a href="#0">Тому</a>
<li><a href="#0">1</a>
<li><a href="#0">2</a>
<li><a class="current" href="#0">3</a>
<li><a href="#0">4</a>
<li><span>...</span>
<li><a href="#0">20</a>
<li class="button"><a href="#0">Вперед</a>
</ul>
</nav> <!-- cd-pagination-wrapper -->


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.