歡迎來到倒數第2天..

Actions speak louder than words.
坐而言不如起而行。 / 行動勝於言語。

PrimeVue 提供了Timeline 組件，以視覺化的方式展示事件流，
時間線（Timeline）非常直觀的方式來展示時間順序上的事件發生過程。

1. 基本使用方法

Timeline 組件的基本功能是通過給定的數據顯示出事件的時間線。

2. 時間線呈現方式

1. TimeLine 組件的核心屬性
   a. value 時間線顯示的核心數據
   一組事件的陣列。每個事件包含狀態、時間、圖標和顏色等屬性，這些屬性會依據設計展示在時間線上。

const events = ref([
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
{ 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' }
]);

b. align 設置時間線中事件的對齊方式
left(左對齊)、right(右對齊)、alternate(交錯對齊)

<Timeline :value="events" align="left"></Timeline>
<Timeline :value="events" align="right"></Timeline>
<Timeline :value="events" align="alternate"></Timeline>

c. layout 控制時間線的排列方向
vertical( 垂直排列)、horizontal (水平排列)

<Timeline :value="events" layout="vertical"></Timeline>
<Timeline :value="events" layout="horizontal"></Timeline>

2. TimeLine 的 template 插槽自定義
   a. #content 定義每個節點內的主要內容

<Timeline :value="events">
<template #content="slotProps">
    {{ slotProps.item.status }}
</template>
</Timeline>

b. #opposite 自定義事件節點的另一側
c. #marker 定義時間線中每個事件的標記樣式，通常是圖標或其他視覺標示

<Timeline :value="events">
<template #marker="slotProps">
    <i :class="slotProps.item.icon" :style="{ color: slotProps.item.color }"></i>
</template>

總結

時間線可以應用於訂單追蹤、項目進度、歷史事件展示等多種情況。
PrimeVue 的 Timeline 組件提供了豐富的屬性和插槽，能夠靈活地展示時間順序。

參考資料:
https://v3.primevue.org/timeline/