Userescrollshadow

Un componente para aplicar efectos de sombra de desplazamiento en cualquier elemento desplazable.

xph0000xUso

Utilice el componente de importación automática useScrollShadow para aplicar sombras de desvanecimiento en los bordes de un elemento desplazable, lo que indica que hay más contenido disponible en la dirección de desplazamiento.

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>

Utiliza CSS mask-image para desvanecer el contenido en los bordes en lugar de superponer elementos, por lo que funciona en cualquier fondo.
Detecta automáticamente si el elemento está desbordado y solo aplica sombras cuando sea necesario.
Soporta orientaciones tanto verticales como horizontales.

API (Edición española)

useScrollShadow(element, options?)xx{lang="ts-type"} (Edición española)

Parámetros

element

MaybeRef<HTMLElement | null | undefined> required

Una referencia de plantilla o una referencia reactiva al elemento desplazable.

options

UseScrollShadowOptions

Opciones de configuración para la sombra de desplazamiento.

Regresar

style

ComputedRef<CSSProperties | undefined>

Un objeto de estilo reactivo para enlazar en el elemento desplazable con :style. Contiene maskImage cuando las sombras están activas, undefined de lo contrario.

isOverflowing

ComputedRef<boolean>

Si el contenido del elemento excede su área visible.

arrivedState

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

Estado de llegada de desplazamiento reactivo desde useScroll.

Ejemplos

Horizontal

Utilice la opción orientation para contenedores desplazables horizontalmente:

<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>

Tamaño personalizado

Utilice la opción size para cambiar el tamaño de la sombra en píxeles:

<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.