组件 分页 拟物分页组件

拟物分页组件

一个为博客界面设计的响应式互动分页组件,采用新拟态风格,支持深色模式。

预览

HTML 代码

<div class="flex items-center justify-center py-8">  <nav aria-label="Pagination" class="hidden md:flex space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">1</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">2</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">3</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <nav aria-label="Pagination" class="flex md:hidden space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2">    <span class="text-gray-800 dark:text-gray-200">Page</span>    <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1">    <span class="text-gray-800 dark:text-gray-200">of 3</span>  </div></div>

相关组件

分页组件

一个响应式分页组件,采用粗野主义风格设计,利用大地色调和适度的复杂度,适用于商业/公司网站,并支持深色主题。

打开

用于音乐/音频的 Neomorphic Neon 分页

一个响应式分页组件,采用中构风格和明亮的霓虹灯/电色设计,适用于音乐流媒体和音频平台。包括深色模式支持。

打开

Skeuomorphic_Purple_Pagination

一个复杂的拟物化分页组件,专为咨询/服务网站设计,具有紫色/紫色配色方案和完全响应能力,支持深色模式。

打开