PanEvent
Where a pan is, how far it has moved and how fast, as it starts and ends.
Utilisation
Dismiss a view with a pan.
// 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} />;
}Déclaration du type
export interface PanEvent extends PositionEvent {
translationX: number;
translationY: number;
velocityX: number;
velocityY: number;
}Membres 11
| Nom | Type | Requis | Description |
|---|---|---|---|
translationX | number | Oui | — |
translationY | number | Oui | — |
velocityX | number | Oui | — |
velocityY | number | Oui | — |
x | number | Oui | — |
y | number | Oui | — |
absoluteX | number | Oui | — |
absoluteY | number | Oui | — |
state | number | Oui | — |
numberOfPointers | number | Oui | — |
pointerType | number | Oui | — |
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.