Presence Avatars
Кто онлайн: аватары перестраиваются при смене статуса. Pro · Анимированные компоненты › Списки и люди
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add presence-avatarsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { PresenceAvatars } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
users * | readonly PresenceUser[] | People with their current status — from your WebSocket, SSE or polling; the component only shows it. | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar size of the online group; offline avatars are a step smaller. |
showCounts | boolean | true | Show the "N online / N offline" captions (default true). |
max | number | Avatars shown per group; the rest fold into a "+N" chip (default: all). | |
animation | 'spring' | 'none' | 'spring' | spring (default): avatars slide between the groups when someone comes or goes; none: instant. |
labels | Partial<PresenceAvatarsLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Похожие компоненты
- Pin List — Список с закреплением: элементы плавно переезжают между группами
- Notification Stack — Стопка уведомлений, раскрывающаяся в список
- Todo List — Чек-лист с волнистым зачёркиванием выполненных пунктов
- Toggle — Кнопка-переключатель с пружинным откликом
- Flip Button — Кнопка с двумя сторонами, переворачивается на пружине
- Liquid Button — Кнопка, которая заполняется «жидкостью» при наведении
- Theme Toggler — Смена светлой и тёмной темы с раскрытием через View Transitions
- GitHub Stars Button — Ссылка на репозиторий с прокручивающимся числом звёзд
- Share Button — Кнопка, раскрывающая иконки соцсетей
- Code Tabs — Варианты кода во вкладках: npm, pnpm, bun — с копированием
- Number Wheel — Число на вращающемся барабане с соседними значениями
- Radial Menu — Кольцевое контекстное меню по правому клику
Назад: Todo List · Далее: Radial Menu · Весь раздел «Анимированные компоненты»