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

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

Underline Tabs

Вкладки с плавной скользящей линией подчеркивания активного раздела.

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

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

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

<TabUnderline>Content</TabUnderline>
--- import { UnderlineTabs } from 'astro-component-kit'; --- <TabUnderline>Content</TabUnderline>

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

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

astro 
---
---
<nav class="u-tabs">
  <a href="#" class="active">Profile</a>
  <a href="#">Password</a>
  <a href="#">Sessions</a>
  <div class="indicator"></div>
</nav>
<style>
  .u-tabs { display: flex; gap: 2rem; border-bottom: 2px solid rgba(255,255,255,0.05); position: relative; }
  .u-tabs a { padding: 1rem 0; color: #64748b; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
  .u-tabs a.active { color: #fff; }
  .indicator { position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: #6366f1; transition: 0.3s; }
</style>
--- --- <nav class="u-tabs"> <a href="#" class="active">Profile</a> <a href="#">Password</a> <a href="#">Sessions</a> <div class="indicator"></div> </nav> <style> .u-tabs { display: flex; gap: 2rem; border-bottom: 2px solid rgba(255,255,255,0.05); position: relative; } .u-tabs a { padding: 1rem 0; color: #64748b; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; } .u-tabs a.active { color: #fff; } .indicator { position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: #6366f1; transition: 0.3s; } </style>

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

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