UNPKG

@vaadin/virtual-list

Version:

Web Component for displaying a virtual/infinite list of items.

65 lines 3.03 kB
{ "$schema": "https://json.schemastore.org/web-types", "name": "@vaadin/virtual-list", "version": "24.8.4", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "vaadin-virtual-list", "description": "`<vaadin-virtual-list>` is a Web Component for displaying a virtual/infinite list of items.\n\n```html\n<vaadin-virtual-list></vaadin-virtual-list>\n```\n```js\nconst list = document.querySelector('vaadin-virtual-list');\nlist.items = items; // An array of data items\nlist.renderer = (root, list, {item, index}) => {\n root.textContent = `#${index}: ${item.name}`\n}\n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`overflow` | Set to `top`, `bottom`, both, or none.\n\nSee [Virtual List](https://vaadin.com/docs/latest/components/virtual-list) documentation.", "attributes": [ { "name": "theme", "description": "The theme variants to apply to the component.", "value": { "type": [ "string", "null", "undefined" ] } } ], "js": { "properties": [ { "name": "items", "description": "An array containing items determining how many instances to render.", "value": { "type": [ "Array.<VirtualListItem>", "undefined" ] } }, { "name": "renderer", "description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The render target element representing one item at a time.\n- `virtualList` The reference to the `<vaadin-virtual-list>` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.index` The index of the rendered item.\n - `model.item` The item.", "value": { "type": [ "VirtualListRenderer", "undefined" ] } }, { "name": "itemAccessibleNameGenerator", "description": "A function that generates accessible names for virtual list items.\nThe function gets the item as an argument and the\nreturn value should be a string representing that item. The\nresult gets applied to the corresponding virtual list child element\nas an `aria-label` attribute.", "value": { "type": [ "Function", "null", "undefined" ] } } ], "events": [] } } ] } } }