Skip to content

Commit 91d6885

Browse files
tugcekucukoglutugcekucukoglu
authored
Merge pull request #8212 from primefaces/v11-timeline
New Component Timeline
2 parents 500541d + b742e9a commit 91d6885

54 files changed

Lines changed: 1316 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/demo/timeline/alignment-demo.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Timeline } from 'primereact/timeline';
2+
3+
export default function AlignmentDemo() {
4+
const events = [{ status: 'Ordered' }, { status: 'Processing' }, { status: 'Shipped' }, { status: 'Delivered' }];
5+
6+
return (
7+
<div className="card flex flex-wrap gap-12">
8+
<Timeline className="w-full md:w-80">
9+
{events.map((event, index) => (
10+
<Timeline.Event key={index}>
11+
<Timeline.Opposite />
12+
<Timeline.Separator>
13+
<Timeline.Marker />
14+
{index !== events.length - 1 && <Timeline.Connector />}
15+
</Timeline.Separator>
16+
<Timeline.Content>{event.status}</Timeline.Content>
17+
</Timeline.Event>
18+
))}
19+
</Timeline>
20+
<Timeline align="right" className="w-full md:w-80">
21+
{events.map((event, index) => (
22+
<Timeline.Event key={index}>
23+
<Timeline.Opposite />
24+
<Timeline.Separator>
25+
<Timeline.Marker />
26+
{index !== events.length - 1 && <Timeline.Connector />}
27+
</Timeline.Separator>
28+
<Timeline.Content>{event.status}</Timeline.Content>
29+
</Timeline.Event>
30+
))}
31+
</Timeline>
32+
<Timeline align="alternate" className="w-full md:w-80">
33+
{events.map((event, index) => (
34+
<Timeline.Event key={index}>
35+
<Timeline.Opposite />
36+
<Timeline.Separator>
37+
<Timeline.Marker />
38+
{index !== events.length - 1 && <Timeline.Connector />}
39+
</Timeline.Separator>
40+
<Timeline.Content>{event.status}</Timeline.Content>
41+
</Timeline.Event>
42+
))}
43+
</Timeline>
44+
</div>
45+
);
46+
}

‎apps/showcase/demo/timeline/basic-demo.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Timeline } from 'primereact/timeline';
2+
3+
export default function BasicDemo() {
4+
const events = [{ status: 'Ordered' }, { status: 'Processing' }, { status: 'Shipped' }, { status: 'Delivered' }];
5+
6+
return (
7+
<div className="card">
8+
<Timeline>
9+
{events.map((event, index) => (
10+
<Timeline.Event key={index}>
11+
<Timeline.Opposite />
12+
<Timeline.Separator>
13+
<Timeline.Marker />
14+
{index !== events.length - 1 && <Timeline.Connector />}
15+
</Timeline.Separator>
16+
<Timeline.Content>{event.status}</Timeline.Content>
17+
</Timeline.Event>
18+
))}
19+
</Timeline>
20+
</div>
21+
);
22+
}

‎apps/showcase/demo/timeline/custom-demo.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Button } from 'primereact/button';
2+
import { Card } from 'primereact/card';
3+
import { Timeline } from 'primereact/timeline';
4+
5+
export default function CustomDemo() {
6+
const events = [
7+
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
8+
{ status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
9+
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
10+
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
11+
];
12+
13+
return (
14+
<div className="card">
15+
<Timeline align="alternate">
16+
{events.map((event, index) => (
17+
<Timeline.Event key={index} className={index % 2 === 1 ? 'max-[960px]:flex-row' : undefined}>
18+
<Timeline.Opposite />
19+
<Timeline.Separator>
20+
<span className={['flex w-8 h-8 items-center justify-center rounded-full z-10 shadow-sm', index !== events.length - 1 ? 'text-white bg-primary' : ''].join(' ')}>
21+
<i className={event.icon}></i>
22+
</span>
23+
{index !== events.length - 1 && <Timeline.Connector />}
24+
</Timeline.Separator>
25+
<Timeline.Content className={index % 2 === 1 ? 'max-[960px]:!text-left' : undefined}>
26+
<Card className="mt-4">
27+
<Card.Body>
28+
<Card.Caption>
29+
<Card.Title>{event.status}</Card.Title>
30+
<Card.Subtitle>{event.date}</Card.Subtitle>
31+
</Card.Caption>
32+
<Card.Content>
33+
{event.image && <img src={`https://primefaces.org/cdn/primevue/images/product/${event.image}`} alt={event.status} width="200" className="shadow-sm" />}
34+
<p>
35+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis
36+
esse, cupiditate neque quas!
37+
</p>
38+
<Button variant="text">Read more</Button>
39+
</Card.Content>
40+
</Card.Body>
41+
</Card>
42+
</Timeline.Content>
43+
</Timeline.Event>
44+
))}
45+
</Timeline>
46+
</div>
47+
);
48+
}

‎apps/showcase/demo/timeline/horizontal-demo.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Timeline } from 'primereact/timeline';
2+
3+
export default function HorizontalDemo() {
4+
const events = ['2020', '2021', '2022', '2023'];
5+
6+
return (
7+
<div className="card flex flex-col gap-4">
8+
<Timeline orientation="horizontal" align="top">
9+
{events.map((event, index) => (
10+
<Timeline.Event key={index}>
11+
<Timeline.Opposite />
12+
<Timeline.Separator>
13+
<Timeline.Marker />
14+
{index !== events.length - 1 && <Timeline.Connector />}
15+
</Timeline.Separator>
16+
<Timeline.Content>{event}</Timeline.Content>
17+
</Timeline.Event>
18+
))}
19+
</Timeline>
20+
<Timeline orientation="horizontal" align="bottom">
21+
{events.map((event, index) => (
22+
<Timeline.Event key={index}>
23+
<Timeline.Opposite />
24+
<Timeline.Separator>
25+
<Timeline.Marker />
26+
{index !== events.length - 1 && <Timeline.Connector />}
27+
</Timeline.Separator>
28+
<Timeline.Content>{event}</Timeline.Content>
29+
</Timeline.Event>
30+
))}
31+
</Timeline>
32+
<Timeline orientation="horizontal" align="alternate">
33+
{events.map((event, index) => (
34+
<Timeline.Event key={index}>
35+
<Timeline.Opposite>&nbsp;</Timeline.Opposite>
36+
<Timeline.Separator>
37+
<Timeline.Marker />
38+
{index !== events.length - 1 && <Timeline.Connector />}
39+
</Timeline.Separator>
40+
<Timeline.Content>{event}</Timeline.Content>
41+
</Timeline.Event>
42+
))}
43+
</Timeline>
44+
</div>
45+
);
46+
}

‎apps/showcase/demo/timeline/opposite-demo.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Timeline } from 'primereact/timeline';
2+
3+
export default function OppositeDemo() {
4+
const events = [
5+
{ status: 'Ordered', date: '15/10/2020 10:30' },
6+
{ status: 'Processing', date: '15/10/2020 14:00' },
7+
{ status: 'Shipped', date: '15/10/2020 16:15' },
8+
{ status: 'Delivered', date: '16/10/2020 10:00' }
9+
];
10+
11+
return (
12+
<div className="card">
13+
<Timeline>
14+
{events.map((event, index) => (
15+
<Timeline.Event key={index}>
16+
<Timeline.Opposite>
17+
<small className="text-surface-500 dark:text-surface-400">{event.date}</small>
18+
</Timeline.Opposite>
19+
<Timeline.Separator>
20+
<Timeline.Marker />
21+
{index !== events.length - 1 && <Timeline.Connector />}
22+
</Timeline.Separator>
23+
<Timeline.Content>{event.status}</Timeline.Content>
24+
</Timeline.Event>
25+
))}
26+
</Timeline>
27+
</div>
28+
);
29+
}

‎apps/showcase/demo/timeline/timeline-pt.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Timeline } from 'primereact/timeline';
2+
3+
export default function TimelinePTDemo() {
4+
const events = [{ status: 'Ordered' }, { status: 'Processing' }, { status: 'Shipped' }, { status: 'Delivered' }];
5+
6+
return (
7+
<Timeline>
8+
{events.map((event, index) => (
9+
<Timeline.Event key={index}>
10+
<Timeline.Opposite />
11+
<Timeline.Separator>
12+
<Timeline.Marker />
13+
{index !== events.length - 1 && <Timeline.Connector />}
14+
</Timeline.Separator>
15+
<Timeline.Content>{event.status}</Timeline.Content>
16+
</Timeline.Event>
17+
))}
18+
</Timeline>
19+
);
20+
}

‎apps/showcase/docs/components/timeline/api.mdx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: Timeline API
3+
description: API documentation for Timeline component
4+
component: timeline
5+
---
6+
7+
## Timeline
8+
9+
### Props
10+
11+
<DocTable name="Timeline" category="api" type="props" />
12+
13+
### Interfaces
14+
15+
<DocTable name="Timeline" category="api" type="interfaces" />
16+
17+
### Types
18+
19+
<DocTable name="Timeline" category="api" type="types" />
20+
21+
## TimelineEvent
22+
23+
### Props
24+
25+
<DocTable name="TimelineEvent" category="api" type="props" />
26+
27+
### Exposes
28+
29+
<DocTable name="TimelineEvent" category="api" type="exposes" />
30+
31+
### Interfaces
32+
33+
<DocTable name="TimelineEvent" category="api" type="interfaces" />
34+
35+
### Types
36+
37+
<DocTable name="TimelineEvent" category="api" type="types" />
38+
39+
## TimelineContent
40+
41+
### Props
42+
43+
<DocTable name="TimelineContent" category="api" type="props" />
44+
45+
### Exposes
46+
47+
<DocTable name="TimelineContent" category="api" type="exposes" />
48+
49+
### Interfaces
50+
51+
<DocTable name="TimelineContent" category="api" type="interfaces" />
52+
53+
### Types
54+
55+
<DocTable name="TimelineContent" category="api" type="types" />
56+
57+
## TimelineOpposite
58+
59+
### Props
60+
61+
<DocTable name="TimelineOpposite" category="api" type="props" />
62+
63+
### Exposes
64+
65+
<DocTable name="TimelineOpposite" category="api" type="exposes" />
66+
67+
### Interfaces
68+
69+
<DocTable name="TimelineOpposite" category="api" type="interfaces" />
70+
71+
### Types
72+
73+
<DocTable name="TimelineOpposite" category="api" type="types" />
74+
75+
## TimelineSeparator
76+
77+
### Props
78+
79+
<DocTable name="TimelineSeparator" category="api" type="props" />
80+
81+
### Exposes
82+
83+
<DocTable name="TimelineSeparator" category="api" type="exposes" />
84+
85+
### Interfaces
86+
87+
<DocTable name="TimelineSeparator" category="api" type="interfaces" />
88+
89+
### Types
90+
91+
<DocTable name="TimelineSeparator" category="api" type="types" />
92+
93+
## TimelineMarker
94+
95+
### Props
96+
97+
<DocTable name="TimelineMarker" category="api" type="props" />
98+
99+
### Exposes
100+
101+
<DocTable name="TimelineMarker" category="api" type="exposes" />
102+
103+
### Interfaces
104+
105+
<DocTable name="TimelineMarker" category="api" type="interfaces" />
106+
107+
### Types
108+
109+
<DocTable name="TimelineMarker" category="api" type="types" />
110+
111+
## TimelineConnector
112+
113+
### Props
114+
115+
<DocTable name="TimelineConnector" category="api" type="props" />
116+
117+
### Exposes
118+
119+
<DocTable name="TimelineConnector" category="api" type="exposes" />
120+
121+
### Interfaces
122+
123+
<DocTable name="TimelineConnector" category="api" type="interfaces" />
124+
125+
### Types
126+
127+
<DocTable name="TimelineConnector" category="api" type="types" />
128+
129+
## useTimeline
130+
131+
### Types
132+
133+
<DocTable name="useTimeline" category="api" type="types" />

0 commit comments

Comments
 (0)