Компоненты Нумерация страниц Пагинация электронной коммерции

Пагинация электронной коммерции

Адаптивный компонент пагинации с поддержкой темной темы, вдохновленный Material Design, подходит для объявлений о товарах в электронной коммерции. Реализует комплементарную цветовую схему и умеренную сложность с интерактивными состояниями кнопок с использованием только HTML и Tailwind CSS.

Предварительный просмотр

HTML-код

<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Previous
  </button>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
    1
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
    3
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    4
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    5
  </a>
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Next
  </button>
</nav>

Связанные компоненты

Компонент пагинации

Компонент пагинации с микровзаимодействиями для портфеля, с использованием триадической цветовой схемы. Адаптивный дизайн с поддержкой темных тем, без JavaScript.

Открытый

Retro_Grayscale_Crypto_Pagination

Сложный компонент пагинации в стиле ретро/винтаж для приложений криптовалюты/блокчейна с использованием цветовой схемы в оттенках серого. Он полностью отзывчив и поддерживает темный режим.

Открытый

Компонент неморфной пагинации

Компонент Neumorphic Pagination с поддержкой темного режима.

Открытый