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

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

Side Navigation Tabs

Вертикальные вкладки с левым списком переключения и правым блоком контента.

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

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

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

<VerticalTabs>Content</VerticalTabs>
--- import { SideNavigationTabs } from 'astro-component-kit'; --- <VerticalTabs>Content</VerticalTabs>

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

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

astro 
---
---
<div class="v-tabs">
  <button class="v-tab active">General</button>
  <button class="v-tab">Account</button>
  <button class="v-tab">Security</button>
  <button class="v-tab">Notifications</button>
</div>
<style>
  .v-tabs { display: flex; flex-direction: column; width: 200px; border-left: 2px solid #1e293b; }
  .v-tab { background: none; border: none; padding: 0.75rem 1.25rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; border-left: 2px solid transparent; margin-left: -2px; }
  .v-tab:hover { color: #fff; }
  .v-tab.active { color: #6366f1; border-left-color: #6366f1; background: rgba(99,102,241,0.05); }
</style>
--- --- <div class="v-tabs"> <button class="v-tab active">General</button> <button class="v-tab">Account</button> <button class="v-tab">Security</button> <button class="v-tab">Notifications</button> </div> <style> .v-tabs { display: flex; flex-direction: column; width: 200px; border-left: 2px solid #1e293b; } .v-tab { background: none; border: none; padding: 0.75rem 1.25rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; border-left: 2px solid transparent; margin-left: -2px; } .v-tab:hover { color: #fff; } .v-tab.active { color: #6366f1; border-left-color: #6366f1; background: rgba(99,102,241,0.05); } </style>

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

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