Radial Intro
Элементы вылетают из центра и вращаются по орбите. Pro · Анимированные компоненты › Круговые меню
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add radial-intronpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { RadialIntro } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
orbitItems * | readonly RadialIntroItem[] | Logos, heroes or classes placed around the circle, clockwise from the top. | |
stageSize | number | 320 | Width and height of the stage, px (default 320). |
imageSize | number | 60 | Size of each orbiting item, px (default 60). |
duration | number | 30 | Seconds per full turn (default 30). |
direction | 'cw' | 'ccw' | 'cw' | cw (default) or ccw. |
pauseOnHover | boolean | true | Halt the orbit while the pointer is over the stage (default true). |
children | ReactNode | Content of the middle of the stage (a logo, a title). |
Похожие компоненты
- Radial Menu — Кольцевое контекстное меню по правому клику
- Radial Nav — Круговая навигация со стрелкой, поворачивающейся к разделу
- 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 — Стопка уведомлений, раскрывающаяся в список
Назад: Radial Nav · Далее: Link Preview · Весь раздел «Анимированные компоненты»