BlogPlaygroundOne

VInfiniteScroll API

ads via vuetify

Props
name
type
default
color
string

undefined

Applies specified color to the control - supports utility colors with or without text- prefix (for example success, purple or text-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

direction
'horizontal' | 'vertical'

'vertical'

Specifies if scroller is vertical or horizontal.

empty-text
string

'$vuetify.infiniteScroll.empty'

Text shown when there is no more content to load.

height
string | number

undefined

Sets the height for the component.

load-more-text
string

'$vuetify.infiniteScroll.loadMore'

Text shown in default load more button, when in manual mode.

margin
string | number

undefined

Value sent to the intersection observer. Will make the observer trigger earlier, by the margin (px) value supplied.

max-height
string | number

undefined

Sets the maximum height for the component.

max-width
string | number

undefined

Sets the maximum width for the component.

min-height
string | number

undefined

Sets the minimum height for the component.

min-width
string | number

undefined

Sets the minimum width for the component.

mode
'intersect' | 'manual'

'intersect'

Specifies if content should load automatically when scrolling (intersect) or manually (manual).

side
'start' | 'end' | 'both'

'end'

Specifies the side where new content should appear. Either the start, end, or both sides.

tag
string | (new () => any) | FunctionalComponent

'div'

Specify a custom tag used on the root element.

width
string | number

undefined

Sets the width for the component.

Events
name
type
load
[
  {
    side: 'start' | 'end' | 'both'
    done: (status: 'error' | 'loading' | 'empty' | 'ok') => void
  },
]

Emitted when reaching the start / end threshold, or if triggered when using manual mode.

Slots
never
{ side: 'start' | 'end' | 'both'; props: Record<string, any> }
{ side: 'start' | 'end' | 'both'; props: Record<string, any> }
{ side: 'start' | 'end' | 'both'; props: Record<string, any> }
{ side: 'start' | 'end' | 'both'; props: Record<string, any> }
default

The default Vue slot.

empty

Shown when load returned status ‘empty’.

error

Shown when load returned status ‘error’.

load-more

Shown when scrolled to either side of the content, in manual mode.

loading

Shown when content is loading.

Exposed
(side: 'start' | 'end' | 'both') => void
reset

Resets side status to ‘ok’ letting it trigger ‘load’ again. Useful to prevent given side being stuck in ‘empty’ or ‘error’ state.

SASS Variables
name
default
$infinite-scroll-side-padding
8px