• Change Log
  • FAQ Support
  • Change Log
  • FAQ Support
Insites Docs Web Components V2Data DisplayTimeline Item

Timeline Item

Published on February 18, 2021, updated on June 01, 2021

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 "" 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?

Send your suggestions using this form.