Pixelstrap - Admin Document

Timeline

Timeline 1 Offical link Preview link

Timeline components for Svelte - horizontal, vertical, SVG, etc.

For now, this just offers a very simple, first instantiation of a Timeline actually taken from a react tutorial, but in the form of Svelte components. This commit & published npm version is thus just a placeholder, in order to secure the npm package name svelte-timelines

npm i svelte-timelines

<!-- cd-timeline Start-->
<script>
  import { Col } from "sveltestrap";
  import Card from "../../core/card.svelte";
  import { TimeLineContent, Timelines } from "../../../utils/Constant/Constant";
  import {timelineChartData} from "../../../data/TimeLine/TimeLine"
  import {
    Timeline,
    TimelineItem,
    TimelineSeparator,
    TimelineDot,
    TimelineConnector,
    TimelineContent,
    TimelineOppositeContent
  } from 'svelte-vertical-timeline';
</script>

<Col sm="12" class="box-col-12"> 
  <Card>
    <div slot="customheader2">
      <h4>Timelines</h4>
      <p class="f-m-light mt-1">TimeLineContent</p>
    </div>
    <div slot="content">
      <Timeline position="alternate">
        <TimelineItem>
          <TimelineSeparator>
            <TimelineDot> icon</TimelineDot>
            <TimelineConnector>
          <TimelineSeparator>
          <TimelineContent>content<TimelineContent>
          <TimelineOppositeContent slot="opposite-content">
            <span class="cd-date">date</span>
          <TimelineOppositeContent>
        </TimelineItem>
      </Timeline>
    </div>
  </card>
</Col>