Swipe Action Card

Горизонтальный свайп открывает действия карточки. Бесплатно, MIT · Анимированные компоненты › Наклейки, билеты и табло

Установка

npx valyro-cli@latest add swipe-action-card

npx shadcn@latest add https://valyro.xyz/r/swipe-action-card.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { SwipeActionCard } from 'valyro-ui';

Prop	Type	Default
`itemId` *	`string`		Stable identity of the card, passed back to `onAction`.
`startActions`	`SwipeAction[]`	`[]`	Actions uncovered by a swipe toward the inline end.
`endActions`	`SwipeAction[]`	`[]`	Actions uncovered by a swipe toward the inline start.
`onAction` *	`(actionId: string, itemId: string) => SwipeActionResult \| void \| Promise<SwipeActionResult \| void>`		Runs an action. While its promise is pending the card waits and takes no other action; a rejection shows the error with a retry, and nothing pretends it succeeded. Whether the card then leaves the list is up to the app.
`fullSwipeAction`	`{ side: SwipeSide; actionId: string } \| null`	`null`	The one action a long swipe may run on release, by side; null (default) allows none.
`onUndo`	`(result: SwipeActionResult) => void \| Promise<void>`		Undoes a result the app marked `undoable`. Without it no Undo is offered.
`undoDuration`	`number`	`5000`	How long Undo stays, ms; focus and hover pause it, 0 keeps it until used. Expiry only hides it. Default 5000.
`disabled`	`boolean`	`false`	No swipe and no actions.
`children` *	`ReactNode`		The card content. Links, fields and text selection inside keep working.
`labels`	`Partial<SwipeActionCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.