Timeline webcomponent - DÁP Szolgáltatások

Timeline

A timeline is a graphical representation of a series of events.

Examples

Default timeline

Timeline items must be wrapped in a dap-ds-timeline-item component. Content of the timeline item component can contain any component, it is very easy to use if you use the card elements. Here is the most common example:

<dap-ds-timeline>
<dap-ds-timeline-item>
  <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
  <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
  <dap-ds-card-content parentSized="false" size="md">
      The best event ever 1
  </dap-ds-card-content>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
  <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
  <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
  <dap-ds-card-content parentSized="false" size="md">
      The best event ever 2
  </dap-ds-card-content>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
  <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
  <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
  <dap-ds-card-content parentSized="false" size="md">
      The best event ever 3
  </dap-ds-card-content>
</dap-ds-timeline-item>
</dap-ds-timeline>

Cards

<dap-ds-timeline>
<dap-ds-timeline-item>
  <dap-ds-card interactive size="md">
    <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
    <dap-ds-card-title spacing="none">Event title</dap-ds-card-title>
    <dap-ds-card-content>
        The best event ever 1
    </dap-ds-card-content>
  </dap-ds-card>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
  <dap-ds-card interactive size="md">
    <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
    <dap-ds-card-title spacing="none">Event title</dap-ds-card-title>
    <dap-ds-card-content>
        The best event ever 2
    </dap-ds-card-content>
  </dap-ds-card>
</dap-ds-timeline-item>
<dap-ds-timeline-item>
  <dap-ds-card interactive size="md">
    <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
    <dap-ds-card-title spacing="none">Event title</dap-ds-card-title>
    <dap-ds-card-content>
        The best event ever 3
    </dap-ds-card-content>
  </dap-ds-card>
</dap-ds-timeline-item>
</dap-ds-timeline>

Custom styling

You can customize the timeline appearance using CSS custom properties and parts. This example demonstrates custom gradient styling for the timeline connectors and markers:

<dap-ds-timeline>
<dap-ds-timeline-item class="custom-timeline-item">
  <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
  <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
  <dap-ds-card-content parentSized="false" size="md">
    nagyon meno event
  </dap-ds-card-content>
</dap-ds-timeline-item>
<dap-ds-timeline-item class="custom-timeline-item">
  <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle>
  <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title>
  <dap-ds-card-content parentSized="false" size="md">
    nagyon meno event
  </dap-ds-card-content>
</dap-ds-timeline-item>
<dap-ds-timeline-item class="custom-timeline-item">
  <dap-ds-card interactive>
    <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
    <dap-ds-card-title spacing="bottom">Event title</dap-ds-card-title>
  </dap-ds-card>
</dap-ds-timeline-item>
<dap-ds-timeline-item class="custom-timeline-item">
  <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle>
  <dap-ds-card-title spacing="none">Event title</dap-ds-card-title>
</dap-ds-timeline-item>
</dap-ds-timeline>

dap-ds-timeline-item::part(connector) {
    background: linear-gradient(
      180deg,
      rgba(75, 160, 255, 1) 0%,
      rgba(0, 212, 255, 1) 100%
    );
  }

  dap-ds-timeline-item::part(base)::after {
    background: radial-gradient(
      circle,
      rgba(212, 0, 0, 1) 0%,
      rgba(255, 0, 0, 1) 8%,
      rgba(106, 255, 0, 1) 100%
    );
    box-shadow: 0 0 10px 0 rgb(255 0 0 / 100%);
  }

Importing

import { DapDSTimeline } from 'dap-design-system'

Importing React

import { DapDSTimelineReact } from 'dap-design-system/react'

Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSTimeline } from 'dap-design-system/components'

Attributes

No custom attributes available.

Slots

Name	Description
`(default)`	The default slot for the timeline items.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main timeline container.

How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-timeline::part(base) {
  /* Your custom styles */
}

Example usage:

<dap-ds-timeline class="my-custom-dap-ds-timeline">
  Timeline
</dap-ds-timeline>

.my-custom-dap-ds-timeline::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

CSS Custom Properties

No CSS custom properties available.

Components

Timeline item

<dap-ds-timeline-item/>

Attributes

No custom attributes available.

Slots

Name	Description
`(default)`	The default slot for the item content.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main timeline item container.
`connector`	The connector element between two timeline items.
`content`	The content of the timeline item.

CSS Custom Properties

Property Name	Description
`--dds-timeline-position`	Position of the timeline dot (default: 28px)
`--dds-timeline-connector-width`	Width of the timeline connector line (default: 1px)
`--dds-timeline-connector-left-position`	Left position of the timeline connector (default: 5.5px)
`--dds-timeline-dot-size`	Size of the timeline dot (default: var(--dds-spacing-300))
`--dds-timeline-item-margin-bottom`	Bottom margin of timeline items (default: var(--dds-spacing-200))
`--dds-timeline-item-padding-left`	Left padding of timeline items (default: var(--dds-spacing-400))

<dap-ds-timeline> <dap-ds-timeline-item> <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title> <dap-ds-card-content parentSized="false" size="md"> The best event ever 1 </dap-ds-card-content> </dap-ds-timeline-item> <dap-ds-timeline-item> <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title> <dap-ds-card-content parentSized="false" size="md"> The best event ever 2 </dap-ds-card-content> </dap-ds-timeline-item> <dap-ds-timeline-item> <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title> <dap-ds-card-content parentSized="false" size="md"> The best event ever 3 </dap-ds-card-content> </dap-ds-timeline-item> </dap-ds-timeline>

<dap-ds-timeline> <dap-ds-timeline-item> <dap-ds-card interactive size="md"> <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none">Event title</dap-ds-card-title> <dap-ds-card-content> The best event ever 1 </dap-ds-card-content> </dap-ds-card> </dap-ds-timeline-item> <dap-ds-timeline-item> <dap-ds-card interactive size="md"> <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none">Event title</dap-ds-card-title> <dap-ds-card-content> The best event ever 2 </dap-ds-card-content> </dap-ds-card> </dap-ds-timeline-item> <dap-ds-timeline-item> <dap-ds-card interactive size="md"> <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none">Event title</dap-ds-card-title> <dap-ds-card-content> The best event ever 3 </dap-ds-card-content> </dap-ds-card> </dap-ds-timeline-item> </dap-ds-timeline>

<dap-ds-timeline> <dap-ds-timeline-item class="custom-timeline-item"> <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title> <dap-ds-card-content parentSized="false" size="md"> nagyon meno event </dap-ds-card-content> </dap-ds-timeline-item> <dap-ds-timeline-item class="custom-timeline-item"> <dap-ds-card-subtitle spacing="top" parentSized="false" size="md">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none" size="md" parentSized="false">Event title</dap-ds-card-title> <dap-ds-card-content parentSized="false" size="md"> nagyon meno event </dap-ds-card-content> </dap-ds-timeline-item> <dap-ds-timeline-item class="custom-timeline-item"> <dap-ds-card interactive> <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="bottom">Event title</dap-ds-card-title> </dap-ds-card> </dap-ds-timeline-item> <dap-ds-timeline-item class="custom-timeline-item"> <dap-ds-card-subtitle spacing="top">Event date or time</dap-ds-card-subtitle> <dap-ds-card-title spacing="none">Event title</dap-ds-card-title> </dap-ds-timeline-item> </dap-ds-timeline>

dap-ds-timeline-item::part(connector) { background: linear-gradient( 180deg, rgba(75, 160, 255, 1) 0%, rgba(0, 212, 255, 1) 100% ); } dap-ds-timeline-item::part(base)::after { background: radial-gradient( circle, rgba(212, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 8%, rgba(106, 255, 0, 1) 100% ); box-shadow: 0 0 10px 0 rgb(255 0 0 / 100%); }

Name

Description

(default)

The default slot for the timeline items.

Part Name

Description

base

The main timeline container.

Name

Description

(default)

The default slot for the item content.

Part Name

Description

base

The main timeline item container.

connector

The connector element between two timeline items.

content

The content of the timeline item.

Property Name

Description

--dds-timeline-position

Position of the timeline dot (default: 28px)

--dds-timeline-connector-width

Width of the timeline connector line (default: 1px)

--dds-timeline-connector-left-position

Left position of the timeline connector (default: 5.5px)

--dds-timeline-dot-size

Size of the timeline dot (default: var(--dds-spacing-300))

--dds-timeline-item-margin-bottom

Bottom margin of timeline items (default: var(--dds-spacing-200))

--dds-timeline-item-padding-left

Left padding of timeline items (default: var(--dds-spacing-400))