useScrollable

This is an experimental component

This component is shipped in our NPM package, but its API might change based on user feedback.

useScrollable gives possibility to create slider scrollable with e.g thumbnails.

With useScrollable, you don't need to worry about handling previous or next methods which scroll through scrollable.

Usage

Base Usage

To use useScrollable attach containerRef to the main container to identify the element that will watch for specific events. Additionally, create two buttons for showing next nad previous elements and apply getPrevButtonProps and getNextButtonProps to each button accordingly.

<script lang="ts" setup>
import { useScrollable } from '@storefront-ui/vue';

const { containerRef, state, getNextButtonProps, getPrevButtonProps } = useScrollable()
</script>

<template>
  <div class="flex items-center">
    <button v-bind="getPrevButtonProps">previous</button>
    <div ref="containerRef">
      <div
        v-for="(_, index) in Array.from({ length: 20 })"
        :key="index"
      >
        thumbnail {{ index + 1 }}
      </div>
    </div>
    <button v-bind="getNextButtonProps">next</button>
  </div>
</template>

Controlled showing next and previous elements

useScrollable exposes imperative methods for showing elements - showNext and showPrev. To make them work, user needs to bind these functions as click event.

<script lang="ts" setup>
import { useScrollable } from '@storefront-ui/vue';

const { containerRef, state, showNext, showPrev } = useScrollable()
</script>

<template>
  <div class="flex items-center">
    <button @click="showPrev" :disabled="!state.hasPrev">previous</button>
    <div ref="containerRef">
      <div
        v-for="(_, index) in Array.from({ length: 20 })"
        :key="index"
      >
        thumbnail {{ index + 1 }}
      </div>
    </div>
    <button @click="showNext" :disabled="!state.hasNext">next</button>
  </div>
</template>