Fixed #672 - New Timeline Component
Cagatay Civici
parent
69a2afcc04
commit
1f6b2dd135
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './components/timeline/Timeline';
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
'use strict';
|
||||||
|
module.exports = require('./components/timeline/Timeline.vue');
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #383838;
|
border: 1px solid #383838;
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #383838;
|
border: 1px solid #383838;
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #383838;
|
border: 1px solid #383838;
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #383838;
|
border: 1px solid #383838;
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #3f4b5b;
|
border: 1px solid #3f4b5b;
|
||||||
background: #2a323d;
|
background: #2a323d;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #3f4b5b;
|
border: 1px solid #3f4b5b;
|
||||||
background: #2a323d;
|
background: #2a323d;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #a19f9d;
|
border: 1px solid #a19f9d;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #191919;
|
border: 1px solid #191919;
|
||||||
background: #323232;
|
background: #323232;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #191919;
|
border: 1px solid #191919;
|
||||||
background: #323232;
|
background: #323232;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #191919;
|
border: 1px solid #191919;
|
||||||
background: #323232;
|
background: #323232;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #191919;
|
border: 1px solid #191919;
|
||||||
background: #323232;
|
background: #323232;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2371,6 +2371,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #c8c8c8;
|
border: 1px solid #c8c8c8;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #c8c8c8;
|
border: 1px solid #c8c8c8;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #c8c8c8;
|
border: 1px solid #c8c8c8;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2359,6 +2359,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #c8c8c8;
|
border: 1px solid #c8c8c8;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #dadada;
|
border: 1px solid #dadada;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #304562;
|
border: 1px solid #304562;
|
||||||
background: #1f2d40;
|
background: #1f2d40;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #304562;
|
border: 1px solid #304562;
|
||||||
background: #1f2d40;
|
background: #1f2d40;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #304562;
|
border: 1px solid #304562;
|
||||||
background: #1f2d40;
|
background: #1f2d40;
|
||||||
|
|
|
||||||
|
|
@ -2347,6 +2347,31 @@
|
||||||
content: "";
|
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 {
|
.p-tree {
|
||||||
border: 1px solid #304562;
|
border: 1px solid #304562;
|
||||||
background: #1f2d40;
|
background: #1f2d40;
|
||||||
|
|
|
||||||
|
|
@ -119,6 +119,7 @@
|
||||||
<router-link to="/organizationchart">OrganizationChart</router-link>
|
<router-link to="/organizationchart">OrganizationChart</router-link>
|
||||||
<router-link to="/paginator">Paginator</router-link>
|
<router-link to="/paginator">Paginator</router-link>
|
||||||
<router-link to="/picklist">PickList</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>
|
<router-link to="/tree" v-slot="{isActive}" custom>
|
||||||
<div>
|
<div>
|
||||||
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
|
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,11 @@
|
||||||
&.router-link-exact-active {
|
&.router-link-exact-active {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-tag {
|
||||||
|
padding-top:.125rem;
|
||||||
|
padding-bottom: .125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
|
|
|
||||||
|
|
@ -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[];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -66,6 +66,7 @@ import TabPanel from './components/tabpanel/TabPanel';
|
||||||
import Terminal from './components/terminal/Terminal';
|
import Terminal from './components/terminal/Terminal';
|
||||||
import Textarea from './components/textarea/Textarea';
|
import Textarea from './components/textarea/Textarea';
|
||||||
import TieredMenu from './components/tieredmenu/TieredMenu';
|
import TieredMenu from './components/tieredmenu/TieredMenu';
|
||||||
|
import Timeline from './components/timeline/Timeline';
|
||||||
import Tree from './components/tree/Tree';
|
import Tree from './components/tree/Tree';
|
||||||
import TreeTable from './components/treetable/TreeTable';
|
import TreeTable from './components/treetable/TreeTable';
|
||||||
import Toast from './components/toast/Toast';
|
import Toast from './components/toast/Toast';
|
||||||
|
|
@ -167,6 +168,7 @@ app.component('TabMenu', TabMenu);
|
||||||
app.component('Terminal', Terminal);
|
app.component('Terminal', Terminal);
|
||||||
app.component('Textarea', Textarea);
|
app.component('Textarea', Textarea);
|
||||||
app.component('TieredMenu', TieredMenu);
|
app.component('TieredMenu', TieredMenu);
|
||||||
|
app.component('Timeline', Timeline);
|
||||||
app.component('Toast', Toast);
|
app.component('Toast', Toast);
|
||||||
app.component('Toolbar', Toolbar);
|
app.component('Toolbar', Toolbar);
|
||||||
app.component('ToggleButton', ToggleButton);
|
app.component('ToggleButton', ToggleButton);
|
||||||
|
|
|
||||||
|
|
@ -576,6 +576,11 @@ const routes = [
|
||||||
name: 'tieredmenu',
|
name: 'tieredmenu',
|
||||||
component: () => import('../views/tieredmenu/TieredMenuDemo.vue')
|
component: () => import('../views/tieredmenu/TieredMenuDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/timeline',
|
||||||
|
name: 'timeline',
|
||||||
|
component: () => import('../views/timeline/TimelineDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/toast',
|
path: '/toast',
|
||||||
name: 'toast',
|
name: 'toast',
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
<Timeline :value="events">
|
||||||
|
<template #content="slotProps">
|
||||||
|
{{slotProps.item.status}}
|
||||||
|
</template>
|
||||||
|
</Timeline>
|
||||||
|
</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>
|
||||||
|
<Timeline :value="events">
|
||||||
|
<template #content="slotProps">
|
||||||
|
{{slotProps.item.status}}
|
||||||
|
</template>
|
||||||
|
</Timeline>
|
||||||
|
</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>
|
||||||
|
<Timeline :value="events" align="right">
|
||||||
|
<template #content="slotProps">
|
||||||
|
{{slotProps.item.status}}
|
||||||
|
</template>
|
||||||
|
</Timeline>
|
||||||
|
</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>
|
||||||
|
<Timeline :value="events" align="alternate">
|
||||||
|
<template #content="slotProps">
|
||||||
|
{{slotProps.item.status}}
|
||||||
|
</template>
|
||||||
|
</Timeline>
|
||||||
|
</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>
|
||||||
|
<Timeline :value="events">
|
||||||
|
<template #opposite="slotProps">
|
||||||
|
<small class="p-text-secondary">{{slotProps.item.date}}</small>
|
||||||
|
</template>
|
||||||
|
<template #content="slotProps">
|
||||||
|
{{slotProps.item.status}}
|
||||||
|
</template>
|
||||||
|
</Timeline>
|
||||||
|
</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>
|
||||||
|
<Timeline :value="events" 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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue