Stagger

Списки, сетки и строки таблиц появляются волной, один за другим. Pro · 3D и моушн › Моушн для любых компонентов

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add stagger

npm install valyro-ui-pro

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

Пропсы

Prop	Type	Default
`asChild`	`boolean`	`false`	Staggers the items of the only child (a list, a grid, a table) instead of wrapping it in a div.
`selector`	`string`		The items that enter, as a selector inside the container (`tbody tr`). Default: its element children.
`interval`	`number`		Delay between neighbours, ms. Default: the theme's `--ui-motion-stagger`.
`from`	`'start' \| 'center' \| 'end' \| 'random'`		Where the wave starts: the first item, the last, the middle or the edges.
`maxSteps`	`number`		At most this many steps of delay, so a long list doesn't keep its last items waiting.
`preset`	`'fade' \| 'up' \| 'down' \| 'start' \| 'end' \| 'scale' \| 'pop' \| 'flip'`		How the element enters: `up` rises, `fade` only fades, `scale` / `pop` grow, `start` / `end` slide in, `flip` swings up in 3D.
`distance`	`number`		Travel, px. Default: the theme's `--ui-motion-distance`.
`duration`	`number`		Length, ms. Default: the theme's `--ui-motion-enter`.
`delay`	`number`		Wait before entering, ms.
`spring`	`SpringName`		The spring the move follows. Default: the theme's `--ui-motion-spring` (`pop` bounces).
`once`	`boolean`		Enter once (default) or each time the element scrolls back into view.
`amount`	`number`		Visible share that starts the entrance, 0–1.
`margin`	`string`		Grows or shrinks the viewport that counts, like a CSS margin.
`disabled`	`boolean`		Off: the element is simply shown.
`fade`	`boolean`		Fade in while moving (default). `false`: only the move plays and the element keeps its full opacity, so its text is at its final contrast from the first frame (a figure that must stay readable, a `scale` emphasis). The `fade` preset then has nothing left to play.

Stagger

Установка

Пропсы

Похожие компоненты