utilisateurscrollshadow

Un composable pour appliquer des effets d

Utilisation

Utilisez le composable useScrollShadow importé automatiquement pour appliquer des ombres de fondu sur les bords d'un élément défilant, indiquant que plus de contenu est disponible dans la direction de défilement.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el)
</script>

<template>
  <div class="max-w-sm bg-elevated/50 rounded-lg">
    <div
      ref="el"
      :style="style"
      class="h-72 p-4 space-y-4 overflow-y-auto"
    >
      <p v-for="i in 6" :key="i">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')

const { style } = useScrollShadow(el)
</script>

<template>
  <div class="max-w-sm bg-elevated/50 rounded-lg">
    <div
      ref="el"
      :style="style"
      class="h-72 p-4 space-y-4 overflow-y-auto"
    >
      <p v-for="i in 6" :key="i">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.
      </p>
    </div>
  </div>
</template>

Utilise le CSS mask-image pour fondre le contenu sur les bords plutôt que de superposer les éléments, de sorte qu 'il fonctionne sur n'importe quel arrière-plan.
Détecte automatiquement si l'élément déborde et n'applique des ombres que si nécessaire.
Supporte les orientations verticales et horizontales.

api

useScrollShadow(element, options?)x{lang="ts-type"}

Paramètres

element

MaybeRef<HTMLElement | null | undefined> required

Une référence de modèle ou une référence réactive à l'élément défilable.

options

UseScrollShadowOptions

Options de configuration pour l'ombre de défilement.

retour

style

ComputedRef<CSSProperties | undefined>

Un objet de style réactif à lier sur l'élément déroulant avec :style. Contient maskImage lorsque les ombres sont actives, undefined autrement.

isOverflowing

ComputedRef<boolean>

Si le contenu de l'élément dépasse sa zone visible.

arrivedState

{ top: boolean, bottom: boolean, left: boolean, right: boolean }

État d'arrivée de défilement réactif de useScroll.

exemples

horizontale

Utilisez l'option orientation pour les conteneurs déroulants horizontalement:

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el, { orientation: 'horizontal' })
</script>

<template>
  <div ref="el" class="overflow-x-auto whitespace-nowrap" :style="style">
    <!-- Horizontally scrollable content -->
  </div>
</template>

Taille personnalisée

Utilisez l'option size pour modifier la taille de l'ombre en pixels:

<script setup lang="ts">
const el = useTemplateRef('el')

const { style } = useScrollShadow(el, { size: 48 })
</script>

<template>
  <div ref="el" class="max-h-[300px] overflow-y-auto" :style="style">
    <!-- Scrollable content -->
  </div>
</template>

useOverlay

A composable to programmatically control overlays.

useToast

A composable to display toast notifications in your app.