Insites Docs Web Components V2Data DisplayTimeline Item

Timeline Item

Last updated on September 11, 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 timeline 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 timeline 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 Value Set

Code Snippet

<ins-timeline 
  id="directSetEl">
</ins-timeline>

<script>
  var sampleData = [{ color: "red", icon: "icon-star", content: "<h4>Hello World</h4> <p>Hello world</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 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 "" blue, fushcia, green, grey, orange, pink, purple, red, turquoise, yellow 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.