gebruikScrollShadow

Een compositie om scrollschaduweffecten toe te passen op elk schuifbaar element.

Gebruik

Gebruik de automatisch geïmporteerde useScrollShadow-composable om vervagende schaduwen toe te passen op de randen van een schuifbaar element, wat aangeeft dat er meer inhoud beschikbaar is in de schuifrichting.

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>

Gebruikt CSS mask-image om inhoud aan de randen te vervagen in plaats van overlay-elementen, zodat het op elke achtergrond werkt.
Automatically detecteert of het element overloopt en past alleen schaduwen toe wanneer dat nodig is.
Ondersteunt zowel verticale als horizontale oriëntaties.

API

useScrollShadow(element, options?)

Parameters

element

MaybeRef<HTMLElement | null | undefined> required

Een sjabloonref of reactieve verwijzing naar het schuifbare element.

options

UseScrollShadowOptions

Configuratie opties voor de scroll schaduw.

Retourneren

style

ComputedRef<CSSProperties | undefined>

Een reactief stijlobject om op het schuifbare element te binden met :style. Bevat maskImage wanneer schaduwen actief zijn, anders undefined.

isOverflowing

ComputedRef<boolean>

Of de inhoud van het element het zichtbare gebied overstroomt.

arrivedState

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

Reactieve scroll-aankomststatus van useScroll.

Voorbeelden

Horizontaal

Gebruik de optie orientation voor horizontaal schuifbare containers:

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

Aangepaste grootte

Gebruik de optie size om de schaduwgrootte in pixels te wijzigen:

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