SimpleTimeLine

Always simple timeline

Example

Props

🕹️ standard props
items
TimeLineItem[]
Array of items to be displayed in the timeline
[]
singleSided
boolean
Toggle for single-sided timeline
false
circleAlignment
"top" | "center" | "bottom"
Alignment of the circle (top, center, bottom)
"top"
🎨 style props
--simple-time-line-gap
size
Gap between timeline items
16px
--simple-time-line-line-background
color
Background color of the central line
rgb(var(--global-color-background-200))
--simple-time-line-circle-width
size
Width of the circle
12px
--simple-time-line-circle-height
size
Height of the circle
12px
--simple-time-line-line-width
size
Width of the central line
2px
--simple-time-line-circle-background-color
color
Background color of the circle
rgb(var(--global-color-primary-500))
--simple-time-line-height
size
Height of the timeline container
auto
--simple-time-line-width
size
Width of the timeline container
100%
--simple-time-line-body-width
size
Width of the timeline body
auto
--simple-time-line-divider-width
size
Width of the divider line
48px
--simple-time-line-central-line-left
size
Left position of the central line
calc(50% - 0.5px)
--simple-time-line-line-width
size
Width of the central timeline line
2px

Slots

itemSnippet

Snippet for custom rendering of each timeline item

Default content:

<div
  style:padding={singleSided || index % 2 == 0
    ? "0px 20px 0px 0px"
    : "0px 0px 0px 20px"}
  class="time-line-times"
>
  {#if timesSnippet}
    {@render timesSnippet({ item, dateToString })}
  {:else}
    <div
      class:vertical-centered-container={circleAlignment ==
        "center"}
      class:vertical-bottom-container={circleAlignment == "bottom"}
    >
      {#if !!item.from}
        <div
          style:text-align={singleSided || index % 2 == 0
            ? "left"
            : "right"}
          style="font-weight: 200; font-size: 9pt"
        >
          {dateToString(item.from)}
        </div>
      {/if}
      {#if !!item.to}
        <div
          style:text-align={singleSided || index % 2 == 0
            ? "left"
            : "right"}
          style="font-weight: 200; font-size: 9pt"
        >
          {dateToString(item.to)}
        </div>
      {/if}
    </div>
  {/if}
</div>
{/if}
<div
class="time-line-infos"
style:text-align={singleSided || index % 2 == 0 ? "left" : "right"}
>
{#if infosSnippet}
  {@render infosSnippet({ item, alignment: !singleSided && index % 2 == 0 ? "right" : "left"})}
{:else}
  {#if !!item.title}
    <div class="time-line-title">
      {item.title}
    </div>
  {/if}
  {#if !!item.description}
    <div class="time-line-description">
      {item.description}
    </div>
  {/if}
  {@render infosAppendSnippet?.({ item, alignment: !singleSided && index % 2 == 0 ? "right" : "left"})}
{/if}
</div>
    

timesSnippet

Snippet for custom rendering of time-related info

Default content:

<div
  class:vertical-centered-container={circleAlignment ==
    "center"}
  class:vertical-bottom-container={circleAlignment == "bottom"}
>
  {#if !!item.from}
    <div
      style:text-align={singleSided || index % 2 == 0
        ? "left"
        : "right"}
      style="font-weight: 200; font-size: 9pt"
    >
      {dateToString(item.from)}
    </div>
  {/if}
  {#if !!item.to}
    <div
      style:text-align={singleSided || index % 2 == 0
        ? "left"
        : "right"}
      style="font-weight: 200; font-size: 9pt"
    >
      {dateToString(item.to)}
    </div>
  {/if}
</div>
    

infosSnippet

Snippet for custom rendering of timeline item information

Default content:

{#if !!item.title}
  <div class="time-line-title">
    {item.title}
  </div>
{/if}
{#if !!item.description}
  <div class="time-line-description">
    {item.description}
  </div>
{/if}
{@render infosAppendSnippet?.({ item, alignment: !singleSided && index % 2 == 0 ? "right" : "left"})}
    

infosAppendSnippet
Snippet for additional content appended to timeline item information
circleSnippet

Snippet for custom rendering of the circle in the timeline

Default content:

<div class="circle"></div>

Events