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

Поставить звезду
Навигация mobilenavigationbottom bar

Floating Bottom Nav

Закрепленная нижняя панель навигации для мобильных веб-приложений.

🏠 🔍 🔔 👤

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

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

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

<BottomNavMobile>Content</BottomNavMobile>
--- import { FloatingBottomNav } from 'astro-component-kit'; --- <BottomNavMobile>Content</BottomNavMobile>

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

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

astro 
---
---
<div class="bottom-nav">
  <a href="#" class="active">🏠</a>
  <a href="#">🔍</a>
  <a href="#">🔔</a>
  <a href="#">👤</a>
</div>
<style>
  .bottom-nav { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 60px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; display: flex; justify-content: space-around; align-items: center; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
  .bottom-nav a { font-size: 1.25rem; opacity: 0.5; text-decoration: none; transition: 0.3s; }
  .bottom-nav a.active { opacity: 1; transform: translateY(-5px); }
</style>
--- --- <div class="bottom-nav"> <a href="#" class="active">🏠</a> <a href="#">🔍</a> <a href="#">🔔</a> <a href="#">👤</a> </div> <style> .bottom-nav { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; height: 60px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; display: flex; justify-content: space-around; align-items: center; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .bottom-nav a { font-size: 1.25rem; opacity: 0.5; text-decoration: none; transition: 0.3s; } .bottom-nav a.active { opacity: 1; transform: translateY(-5px); } </style>

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

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