Todo List
Чек-лист с волнистым зачёркиванием выполненных пунктов. Pro · Анимированные компоненты › Списки и люди
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add todo-listnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { TodoList } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
items * | readonly TodoListItem[] | Tasks in order; a label may wrap over several lines. | |
done | string[] | Ids of the finished items. | |
defaultDone | string[] | [] | Initial done when uncontrolled. |
onDoneChange | (done: string[]) => void | Called with the new done when it changes. | |
animation | 'spring' | 'none' | 'spring' | spring (default): the checkbox bounces and a wavy line draws through the label; none: no motion. |
Похожие компоненты
- Pin List — Список с закреплением: элементы плавно переезжают между группами
- Notification Stack — Стопка уведомлений, раскрывающаяся в список
- 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 — Кольцевое контекстное меню по правому клику
Назад: Notification Stack · Далее: Presence Avatars · Весь раздел «Анимированные компоненты»