Morphing Capsule
Капсула, перетекающая между состояниями. Pro · Эффекты › Стекло
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add morphing-capsulenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { MorphingCapsule } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
states * | Record<string, MorphingCapsuleSegment[]> | Segments shown in each state, in order. Neighbouring segments merge like liquid while they split or join. | |
value | string | Controlled value; use with onValueChange. | |
defaultValue | string | Default: the first state. | |
onValueChange | (value: string) => void | Called with the new value when it changes. | |
label | string | Accessible name of the toolbar. | |
size | 'md' | 'lg' | 'md' | Capsule height: 44px or 52px. |
Похожие компоненты
- Glass Lens — Стеклянная линза с настоящим преломлением
- Floating Tab Bar — Плавающая стеклянная панель вкладок
- Aurora Background — Медленное северное сияние за контентом
- Gradient Background — Медленно перетекающий градиент
- Bubble Background — Мягкие цветные пузыри, один следует за курсором
- Stars Background — Звёздное небо с параллаксом за курсором
- Hexagon Background — Сетка шестиугольников со светящимся следом
- Hole Background — Тоннель-портал с кольцами и частицами
- Fireworks Background — Фейерверк для побед и достижений, запуск по клику
- Spotlight — Сценические лучи и прожектор за курсором
- Meteors — Падающие метеоры
- Background Pattern — Фоновые точки, сетка и линии с затуханием
Назад: Glass Lens · Далее: Floating Tab Bar · Весь раздел «Эффекты»