<dy-timeline>
A timeline component that displays a vertical list of events in chronological order. Each event can include a title and description, making it ideal for displaying historical data or process flows.
Example
Loading...
<dy-timeline style=${"width: 100%; height: 200px;"} .events=${ [ { "title": "Title 1", "description": "Mollit cupidatat adipisicing irure velit sit dolor voluptate cillum commodo consequat consectetur fugiat ex." }, { "title": "Title 2", "description": "Mollit cupidatat adipisicing irure velit sit dolor voluptate cillum commodo consequat consectetur fugiat ex." }, { "title": "Title 3", "description": "Mollit cupidatat adipisicing irure velit sit dolor voluptate cillum commodo consequat consectetur fugiat ex." } ] }></dy-timeline>
API
DuoyunTimelineElement
Shadow DOM; Extends DuoyunScrollBaseElement
DuoyunTimelineElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
events |
Yes | Item[] |
TapScrollBaseElement
Shadow DOM; Extends TapResizeBaseElement
TapScrollBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
disableScrollMask(disable-scroll-mask) |
Yes | boolean |
TapScrollBaseElement Other
| Type | Value |
|---|---|
| CSS State | top-overflow, right-overflow, bottom-overflow, left-overflow |
TapResizeBaseElement
Extends GemElement
TapResizeBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
resize |
Emitter<ResizeDetail> |
|
resizeThrottle |
Yes | boolean |
borderBoxSize |
{ blockSize: number; inlineSize: number; } |
|
contentRect |
{ x: number; y: number; height: number; width: number; } |
TapResizeBaseElement Other
| Type | Value |
|---|---|
| Event | resize |