{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/virtual-scroll"},"props":{"virtual-scroll-horizontal":{"type":"Boolean","desc":"Make virtual list work in horizontal mode","category":"behavior"},"virtual-scroll-slice-size":{"type":["Number","String","null"],"desc":"Minimum number of items to render in the virtual list","default":"10","examples":["60","'60'"],"category":"virtual-scroll","required":false},"virtual-scroll-slice-ratio-before":{"type":["Number","String"],"desc":"Ratio of number of items in visible zone to render before it","default":"1","category":"virtual-scroll","required":false},"virtual-scroll-slice-ratio-after":{"type":["Number","String"],"desc":"Ratio of number of items in visible zone to render after it","default":"1","category":"virtual-scroll","required":false},"virtual-scroll-item-size":{"type":["Number","String"],"desc":"Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item","default":"24","category":"virtual-scroll","required":false},"virtual-scroll-sticky-size-start":{"type":["Number","String"],"desc":"Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision","default":"0","category":"virtual-scroll","required":false},"virtual-scroll-sticky-size-end":{"type":["Number","String"],"desc":"Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision","default":"0","category":"virtual-scroll","required":false},"table-colspan":{"type":["Number","String"],"desc":"The number of columns in the table (you need this if you use table-layout: fixed)","category":"virtual-scroll|content"},"type":{"type":"String","desc":"The type of content: list (default) or table","default":"'list'","values":["'list'","'table'"],"category":"content","required":false},"items":{"type":"Array","desc":"Available list items that will be passed to the scoped slot; For best performance freeze the list of items; Required if 'itemsFn' is not supplied","default":"[]","examples":["['Tesla', 'iPhone']","[{ label: 'Tesla', value: 'car' }, { label: 'iPhone', value: 'phone' }]"],"category":"content","required":false},"items-size":{"type":"Number","desc":"Number of available items in the list; Required and used only if 'itemsFn' is provided","examples":["100000"],"category":"content"},"items-fn":{"type":"Function","desc":"Function to return the scope for the items to be displayed; Should return an array for items starting from 'from' index for size length; For best performance, reference it from your scope and do not define it inline","params":{"from":{"type":"Number","desc":"Index of the first item (0 based)"},"size":{"type":"Number","desc":"Number of items to return"}},"returns":{"type":"Array","desc":"List of scope for items to be displayed"},"examples":["(from, size) => { const items = []; for (let i = 0; i < size; i++) { items.push('Item ' + i) }; return items }"],"category":"content"},"scroll-target":{"type":["Element","String","ComponentInstance"],"desc":"CSS selector, DOM element or Vue component reference (standing for its root element) to be used as a custom scroll container instead of the auto detected one","examples":[".scroll-target-class","#scroll-target-id","$refs.scrollTarget","$refs.scrollAreaComponent","document.body"],"category":"behavior"},"separator":{"type":["Boolean","String"],"desc":"When a QList is used (see 'type'), a Boolean applying a separator between contained items; When a QMarkupTable is used, a String ('horizontal', 'vertical', 'cell' or 'none'; default is 'horizontal') using a separator/border between rows, columns or all cells","examples":["true","'cell'"],"category":"list|table","passthrough":true},"bordered":{"type":"Boolean","desc":"Applies a default border to the component","category":"list|table","passthrough":true},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"list|table","passthrough":true},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"list|table","required":false,"passthrough":true},"padding":{"type":"Boolean","desc":"Applies a material design-like padding on top and bottom; Only applies when a QList is used (see 'type')","category":"list","passthrough":true},"tag":{"type":"String","desc":"HTML tag to use; Only applies when a QList is used (see 'type')","category":"list","default":"'div'","examples":["'div'","'ul'","'ol'"],"required":false,"passthrough":true},"role":{"type":"String","desc":"Overrides the default 'list' ARIA role; Contained QItems derive their own default role from it: with 'menu'/'menubar' the actionable items become 'menuitem's, while any other value stops the non-actionable items from claiming 'listitem'; Only applies when a QList is used (see 'type')","examples":["'menu'","'listbox'","'none'"],"category":"list","addedIn":"v2.25","passthrough":true},"flat":{"type":"Boolean","desc":"Applies a 'flat' design (no default shadow); Only applies when a QMarkupTable is used (see 'type')","category":"table","passthrough":true},"square":{"type":"Boolean","desc":"Removes border-radius so borders are squared; Only applies when a QMarkupTable is used (see 'type')","category":"table","passthrough":true},"wrap-cells":{"type":"Boolean","desc":"Wrap text within table cells; Only applies when a QMarkupTable is used (see 'type')","category":"table","passthrough":true}},"slots":{"before":{"desc":"Template slot for the elements that should be rendered before the list; Suggestion: thead before a table"},"after":{"desc":"Template slot for the elements that should be rendered after the list; Suggestion: tfoot after a table"},"default":{"desc":"Template slot for defining the list item; Suggestion: QItem","scope":{"index":{"type":"Number","desc":"Item index in the items list"},"item":{"type":"Any","desc":"Item data -- its value is taken from 'items' prop"}}}},"events":{"virtual-scroll":{"desc":"Emitted when the virtual scroll occurs","params":{"details":{"type":"Object","desc":"Object of properties on the new scroll position","definition":{"index":{"type":"Number","required":true,"desc":"Index of the list item that was scrolled into view (0 based)"},"from":{"type":"Number","required":true,"desc":"The index of the first list item that is rendered (0 based)"},"to":{"type":"Number","required":true,"desc":"The index of the last list item that is rendered (0 based)"},"direction":{"type":"String","required":true,"desc":"Direction of change","values":["'increase'","'decrease'"]},"ref":{"type":"ComponentInstance","required":true,"desc":"Vue reference to the QVirtualScroll","tsType":"QVirtualScroll"}}}}}},"methods":{"scrollTo":{"desc":"Scroll the virtual scroll list to the item with the specified index (0 based)","params":{"index":{"type":["Number","String"],"desc":"The index of the list item (0 based)","required":true},"edge":{"type":"String","desc":"The edge to align to if the item is not visible already (by default it aligns to end if scrolling towards the end and to start otherwise); If the '-force' version is used then it always aligns","values":["'start'","'center'","'end'","'start-force'","'center-force'","'end-force'"]}},"returns":null},"reset":{"desc":"Resets the virtual scroll computations; Needed for custom edge-cases","params":null,"returns":null},"refresh":{"desc":"Refreshes the virtual scroll list; Use it after appending items","params":{"index":{"type":["String","Number"],"desc":"The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position","examples":["5"]}},"returns":null}}}