RiffleProps<T>

Defined in: vue/Riffle.ts:78

Props for the <Riffle> drop-in, generic over the card type T. Every RiffleOptions key except count (derived from cards.length) is a prop here too.

Example

import type { RiffleProps } from '@rpxl/riffle/vue'

const props: RiffleProps<{ title: string }> = { cards: [{ title: 'Neon Harbor' }] }

Extends

• Omit<RiffleOptions, "count">

Type Parameters

T

T

Properties

axis?

optional axis?: Axis

Defined in: types.ts:198

The drag axis. Default 'x'. Immutable after construction: update() throws on a change.

Inherited from

RiffleOptions.axis

---

bounds?

optional bounds?: Bounds

Defined in: types.ts:196

'loop' wraps past the ends, 'clamp' stops there. Default 'loop'.

Inherited from

RiffleOptions.bounds

---

cardClassName?

optional cardClassName?: string

Defined in: vue/Riffle.ts:84

A class for every card element.

---

cardHeight?

optional cardHeight?: number | "auto"

Defined in: types.ts:190

Pixels, or 'auto' to measure a registered card. Default 400 when omitted as a number.

Inherited from

RiffleOptions.cardHeight

---

cards

cards: readonly T[]

Defined in: vue/Riffle.ts:80

The cards to render. Each becomes one registered card, in order.

---

cardWidth?

optional cardWidth?: number | "auto"

Defined in: types.ts:188

Pixels, or 'auto' to measure a registered card. Default 300 when omitted as a number.

Inherited from

RiffleOptions.cardWidth

---

crossFollow?

optional crossFollow?: number

Defined in: types.ts:212

How much the card follows the finger across the axis, 0..1. Default 0.18.

Inherited from

RiffleOptions.crossFollow

---

draggable?

optional draggable?: boolean

Defined in: types.ts:206

Whether dragging is enabled. Keyboard navigation stays on regardless. Default true.

Inherited from

RiffleOptions.draggable

---

flingVelocity?

optional flingVelocity?: number

Defined in: types.ts:202

Pixels per millisecond. Default 0.5.

Inherited from

RiffleOptions.flingVelocity

---

gap?

optional gap?: number

Defined in: types.ts:192

Pixels of space the default fan layout leaves between cards. Default 20.

Inherited from

RiffleOptions.gap

---

getKey?

optional getKey?: (card, index) => PropertyKey

Defined in: vue/Riffle.ts:82

Stable key per card. Defaults to the index; provide one for lists that reorder.

Parameters

card

T

index

number

Returns

PropertyKey

---

getLabel?

optional getLabel?: (index) => string

Defined in: types.ts:222

A caller-supplied label per card index. The card’s aria-label becomes ${getLabel(i)}, ${i + 1} of ${count}, and announcements use the same string. Omit it for the bare position.

Parameters

index

number

Returns

string

Inherited from

RiffleOptions.getLabel

---

layout?

optional layout?: LayoutStrategy

Defined in: types.ts:216

The pose strategy. Default fan().

Inherited from

RiffleOptions.layout

---

maxVisible?

optional maxVisible?: number

Defined in: types.ts:194

How many cards behind the front one stay visible before fading out. Default 4.

Inherited from

RiffleOptions.maxVisible

---

reducedMotion?

optional reducedMotion?: ReducedMotionMode

Defined in: types.ts:214

Whether to honour prefers-reduced-motion. Default 'auto'.

Inherited from

RiffleOptions.reducedMotion

---

rotation?

optional rotation?: false | RotationOptions

Defined in: types.ts:210

Tilt while dragging, or false to disable it. Default the RotationOptions defaults.

Inherited from

RiffleOptions.rotation

---

spring?

optional spring?: SpringPreset | SpringConfig

Defined in: types.ts:208

A named preset, or your own stiffness and damping. Default { stiffness: 340, damping: 34 }.

Inherited from

RiffleOptions.spring

---

startIndex?

optional startIndex?: number

Defined in: types.ts:204

The active card at construction. Read once; call goTo to move later. Default 0.

Inherited from

RiffleOptions.startIndex

---

threshold?

optional threshold?: number

Defined in: types.ts:200

Fraction of one step, 0..1. Default 0.25.

Inherited from

RiffleOptions.threshold