<dy-list>
A versatile list component that supports both basic list rendering and infinite scrolling. It can display items with avatars, titles, and descriptions, and supports custom rendering and virtualization for large datasets.
Example
Loading...
<dy-list .items=${ [ { "title": "Title 1", "avatar": "https://api.dicebear.com/5.x/bottts-neutral/svg?seed=1", "description": "Mollit aliqua reprehenderit enim consequat dolor ipsum dolor excepteur veniam laborum aliqua." }, { "title": "Title 2", "avatar": "https://api.dicebear.com/5.x/bottts-neutral/svg?seed=2", "description": "Mollit aliqua reprehenderit enim consequat dolor ipsum dolor excepteur veniam laborum aliqua." }, { "title": "Title 3", "avatar": "https://api.dicebear.com/5.x/bottts-neutral/svg?seed=3", "description": "Mollit aliqua reprehenderit enim consequat dolor ipsum dolor excepteur veniam laborum aliqua." } ] }></dy-list>
Infinite Scroll Example
Loading...
<style> ::part(item){padding:0.5em;border-bottom:1px solid gainsboro} </style> <dy-list
style=${"overflow:auto;height:300px;width:100%;overscroll-behavior:contain;text-align:center;"}
.items=${[0,1,2,3,4,5,6,7,8,9]}
.infinite=${true}
.getKey=${(item) => item}
@backward=${({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]}></dy-list>
Loading...
<style> ::part(list){display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:1em;}::part(item){font-size:3em;font-weight:bolder;aspect-ratio:1;border:1px solid gainsboro;display:flex;place-content:center;place-items:center;} </style> <dy-list
style=${"overflow:auto;height:300px;width:100%;overscroll-behavior:contain;"}
.items=${[0,1,2,3,4,5,6,7,8,9]}
.infinite=${true}
.debug=${true}
.getKey=${(item) => item}
.renderItem=${(item) => item}
@backward=${({target})=>target.items=[...target.items,...Array.from({length:150},(_,i)=>target.items.length+i)]}></dy-list>
API
DuoyunListElement
Extends TapListElement
DuoyunListElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
renderItem |
Yes | (item: any) => TemplateResult |
TapListElement
Shadow DOM; Extends GemElement
TapListElement Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
data |
Yes | any[] |
@deprecated |
items |
Yes | any[] |
|
backward |
Emitter |
||
key |
Yes | any |
|
renderItem |
Yes | (item: any) => TemplateResult |
|
debug(debug) |
Yes | boolean |
|
infinite(infinite) |
Yes | boolean |
enable infinite scroll, virtualization render |
getKey |
Yes | (item: any) => Key |
If infinite scrolling is enabled, this method must be provided |
scrollContainer |
Yes | HTMLElement |
|
forward |
Emitter |
only infinite | |
itemshow |
Emitter<any> |
only infinite | |
get/set persistentState |
PersistentState |
Setter: initState |
TapListElement Other
| Type | Value |
|---|---|
| Event | backward, forward, itemshow |
| Slot | before, after |
| Part | list, item, before-outside, after-outside |