Radial Menu
Кольцевое контекстное меню по правому клику. Pro · Анимированные компоненты › Круговые меню
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add radial-menunpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { RadialMenu } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
children * | ReactNode | The area the menu belongs to: right-click, a long press (touch), Shift+F10 or the ContextMenu key inside it opens the ring. | |
items * | readonly RadialMenuItem[] | Commands around the ring, clockwise from the top. | |
onSelect | (item: RadialMenuItem) => void | Called with the picked command after the ring closes. | |
open | boolean | Controlled open; use with onOpenChange. | |
defaultOpen | boolean | false | Initial open when uncontrolled. |
onOpenChange | (open: boolean) => void | Called with the new open when it changes. | |
size | number | 240 | Outer diameter of the ring, px (default 240). |
bandWidth | number | 56 | Width of the band the commands sit on, px (default 56). |
disabled | boolean | false | Ignore the opening gestures and keys (the browser's own context menu appears). |
labels | Partial<RadialMenuLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Похожие компоненты
- Radial Nav — Круговая навигация со стрелкой, поворачивающейся к разделу
- Radial Intro — Элементы вылетают из центра и вращаются по орбите
- 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 — Стопка уведомлений, раскрывающаяся в список
Назад: Presence Avatars · Далее: Radial Nav · Весь раздел «Анимированные компоненты»