0.1.2 • Published 4 years ago
vue3-scroll-shadow v0.1.2
Vue 3 Scroll Shadow
Add UX-friendly shadow to your scrollable list
Installation
npm i vue3-scroll-shadowUsage
import VueScrollShadow from 'vue3-scroll-shadow'<template>
<vue-scroll-shadow>
<!-- Your content goes here -->
</vue-scroll-shadow>
</template>Props
| Name | Type | Default | Description |
|---|---|---|---|
| height | String | '100%' | Height of container |
| throttleWait | Number | 100 | Handle scroll event at most once per throttleWait milliseconds |
| shadowColorFrom | String | '#00000014' | Start color of scroll shadow. Can be RGB or RGBA: - #000 - #000000 - #0004 - #00000044 |
| shadowColorTo | String | 'transparent' | End color of scroll shadow. Same as above |
| shadowSize | String | '15px' | Size of shadow |
Slot Attributes
| Name | Value | Description |
|---|---|---|
| scrollState | { isOffTop: Boolean , isOffBottom: Boolean } | When the list is scrollable, isOffTop is true when not at the top, isOffBottom is true when not at the bottom |
Example
<vue-scroll-shadow v-slot="{ scrollState }">
// you can use scrollState.isOffTop or scrollState.isOffBottom here
</vue-scroll-shadow>