Link Preview
Превью страницы при наведении на ссылку. Pro · Анимированные компоненты › Превью ссылок
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add link-previewnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { LinkPreview } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
href * | string | The link's address; a normal click still follows it. | |
children * | ReactNode | The link text. | |
image | string | Picture of the target page — from your screenshot service or a prepared image. The component never fetches the page itself (cross-origin pages can't be captured in the browser). | |
title | ReactNode | Heading of the preview (default: none). | |
description | ReactNode | A line about the target page. | |
width | number | 240 | Width of the preview image, px (default 240); its height keeps a 16:9 ratio. |
placement | Placement | 'top' | Side of the link the preview opens on (default top). |
openDelay | number | 300 | Delay before opening on hover or keyboard focus, ms (default 300). |
closeDelay | number | 150 | Delay before closing once the pointer leaves the link and the card, ms (default 150). |
followCursor | boolean | false | The preview slides along the link after the pointer, on a spring (default false). |
Похожие компоненты
- Toggle — Кнопка-переключатель с пружинным откликом
- Flip Button — Кнопка с двумя сторонами, переворачивается на пружине
- Liquid Button — Кнопка, которая заполняется «жидкостью» при наведении
- Theme Toggler — Смена светлой и тёмной темы с раскрытием через View Transitions
- GitHub Stars Button — Ссылка на репозиторий с прокручивающимся числом звёзд
- Share Button — Кнопка, раскрывающая иконки соцсетей
- Code Tabs — Варианты кода во вкладках: npm, pnpm, bun — с копированием
- Number Wheel — Число на вращающемся барабане с соседними значениями
- Pin List — Список с закреплением: элементы плавно переезжают между группами
- Notification Stack — Стопка уведомлений, раскрывающаяся в список
- Todo List — Чек-лист с волнистым зачёркиванием выполненных пунктов
- Presence Avatars — Кто онлайн: аватары перестраиваются при смене статуса
Назад: Radial Intro · Далее: Folded Depth Cards · Весь раздел «Анимированные компоненты»