logo-icon
STWUI

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 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.


svelte
<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