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

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

Step Spotlight

Эффект светового пятна (прожектора) для акцентирования внимания на элементах.

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

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

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

<SpotlightIndicator>Content</SpotlightIndicator>
--- import { StepSpotlight } from 'astro-component-kit'; --- <SpotlightIndicator>Content</SpotlightIndicator>

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

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

astro 
---
---
<div class="spot-mask"></div>
<style>
  .spot-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; }
</style>
--- --- <div class="spot-mask"></div> <style> .spot-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; } </style>

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

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