1 звезда на GitHub = 1 новый компонент.

Поставить звезду

Навигация paginationnavigationglass

Glass Pagination

Пагинация со стеклянным фоном и яркой подсветкой активного номера страницы.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { GlassPagination } from 'astro-component-kit';
---

<PaginationGlass>Content</PaginationGlass>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/GlassPagination.astro:

---
---
<nav class="pagination">
  <button class="prev">←</button>
  <div class="pages">
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <span>...</span>
    <a href="#">12</a>
  </div>
  <button class="next">→</button>
</nav>
<style>
  .pagination { display: flex; align-items: center; gap: 1rem; }
  .pages { display: flex; gap: 0.5rem; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); }
  .pages a, button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: #94a3b8; text-decoration: none; transition: 0.2s; border: none; background: none; cursor: pointer; }
  .pages a.active { background: #6366f1; color: #fff; }
  .pages a:hover:not(.active) { background: rgba(255,255,255,0.05); color: #fff; }
</style>

Краткая информация

Категория: Навигация
Имя файла: GlassPagination.astro
Зависимости: Нет — чистый Astro + CSS
Теги: paginationnavigationglass