Tear-off Ticket

Билет с корешком, который отрывается по перфорации. Бесплатно, MIT · Анимированные компоненты › Наклейки, билеты и табло

Установка

npx valyro-cli@latest add tear-off-ticket

npx shadcn@latest add https://valyro.xyz/r/tear-off-ticket.json

npm install valyro-ui

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

Prop	Type	Default
`front` *	`ReactNode`		The visible face of the closed ticket.
`revealedContent` *	`ReactNode`		What tearing the stub off reveals: a code, an invitation, event details. Not a secret: it is in the page.
`stub`	`ReactNode`		Content of the stub; default `labels.stub`.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean, reason: TearOffTicketReason) => void`		A request to change the state, with what caused it. Controlled tickets open once `open` turns true.
`onReveal`	`() => void`		Once per real opening (the accepted `open` going from false to true); not for a ticket that starts open.
`tearThreshold`	`number`	`0.65`	Share of the stub's size it must be pulled before release tears it off (a quick flick needs less). Default 0.65.
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	Direction of the perforation: `vertical` (default, the stub at the inline end, pulled sideways) or `horizontal` (the stub at the bottom, pulled down).
`variant`	`'plain' \| 'paper' \| 'game'`	`'plain'`	Look: `plain` (default) quiet surfaces and a thin dashed line, `paper` printed card with notches, `game` a pass in the theme's accent.
`labels`	`Partial<TearOffTicketLabels>`		Overrides for the built-in English text; keys left out keep their defaults.