Menu


Components

Timeline

Storybook

The Timeline component is a visual representation of a timeline where events or content can be displayed in chronological order. It allows displaying information sequentially and facilitates the visualization of the progression of events over time.


Imports

You can import the Timeline component in the following ways. The first alternative is recommended since they can reduce the application bundle

1import Timeline from 'dd360-ds/Timeline'
1import { Timeline } from 'dd360-ds'
Usage

With the Timeline component, you can easily create a visually appealing timeline to showcase a series of events or steps in a user-friendly manner. Each timeline item can be customized with various content and styling options to suit your specific needs.


Basic timeline
  • JUNARY
  • FEBRUARY
  • MARCH
1import Timeline from 'dd360-ds/Timeline'
2
3<Timeline position="alternate">
4    <Timeline.Item>
5        <Timeline.Separator>
6        <Timeline.Dot />
7        <Timeline.Connector />
8        </Timeline.Separator>
9        <Timeline.Content>
10        <Text bold>JUNARY</Text>
11        </Timeline.Content>
12    </Timeline.Item>
13
14    <Timeline.Item>
15        <Timeline.Separator>
16        <Timeline.Dot color="success" variant="outlined" />
17        <Timeline.Connector />
18        </Timeline.Separator>
19        <Timeline.Content>
20        <Text bold> FEBRUARY </Text>
21        </Timeline.Content>
22    </Timeline.Item>
23
24    <Timeline.Item>
25        <Timeline.Separator>
26        <Timeline.Dot />
27        </Timeline.Separator>
28        <Timeline.Content>
29        <Text bold>MARCH</Text>
30        </Timeline.Content>
31    </Timeline.Item>
32</Timeline>
33

You can make use of the position property to position the main container called Content, of each element. Available options are left, right and alternate

Left positioned
  • JUNARY
  • FEBRUARY
  • MARCH
Right positioned
  • JUNARY
  • FEBRUARY
  • MARCH
Opposite content
  • 10:20
    JUNARY
  • 11:20
    FEBRUARY
  • 12:20
    MARCH
Customization
  • 10:20
    JUNARY

    Lorem ipsum dolor sit

  • 11:20
    FEBRUARY

    Lorem ipsum dolor sit

  • 12:20
    MARCH

    Lorem ipsum dolor sit

1import Timeline from 'dd360-ds/Timeline'
2
3<Timeline position="alternate">
4    <Timeline.Item>
5        <Timeline.OppositeContent className="m-auto">
6            <Text size="sm">10:20</Text>
7        </Timeline.OppositeContent>
8
9        <Timeline.Separator>
10            <Timeline.Connector />
11                <Timeline.Dot
12                    variant="outlined"
13                    color="warning"
14                >
15                    <DynamicHeroIcon icon="TagIcon" className="w-5 h-5" />
16                </Timeline.Dot>
17            <Timeline.Connector />
18        </Timeline.Separator>
19
20        <Timeline.Content>
21            <Text bold>JUNARY</Text>
22            <p>Lorem ipsum dolor sit</p>
23        </Timeline.Content>
24    </Timeline.Item>
25
26    <Timeline.Item>
27        <Timeline.OppositeContent className="m-auto">
28            <Text size="sm">11:20</Text>
29        </Timeline.OppositeContent>
30
31            <Timeline.Separator>
32            <Timeline.Connector />
33                <Timeline.Dot
34                    variant="outlined"
35                    color="success"
36                >
37                    <DynamicHeroIcon icon="TagIcon" className="w-5 h-5" />
38                </Timeline.Dot>
39            <Timeline.Connector />
40        </Timeline.Separator>
41
42        <Timeline.Content>
43            <Text bold>FEBRUARY</Text>
44            <p>Lorem ipsum dolor sit</p>
45        </Timeline.Content>
46    </Timeline.Item>
47
48    <Timeline.Item>
49        <Timeline.OppositeContent className="m-auto">
50            <Text size="sm">12:20</Text>
51        </Timeline.OppositeContent>
52
53        <Timeline.Separator>
54            <Timeline.Connector />
55                <Timeline.Dot
56                    variant="outlined"
57                    color="error"
58                >
59                    <DynamicHeroIcon icon="HomeIcon" className="w-5 h-5" />
60                </Timeline.Dot>
61            <Timeline.Connector />
62        </Timeline.Separator>
63
64        <Timeline.Content>
65            <Text bold>MARCH</Text>
66            <p>Lorem ipsum dolor sit</p>
67        </Timeline.Content>
68    </Timeline.Item>
69</Timeline>
70

Timeline

The Timeline component is the container for all timeline items. It should wrap multiple Timeline.Item components.

NameTypesDefault
"children"
React.ReactNode
-
"position"
left
right
alternate
alternate
"className"
string
-
"style"
React.CSSProperties
-

Item

The Timeline.Item component represents an individual event or step on the timeline.

NameTypesDefault
"children"
React.ReactNode
-
"className"
string
-
"style"
React.CSSProperties
-
"position"
left
right
-

OppositeContent

The Timeline.OppositeContent component represents the content displayed on the opposite side of the timeline.

NameTypesDefault
"children"
React.ReactNode
-
"className"
string
-
"style"
React.CSSProperties
-

Separator

The Timeline.Separator component represents the separator line and connectors between the timeline items.

NameTypesDefault
"children"
React.ReactNode
-
"className"
string
-
"style"
React.CSSProperties
-

Connector

The Timeline.Connector component represents the connector line between timeline items.

NameTypesDefault
"className"
string
-
"style"
React.CSSProperties
-

Dot

The Timeline.Dot component represents the dot marker indicating the event or step on the timeline.

NameTypesDefault
"children"
React.ReactNode
-
"className"
string
-
"style"
React.CSSProperties
-
"color"
primary
secondary
success
warning
error
primary
"variant"
filled
outlined
filled
"width"
UnitCSS
-
"height"
UnitCSS
-

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

TagTooltip