PanEvent — Kuito Dokumentation

Verwendung

Dismiss a view with a pan.

tsx

// Dismiss a view with a pan.
import { Box, motion, pan, spring, type PanEvent } from 'kuito';

function Dismissible(props: { onDismiss: () => void }) {
  const drag = pan({ axis: 'y' }).release(spring());
  const y = motion(0).follows(drag.y);

  // Far enough, or thrown fast enough: dismiss instead of springing back.
  const decide = (event: PanEvent, success: boolean) => {
    if (success && (event.translationY > 160 || event.velocityY > 800)) props.onDismiss();
  };

  return <Box translateY={y} gestures={[pan({ axis: 'y', onEnd: decide }), drag]} height={300} />;
}

Typdeklaration

export interface PanEvent extends PositionEvent {
  translationX: number;
  translationY: number;
  velocityX: number;
  velocityY: number;
}

Mitglieder 11

Name	Typ	Erforderlich	Beschreibung
`translationX`	`number`	Ja	—
`translationY`	`number`	Ja	—
`velocityX`	`number`	Ja	—
`velocityY`	`number`	Ja	—
`x`	`number`	Ja	—
`y`	`number`	Ja	—
`absoluteX`	`number`	Ja	—
`absoluteY`	`number`	Ja	—
`state`	`number`	Ja	—
`numberOfPointers`	`number`	Ja	—
`pointerType`	`number`	Ja	—

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.