Навигация languagepickeri18n

Language Picker Pill

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

ES FR JP

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

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

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

<LangSwitcherPill>Content</LangSwitcherPill>

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

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

---
---
<div class="lang-pill">
  <span class="curr">EN</span>
  <div class="list">
    <span>ES</span>
    <span>FR</span>
    <span>JP</span>
  </div>
</div>
<style>
  .lang-pill { background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 100px; color: #fff; font-size: 0.75rem; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; position: relative; }
  .list { position: absolute; top: 110%; left: 0; background: #111; border-radius: 8px; border: 1px solid #333; display: none; flex-direction: column; z-index: 10; }
  .lang-pill:hover .list { display: flex; }
  .list span { padding: 5px 15px; }
  .list span:hover { background: #6366f1; }
</style>

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

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

Живое превью

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

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

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