Tree
diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss
index 54c37d831..891cffc34 100644
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@@ -54,6 +54,11 @@
&.router-link-exact-active {
font-weight: 700;
}
+
+ .p-tag {
+ padding-top:.125rem;
+ padding-bottom: .125rem;
+ }
}
div {
diff --git a/src/components/timeline/Timeline.d.ts b/src/components/timeline/Timeline.d.ts
new file mode 100644
index 000000000..681c1d4ed
--- /dev/null
+++ b/src/components/timeline/Timeline.d.ts
@@ -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[];
+ }
+}
\ No newline at end of file
diff --git a/src/components/timeline/Timeline.vue b/src/components/timeline/Timeline.vue
new file mode 100644
index 000000000..6e205f2b7
--- /dev/null
+++ b/src/components/timeline/Timeline.vue
@@ -0,0 +1,164 @@
+
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index df22e691e..3e7880a21 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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);
diff --git a/src/router/index.js b/src/router/index.js
index a312c0a25..58a205b5a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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',
diff --git a/src/views/timeline/TimelineDemo.vue b/src/views/timeline/TimelineDemo.vue
new file mode 100644
index 000000000..991c8f78c
--- /dev/null
+++ b/src/views/timeline/TimelineDemo.vue
@@ -0,0 +1,165 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
new file mode 100644
index 000000000..ad7151604
--- /dev/null
+++ b/src/views/timeline/TimelineDoc.vue
@@ -0,0 +1,360 @@
+
+
+
+
+
+
+ Timeline
+Timeline visualizes a series of chained events.
+
+
+
+
+
+
+ {{slotProps.item.status}}
+
+
+
+
+ Left Align
+
+
+
+ {{slotProps.item.status}}
+
+
+
+
+ Right Align
+
+
+
+ {{slotProps.item.status}}
+
+
+
+
+ Alternate Align
+
+
+
+ {{slotProps.item.date}}
+
+
+ {{slotProps.item.status}}
+
+
+
+
+ Opposite Content
+
+
+
+
+
+
+
+
+
+
+ {{slotProps.item.status}}
+
+
+ {{slotProps.item.date}}
+
+
+ ![]()
+
+
+
+
+
+ Customized
+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!
+ + +
+
+
+ {{slotProps.item}}
+
+
+
+
+
+ {{slotProps.item}}
+
+
+
+
+
+ {{slotProps.item}}
+
+
+
+ Horizontal
+Top Align
+Bottom Align
+Alternate Align
+
+
+
+
+
+
+
+ View on GitHub
+
+
+
+
+
Import
+
+
+import Timeline from 'primevue/timeline';
+
+
+
+ Getting Started
+Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. + Example below is a sample events array that is used throughout the documentation.
+
+
+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"
+ ]
+ }
+ }
+}
+
+
+
+
+
+<Timeline :value="events">
+ <template #content="slotProps">
+ {{slotProps.item.status}}
+ </template>
+</Timeline>
+
+
+
+ Layout
+Default layout of the timeline is vertical, setting layout to "horizontal" displays the items horizontally.
+
+
+<Timeline :value="events">
+ <template #content="slotProps">
+ {{slotProps.item.status}}
+ </template>
+</Timeline>
+
+
+
+ Alignment
+Location of the timeline bar is defined using the align property.
+
+
+<Timeline :value="events" align="right">
+ <template #content="slotProps">
+ {{slotProps.item.status}}
+ </template>
+</Timeline>
+
+
+
+ In addition, the "alternate" alignment option make the contents take turns around the timeline bar.
+
+
+<Timeline :value="events" align="alternate">
+ <template #content="slotProps">
+ {{slotProps.item.status}}
+ </template>
+</Timeline>
+
+
+
+ Opposite
+Content to be placed at the other side of the bar is defined with the opposite template.
+
+
+<Timeline :value="events">
+ <template #opposite="slotProps">
+ <small class="p-text-secondary">{{slotProps.item.date}}</small>
+ </template>
+ <template #content="slotProps">
+ {{slotProps.item.status}}
+ </template>
+</Timeline>
+
+
+
+ Custom Markers
+marker template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.
+
+
+<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>
+
+
+
+ Properties
+
+
+
+
+
+
+ | Name | +Type | +Default | +Description | +
|---|---|---|---|
| value | +array | +null | +An array of events to display. | +
| align | +string | +left | +Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout. | +
| layout | +string | +vertical | +Orientation of the timeline, valid values are "vertical" and "horizontal". | +
| dataKey | +string | +null | +Name of the field that uniquely identifies the a record in the data. | +
Styling
+Following is the list of structural style classes, for theming classes visit
+
+
+
+
+
+ | Name | +Element | +
|---|---|
| p-timeline | +Container element. | +
| p-timeline-left | +Container element when alignment is left. | +
| p-timeline-right | +Container element when alignment is right. | +
| p-timeline-top | +Container element when alignment is top. | +
| p-timeline-bottom | +Container element when alignment is bottom. | +
| p-timeline-alternate | +Container element when alignment is alternating. | +
| p-timeline-vertical | +Container element of a vertical timeline. | +
| p-timeline-horizontal | +Container element of a horizontal timeline. | +
| p-timeline-event | +Event element. | +
| p-timeline-event-opposite | +Opposite of an event content. | +
| p-timeline-event-content | +Event content. | +
| p-timeline-event-separator | +Separator element of an event. | +
| p-timeline-event-marker | +Marker element of an event. | +
| p-timeline-event-connector | +Connector element of an event. | +
Dependencies
+None.
+
+
+<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>
+
+
+
+
+
+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"
+ ]
+ }
+ }
+}
+
+
+