vuestic-ui icon indicating copy to clipboard operation
vuestic-ui copied to clipboard

VaScrollbar component rework

Open aluarius opened this issue 2 years ago • 2 comments

Live examples:

  • https://quasar.dev/vue-components/scroll-area
  • https://element-plus.org/en-US/component/scrollbar.html#max-height

References:

  • https://www.jqwidgets.com/vue-components-documentation/documentation/jqxscrollbar/vue-scrollbar-getting-started.htm
  • https://binaryify.github.io/vue-custom-scrollbar/en/#how-to-use

Props:

  • alwaysVisible: boolean - flag, indicating if scrollbar should be always visible.
  • delay: number - disappear (after container size change, after scroll) delay in ms.
  • dark: boolean - notifies scrollbar, that content has dark background.
  • tag: string - element tag (div as default).
  • speed: number - scroll speed for scrollTo, setScrollTop & setScrollLeft methods.

Emits:

  • on:scroll: object - payload contains information about current scroll state (vertical/horizontal position in px, vertical/horizontal scroll progress in px, vertical/horizontal scroll progress in %, height/width of the container in px).

Mehods:

  • getScroll - the same as on:scroll object.
  • scrollTo - scroll by { x, y } coordinates.
  • setScrollTop - set y scroll value (mb it's redundant).
  • setScrollLeft - set x scroll value (mb it's redundant).

Usage example:

<va-scrollbar always-visible class="classes overriding-classes">
  Long content.
</va-scrollbar>

Notes

  • See also #2400

aluarius avatar Apr 22 '22 08:04 aluarius

add to my to-do list ✅

xx13 avatar May 24 '22 09:05 xx13

We might want to investigate scrollbar customization possibility in context of this task.

asvae avatar Sep 15 '22 10:09 asvae