Folded Depth Cards

Карточки слоями в глубину: складываются как бумага, клавиатура и свайп. Pro · Анимированные компоненты › Слои и раскрытие

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add folded-depth-cards

npm install valyro-ui-pro

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

Prop	Type	Default
`items` *	`DepthCardItem[]`		The cards, front to back.
`active`	`number`		Index of the front card.
`defaultActive`	`number`	`0`	Initial front card when uncontrolled. Default 0.
`onActiveChange`	`(index: number) => void`		Called when another card comes to the front.
`layout`	`'stack' \| 'fold'`	`'stack'`	`stack`: a deck receding in depth, the passed card folds away; `fold`: a paper fan, the front card unfolded.
`depth`	`number`	`64`	How far each layer recedes, in px. Default 64.
`visible`	`number`	`3`	Layers drawn behind the front card in the stack. Default 3.
`spring`	`SpringPreset \| SpringConfig \| 'none'`	`'gentle'`	Motion of the fold: a preset, your own spring, or `none` for the theme's easing. Default `gentle`.
`interactive`	`boolean`	`true`	Tilt toward the pointer and swipe between cards. Default true. Vertical scrolling is never blocked.
`reducedMotion`	`'auto' \| 'always' \| 'never'`	`'auto'`	`auto` (default) follows the reader's setting; `always` renders the static, motion-free layout; `never` animates regardless.
`loop`	`boolean`	`false`	Wrap from the last card to the first.
`height`	`CSSProperties['height']`		Height of the card area. Default 22rem.
`loading`	`boolean`	`false`	Cards are loading: skeleton.
`error`	`ReactNode`		Loading failed: shown instead of the cards.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the card titles (default 3).
`labels`	`Partial<FoldedDepthCardsLabels>`		Overrides for the built-in English text; keys left out keep their defaults.