<dy-list>
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 |