Timeline
Beta Component
This component is still a work in progress and is subject to change. Use with caution as
breaking changes may occur.
- Eduardo Benz
Commented Sep 1, 22, 12:00 AM
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam.
- Hilary Mahy assigned Kristin Watson Sep 5, 22, 12:00 AM
- Hilary Mahy added tags Accessibility Sep 6, 22, 12:00 AM
- Jason Meyers
Commented 30.001 minutes ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam.
<script lang="ts">
import { Timeline } from 'stwui';
import type { TimelineItem } from '../../lib/types/timeline-item';
const account = "svg-path";
const currency_usd = "svg-path";
const timeline: TimelineItem[] = [
{
created: new Date(2022, 8, 1),
avatar: "image.png",
creator: 'Eduardo Benz',
type: 'comment',
description: 'Lorem ipsum...'
},
{
icon: account,
created: new Date(2022, 8, 5),
avatar: "image.png",
creator: 'Hilary Mahy',
description: 'Lorem ipsum...'
},
{
icon: currency_usd,
created: new Date(2022, 8, 6),
avatar: "image.png",
creator: 'Hilary Mahy',
description: 'Lorem ipsum...'
},
{
created: new Date(2022, 8, 7),
avatar: "image.png",
creator: 'Jason Meyers',
type: 'comment',
description: 'Lorem ipsum...'
}
];
</script>
<Timeline>
{#each timeline as item}
<Timeline.Item
created={item.created}
avatar={item.avatar}
creator={item.creator}
type={item.type}
icon={item.icon}
description={item.description}
/>
{/each}
</Timeline>
Timeline Slots
default | <Timeline.Item /> |
Timeline.Item Props
type | 'comment' | undefined | |
avatar | string | undefined | |
creator | string | |
creaated | Date | |
description | string | |
icon | string (IconData) | undefined |