RiffleInstance

Defined in: vue/Riffle.ts:264

What a parent’s template ref on <Riffle> receives: imperative control and the current state. The same members as the React drop-in’s riffleRef. Vue unwraps the refs, so activeIndex and state read as plain values, and they are reactive when read in a template or computed.

Example

import { ref } from 'vue'
import type { RiffleInstance } from '@rpxl/riffle/vue'

const riffleRef = ref<RiffleInstance | null>(null)
// later: riffleRef.value?.next()

Properties

activeIndex

readonly activeIndex: number

Defined in: vue/Riffle.ts:276

The card currently at the front. Reactive when read in a template or a computed.

---

instance

readonly instance: Riffle | null

Defined in: vue/Riffle.ts:274

The live engine, or null before mount and after unmount.

---

on

on: <K>(event, fn) => () => void

Defined in: vue/Riffle.ts:272

Subscribes to one engine event. Returns an unsubscribe function.

Subscribes to one engine event. Returns an unsubscribe function; a no-op while unmounted.

Type Parameters

K

K extends keyof RiffleEventMap

Parameters

event

K

fn

(payload) => void

Returns

() => void

---

state

readonly state: RiffleSnapshot

Defined in: vue/Riffle.ts:278

The full current snapshot. Reactive when read in a template or a computed.

Methods

goTo()

goTo(index, opts?): void

Defined in: vue/Riffle.ts:270

Moves to index, animated unless opts.animate is false.

Parameters

index

number

opts?

animate?

boolean

Returns

void

---

next()

next(): void

Defined in: vue/Riffle.ts:266

Advances to the next card, with the spring’s animation.

Returns

void

---

prev()

prev(): void

Defined in: vue/Riffle.ts:268

Moves to the previous card, with the spring’s animation.

Returns

void