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

Поставить звезду
Модальные окна searchfullscreenoverlay

Fullscreen Search

Полноэкранный поисковый слой с крупным полем ввода и мгновенными результатами.

Start searching...
Search for components, guides, or authors

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

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

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

<SearchOverlayFullscreen>Content</SearchOverlayFullscreen>
--- import { FullscreenSearch } from 'astro-component-kit'; --- <SearchOverlayFullscreen>Content</SearchOverlayFullscreen>

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

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

astro 
---
---
<div class="search-hero">
  <div class="close">Esc</div>
  <input type="text" placeholder="Start searching..." autofocus />
  <div class="hints">Search for <span>components</span>, <span>guides</span>, or <span>authors</span></div>
</div>
<style>
  .search-hero { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
  .close { position: absolute; top: 3rem; right: 3rem; color: #64748b; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
  input { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; }
  .hints { margin-top: 2rem; color: #64748b; font-size: 1rem; }
  span { color: #818cf8; text-decoration: underline; cursor: pointer; }
  @media (max-width: 768px) { input { font-size: 1.5rem; } }
</style>
--- --- <div class="search-hero"> <div class="close">Esc</div> <input type="text" placeholder="Start searching..." autofocus /> <div class="hints">Search for <span>components</span>, <span>guides</span>, or <span>authors</span></div> </div> <style> .search-hero { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } .close { position: absolute; top: 3rem; right: 3rem; color: #64748b; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; } input { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; } .hints { margin-top: 2rem; color: #64748b; font-size: 1rem; } span { color: #818cf8; text-decoration: underline; cursor: pointer; } @media (max-width: 768px) { input { font-size: 1.5rem; } } </style>

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

Категория
Модальные окна
Имя файла
FullscreenSearch.astro
Зависимости
Нет — чистый Astro + CSS
Теги
searchfullscreenoverlay