Element: <ins-timeline-item>
Creates a timeline item.
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>
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>
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>
Enable the use of hexademical colors for timeline item.
The hex-color
attribute must be enabled to have a custom font-hex-color
, border-hex-color
and background-hex-color
.
This is a default timeline item using hex colors.
This is a solid timeline item using hex colors.
Code Snippet
<ins-timeline label="Hex Color" static-timeline total-count="2"> <ins-timeline-item heading="Default Red" hex-color font-hex-color="#FF0000" border-hex-color="#FF0000" icon="icon-star"> <div slot="content"> <p>This is a default timeline item using hex colors.</p> </div> </ins-timeline-item> <ins-timeline-item heading="Solid Blue" hex-color font-hex-color="#FFF" border-hex-color="#0000FF" background-hex-color="#0000FF" icon="icon-x"> <div slot="content"> <p>This is a solid timeline item using hex colors.</p> </div> </ins-timeline-item> </ins-timeline>
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' |
hex-color | boolean | false | true, false | Enables hex color for the timeline item. Note: If hex-color is enabled, component will disregard the color and solid attributes. |
font-hex-color | string | "" | Hexadecimal colors | Specify font color using hex colors for the timeline item |
border-hex-color | string | "" | Hexadecimal colors | Specify border color using hex colors for the timeline item |
background-hex-color | string | "" | Hexadecimal colors | Specify background color using hex colors for the timeline item |
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.