Insites Docs Web Components V1Data DisplayTimeline Item

Timeline Item

Last updated on August 02, 2024.

Element: <ins-timeline-item>

Creates a timeline item.

 
NOTE:
 

  • You can use this only when the ins-timeline attribute static-timeline is set to 'true'.
  • Wrap your HTML elements in div with atribute slot="content" and slot="action" respectively to specify where they will be displayed.

 

Complete Example

This is a sample content.

This is the default styling of a timeline content without actions.

This uses timeline item 'solid' attribute. This can use along with 'color' attribute as well.

This timeline item uses `inline` property `false`, thus the action options are positioned 'bottom-right'.

Code Snippet

<ins-timeline label="Sample Heading" static-timeline total-count="4">
    <!-- Each timeline entry is wrapped within <ins-timeline-item> -->
    <ins-timeline-item title="This is a sample title" color="yellow" icon="icon-star" datetime="2019-01-30 10:22:39 UTC, by: John Doe">
      <!-- Add 'slot="content"' to div to identify that it is the timeline content -->
      <div slot="content">
        <p>This is a sample content.</p>
      </div>
      <!-- Add 'slot="actions"' to div to identify that it is the action content -->
      <div slot="actions">
        <ins-button label="" icon="icon-log-out" color="blue"></ins-button>
      </div>
    </ins-timeline-item>

    <!-- timeline item 2 -->
    <ins-timeline-item>
      <div slot="content">
        <p>This is the default styling of a timeline content without actions.</p>
      </div>
    </ins-timeline-item>

    <!-- timeline item 3 -->
    <ins-timeline-item solid>
      <div slot="content">
        <p>This uses timeline item 'solid' attribute. This can use along with 'color' attribute as well.</p>
      </div>
    </ins-timeline-item>

    <!-- timeline item 4 -->
    <ins-timeline-item datetime="6 days ago" inline="false" icon="icon-email-1" color="green" solid>
      <div slot="content">
        <p>This timeline item uses `inline` property `false`, thus the action options are positioned 'bottom-right'.</p>
      </div>
      <div slot="actions">
        <ins-button size="small" color="blue" solid label="Accept"></ins-button>
      </div>
    </ins-timeline-item>

  </ins-timeline>
Loading State

This content won't show because timeline is 'loading'.

Code Snippet

<ins-timeline label="Sample" loading-screen static-timeline>
  <ins-timeline-item>
    <div slot="content">
      <p>This content won't show because timeline is 'loading'.</p>
    </div>
  </ins-timeline-item>
</ins-timeline>
Direct Set Value

Code Snippet

<ins-timeline id="directSetEl">
</ins-timeline>
<script>
  var sampleData = [{ color: "red", icon: "icon-star", content: "<h4>Hello World</h4> <p>This is a sample timeline content.</p>", actions: '<ins-button solid size="small" label="Action"></ins-button>', datetime: "1 month ago" }, { content: "sample content" }, { color: "blue", solid: true, content: "This is a sample timeline content." }];
  var timelineEl = document.getElementById('directSetEl');
      timelineEl.label = "Timeine data by script";
      timelineEl.timelineData = sampleData;
      timelineEl.totalCount = 3;
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
icon string "" any Specify CSS icon class used for the timeline item
color string "" any / [green, red, blue, yellow, orange, grey] Specify CSS color class used for the timeline item
solid boolean false true, false Makes the timeline marker have background color
title string "1" any Specify a title / text shown on top of the timeline content
datetime string "1" any Specify datetime / text shown on bottom of the timeline content
inline boolean true true, false Makes the timeline content and action display 'inline-block'

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.