feat: custom classes for list wrapper and list items. (#397)

Co-authored-by: Guillaume Chau <[email protected]>

Author: dclause

README.md

@@ -194,6 +194,8 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `prerender` (default: `0`): render a fixed number of items for Server-Side Rendering (SSR).
 - `buffer` (default: `200`): amount of pixel to add to edges of the scrolling visible area to start rendering items further away.
 - `emitUpdate` (default: `false`): emit a `'update'` event each time the virtual scroller content is updated (can impact performance).
+- `listClass` (default: `''`): custom classes added to the item list wrapper.
+- `itemClass` (default: `''`): custom classes added to each item.
 - `listTag` (default: `'div'`): the element to render as the list's wrapper.
 - `itemTag` (default: `'div'`): the element to render as the list item (the direct parent of the default slot content).
 

src/components/RecycleScroller.vue

@@ -24,14 +24,20 @@
       ref="wrapper"
       :style="{ [direction === 'vertical' ? 'minHeight' : 'minWidth']: totalSize + 'px' }"
       class="vue-recycle-scroller__item-wrapper"
+      :class="listClass"
     >
       <component
         :is="itemTag"
         v-for="view of pool"
         :key="view.nr.id"
         :style="ready ? { transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px)` } : null"
         class="vue-recycle-scroller__item-view"
-        :class="{ hover: !skipHover && hoverKey === view.nr.key }"
+        :class="[
+          itemClass,
+          {
+            hover: !skipHover && hoverKey === view.nr.key
+          },
+        ]"
         @mouseenter="!skipHover && (hoverKey = view.nr.key)"
         @mouseleave="!skipHover && (hoverKey = null)"
       >
@@ -135,6 +141,16 @@ export default {
       type: String,
       default: 'div',
     },
+
+    listClass: {
+      type: [String, Object, Array],
+      default: '',
+    },
+
+    itemClass: {
+      type: [String, Object, Array],
+      default: '',
+    },
   },
 
   data () {