Timeline Item
<quiet-timeline-item>
Represents a single step or event in a timeline.
This component must only be used within a timeline. You can see some examples of timeline items being used in the timeline documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-timeline-item> from the CDN, use the following code.
import 'https://cdn.quietui.org/v5.0.0/components/timeline-item/timeline-item.js';
To manually import <quiet-timeline-item> from a self-hosted distribution, use the
following code. Remember to replace /path/to/quiet with the appropriate local path.
import '/path/to/quiet/components/timeline-item/timeline-item.js';
Slots Jump to heading
Timeline Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The timeline item's body content. |
label
|
The timeline item's label. For plain-text labels, you can use the label attribute
instead.
|
bullet
|
An icon, avatar, identicon, monster, or similar element to place inside the bullet. |
Properties Jump to heading
Timeline Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property | Description | Reflects | Type | Default |
|---|---|---|---|---|
label
|
The timeline item's label. If you need to provide HTML in the label, use the label slot
instead.
|
|
string
|
|
lineVariant
line-variant
|
The line variant to use for this item's connecting line. |
|
'solid'
|
'solid'
|
CSS custom properties Jump to heading
Timeline Item supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties
| Name | Description | Default |
|---|---|---|
--bullet-color |
The bullet's background color when active or completed. | |
--line-color |
The line's color when completed or reversed. |
CSS parts Jump to heading
Timeline Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
bullet |
The circular bullet element. |
::part(bullet)
|
line |
The connecting line between this item and the next. |
::part(line)
|
body |
The container that wraps the label and body content. |
::part(body)
|
label |
The element that contains the timeline item's label. |
::part(label)
|
content |
The element that wraps the timeline item's body content. |
::part(content)
|
Custom States Jump to heading
Timeline Item has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
active |
Applied when the timeline item is the active item. |
:state(active)
|
completed |
Applied when the timeline item is before the active item. |
:state(completed)
|
incomplete |
Applied when the timeline item is after the active item. |
:state(incomplete)
|
connected |
Applied when the timeline item has a connecting line to the next item. |
:state(connected)
|
reversed |
Applied when the timeline item is the active item in a reversed timeline. |
:state(reversed)
|
bullet-slotted |
Applied when the bullet slot has content. |
:state(bullet-slotted)
|