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

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

Step Spotlight

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

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

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { SpotlightIndicator } from 'react-component-kit-ui/overlays';

<SpotlightIndicator>Content</SpotlightIndicator>

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

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

SpotlightIndicator.tsx
'use client';

import './SpotlightIndicator.css';

/** SpotlightIndicator — ported from astro-component-kit. */
export interface SpotlightIndicatorProps {
}

export function SpotlightIndicator({}: SpotlightIndicatorProps) {
  return (
    <>
      <div className="spot-mask" data-rk-48346e=""></div>
    </>
  );
}

export default SpotlightIndicator;
SpotlightIndicator.css
/* SpotlightIndicator — ported from astro-component-kit (overlays/SpotlightIndicator.astro) */

.spot-mask:where([data-rk-48346e]) { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; }

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

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