vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #672 - New Timeline Component

pull/682/head
Cagatay Civici 2020-11-24 12:24:39 +03:00
parent 69a2afcc04
commit 1f6b2dd135
44 changed files with 1568 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
exports/timeline.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export * from './components/timeline/Timeline';

2
exports/timeline.js Normal file
View File

@ -0,0 +1,2 @@
'use strict';
module.exports = require('./components/timeline/Timeline.vue');

25
public/themes/arya-blue/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #64B5F6;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1e1e1e;
}
.p-timeline .p-timeline-event-connector {
background-color: #383838;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #383838;
background: #1e1e1e;

25
public/themes/arya-green/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #81C784;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1e1e1e;
}
.p-timeline .p-timeline-event-connector {
background-color: #383838;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #383838;
background: #1e1e1e;

25
public/themes/arya-orange/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #FFD54F;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1e1e1e;
}
.p-timeline .p-timeline-event-connector {
background-color: #383838;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #383838;
background: #1e1e1e;

25
public/themes/arya-purple/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #BA68C8;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1e1e1e;
}
.p-timeline .p-timeline-event-connector {
background-color: #383838;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #383838;
background: #1e1e1e;

25
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #8dd0ff;
}
.p-timeline .p-timeline-event-connector {
background-color: #3f4b5b;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #3f4b5b;
background: #2a323d;

25
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #c298d8;
}
.p-timeline .p-timeline-event-connector {
background-color: #3f4b5b;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #3f4b5b;
background: #2a323d;

25
public/themes/bootstrap4-light-blue/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #007bff;
}
.p-timeline .p-timeline-event-connector {
background-color: #dee2e6;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #dee2e6;
background: #ffffff;

25
public/themes/bootstrap4-light-purple/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #883cae;
}
.p-timeline .p-timeline-event-connector {
background-color: #dee2e6;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #dee2e6;
background: #ffffff;

25
public/themes/fluent-light/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #0078d4;
}
.p-timeline .p-timeline-event-connector {
background-color: #a19f9d;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #a19f9d;
background: #ffffff;

25
public/themes/luna-amber/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #FFE082;
}
.p-timeline .p-timeline-event-connector {
background-color: #191919;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #191919;
background: #323232;

25
public/themes/luna-blue/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #81D4FA;
}
.p-timeline .p-timeline-event-connector {
background-color: #191919;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #191919;
background: #323232;

25
public/themes/luna-green/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #C5E1A5;
}
.p-timeline .p-timeline-event-connector {
background-color: #191919;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #191919;
background: #323232;

25
public/themes/luna-pink/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #F48FB1;
}
.p-timeline .p-timeline-event-connector {
background-color: #191919;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #191919;
background: #323232;

25
public/themes/md-dark-deeppurple/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid rgba(255, 255, 255, 0.12);
background: #1e1e1e;

25
public/themes/md-dark-indigo/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid rgba(255, 255, 255, 0.12);
background: #1e1e1e;

25
public/themes/md-light-deeppurple/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #e0e0e0;
background: #ffffff;

25
public/themes/md-light-indigo/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #e0e0e0;
background: #ffffff;

25
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid rgba(255, 255, 255, 0.12);
background: #1e1e1e;

25
public/themes/mdc-dark-indigo/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid rgba(255, 255, 255, 0.12);
background: #1e1e1e;

25
public/themes/mdc-light-deeppurple/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #e0e0e0;
background: #ffffff;

25
public/themes/mdc-light-indigo/theme.css
View File

@ -2371,6 +2371,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #bdbdbd;
}
.p-timeline .p-timeline-event-connector {
background-color: #bdbdbd;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #e0e0e0;
background: #ffffff;

25
public/themes/nova-accent/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #e02365;
}
.p-timeline .p-timeline-event-connector {
background-color: #c8c8c8;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #c8c8c8;
background: #ffffff;

25
public/themes/nova-alt/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #007ad9;
}
.p-timeline .p-timeline-event-connector {
background-color: #c8c8c8;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #c8c8c8;
background: #ffffff;

25
public/themes/nova-vue/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #41b883;
}
.p-timeline .p-timeline-event-connector {
background-color: #c8c8c8;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #c8c8c8;
background: #ffffff;

25
public/themes/nova/theme.css
View File

@ -2359,6 +2359,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #007ad9;
}
.p-timeline .p-timeline-event-connector {
background-color: #c8c8c8;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #c8c8c8;
background: #ffffff;

25
public/themes/rhea/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 0 none;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #AFD3C8;
}
.p-timeline .p-timeline-event-connector {
background-color: #c8c8c8;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #dadada;
background: #ffffff;

25
public/themes/saga-blue/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #2196F3;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #ffffff;
}
.p-timeline .p-timeline-event-connector {
background-color: #dee2e6;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #dee2e6;
background: #ffffff;

25
public/themes/saga-green/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #4CAF50;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #ffffff;
}
.p-timeline .p-timeline-event-connector {
background-color: #dee2e6;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #dee2e6;
background: #ffffff;

25
public/themes/saga-orange/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #FFC107;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #ffffff;
}
.p-timeline .p-timeline-event-connector {
background-color: #dee2e6;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #dee2e6;
background: #ffffff;

25
public/themes/saga-purple/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #9C27B0;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #ffffff;
}
.p-timeline .p-timeline-event-connector {
background-color: #dee2e6;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #dee2e6;
background: #ffffff;

25
public/themes/vela-blue/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #64B5F6;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1f2d40;
}
.p-timeline .p-timeline-event-connector {
background-color: #304562;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #304562;
background: #1f2d40;

25
public/themes/vela-green/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #81C784;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1f2d40;
}
.p-timeline .p-timeline-event-connector {
background-color: #304562;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #304562;
background: #1f2d40;

25
public/themes/vela-orange/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #FFD54F;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1f2d40;
}
.p-timeline .p-timeline-event-connector {
background-color: #304562;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #304562;
background: #1f2d40;

25
public/themes/vela-purple/theme.css
View File

@ -2347,6 +2347,31 @@
content: "";
}
}
.p-timeline .p-timeline-event-marker {
border: 2px solid #BA68C8;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #1f2d40;
}
.p-timeline .p-timeline-event-connector {
background-color: #304562;
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
padding: 0 1rem;
}
.p-timeline.p-timeline-vertical .p-timeline-event-connector {
width: 2px;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline.p-timeline-horizontal .p-timeline-event-content {
padding: 1rem 0;
}
.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
height: 2px;
}
.p-tree {
border: 1px solid #304562;
background: #1f2d40;

1
src/AppMenu.vue
View File

@ -119,6 +119,7 @@
<router-link to="/organizationchart">OrganizationChart</router-link>
<router-link to="/paginator">Paginator</router-link>
<router-link to="/picklist">PickList</router-link>
<router-link to="/timeline">Timeline <span class="p-tag">New</span></router-link>
<router-link to="/tree" v-slot="{isActive}" custom>
<div>
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>

5
src/assets/styles/app/_menu.scss
View File

@ -54,6 +54,11 @@
&.router-link-exact-active {
font-weight: 700;
}
.p-tag {
padding-top:.125rem;
padding-bottom: .125rem;
}
}
div {

13
src/components/timeline/Timeline.d.ts vendored Normal file
View File

@ -0,0 +1,13 @@
import Vue, { VNode } from 'vue';
export declare class Timeline extends Vue {
value?: any[];
align?: string;
layout?: string;
dataKey?: string;
$slots: {
content: VNode[];
opposite: VNode[];
marker: VNode[];
}
}

164
src/components/timeline/Timeline.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<div :class="containerClass">
<div v-for="(item,index) of value" :key="getKey(item, index)" class="p-timeline-event">
<div class="p-timeline-event-opposite">
<slot name="opposite" :item="item" :index="index"></slot>
</div>
<div class="p-timeline-event-separator">
<slot name="marker" :item="item" :index="index">
<div class="p-timeline-event-marker"></div>
</slot>
<div v-if="index !== (value.length - 1)" class="p-timeline-event-connector"></div>
</div>
<div class="p-timeline-event-content">
<slot name="content" :item="item" :index="index"></slot>
</div>
</div>
</div>
</template>
<script>
import ObjectUtils from '../utils/ObjectUtils';
export default {
props: {
value: null,
align: {
mode: String,
default: 'left'
},
layout: {
mode: String,
default: 'vertical'
},
dataKey: null
},
methods: {
getKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
}
},
computed: {
containerClass() {
return [
'p-timeline p-component',
'p-timeline-' + this.align,
'p-timeline-' + this.layout
];
}
}
}
</script>
<style>
.p-timeline {
display: flex;
flex-grow: 1;
flex-direction: column;
}
.p-timeline-left .p-timeline-event-opposite {
text-align: right;
}
.p-timeline-left .p-timeline-event-content {
text-align: left;
}
.p-timeline-right .p-timeline-event {
flex-direction: row-reverse;
}
.p-timeline-right .p-timeline-event-opposite {
text-align: left;
}
.p-timeline-right .p-timeline-event-content {
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: row-reverse;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
text-align: right;
}
.p-timeline-event {
display: flex;
position: relative;
min-height: 70px;
}
.p-timeline-event:last-child {
min-height: 0;
}
.p-timeline-event-opposite {
flex: 1;
padding: 0 1rem;
}
.p-timeline-event-content {
flex: 1;
padding: 0 1rem;
}
.p-timeline-event-separator {
flex: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.p-timeline-event-marker {
display: flex;
align-self: baseline;
}
.p-timeline-event-connector {
flex-grow: 1;
}
.p-timeline-horizontal {
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event {
flex-direction: column;
flex: 1;
}
.p-timeline-horizontal .p-timeline-event:last-child {
flex: 0;
}
.p-timeline-horizontal .p-timeline-event-separator {
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event-connector {
width: 100%;
}
.p-timeline-bottom .p-timeline-event {
flex-direction: column-reverse;
}
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: column-reverse;
}
</style>

2
src/main.js
View File

@ -66,6 +66,7 @@ import TabPanel from './components/tabpanel/TabPanel';
import Terminal from './components/terminal/Terminal';
import Textarea from './components/textarea/Textarea';
import TieredMenu from './components/tieredmenu/TieredMenu';
import Timeline from './components/timeline/Timeline';
import Tree from './components/tree/Tree';
import TreeTable from './components/treetable/TreeTable';
import Toast from './components/toast/Toast';
@ -167,6 +168,7 @@ app.component('TabMenu', TabMenu);
app.component('Terminal', Terminal);
app.component('Textarea', Textarea);
app.component('TieredMenu', TieredMenu);
app.component('Timeline', Timeline);
app.component('Toast', Toast);
app.component('Toolbar', Toolbar);
app.component('ToggleButton', ToggleButton);

5
src/router/index.js
View File

@ -576,6 +576,11 @@ const routes = [
name: 'tieredmenu',
component: () => import('../views/tieredmenu/TieredMenuDemo.vue')
},
{
path: '/timeline',
name: 'timeline',
component: () => import('../views/timeline/TimelineDemo.vue')
},
{
path: '/toast',
name: 'toast',

165
src/views/timeline/TimelineDemo.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Timeline</h1>
<p>Timeline visualizes a series of chained events.</p>
</div>
</div>
<div class="content-section implementation">
<div class="card">
<h5>Left Align</h5>
<Timeline :value="events1">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Right Align</h5>
<Timeline :value="events1" align="right">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Alternate Align</h5>
<Timeline :value="events1" align="alternate">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Opposite Content</h5>
<Timeline :value="events1">
<template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small>
</template>
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
</div>
<div class="card">
<h5>Customized</h5>
<Timeline :value="events1" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="custom-marker p-shadow-2" :style="{backgroundColor: slotProps.item.color}">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card>
<template #title>
{{slotProps.item.status}}
</template>
<template #subtitle>
{{slotProps.item.date}}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" />
<p>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 esse, cupiditate neque quas!</p>
<Button label="Read more" class="p-button-text"></Button>
</template>
</Card>
</template>
</Timeline>
</div>
<div class="card">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<Timeline :value="events2" layout="horizontal" align="top">
<template #content="slotProps">
{{slotProps.item}}
</template>
</Timeline>
<h6>Bottom Align</h6>
<Timeline :value="events2" layout="horizontal" align="bottom">
<template #content="slotProps">
{{slotProps.item}}
</template>
</Timeline>
<h6>Alternate Align</h6>
<Timeline :value="events2" layout="horizontal" align="alternate">
<template #content="slotProps">
{{slotProps.item}}
</template>
</Timeline>
</div>
</div>
<TimelineDoc />
</div>
</template>
<script>
import TimelineDoc from './TimelineDoc';
export default {
data() {
return {
events1: [
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
],
events2: [
"2020", "2021", "2022", "2023"
]
}
},
components: {
'TimelineDoc': TimelineDoc
}
}
</script>
<style lang="scss" scoped>
.custom-marker {
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
color: #ffffff;
border-radius: 50%;
z-index: 1;
}
::v-deep(.p-timeline-event-content)
::v-deep(.p-timeline-event-opposite) {
line-height: 1;
}
@media screen and (max-width: 960px) {
::v-deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;
.p-timeline-event-content {
text-align: left !important;
}
}
.p-timeline-event-opposite {
flex: 0;
}
.p-card {
margin-top: 1rem;
}
}
}
</style>

360
src/views/timeline/TimelineDoc.vue Normal file
View File

@ -0,0 +1,360 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<pre v-code.script>
<code>
import Timeline from 'primevue/timeline';
</code></pre>
<h5>Getting Started</h5>
<p>Timeline receives the events with the <i>value</i> property as a collection of arbitrary objects. In addition, <i>content</i> template is required to display the representation of an event.
Example below is a sample events array that is used throughout the documentation.</p>
<pre v-code.script>
<code>
export default {
data() {
return {
events: [
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
],
events2: [
"2020", "2021", "2022", "2023"
]
}
}
}
</code></pre>
<pre v-code>
<code><template v-pre>
&lt;Timeline :value="events"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
</template>
</code></pre>
<h5>Layout</h5>
<p>Default layout of the timeline is vertical, setting <i>layout</i> to "horizontal" displays the items horizontally.</p>
<pre v-code>
<code><template v-pre>
&lt;Timeline :value="events"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
</template>
</code></pre>
<h5>Alignment</h5>
<p>Location of the timeline bar is defined using the <i>align</i> property.</p>
<pre v-code>
<code><template v-pre>
&lt;Timeline :value="events" align="right"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
</template>
</code></pre>
<p>In addition, the "alternate" alignment option make the contents take turns around the timeline bar.</p>
<pre v-code>
<code><template v-pre>
&lt;Timeline :value="events" align="alternate"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
</template>
</code></pre>
<h5>Opposite</h5>
<p>Content to be placed at the other side of the bar is defined with the <i>opposite</i> template.</p>
<pre v-code>
<code><template v-pre>
&lt;Timeline :value="events"&gt;
&lt;template #opposite="slotProps"&gt;
&lt;small class="p-text-secondary"&gt;&#123;&#123;slotProps.item.date&#125;&#125;&lt;/small&gt;
&lt;/template&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
</template>
</code></pre>
<h5>Custom Markers</h5>
<p><i>marker</i> template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.</p>
<pre v-code>
<code><template v-pre>
&lt;Timeline :value="events" align="alternate" class="customized-timeline"&gt;
&lt;template #marker="slotProps"&gt;
&lt;span class="custom-marker p-shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
&lt;i :class="slotProps.item.icon"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;/template&gt;
&lt;template #content="slotProps"&gt;
&lt;Card&gt;
&lt;template #title&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;template #subtitle&gt;
&#123;&#123;slotProps.item.date&#125;&#125;
&lt;/template&gt;
&lt;template #content&gt;
&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" /&gt;
&lt;p&gt;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 esse, cupiditate neque quas!&lt;/p&gt;
&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;/Card&gt;
&lt;/template&gt;
&lt;/Timeline&gt;
</template>
</code></pre>
<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>array</td>
<td>null</td>
<td>An array of events to display.</td>
</tr>
<tr>
<td>align</td>
<td>string</td>
<td>left</td>
<td>Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.</td>
</tr>
<tr>
<td>layout</td>
<td>string</td>
<td>vertical</td>
<td>Orientation of the timeline, valid values are "vertical" and "horizontal".</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>Name of the field that uniquely identifies the a record in the data.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-timeline</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-timeline-left</td>
<td>Container element when alignment is left.</td>
</tr>
<tr>
<td>p-timeline-right</td>
<td>Container element when alignment is right.</td>
</tr>
<tr>
<td>p-timeline-top</td>
<td>Container element when alignment is top.</td>
</tr>
<tr>
<td>p-timeline-bottom</td>
<td>Container element when alignment is bottom.</td>
</tr>
<tr>
<td>p-timeline-alternate</td>
<td>Container element when alignment is alternating.</td>
</tr>
<tr>
<td>p-timeline-vertical</td>
<td>Container element of a vertical timeline.</td>
</tr>
<tr>
<td>p-timeline-horizontal</td>
<td>Container element of a horizontal timeline.</td>
</tr>
<tr>
<td>p-timeline-event</td>
<td>Event element.</td>
</tr>
<tr>
<td>p-timeline-event-opposite</td>
<td>Opposite of an event content.</td>
</tr>
<tr>
<td>p-timeline-event-content</td>
<td>Event content.</td>
</tr>
<tr>
<td>p-timeline-event-separator</td>
<td>Separator element of an event.</td>
</tr>
<tr>
<td>p-timeline-event-marker</td>
<td>Marker element of an event.</td>
</tr>
<tr>
<td>p-timeline-event-connector</td>
<td>Connector element of an event.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/timeline" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<pre v-code>
<code><template v-pre>
&lt;div class="card"&gt;
&lt;h5&gt;Left Align&lt;/h5&gt;
&lt;Timeline :value="events1"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Right Align&lt;/h5&gt;
&lt;Timeline :value="events1" align="right"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Alternate Align&lt;/h5&gt;
&lt;Timeline :value="events1" align="alternate"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Opposite Content&lt;/h5&gt;
&lt;Timeline :value="events1"&gt;
&lt;template #opposite="slotProps"&gt;
&lt;small class="p-text-secondary"&gt;&#123;&#123;slotProps.item.date&#125;&#125;&lt;/small&gt;
&lt;/template&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Customized&lt;/h5&gt;
&lt;Timeline :value="events1" align="alternate" class="customized-timeline"&gt;
&lt;template #marker="slotProps"&gt;
&lt;span class="custom-marker p-shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
&lt;i :class="slotProps.item.icon"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;/template&gt;
&lt;template #content="slotProps"&gt;
&lt;Card&gt;
&lt;template #title&gt;
&#123;&#123;slotProps.item.status&#125;&#125;
&lt;/template&gt;
&lt;template #subtitle&gt;
&#123;&#123;slotProps.item.date&#125;&#125;
&lt;/template&gt;
&lt;template #content&gt;
&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" /&gt;
&lt;p&gt;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 esse, cupiditate neque quas!&lt;/p&gt;
&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;/Card&gt;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Horizontal&lt;/h5&gt;
&lt;h6&gt;Top Align&lt;/h6&gt;
&lt;Timeline :value="events2" layout="horizontal" align="top"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;h6&gt;Bottom Align&lt;/h6&gt;
&lt;Timeline :value="events2" layout="horizontal" align="bottom"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;h6&gt;Alternate Align&lt;/h6&gt;
&lt;Timeline :value="events2" layout="horizontal" align="alternate"&gt;
&lt;template #content="slotProps"&gt;
&#123;&#123;slotProps.item&#125;&#125;
&lt;/template&gt;
&lt;/Timeline&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script>
<code>
export default {
data() {
return {
events1: [
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
],
events2: [
"2020", "2021", "2022", "2023"
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template>