Pin List
Список с закреплением: элементы плавно переезжают между группами. Pro · Анимированные компоненты › Списки и люди
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add pin-listnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { PinList } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
items * | readonly PinListItem[] | Items in their natural order; pinned ones are shown first in the order they were pinned. | |
pinned | string[] | Ids of the pinned items. Saving them between sessions is up to the app. | |
defaultPinned | string[] | [] | Initial pinned when uncontrolled. |
onPinnedChange | (pinned: string[]) => void | Called with the new pinned when it changes. | |
animation | 'spring' | 'none' | 'spring' | spring (default): an item slides into its new group and the others close ranks; none: instant. |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the two group headings (default 3). |
labels | Partial<PinListLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Похожие компоненты
- Notification Stack — Стопка уведомлений, раскрывающаяся в список
- Todo List — Чек-лист с волнистым зачёркиванием выполненных пунктов
- Presence Avatars — Кто онлайн: аватары перестраиваются при смене статуса
- Toggle — Кнопка-переключатель с пружинным откликом
- Flip Button — Кнопка с двумя сторонами, переворачивается на пружине
- Liquid Button — Кнопка, которая заполняется «жидкостью» при наведении
- Theme Toggler — Смена светлой и тёмной темы с раскрытием через View Transitions
- GitHub Stars Button — Ссылка на репозиторий с прокручивающимся числом звёзд
- Share Button — Кнопка, раскрывающая иконки соцсетей
- Code Tabs — Варианты кода во вкладках: npm, pnpm, bun — с копированием
- Number Wheel — Число на вращающемся барабане с соседними значениями
- Radial Menu — Кольцевое контекстное меню по правому клику
Назад: Number Wheel · Далее: Notification Stack · Весь раздел «Анимированные компоненты»